/**
 * Collections page (/collections/) — the page's own rhythm.
 *
 * Everything that draws a section is shared with the homepage: the banner band is home.css
 * (`.yz-bigimage`), the product rail is yazan-core's sections.css (`.yzhp-rail`). What is here is
 * only what the homepage gets from its Elementor containers — the band spacing — plus the two
 * things this page does that the homepage does not: a real <h2> title and an <img> photo.
 *
 * Enqueued only on this page (inc/page-collections.php). Direction-agnostic.
 */

/* The rail under each banner: the homepage's `yz-rail-band` measurements (home.css, "THE
   COMMAFOOTBALL RHYTHM") — 12px between the photograph and the cards, a line's height after the
   prices, on the surface colour so the Black ⇄ Burgundy switch carries it. The banner itself has
   no padding at all: it touches the rail above and below it. */
.yz-coll__rail {
	padding-block: 12px clamp(24px, 2.8vw, 40px);
	background-color: var(--yz-surface, #fff);
}

.yz-coll__banner { display: block; }

/* The title is an <h2> here (the sections are the page's outline), a <span> on the homepage.
   Astra styles headings through `.entry-content h2` (0,1,1) — margins, size, colour — so the
   band's title is re-stated at a higher specificity rather than trusted to win by source order. */
.yz-coll-page .yz-bigimage .yz-bigimage__title {
	margin: 0;
	padding: 0;
	font-family: var(--yz-font-display);
	font-weight: 600;
	font-size: clamp(30px, 5vw, 64px);
	line-height: 1.05;
	letter-spacing: normal;
	text-transform: none;
	color: var(--yz-ivory);
	text-align: center;
}

/* CENTRED COPY (owner request, 2026-09-26). On this page the eyebrow, title and button sit in the
   middle of the photograph — vertically and horizontally — rather than at the bottom-left as on
   the homepage. The band is already a flex box (home.css); it centres the copy block, and the
   block centres its three lines. On a short laptop window the old bottom-left copy fell below the
   fold of a band taller than the screen; centred, it is in view as soon as the band is. */
.yz-coll-page .yz-bigimage { align-items: center; justify-content: center; }
.yz-coll-page .yz-bigimage__content {
	align-items: center;
	text-align: center;
	padding-block: clamp(32px, 6vh, 72px);
}
.yz-coll-page .yz-bigimage__eyebrow { text-align: center; }
/* The hairline under the eyebrow draws itself from the middle out, matching the centred line
   (home.css draws it from the reading edge; this sheet loads after it, same specificity). */
.yz-coll-page .yz-bigimage__eyebrow::after { transform-origin: center; }

/* home.css's scrim darkens the BOTTOM of the photo, where its copy sits; the copy is now in the
   middle, so the shade is centred on it instead — a soft pool behind the words, the ring's edges
   left bright. */
.yz-coll-page .yz-bigimage__scrim {
	background:
		radial-gradient(ellipse 60% 55% at 50% 50%, rgba(12, 11, 10, 0.55) 0%, rgba(12, 11, 10, 0.2) 100%),
		rgba(12, 11, 10, 0.12);
}

/* The photo is a lazy <img> here, a background on the homepage (BigImageBand: a page of a dozen
   backgrounds would download every one on arrival). It covers the media layer exactly as the
   background did. Two classes, because `.entry-content img { height: auto }` would otherwise
   leave it short of the band. */
.yz-bigimage__media .yz-bigimage__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Nothing arranged yet (or yazan-core off). */
.yz-coll-page__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding-block: clamp(56px, 8vw, 120px);
}
.yz-coll-page__empty p { margin: 0; color: var(--yz-muted, inherit); }