/* "Elata: Countdown Hero" — APCS26 opening hero.
   Geometry and typography measured off the live section with
   getComputedStyle, not re-derived from the Liquid's ~180 interpolated
   settings (see render.php). */
.elata-countdown-hero {
	position: relative;
	width: 100%;
	background-color: var( --cdh-bg, #1d2733 );
	font-family: var( --elata-font, 'Poppins', sans-serif );
	overflow: hidden;
}

/* The hero fills the viewport below the site header. --cdh-offset is that
   header's height, measured by view.js: without subtracting it, 100vh starts
   below the header and the bottom of the hero always falls that far under the
   fold. svh is listed second so it wins where supported — it is the stable
   small-viewport unit, so a mobile address bar appearing does not resize the
   hero mid-scroll. */
.elata-countdown-hero .cdh__inner {
	position: relative;
	width: 100%;
	min-height: calc( ( 100vh - var( --cdh-offset, 0px ) ) );
	min-height: calc( ( 100svh - var( --cdh-offset, 0px ) ) );
	display: flex;
	flex-direction: column;
	height: auto;
	overflow: hidden;
}

.elata-countdown-hero .cdh__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.elata-countdown-hero .cdh__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient( 160deg, #1d2733 0%, #3d3226 55%, #c76328 100% );
}

.elata-countdown-hero .cdh__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	z-index: 1;
}

.elata-countdown-hero .cdh__overlay {
	position: absolute;
	inset: 0;
	background: var( --cdh-overlay, #000000 );
	opacity: var( --cdh-overlay-opacity, 0.2 );
	z-index: 1;
}

.elata-countdown-hero .cdh__content {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 5px 40px 40px;
}

.elata-countdown-hero .cdh__main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* fit-content, not the full content width: the section's `title_block_fit` is
   "shrink", so the title block is only as wide as its longest line (475px at
   1440) and --cdh-content-width acts as a cap. That width is what makes the
   subtext wrap where live wraps it — at a fixed 620px the subtext sat on one
   line and the rules ran too long. */
.elata-countdown-hero .cdh__titlewrap {
	width: fit-content;
	max-width: min( 100%, var( --cdh-content-width, 620px ) );
	text-align: left;
}

.elata-countdown-hero .cdh__rule {
	display: block;
	background-color: #ffffff;
	height: 3px;
}
.elata-countdown-hero .cdh__rule--top {
	width: 100%;
	margin: 0 0 18px;
}

.elata-countdown-hero .cdh__title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.05;
}

/* Hind, not Poppins. The title lines are bare <span>s upstream, so they fall
   through to the storefront's base font — the same split documented on
   --elata-font-body in base.css. Poppins is ~19% wider here, which pushed the
   title block from the live 475px out to 567px and stopped the subtext
   wrapping where it should. The subtext itself IS Poppins on live. */
.elata-countdown-hero .cdh__line {
	display: block;
	font-family: var( --elata-font-body, inherit );
	color: #ffffff;
	text-transform: uppercase;
}

/* letter-spacing is stored upstream in hundredths of an em (14 -> 0.14em). */
.elata-countdown-hero .cdh__line--1,
.elata-countdown-hero .cdh__line--3 {
	font-size: 46px;
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: 0.14em;
}

.elata-countdown-hero .cdh__line--2 {
	font-size: 64px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
}

/* Line 3 sits to the right of a short rule, both aligned on the baseline. */
.elata-countdown-hero .cdh__line3row {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	margin: 4px 0 0;
}
/* Basis 55% of the row, but SHRINKABLE. The rule, the gap and line 3's natural
   width together exceed the row, so the rule gives back the difference — which
   is why live lands on 248px at desktop (row 475, gap 24) and 135px at mobile
   (row 252, gap 12) rather than a clean 55% of either. Pinning it with
   flex: 0 0 … matches one breakpoint and misses the other. */
.elata-countdown-hero .cdh__rule--bottom {
	flex: 0 1 55%;
	margin: 0 0 12px;
}
.elata-countdown-hero .cdh__line--3 {
	flex: 1 1 auto;
	text-align: right;
}

/* Explicitly Poppins: the subtext is the one element in this section the live
   page does NOT leave to the base font.

   width: 0 + min-width: 100% keeps the subtext OUT of the parent's
   fit-content calculation while still filling the width the title settles on.
   Upstream this is the `subtext_match_title_width` setting: the title alone
   decides how wide the block is and the subtext wraps inside it. Without this
   the subtext's own long line was the widest thing in the block and it, not
   the title, set the width. */
.elata-countdown-hero .cdh__subtext {
	font-family: var( --elata-font, 'Poppins', sans-serif );
	margin: 22px 0 0;
	width: 0;
	min-width: 100%;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.9;
	color: #ffffff;
}
/* The trailing 12px is NOT trimmed on the last paragraph — live keeps it, and
   it is part of the title block's height. */
.elata-countdown-hero .cdh__subtext p { margin: 0 0 12px; }

/* The negative bottom margin cancels the content box's padding so the panel
   sits flush with the section's bottom edge. */
.elata-countdown-hero .cdh__footer {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 30px;
	margin: 0 0 -40px;
}

/* "Liquid glass": a translucent tinted panel with a directional sheen, a soft
   inner ring, and a backdrop blur. */
.elata-countdown-hero .cdh__countdown {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	padding: 30px 45px;
	min-width: 470px;
	background-color: rgba( 0, 0, 0, 0.1 );
	background-image: linear-gradient( 140deg, rgba( 255, 255, 255, 0.08 ) 0%, rgba( 255, 255, 255, 0.03 ) 45%, rgba( 0, 0, 0, 0 ) 100% );
	border-radius: 24px 24px 0 0;
	-webkit-backdrop-filter: blur( 4px ) saturate( 1.6 );
	backdrop-filter: blur( 4px ) saturate( 1.6 );
	box-shadow: inset 0 2px 8px rgba( 255, 255, 255, 0.12 ), inset 0 -2px 8px rgba( 0, 0, 0, 0.05 );
}

.elata-countdown-hero .cdh__unit {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 70px;
}

.elata-countdown-hero .cdh__num {
	display: block;
	font-family: var( --elata-font-body, inherit );
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
}

.elata-countdown-hero .cdh__label {
	display: block;
	margin: 4px 0 0;
	font-family: var( --elata-font-body, inherit );
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffffff;
}

.elata-countdown-hero .cdh__expired {
	color: #ffffff;
	font-size: 20px;
	font-weight: 500;
}

/* Pinned to the bottom-right corner of the content box. */
.elata-countdown-hero .cdh__btn {
	position: absolute;
	right: 0;
	bottom: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 45px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.43;
	text-transform: uppercase;
	text-decoration: none;
	color: #ffffff;
	background-color: var( --cdh-accent, #c76328 );
	border-radius: 40px;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.elata-countdown-hero .cdh__btn:hover {
	opacity: 0.92;
	transform: translateY( -2px );
}

@media ( max-width: 1024px ) {
	.elata-countdown-hero .cdh__line--1,
	.elata-countdown-hero .cdh__line--3 { font-size: 34px; }
	.elata-countdown-hero .cdh__line--2 { font-size: 48px; }
	.elata-countdown-hero .cdh__num { font-size: 26px; }
}

@media ( max-width: 768px ) {
	.elata-countdown-hero .cdh__content { padding: 40px 20px 30px; }
	/* The title block keeps shrink-to-fit on mobile too — live holds it at
	   252px and lets the flex parent centre it, rather than stretching it to
	   the gutter. Forcing width: 100% here made the rules span the full screen
	   and stopped the subtext wrapping to the three lines live shows. */
	.elata-countdown-hero .cdh__line3row { gap: 12px; }
	.elata-countdown-hero .cdh__line--1,
	.elata-countdown-hero .cdh__line--3 { font-size: 24px; }
	.elata-countdown-hero .cdh__line--2 { font-size: 34px; }
	.elata-countdown-hero .cdh__subtext { font-size: 17px; }

	/* Stack the button above the panel and let both run full width. */
	.elata-countdown-hero .cdh__footer {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 20px;
		margin-bottom: -30px;
	}
	.elata-countdown-hero .cdh__countdown {
		min-width: 0;
		width: 100%;
		gap: 6px;
		padding: 20px 15px;
	}
	.elata-countdown-hero .cdh__unit {
		min-width: 0;
		flex: 1 1 0;
		align-items: center;
	}
	.elata-countdown-hero .cdh__num { font-size: 22px; }
	.elata-countdown-hero .cdh__label { font-size: 9px; }
	.elata-countdown-hero .cdh__btn {
		position: static;
		padding: 16px 30px;
		font-size: 14px;
	}
}

/* --------------------------------------------------------------------------
   Pinned CTA

   The SAME .cdh__btn, switched to fixed once it would scroll under the header,
   and MOVED TO <body> at the same time.

   The move is not optional. .cdh__content sets position:relative + z-index:2,
   which makes it a stacking context — so a descendant is capped at that context
   no matter how large its own z-index is. Left in place the button was painted
   over by later sections, appearing dimmed beneath their overlays. Reparenting
   to body is what lets z-index actually apply against the page.

   Because it is then outside .elata-countdown-hero, the descendant selectors no
   longer match, so this rule restates every visual property rather than relying
   on inheritance. view.js copies --cdh-accent onto the element before moving it,
   which is why the colour still resolves here.
   -------------------------------------------------------------------------- */
.cdh__btn.is-pinned {
	position: fixed;
	right: auto;
	bottom: auto;
	z-index: 9990;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 45px;
	font-family: var( --elata-font );
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.43;
	text-transform: uppercase;
	text-decoration: none;
	color: #ffffff;
	background-color: var( --cdh-accent, #c76328 );
	border-radius: 40px;
	/* Pinned, this floats over arbitrary page content rather than the hero's
	   dark video, so it has to carry its own separation. Two layers: a soft
	   drop shadow for lift, plus a hairline ring so the pill still has a defined
	   edge against a mid-tone or busy background where the shadow alone
	   disappears. */
	box-shadow:
		0 8px 24px rgba( 0, 0, 0, 0.45 ),
		0 0 0 1px rgba( 0, 0, 0, 0.15 );
	/* NOT opacity. The hero's hover fades to 0.92, which works over a dark video
	   but here lets the text underneath show through the button and reads as a
	   rendering fault. Brightness keeps it fully opaque. */
	transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cdh__btn.is-pinned:hover,
.cdh__btn.is-pinned:focus {
	opacity: 1;
	filter: brightness( 1.1 );
	transform: translateY( -2px );
	color: #ffffff;
	box-shadow:
		0 10px 28px rgba( 0, 0, 0, 0.5 ),
		0 0 0 1px rgba( 0, 0, 0, 0.15 );
}

/* Keyboard focus needs to be visible against any background, so it gets a light
   ring rather than relying on the dark hairline above. */
.cdh__btn.is-pinned:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

@media ( max-width: 768px ) {
	/* Centred when pinned, rather than keeping the position it held in the hero.
	   At this width the hero's button is position:static inside a stretched flex
	   column, so it spans the full content width — there is no meaningful left
	   edge worth preserving, and pinning it to the container's left padding
	   would look arbitrary. view.js leaves `left` unset here so these apply. */
	.cdh__btn.is-pinned {
		left: 50%;
		transform: translateX( -50% );
		padding: 14px 30px;
		font-size: 13px;
	}

	/* The shared hover sets translateY, which would replace the centring
	   transform outright — both have to be declared together. */
	.cdh__btn.is-pinned:hover,
	.cdh__btn.is-pinned:focus {
		transform: translateX( -50% ) translateY( -2px );
	}
}