/*
 * Route `previous_winners` — past award years.
 *
 * Ported from `pca-web/previous-winners.html`, with the prototype's hexes
 * swapped for the semantic tokens in public.css and its physical offsets for
 * logical ones.
 *
 * Per-route stylesheets are enqueued one at a time (`Assets::route_asset()`),
 * so `winners.css` does *not* load on this route — but this page renders the
 * same `winner-card` partial, the same `section-heading-row` and the same year
 * tabs as `/winners`. Rather than restate ~120 lines that would then have to be
 * kept in sync by hand, the shared treatment is pulled in verbatim and only the
 * genuine deltas live below. `@import` resolves relative to this file, so it
 * always points at the sibling stylesheet.
 */

@import url('winners.css');

/* ==========================================================================
   1. Page heading
   ========================================================================== */

/* The `/winners` heading is an `h1` too, but the year on this page is a
   `year-badge` (a plain archive marker) rather than the live `status-badge`. */
.section-heading-row .year-badge {
	font-size: clamp(15px, 2.2vw, 19px);
	font-weight: 800;
	color: var(--heading-ink);
	background: var(--blue-pale);
	padding: 5px 18px;
	border-radius: 999px;
	white-space: nowrap;
}

/* ==========================================================================
   2. Year tabs
   ========================================================================== */

/* The tab row is the page's only navigation, so it gets the prototype's wider
   gap below it before the grid begins; `/winners` sits above an ad slot and
   uses a tighter 34px. Everything else about `.year-tab` / `.is-active` — the
   pill shape, 2px outline, weights and hover — is inherited unchanged. */
.year-tabs {
	margin-block: 28px 42px;
}

/* ==========================================================================
   3. Winners grid
   ========================================================================== */

/*
 * `.winners-grid` deliberately adds no `grid-template-columns` of its own.
 * The template renders `class="pca-grid winners-grid"`, and `.pca-grid` in
 * public.css is the platform's 5 desktop / 3 tablet / 2 mobile contract
 * (spec file 07 §4). The prototype's 3/2/1 predates that rule; overriding here
 * would silently fork this one page away from every other card grid.
 */
/* `/winners` splits its heading and its grid across two sections and puts the
   closing gap on `.winners-grid-section`; this route has a single section, so
   the same 56px has to land on it directly. */
.winners-section {
	padding-block-end: 56px;
}

/* ==========================================================================
   4. Empty state
   ========================================================================== */

/* `/winners` scopes this under `.winners-grid-section`, a wrapper this route
   does not use — its empty state sits directly inside `.winners-section`. */
.winners-section .pca-empty .ar {
	display: block;
	direction: rtl;
	margin-block-end: 6px;
	font-weight: 800;
	color: var(--blue-bright);
}

.winners-section .pca-empty p {
	max-width: 520px;
	margin: 0 auto 18px;
	line-height: 1.7;
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

@media (max-width: 639px) {
	.year-tabs {
		margin-block: 20px 28px;
	}
}