/**
 * P16 — Countdown
 *
 * Styles for the [kd_countdown] shortcode.
 *
 * Figma reference: Summer Series frame 177:3656, countdown section.
 *   Heading (218:2081): Montserrat Black, primary purple, 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 rainbow-gradient halo around the card
 *     (#95C83C → #26A9E1 → #FF8400 → #FE330A, filter blur 25px).
 *   Numbers: large primary purple; unit labels: dark ink, uppercase.
 *
 * (The earlier build rendered a full-width rainbow gradient *band* with white
 * tiles — corrected here to the contained white-card-with-glow design.)
 *
 * Tokens: var(--blg-*) from assets/css/tokens.css.
 */

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

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

/* ── Heading — Montserrat Black, primary purple, above the card ─────────────── */

.kd-countdown__heading {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-h2-section); /* shared section scale */
	line-height: var(--blg-lh-tight);
	color: var(--blg-color-primary); /* purple, on the white page */
	margin: 0 0 var(--blg-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(--blg-space-md); /* 24px between units */
	max-width: 640px; /* Figma card ≈ 638px */
	margin-inline: auto;
	padding: var(--blg-space-lg) var(--blg-space-xl); /* 40px 64px */
	background: var(--blg-color-base); /* white card */
	border-radius: var(--blg-radius-card); /* 20px — Figma 218:2092 */
	box-shadow: var(
		--blg-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;
}

/* Rainbow-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(--blg-radius-card) + 4px
	); /* card radius + the 4px inset overhang */
	background: linear-gradient(
		135deg,
		#95c83c 0%,
		#26a9e1 40%,
		#ff8400 72%,
		#fe330a 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(--blg-gap-normal); /* 12px — number → unit label */
	padding-inline: var(--blg-space-sm); /* 16px breathing room between units */
	min-width: 0;
	flex: 1 1 auto;
}

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

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

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

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

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

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

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

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

/* Tablet: tighter unit spacing on the card. */
@media (max-width: 1023.98px) {
	.kd-countdown__tiles {
		padding: var(--blg-space-md) var(--blg-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(--blg-space-xs); /* 8px */
		padding: var(--blg-space-md); /* 24px */
	}

	.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;
	}
}