/**
 * Interactive Discovery — Latest Quizzes card grid.
 *
 * Design tokens below are declared fresh under .tcf-interactive-discovery
 * rather than referencing modules/thickle/assets/css/thickle.css's
 * --tcf-games-* tokens, deliberately: Discovery must render correctly
 * on ANY page (a future Crossword page, a standalone quiz landing
 * page, anywhere at all), including pages where Thickle's own CSS
 * never loads at all. The literal values match Thickle's
 * --tcf-games-* tokens exactly, so the module reads as part of the
 * same TCF Interactive design language without depending on another
 * module's stylesheet being present — "belongs beside Thickle
 * Results, Player Journey, Player Stats, and More Games, without
 * looking identical" per the sprint brief.
 *
 * Scoped entirely under .tcf-interactive-discovery, matching the same
 * CSS-scoping convention every Games Component Library component
 * already uses (see wrap_component_output() in
 * modules/games/components/functions-context.php) — safe to appear
 * once or many times on the same page, and never leaks a style onto
 * anything outside this wrapper.
 */

.tcf-interactive-discovery {
	--tcf-discovery-color-accent: #00cbc1;
	--tcf-discovery-color-accent-contrast: #063a37;
	--tcf-discovery-color-ink: #1a1a1a;
	--tcf-discovery-color-paper: #ffffff;
	--tcf-discovery-color-surface: #faf7f2;
	--tcf-discovery-color-muted: #6b6b6b;
	--tcf-discovery-color-border: #e2ddd3;

	--tcf-discovery-radius: 12px;
	--tcf-discovery-radius-lg: 20px;

	--tcf-discovery-shadow: 0 12px 32px rgba(6, 58, 55, 0.08);
	--tcf-discovery-shadow-hover: 0 18px 40px rgba(6, 58, 55, 0.14);

	--tcf-discovery-font-heading: 'Oswald', Impact, 'Arial Narrow', sans-serif;
	--tcf-discovery-font-editorial: 'Playfair Display', Georgia, 'Times New Roman', serif;

	--tcf-discovery-motion-base: 250ms;
	--tcf-discovery-ease: cubic-bezier(0.22, 1, 0.36, 1);

	max-width: 84rem;
	margin: 0 auto;
	padding: 3rem 1.5rem;
	color: var(--tcf-discovery-color-ink);
	box-sizing: border-box;
}

.tcf-interactive-discovery *,
.tcf-interactive-discovery *::before,
.tcf-interactive-discovery *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------------
 * Intro
 * ------------------------------------------------------------------ */

.tcf-interactive-discovery__intro {
	max-width: 48rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.tcf-interactive-discovery__title {
	font-family: var(--tcf-discovery-font-editorial); /* alpha.8: Playfair Display, was Oswald. */
	font-weight: 600;
	font-size: clamp(1.85rem, 1.5rem + 1.5vw, 2.65rem); /* Small upward adjustment — Playfair Display reads smaller than Oswald at the same size, so the clamp range was nudged up slightly to preserve the section title's visual weight, per "unless a very small adjustment is needed for the new font." */
	letter-spacing: normal; /* Oswald's uppercase tracking no longer applies to a normal-case serif headline. */
	text-transform: none; /* alpha.8: was uppercase — normal title case, per the brief. */
	color: var(--tcf-discovery-color-ink);
	margin: 0 0 0.75rem;
}

.tcf-interactive-discovery__intro-copy {
	font-family: var(--tcf-discovery-font-editorial);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--tcf-discovery-color-muted);
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Empty state
 * ------------------------------------------------------------------ */

.tcf-interactive-discovery__empty {
	font-family: var(--tcf-discovery-font-editorial);
	font-size: 1.0625rem;
	color: var(--tcf-discovery-color-muted);
	text-align: center;
	max-width: 32rem;
	margin: 0 auto;
	padding: 2rem 1.5rem;
	background: var(--tcf-discovery-color-surface);
	border: 1px solid var(--tcf-discovery-color-border);
	border-radius: var(--tcf-discovery-radius-lg);
}

/* ---------------------------------------------------------------------
 * Grid — desktop default: 4 columns. See breakpoints below for
 * tablet (2 columns) and mobile (single-column stack). No carousel
 * this sprint, per the sprint brief.
 * ------------------------------------------------------------------ */

.tcf-interactive-discovery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem;
	align-items: stretch;
}

/* Fewer than four cards: center and cap card width rather than
 * stretching a lone card across the full section width. `:has()` lets
 * this stay pure CSS — no PHP-generated item-count class needed, and
 * the same rule works automatically whether Discovery has one quiz
 * published (the current live state) or grows to a full four-plus. */
.tcf-interactive-discovery__grid:has(> :nth-child(1):last-child) {
	grid-template-columns: minmax(0, 20rem);
	justify-content: center;
}

.tcf-interactive-discovery__grid:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 20rem));
	justify-content: center;
}

.tcf-interactive-discovery__grid:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 20rem));
	justify-content: center;
}

/* ---------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------ */

.tcf-interactive-discovery__card {
	background: var(--tcf-discovery-color-paper);
	border: 1px solid var(--tcf-discovery-color-border);
	border-radius: var(--tcf-discovery-radius-lg);
	box-shadow: var(--tcf-discovery-shadow);
	overflow: hidden;
	min-width: 0; /* Grid items default to min-width:auto, which can force
		horizontal overflow with a long unbroken title/excerpt word —
		explicit 0 lets the card shrink to its column instead. */
	transition: box-shadow var(--tcf-discovery-motion-base) var(--tcf-discovery-ease),
		transform var(--tcf-discovery-motion-base) var(--tcf-discovery-ease);
}

.tcf-interactive-discovery__card:hover,
.tcf-interactive-discovery__card:focus-within {
	box-shadow: var(--tcf-discovery-shadow-hover);
	transform: translateY(-2px);
}

.tcf-interactive-discovery__card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* Visible focus state — the entire card is one link, one tab stop,
 * per the sprint's keyboard-navigation requirement. */
.tcf-interactive-discovery__card-link:focus-visible {
	outline: 3px solid var(--tcf-discovery-color-accent);
	outline-offset: -3px;
	border-radius: var(--tcf-discovery-radius-lg);
}

.tcf-interactive-discovery__card-image {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--tcf-discovery-color-surface);
}

.tcf-interactive-discovery__card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--tcf-discovery-motion-base) var(--tcf-discovery-ease);
}

.tcf-interactive-discovery__card-link:hover .tcf-interactive-discovery__card-image img,
.tcf-interactive-discovery__card-link:focus-visible .tcf-interactive-discovery__card-image img {
	transform: scale(1.04);
}

/* Polished no-image state: a soft TCF-tinted background with a
 * restrained diagonal pattern and a single quiz (question-mark) icon
 * — never a broken image, never an empty frame that reads as
 * accidental. CSS-only; no new image asset added. */
.tcf-interactive-discovery__card-image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--tcf-discovery-color-surface);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(0, 203, 193, 0.07) 0,
		rgba(0, 203, 193, 0.07) 2px,
		transparent 2px,
		transparent 14px
	);
	color: var(--tcf-discovery-color-accent-contrast);
	opacity: 0.85;
}

.tcf-interactive-discovery__card-image--placeholder svg {
	display: block;
}

.tcf-interactive-discovery__card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1.25rem 1.35rem 1.5rem;
	gap: 0.5rem;
}

.tcf-interactive-discovery__card-category {
	font-family: var(--tcf-discovery-font-heading);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tcf-discovery-color-accent); /* alpha.8: brand accent #00cbc1, was the darker --tcf-discovery-color-accent-contrast. See CHANGELOG.md for a flagged contrast finding on this change. */
}

.tcf-interactive-discovery__card-title {
	font-family: var(--tcf-discovery-font-heading);
	font-weight: 600;
	font-size: 1.1875rem;
	line-height: 1.3;
	color: var(--tcf-discovery-color-ink);
	overflow-wrap: break-word;
}

.tcf-interactive-discovery__card-excerpt {
	font-family: var(--tcf-discovery-font-editorial);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--tcf-discovery-color-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: break-word;
}

.tcf-interactive-discovery__card-footer {
	margin-top: auto;
	padding-top: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.tcf-interactive-discovery__card-time {
	font-family: var(--tcf-discovery-font-editorial);
	font-size: 0.8125rem;
	color: var(--tcf-discovery-color-muted);
}

.tcf-interactive-discovery__card-cta {
	font-family: var(--tcf-discovery-font-heading);
	font-size: 1rem; /* alpha.8: was 0.8125rem — increased visual presence, within the brief's recommended 0.95–1.05rem range. */
	font-weight: 600;
	letter-spacing: 0.04em; /* alpha.8: slightly increased — "slight letter spacing" reads better at all-caps + larger size. */
	text-transform: uppercase; /* alpha.8: new — "Take the Quiz →" now displays as "TAKE THE QUIZ →". The underlying copy registry string is unchanged; this is visual styling only. */
	color: var(--tcf-discovery-color-accent); /* alpha.8: brand accent #00cbc1, was the darker --tcf-discovery-color-accent-contrast. See CHANGELOG.md for a flagged contrast finding on this change. */
	margin-left: auto;
	position: relative;
	transition: color var(--tcf-discovery-motion-base) var(--tcf-discovery-ease);
}

/* alpha.8: hover/focus now moves TO the darker, high-contrast teal
 * (--tcf-discovery-color-accent-contrast) rather than away from it —
 * inverted from alpha.7, since the resting CTA color is now the
 * brighter brand accent. This keeps a clearly visible state change on
 * interaction and gives keyboard/hover users the higher-contrast
 * color at exactly the moment their attention is already on the CTA. */
.tcf-interactive-discovery__card-link:hover .tcf-interactive-discovery__card-cta,
.tcf-interactive-discovery__card-link:focus-visible .tcf-interactive-discovery__card-cta {
	color: var(--tcf-discovery-color-accent-contrast);
}

/* ---------------------------------------------------------------------
 * Responsive
 *
 * alpha.7 corrective pass: the fewer-card `:has()` selectors above
 * have specificity (0,2,0) — one class plus one pseudo-class — and
 * carry NO media-query restriction of their own, so they are "on" at
 * every viewport width. A plain `.tcf-interactive-discovery__grid`
 * reset inside a media query has lower specificity (0,1,0) and can
 * never beat them, regardless of source order or which media query
 * it lives in. alpha.6 only added a matching-specificity override for
 * the one-card case at tablet, and none at mobile — so two- and
 * three-card layouts kept their desktop column count at tablet, and
 * every fewer-card layout except one-card kept its desktop or tablet
 * column count at mobile. Every override below matches the base
 * rules' selector shape exactly (same specificity), so within each
 * viewport width the LAST matching rule in source order wins — tablet
 * overrides desktop, mobile overrides both. No JavaScript involved.
 * ------------------------------------------------------------------ */

/* Tablet, 641px–1023px. */
@media (max-width: 1023px) {
	.tcf-interactive-discovery__grid {
		grid-template-columns: repeat(2, 1fr);
		justify-content: initial;
	}

	/* One card: still a single centered, capped column at tablet. */
	.tcf-interactive-discovery__grid:has(> :nth-child(1):last-child) {
		grid-template-columns: minmax(0, 20rem);
		justify-content: center;
	}

	/* Two or three cards: the plain tablet two-column grid — this is
	 * what overrides the desktop capped/centered two- and three-card
	 * rules, which would otherwise keep winning here on specificity.
	 * Three cards wrap naturally into two columns plus one card on
	 * its own row; no extra rule is needed for that shape. */
	.tcf-interactive-discovery__grid:has(> :nth-child(2):last-child),
	.tcf-interactive-discovery__grid:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(2, 1fr);
		justify-content: initial;
	}
}

/* Mobile, 640px and below: every item count collapses to one column.
 * This block is declared after the tablet block, so at mobile widths
 * (a subset of the tablet range) it wins the same specificity-tied
 * cascade the same way the tablet block wins over the desktop
 * default — every fewer-card `:has()` variant is explicitly
 * addressed here, so none of them can go unopposed. */
@media (max-width: 640px) {
	.tcf-interactive-discovery {
		padding: 2.5rem 1.25rem;
	}

	.tcf-interactive-discovery__grid {
		grid-template-columns: 1fr;
	}

	/* One card may keep a reasonable capped, centered width on mobile. */
	.tcf-interactive-discovery__grid:has(> :nth-child(1):last-child) {
		grid-template-columns: minmax(0, 20rem);
		justify-content: center;
	}

	/* Two or three cards must NOT retain desktop or tablet columns —
	 * force the same single-column stack as every other item count. */
	.tcf-interactive-discovery__grid:has(> :nth-child(2):last-child),
	.tcf-interactive-discovery__grid:has(> :nth-child(3):last-child) {
		grid-template-columns: 1fr;
		justify-content: initial;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.tcf-interactive-discovery__card,
	.tcf-interactive-discovery__card-image img {
		transition: none;
	}

	.tcf-interactive-discovery__card:hover,
	.tcf-interactive-discovery__card:focus-within {
		transform: none;
	}
}