/* Featured Event block.

   Two registers on one structure: `standard` (navy, photograph, asymmetric) and
   `gala` (black tie, centred, symmetric, no photograph). Two scales: `band` for
   a mid-page section, `slide` for use inside the hero.

   Type and spacing come from the ramp and the 8px grid. The mockups used ~17
   distinct font sizes of which 4 were on the ramp — 0.95rem eight times where
   the ramp has 0.9rem and 1rem — and referenced no spacing tokens at all. Those
   literals are deliberately not carried across. */

.fd-featured {
	overflow: hidden;
}

.fd-featured__frame {
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
}

.fd-featured__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.fd-featured__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--eyebrow, 0.72rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow, 0.16em);
}

.fd-featured__title {
	margin: 0;
	line-height: var(--wp--custom--line-height--tight, 1.06);
}

.fd-featured__subtitle,
.fd-featured__body {
	margin: 0;
}

.fd-featured__body {
	font-size: var(--wp--preset--font-size--body, 1rem);
	line-height: var(--wp--custom--line-height--body, 1.6);
	max-width: 52ch;
}

.fd-featured__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
}

.fd-featured__cta {
	display: inline-block;
	padding: 14px 32px;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--pill, 99px);
	transition: filter 0.18s ease;
}
.fd-featured__cta:hover,
.fd-featured__cta:focus-visible {
	filter: brightness(1.08);
}

.fd-featured__actions {
	margin: 8px 0 0;
}

/* --- Countdown ------------------------------------------------------------ */

.fd-featured__countdown {
	display: flex;
	gap: 32px;
}

.fd-featured__unit {
	text-align: center;
}

.fd-featured__num {
	display: block;
	font-size: var(--wp--preset--font-size--headline, 1.9rem);
	font-weight: 700;
	line-height: 1;
	/* Digits must not reflow the row as they tick down from 09 to 08. */
	font-variant-numeric: tabular-nums;
}

.fd-featured__unit-label {
	display: block;
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--eyebrow, 0.72rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow, 0.16em);
}

/* --- Standard register ---------------------------------------------------- */

.fd-featured--standard {
	background: linear-gradient(
		160deg,
		var(--wp--preset--color--navy-2, #1a375a) 0%,
		var(--wp--preset--color--navy, #162939) 70%
	);
	color: var(--wp--preset--color--mist, #c2d0dc);
	border-radius: var(--wp--custom--radius--base, 10px);
}

.fd-featured--standard .fd-featured__frame {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	min-height: 340px;
}

.fd-featured--standard .fd-featured__eyebrow {
	color: var(--wp--preset--color--sky, #2aa9e0);
}
.fd-featured--standard .fd-featured__title {
	color: var(--wp--preset--color--snow, #fff);
	font-size: var(--wp--preset--font-size--headline, 1.9rem);
}
.fd-featured--standard .fd-featured__content {
	padding: 44px 40px;
}
.fd-featured--standard .fd-featured__cta {
	background: var(--wp--preset--color--gold, #f1e819);
	color: var(--wp--preset--color--navy, #162939);
}
.fd-featured--standard .fd-featured__num {
	color: var(--wp--preset--color--snow, #fff);
}
.fd-featured--standard .fd-featured__unit-label {
	color: var(--wp--preset--color--sky, #2aa9e0);
}

/* Photograph pane. The scrim runs the copy side of the image into the panel so
   the two halves read as one surface rather than a photo glued to a box. */
.fd-featured--standard .fd-featured__media {
	position: absolute;
	inset: 0 auto 0 0;
	width: 52%;
	overflow: hidden;
}
.fd-featured--standard .fd-featured__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fd-featured--standard .fd-featured__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(22, 41, 57, 0) 40%,
		var(--wp--preset--color--navy, #162939) 100%
	);
}
/* Copy sits in the right-hand track; the photo occupies the left visually. */
.fd-featured--standard.has-image .fd-featured__content {
	grid-column: 2;
}
.fd-featured--standard:not(.has-image) .fd-featured__frame {
	grid-template-columns: 1fr;
}

/* --- Gala register --------------------------------------------------------
   Centred and symmetric, where the standard register is asymmetric. The double
   frame (padded ground + hairline inset) is the black-tie signature, as is the
   square CTA — a documented exception to the radius scale, see DESIGN.md. */

.fd-featured--gala {
	background: var(--wp--custom--gala--bg, #0c1a26);
	color: var(--wp--custom--gala--champagne, #ebd9a8);
	padding: 16px;
}

.fd-featured--gala .fd-featured__frame {
	border: 1px solid var(--wp--custom--gala--line, rgba(200, 162, 74, 0.55));
	padding: 56px 32px;
	text-align: center;
}

.fd-featured--gala .fd-featured__content {
	align-items: center;
	gap: 16px;
}

.fd-featured--gala .fd-featured__eyebrow {
	color: var(--wp--custom--gala--foil, #c8a24a);
	letter-spacing: 0.24em;
}

.fd-featured--gala .fd-featured__title {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-size: var(--wp--preset--font-size--section, clamp(1.9rem, 4vw, 2.8rem));
	color: var(--wp--custom--gala--foil, #c8a24a);
}

.fd-featured--gala .fd-featured__subtitle {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lede, 1.18rem);
	color: var(--wp--custom--gala--champagne, #ebd9a8);
}

.fd-featured--gala .fd-featured__meta {
	justify-content: center;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--caption, 0.84rem);
}

.fd-featured--gala .fd-featured__body {
	text-align: center;
}

.fd-featured--gala .fd-featured__num {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	color: var(--wp--custom--gala--champagne, #ebd9a8);
}
.fd-featured--gala .fd-featured__unit-label {
	color: var(--wp--custom--gala--foil, #c8a24a);
}

.fd-featured--gala .fd-featured__cta {
	background: var(--wp--custom--gala--foil, #c8a24a);
	color: var(--wp--custom--gala--bg, #0c1a26);
	border-radius: 0;
	letter-spacing: 0.06em;
}

/* The gala register has no photograph — the frame IS the treatment. */
.fd-featured--gala .fd-featured__media {
	display: none;
}

/* --- Slide scale ----------------------------------------------------------
   Same components, tuned for sitting inside the hero rather than as its own
   section. Only the paddings differ; the mockups also shifted five font sizes,
   which is a second set of values to keep in sync for no visible gain. */

.fd-featured--slide.fd-featured--standard .fd-featured__content {
	padding: 32px;
}
.fd-featured--slide.fd-featured--gala .fd-featured__frame {
	padding: 40px 32px;
}
.fd-featured--slide .fd-featured__countdown {
	gap: 24px;
}

/* --- Responsive -----------------------------------------------------------
   1024px, NOT the theme's usual 782px. This is the one component where the
   existing breakpoint vocabulary was genuinely wrong for tablets.

   The theme's breakpoints stop at 782px, but iPad portrait is 834px — above it
   — so a tablet was getting the full desktop two-column band. Measured at
   860px: the copy column came out 316px wide at 16px, about 40 characters per
   line, against a comfortable 45-75. Stacking instead lets the body run to its
   52ch cap, roughly 52 CPL.

   Below this the photograph moves ABOVE the copy rather than behind it — a
   52%-width absolutely-positioned image is unreadable at these sizes. */

@media (max-width: 1024px) {
	.fd-featured--standard .fd-featured__frame {
		display: block;
		min-height: 0;
	}
	.fd-featured--standard .fd-featured__media {
		position: relative;
		inset: auto;
		width: 100%;
		height: 200px;
	}
	.fd-featured--standard .fd-featured__media::after {
		background: linear-gradient(
			180deg,
			rgba(22, 41, 57, 0) 40%,
			var(--wp--preset--color--navy, #162939) 100%
		);
	}
	.fd-featured--standard .fd-featured__content,
	.fd-featured--slide.fd-featured--standard .fd-featured__content {
		padding: 28px 24px 32px;
	}
	.fd-featured--gala .fd-featured__frame {
		padding: 40px 20px;
	}
	.fd-featured__countdown {
		gap: 24px;
	}
}

@media (max-width: 600px) {
	.fd-featured__cta {
		display: block;
		text-align: center;
	}
	.fd-featured__actions {
		align-self: stretch;
	}
	.fd-featured__countdown {
		gap: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fd-featured__cta {
		transition: none;
	}
}