/*
 * Route `winners` — this year's winners grid.
 *
 * Ported from `pca-web/current-winners.html` (chrome, colour, card treatment)
 * and `awards/winners.html` (badge over a 4:3 photo, whole card clickable),
 * with every raw hex swapped for the semantic tokens so dark mode is automatic
 * and every physical offset swapped for a logical one so RTL mirrors.
 *
 * The grid itself is `.pca-grid` from public.css — 5 desktop / 3 tablet /
 * 2 mobile (spec file 02 §4). Nothing here overrides those breakpoints.
 */

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

.winners-section {
	padding: 48px 0 12px;
}

.winners-section + .winners-section {
	padding-top: 0;
}

.winners-grid-section {
	padding-bottom: 56px;
}

.winners-section .section-heading {
	margin-bottom: 0;
}

.section-heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.section-heading-row h1,
.section-heading-row h2,
.section-heading-row h3 {
	font-size: clamp(20px, 3vw, 30px);
	font-weight: 900;
	color: var(--heading-ink);
	margin: 0;
}

.section-heading-row .ar {
	direction: rtl;
	font-size: clamp(17px, 2.6vw, 24px);
	font-weight: 800;
	color: var(--blue-bright);
}

.section-heading-row .status-badge {
	font-size: clamp(13px, 1.9vw, 15px);
	font-weight: 800;
	color: var(--heading-ink);
	background: var(--blue-pale);
	padding: 5px 16px;
	border-radius: 999px;
	white-space: nowrap;
}

.winners-intro {
	text-align: center;
	color: var(--muted);
	font-size: 14px;
	max-width: 640px;
	margin: 20px auto 0;
	line-height: 1.7;
}

.winners-intro .ar {
	display: block;
	direction: rtl;
	color: var(--blue-bright);
	font-weight: 700;
	margin-top: 4px;
}

/* ==========================================================================
   2. Year filter
   ========================================================================== */

.year-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 28px 0 34px;
}

.year-tab {
	padding: 10px 28px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 15px;
	border: 2px solid var(--heading-ink);
	color: var(--heading-ink);
	background: var(--card-bg);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.year-tab:hover {
	border-color: var(--blue-bright);
	color: var(--blue-bright);
}

.year-tab.is-active {
	background: var(--navy-deep);
	border-color: var(--navy-deep);
	color: #fff;
}

/* ==========================================================================
   3. Winner card
   ========================================================================== */

/* The prototype's bold navy outline reads as glare against a dark surface, so
   the border colour is a local custom property remapped for dark mode while the
   shape, weight and hover behaviour stay identical. */
.winner-card {
	--winner-card-border: var(--navy-deep);

	display: flex;
	flex-direction: column;
	border: 2px solid var(--winner-card-border);
	text-align: center;
	color: inherit;
	height: 100%;
}

[data-theme='dark'] .winner-card {
	--winner-card-border: var(--card-border);
}

.winner-card:hover,
.winner-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.winner-card .winner-photo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(160deg, var(--blue-pale) 0%, var(--card-bg) 100%);
}

.winner-card .winner-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.winner-card .winner-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52%;
	height: 52%;
	color: var(--heading-ink);
	opacity: 0.32;
}

.winner-card .winner-photo-placeholder svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.winner-card .winner-badge {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	flex-direction: column;
	gap: 0;
	line-height: 1.25;
	background: var(--navy-deep);
}

.winner-card .winner-badge .badge-secondary {
	font-size: 10px;
	font-weight: 800;
	opacity: 0.85;
	text-transform: none;
	letter-spacing: 0;
}

.winner-card .view-tag {
	position: absolute;
	bottom: 8px;
	inset-inline-end: 8px;
	z-index: 2;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.3px;
	background: rgba(0, 35, 106, 0.85);
	color: #fff;
	padding: 3px 9px;
	border-radius: 999px;
	opacity: 0;
	transition: opacity 0.18s ease;
}

.winner-card:hover .view-tag,
.winner-card:focus-visible .view-tag {
	opacity: 1;
}

.winner-card .winner-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 14px 18px;
}

.winner-card .cat-primary {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--heading-ink);
	line-height: 1.35;
}

.winner-card .cat-secondary {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--blue-bright);
	line-height: 1.35;
}

.winner-card .winner-name {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 900;
	color: var(--body-ink);
	line-height: 1.3;
}

@media (max-width: 639px) {
	.winner-card .winner-body {
		padding: 10px 10px 14px;
	}

	.winner-card .cat-primary {
		font-size: 11.5px;
	}

	.winner-card .cat-secondary {
		font-size: 10.5px;
	}

	.winner-card .winner-name {
		font-size: 13.5px;
	}

	.year-tab {
		padding: 8px 20px;
		font-size: 14px;
	}
}

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

.winners-grid-section .pca-empty .ar {
	display: block;
	direction: rtl;
	font-weight: 800;
	color: var(--blue-bright);
	margin-bottom: 6px;
}

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