/**
 * P16 — Countdown
 *
 * Styles for the [kd_countdown] shortcode.
 *
 * Figma reference: campaign frame 177:3656, countdown section.
 *   Heading (218:2081): display heading, primary colour, above the card.
 *   Card (218:2092): a CONTAINED white rounded card (638×185, radius 20px,
 *     soft drop-shadow) holding the unit tiles — NOT a full-width band.
 *   Glow (218:2093): a blurred multicolour-gradient halo around the card
 *     (#95C83C → #26A9E1 → #FF8400 → #FE330A, filter blur 25px).
 *   Numbers: large primary colour; unit labels: dark ink, uppercase.
 *
 * (The earlier build rendered a full-width gradient *band* with white
 * tiles — corrected here to the contained white-card-with-glow design.)
 *
 * Tokens: var(--kd-*) from assets/css/tokens.css.
 */

/* ── Section — centred on the page (NOT a full-width band) ──────────────────── */

.kd-countdown {
	padding-block: var(--kd-band-pad-y);
	padding-inline: var(--kd-gutter);
	text-align: center;
}

/* ── Heading — display font, primary colour, above the card ─────────────── */

.kd-countdown__heading {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: clamp(2rem, 5vw, 3.125rem); /* 32px → 50px (Figma: 50px) */
	line-height: var(--kd-lh-tight);
	color: var(--kd-color-primary); /* primary, on the white page */
	margin: 0 0 var(--kd-space-xl); /* 64px — extra gap so the card's glow clears the heading */
}

/* ── The card — ONE white rounded card holding the tiles (Figma 218:2092) ───── */

.kd-countdown__tiles {
	position: relative; /* anchors the glow ::before (no z-index → no stacking context) */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--kd-space-md); /* 24px between units */
	max-width: 640px; /* Figma card ≈ 638px */
	margin-inline: auto;
	padding: var(--kd-space-lg) var(--kd-space-xl); /* 40px 64px */
	background: var(--kd-color-base); /* white card */
	border-radius: var(--kd-radius-card); /* 20px — Figma 218:2092 */
	box-shadow: var(
		--kd-shadow-card
	); /* subtle white-card lift — Figma 218:2092 */
}

/* 4-unit countdown (show_seconds="yes") — widen the card a touch so the Seconds
   tile sits inline with the others instead of wrapping to its own row. ~820px
   keeps the 4 tiles at the same ~155px density as the 3-tile (640px) card.
   The :has() fallback is the wrap below — graceful on browsers without :has(). */
.kd-countdown__tiles:has(.kd-countdown__number[data-unit="seconds"]) {
	max-width: 820px;
}

/* Multicolour-gradient glow halo behind the card (Figma 218:2093 — a 50px gradient
   border, blurred 25px). A blurred gradient layer sized a touch larger than the
   card; z-index:-1 keeps it behind the opaque card so only the soft halo shows. */
.kd-countdown__tiles::before {
	content: "";
	position: absolute;
	inset: -6px;
	z-index: -1;
	border-radius: calc(
		var(--kd-radius-card) + 4px
	); /* card radius + the 4px inset overhang */
	background: linear-gradient(
		135deg,
		var(--kd-color-accent-1) 0%,
		var(--kd-color-accent-2) 40%,
		var(--kd-color-accent-3) 72%,
		var(--kd-color-accent-4) 100%
	);
	filter: blur(18px);
	opacity: 0.8;
}

/* ── Individual unit (number + label column on the card) ────────────────────── */

.kd-countdown__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kd-gap-normal); /* 12px — number → unit label */
	padding-inline: var(--kd-space-sm); /* 16px breathing room between units */
	min-width: 0;
	flex: 1 1 auto;
}

/* ── Number (the big ticking digit) — primary colour ────────────────────────── */

.kd-countdown__number {
	display: block;
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: clamp(2.5rem, 6vw, 4rem); /* 40px → 64px */
	line-height: 1;
	color: var(--kd-color-primary); /* primary */
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* ── Unit label (Days / Hours / Minutes) — dark ink ─────────────────────────── */

.kd-countdown__unit {
	display: block;
	font-family: var(--kd-font-body);
	font-weight: 600;
	font-size: var(--kd-size-body-lg); /* 1.125rem / 18px */
	line-height: var(--kd-lh-loose);
	color: var(--kd-color-contrast); /* dark ink */
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ── Ended state ─────────────────────────────────────────────────────────────── */

.kd-countdown__ended {
	margin-top: var(--kd-space-lg);
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	color: var(--kd-color-primary); /* primary on the white page */
}

.kd-countdown__ended[hidden] {
	display: none;
}

/* ── Band variant — [kd_countdown layout="band"] ─────────────────────────────
   The inline treatment: ONE rounded tinted band, heading on the left, the unit
   columns on the right, no card, no glow. The card (default) stays available.
   Heading size is the h2 token (a stated exception to the 50px section scale): it
   is a label inside a band, not a section title. */

.kd-countdown--band {
	display: flex;
	flex-wrap: wrap; /* lets the ended message drop to its own line */
	align-items: center;
	justify-content: space-between;
	gap: var(--kd-space-lg); /* 40px heading -> units */
	text-align: left;
	background: var(--kd-color-neutral-100);
	border-radius: var(--kd-radius-md);
	padding: var(--kd-space-xl); /* 64px — closest token to the ~59px inset */
}

.kd-countdown--band .kd-countdown__heading {
	margin: 0;
	font-size: var(--kd-size-h2); /* 28px — band label, not a section title */
	line-height: var(--kd-lh-tight);
	flex: 0 1 auto;
}

.kd-countdown--band .kd-countdown__tiles {
	flex: 0 0 auto;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	gap: var(--kd-space-xl); /* 64px between unit columns */
}

.kd-countdown--band .kd-countdown__tiles::before {
	content: none; /* no glow halo on the band */
}

.kd-countdown--band .kd-countdown__tile {
	padding-inline: 0;
	gap: var(--kd-gap-tight); /* 8px number -> label */
}

.kd-countdown--band .kd-countdown__number {
	font-size: clamp(2rem, 3vw, 2.5rem); /* 32px → 40px — wireframe digits */
}

.kd-countdown--band .kd-countdown__unit {
	font-size: var(--kd-size-eyebrow); /* 14px — wireframe unit labels */
	letter-spacing: 0.06em;
}

.kd-countdown--band .kd-countdown__ended {
	margin-top: 0;
	width: 100%; /* own line under heading + units (band wraps); width, not
	                flex-basis, so it also holds in the stacked column layout */
	text-align: center;
}

/* Tablet and below: the row can't hold a ~330px heading plus four unit columns
   inside the 1024 gutter, so the band stacks and centres (the wireframe only
   draws desktop). The card's mobile digit/label down-scale is (0,1,0) and does
   not reach these (0,2,0) rules — the band restates its own sizes below. */
@media (max-width: 1023.98px) {
	.kd-countdown--band {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--kd-space-md);
		padding: var(--kd-space-lg); /* 40px */
	}

	.kd-countdown--band .kd-countdown__tiles {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--kd-space-lg); /* 40px between unit columns */
	}
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

/* Tablet: tighter unit spacing on the card. */
@media (max-width: 1023.98px) {
	.kd-countdown__tiles {
		padding: var(--kd-space-md) var(--kd-space-lg); /* 24px 40px */
	}
}

/* Mobile: keep the 3 units in a single row on the narrow card by scaling the
   number + label down (the 18px uppercase "MINUTES" label is the width driver —
   at full size 3 columns overflow ~197px of card interior and wrap 2+1). Wrap is
   left on as a graceful fallback: a 4-unit countdown (show_seconds) reflows to 2×2. */
@media (max-width: 767.98px) {
	.kd-countdown__tiles {
		gap: var(--kd-space-xs); /* 8px */
		padding: var(--kd-space-md); /* 24px */
	}

	/* Band on phones: already stacked by the 1023.98 block; tighten the inset and
	   scale digits like the card so four units fit two-up (2×2) on a 375 band. */
	.kd-countdown--band {
		padding: var(--kd-space-md); /* 24px */
	}

	.kd-countdown--band .kd-countdown__tiles {
		gap: var(--kd-space-md);
		padding: 0;
	}

	.kd-countdown--band .kd-countdown__number {
		font-size: clamp(
			1.75rem,
			8vw,
			2.25rem
		); /* 28→36px, same ramp as the card */
	}

	.kd-countdown__tile {
		padding-inline: 0;
	}

	.kd-countdown__number {
		font-size: clamp(
			1.75rem,
			8vw,
			2.25rem
		); /* 28→36px — fits 3-up on the card */
	}

	.kd-countdown__unit {
		font-size: 0.6875rem; /* 11px — keeps "MINUTES" narrow enough for one row */
		letter-spacing: 0.04em;
	}
}