/* =========================================================
   NMW — Front-page hero stack
   Two viewport-tall heroes (Frame 139 + Frame 130). A pinned
   bottom layer (Adaptive Breathing strip + Apply Now marquee)
   stays fixed across both heroes, then detaches into normal
   flow once the stack ends.
   ========================================================= */

.hero-stack {
	position: relative;
	background: #6b4d2e;
	/* Reserve a slot at the bottom of the stack for the pinned strip
	   (marquee + adaptive). Without this padding the snap-to-hero #2
	   would land 146px past stackBottom, releasing pinned mid-viewport
	   and exposing the next section through the gap. */
	padding-bottom: var(--nmw-hero-pinned-h, 90px);
}

/* Desktop: scroll-snap so wheel/trackpad goes hero #1 → hero #2 in one
   smooth motion instead of letting the user stop mid-transition. Once the
   user is past hero #2, no more snap points → normal scrolling resumes.
   Mobile keeps free scroll because the sticky-hero choreography handles
   the state swap on its own. */
@media (min-width: 901px) {
	html {
		scroll-snap-type: y proximity;     /* gentle: snaps only near a target */
		scroll-behavior: smooth;
	}
	.hero {
		scroll-snap-align: start;
		scroll-margin-top: var(--nmw-header-h, 172px);
	}
}

/* ---------- Single hero panel ----------
   Hero fills the visible area between the fixed top header and the
   pinned bottom strip — so 100svh minus those two. The variables are
   exposed by main.js (header) and hero-stack.js (pinned strip). */
.hero {
	position: relative;
	height: calc(100svh - var(--nmw-header-h, 172px) - var(--nmw-hero-pinned-h, 90px));
	min-height: 480px;
	overflow: hidden;
	background: #6b4d2e;
}

/* Staggered fade-up for the hero composition.
   Each layer rises from 30px below into place with a small delay between
   them, so the build-up feels sequential rather than slamming all at once. */
@keyframes nmw-hero-rise {
	from { opacity: 0; transform: translateY(36px); }
	to   { opacity: 1; transform: translateY(0); }
}
.hero--main .hero__bg-photo,
.hero--main .hero__split,
.hero--main .hero__bg-sygnet--bottom,
.hero--main .hero__bg-sygnet--top,
.hero--main .hero__title-nm,
.hero--main .hero__title-week,
.hero--main .hero__dates {
	animation: nmw-hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
	will-change: transform, opacity;
}
/* Layered from the bottom up — first the photo & brown card, then the
   bottom sygnet half, then the dates that sit on it, then "New Media",
   then the top sygnet, finally "Week" in the top-right. */
.hero--main .hero__bg-photo          { animation-delay: 0s;    }
.hero--main .hero__split             { animation-delay: 0.08s; }
.hero--main .hero__bg-sygnet--bottom { animation-delay: 0.22s; }
.hero--main .hero__dates             { animation-delay: 0.42s; }
.hero--main .hero__title-nm          { animation-delay: 0.58s; }
.hero--main .hero__bg-sygnet--top    { animation-delay: 0.74s; }
.hero--main .hero__title-week        { animation-delay: 0.92s; }

@media (prefers-reduced-motion: reduce) {
	.hero--main .hero__bg-photo,
	.hero--main .hero__split,
	.hero--main .hero__bg-sygnet--bottom,
	.hero--main .hero__bg-sygnet--top,
	.hero--main .hero__title-nm,
	.hero--main .hero__title-week,
	.hero--main .hero__dates {
		animation: none;
	}
}

/* Stacking order (bottom → top):
     z-index 1 — split       (left brown column, right empty)
     z-index 2 — sygnet-top  (rides on top of the brown column on the left;
                              gets covered by the photo on the right)
     z-index 3 — bg-photo    (positioned over the right half only — sits on
                              top of sygnet-top there, so the photo wins
                              against the sygnet without hiding it on the left)
     z-index 4 — sygnet-bottom (always on top)
     z-index 5 — cols (titles, dates) — always above everything else
*/

/* bg-photo — only renders in the right half so it covers sygnet-top there
   without painting over the brown column on the left. */
.hero__bg-photo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: 0;
	width: 50%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	z-index: 3;
	pointer-events: none;
}

/* 50/50 column split — left brown, right empty (photo lives there) */
.hero__split {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	z-index: 1;
	pointer-events: none;
}
.hero__split-left  { background: #77593A; }
.hero__split-right { background: transparent; }

/* Layer 3 — sygnet/blob halves. Both halves are centred over each other
   in the middle of the hero — they're designed to overlay and form the
   full sygnet. Centred via the inset:0 + margin:auto trick (NOT transform,
   because nmw-hero-rise animates transform and would override it). Sized
   to fit (max 100% in either axis) so the artwork never gets clipped. */
.hero__bg-sygnet {
	position: absolute;
	inset: 0;
	margin: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	pointer-events: none;
}
.hero__bg-sygnet--top    { z-index: 2; }   /* over brown column, covered by the photo on the other half */
.hero__bg-sygnet--bottom { z-index: 4; }   /* always on top of photo + split */

/* Layer 5 — 2-col title grid (50/50) sits above both sygnet halves */
.hero__cols {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(0, 1fr);  /* min:0 so img height:100% can't grow
	                                        the row beyond the hero box */
	z-index: 5;
	pointer-events: none;
}
.hero__col {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
}
.hero__col--left  { justify-content: flex-start; align-items: flex-start; gap: 12px; }
.hero__col--right { justify-content: flex-start; align-items: flex-end;   }

.hero--main .hero__title-nm,
.hero--main .hero__title-week {
	display: block;
	width: 100%;            /* fill the column */
	height: auto;
}
.hero--main .hero__dates {
	display: block;
	width: 50%;
	max-width: 504px;
	height: auto;
}

/* ---------- Hero #2 (130) — mirrored split + Open / Call ---------- */
/* Mirror the brown overlay: left transparent (photo shows through), right brown */
.hero--call .hero__split-left  { background: transparent; }
.hero--call .hero__split-right { background: #77593A; }
/* Hero #2 mirrors hero #1 — the photo lives on the LEFT, brown on the RIGHT.
   Drop sygnet-bottom below the photo (z-index 2 instead of 4) so it only
   peeks over the brown column on the right and stays hidden on the photo. */
.hero--call .hero__bg-sygnet--bottom { z-index: 2; }
/* Photo lives in the LEFT half here, so sygnet-top peeks above the brown
   column on the right and gets covered by the photo on the left. */
.hero--call .hero__bg-photo {
	left: 0;
	right: 50%;
}

/* Both columns align their titles to the top, full width of the column */
.hero--call .hero__col--left  { justify-content: flex-start; align-items: flex-start; }
.hero--call .hero__col--right { justify-content: stretch;    align-items: stretch;    }
.hero--call .hero__title-open {
	display: block;
	width: 100%;
	height: auto;
}
/* Force "Call" to fill the entire right column box — width and height,
   even if it has to stretch the artwork. */
.hero--call .hero__title-call {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

/* Same staggered fade-up choreography as hero #1 */
.hero--call .hero__bg-photo,
.hero--call .hero__split,
.hero--call .hero__bg-sygnet--bottom,
.hero--call .hero__bg-sygnet--top,
.hero--call .hero__title-open,
.hero--call .hero__title-call {
	animation: nmw-hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
	will-change: transform, opacity;
}
.hero--call .hero__bg-photo          { animation-delay: 0s;    }
.hero--call .hero__split             { animation-delay: 0.08s; }
.hero--call .hero__bg-sygnet--bottom { animation-delay: 0.22s; }
.hero--call .hero__title-open        { animation-delay: 0.42s; }
.hero--call .hero__bg-sygnet--top    { animation-delay: 0.62s; }
.hero--call .hero__title-call        { animation-delay: 0.82s; }

@media (prefers-reduced-motion: reduce) {
	.hero--call .hero__bg-photo,
	.hero--call .hero__split,
	.hero--call .hero__bg-sygnet--bottom,
	.hero--call .hero__bg-sygnet--top,
	.hero--call .hero__title-open,
	.hero--call .hero__title-call { animation: none; }
}

/* ---------- Pinned bottom layer ----------
   Two stacked rows: marquee (Apply Now / Deadline) on top, the
   Adaptive Breathing strip below. Both stay fixed to the viewport
   bottom while the user is inside .hero-stack; once .hero-stack
   has scrolled out, JS adds .is-released to drop them into flow. */
.hero-pinned {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	pointer-events: none;
	display: flex;
	flex-direction: column;
}
.hero-pinned.is-released {
	position: absolute;
	bottom: auto;
	top: var(--hero-pinned-top, auto);
}

/* Marquee row (above the orange strip) — black bar, links to the form */
.hero-marquee {
	display: block;
	background: #000;
	color: #fff;
	overflow: hidden;
	height: 0;
	text-decoration: none;
	pointer-events: auto;            /* override .hero-pinned pointer-events: none */
	transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s;
}
.hero-marquee:hover { background: var(--color-accent); }
.hero-marquee:hover .hero-marquee__cta,
.hero-marquee:hover .hero-marquee__deadline,
.hero-marquee:hover .hero-marquee__sep { color: #000; }
.hero-marquee__track {
	display: inline-flex;
	white-space: nowrap;
	gap: 24px;
	align-items: center;
	padding: 12px 0;
	animation: nmw-hero-marquee 36s linear infinite;
	will-change: transform;
}
.hero-marquee__cta,
.hero-marquee__deadline,
.hero-marquee__sep {
	font-family: var(--font-sans);
	font-size: 32px;
	line-height: 1;
	color: #fff;
	flex-shrink: 0;
	padding-inline: 12px;
	text-transform: uppercase;
	transition: color 0.2s;
}
.hero-marquee__cta {
	font-weight: 700;
	letter-spacing: 0.02em;
}
.hero-marquee__sep {
	font-weight: 300;
	opacity: 0.55;
}
.hero-marquee__deadline {
	font-style: italic;
	font-weight: 300;
	letter-spacing: 0;
}
@keyframes nmw-hero-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Marquee unfurls inside hero #2 only */
.hero-pinned.show-marquee .hero-marquee {
	height: 56px;
}

/* Adaptive Breathing strip — always visible inside hero stack */
.hero-adaptive {
	background: #F97827;
	padding: 5px;
	overflow: hidden;
	line-height: 0;
}
.hero-adaptive img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 80px;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.hero-marquee__track { animation: none; }
	.hero-marquee { transition: none; }
}

/* Mobile-only Open/Call overlay element — hidden on desktop */
.hero__mobile-call { display: none; }

/* ---------- Mobile ----------
   ONE hero panel only on mobile. Hero #1 sticks to the top of the stack
   while you scroll; hero #2 stays in the DOM (so the existing scroll
   choreography for the marquee/release still has its 2-viewport runway)
   but is visually hidden. As the user scrolls past the first viewport
   the dates fade out and Open / Call fade in via .is-call-state, the
   marquee unfurls (existing behaviour), and another scroll length later
   the pinned strip is released into normal flow. */
@media (max-width: 900px) {
	/* Disable all hero rise/fade-in animations on mobile — the user explicitly
	   wants a static photo background with no movement on initial load or on
	   scroll. The state-swap (dates ↔ Open/Call) keeps its CSS transition. */
	.hero--main .hero__bg-photo,
	.hero--main .hero__split,
	.hero--main .hero__bg-sygnet--bottom,
	.hero--main .hero__bg-sygnet--top,
	.hero--main .hero__title-nm,
	.hero--main .hero__title-week,
	.hero--main .hero__dates,
	.hero--call .hero__bg-photo,
	.hero--call .hero__split,
	.hero--call .hero__bg-sygnet--bottom,
	.hero--call .hero__bg-sygnet--top,
	.hero--call .hero__title-open,
	.hero--call .hero__title-call {
		animation: none;
	}

	/* Hero #1 sticks at the top while the stack provides scroll distance.
	   On mobile the site header is in normal flow (position: relative) and
	   scrolls away with the page, so we DO NOT subtract --nmw-header-h from
	   the hero height — otherwise once the header scrolls off, the hero is
	   shorter than the viewport and the brown stack bg shows through above
	   the pinned strip. */
	.hero {
		height: calc(100svh - var(--nmw-hero-pinned-h, 90px));
	}
	.hero--main {
		position: sticky;
		top: 0;
	}
	/* Hero #2 keeps its layout space (so secondTop / stackBottom math
	   stays valid) but is invisible — the swap happens inside hero #1. */
	.hero--call { visibility: hidden; }

	/* Photo fills the whole hero on mobile (override desktop 50% half) */
	.hero__bg-photo,
	.hero--call .hero__bg-photo {
		left: 0;
		right: 0;
		width: 100%;
	}

	/* Hide split overlay + sygnet halves on mobile */
	.hero__split,
	.hero__bg-sygnet--top,
	.hero__bg-sygnet--bottom { display: none; }

	/* Hide the desktop New Media / Week wordmarks; only dates show */
	.hero--main .hero__title-nm,
	.hero--main .hero__title-week { display: none; }

	/* Single-column title grid */
	.hero__cols { grid-template-columns: 1fr; }
	.hero--main .hero__col--left {
		justify-content: flex-start;
		align-items: center;
		padding: 5px 16px 0;
		transition: opacity 0.35s ease;
	}
	.hero--main .hero__col--right { display: none; }
	.hero--main .hero__dates {
		display: block;
		width: 100%;
		max-width: none;
		height: auto;
	}

	/* Open/Call mobile overlay — fills the hero, hidden until is-call-state.
	   Pinned to the top of the hero (like the dates in initial state). */
	.hero--main .hero__mobile-call {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		position: absolute;
		inset: 0;
		padding: max(80px, 10%) 16px 0;     /* clear sticky mobile bar */
		z-index: 6;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
	}
	.hero--main .hero__mobile-call img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* In call-state: swap dates → Open/Call */
	.hero--main.is-call-state .hero__col--left { opacity: 0; }
	.hero--main.is-call-state .hero__mobile-call { opacity: 1; }

	.hero-marquee__cta,
	.hero-marquee__deadline,
	.hero-marquee__sep { font-size: 22px; }
	.hero-pinned.show-marquee .hero-marquee { height: 44px; }
	/* Mobile adaptive strip: keep original aspect ratio, no crop */
	.hero-adaptive { padding: 0; line-height: 0; }
	.hero-adaptive img,
	.hero-adaptive picture img {
		width: 100%;
		height: auto;
		max-height: none;
		object-fit: initial;
	}
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
	.hero--main .hero__col--left,
	.hero--main .hero__mobile-call { transition: none; }
}