/*
 * Route `excellence` — CP Automotive Excellence Awards.
 *
 * Reproduces the approved `aea.html` prototype. The tokens below are the ones
 * the specification fixes (§6) and are declared locally rather than taken from
 * the platform's brand variables on purpose: this is a second programme with
 * its own palette, and it must not drift when the People's Choice brand colours
 * are re-themed from Branding.
 *
 * Typography: Inter for all English. Arabic uses Cairo — the platform's own
 * `--brand-font` — rather than the Noto pair the specification named, because
 * the client asked for one Arabic face across the whole site and a second one
 * on a single page reads as a mistake, not as a second programme. Fraunces is
 * deliberately absent — an earlier draft used it and it was explicitly dropped.
 */

.aea-page {
	--aea-blue: #00236a;
	--aea-blue-dark: #001c54;
	--aea-blue-deep: #00112e;
	--aea-blue-50: #eaf0fa;
	--aea-blue-100: #c9d6ed;
	--aea-steel-200: #c7ccd0;
	--aea-radius: 18px;
	--aea-shadow: 0 10px 30px rgba(0, 35, 106, 0.14);

	background: #fff;
	color: var(--aea-blue-deep);
	font-family: 'Inter', system-ui, sans-serif;
}

.aea-page .wrap {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 6vw;
}

/* ==========================================================================
   Logo header
   ========================================================================== */

.aea-logo-header {
	text-align: center;
	padding: 48px 6vw 26px;
	background: linear-gradient(180deg, var(--aea-blue-50) 0%, #fff 100%);
}

/*
 * `margin-inline: auto`, not `text-align: center` on the parent: the platform
 * stylesheet sets `img { display: block }`, and a block-level image ignores its
 * parent's text alignment — which is why the mark sat hard against the start
 * edge, on the left in English and the right in Arabic.
 */
.aea-logo {
	inline-size: 190px;
	block-size: auto;
	margin-inline: auto;
	filter: drop-shadow(0 12px 24px rgba(27, 99, 183, 0.25));
}

@media (max-width: 640px) {

	.aea-logo {
		inline-size: min(190px, 42vw);
		min-inline-size: 120px;
	}
}

.aea-kicker {
	margin-block-start: 16px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--aea-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.aea-kicker::before,
.aea-kicker::after {
	content: "";
	block-size: 1px;
	inline-size: 32px;
	background: linear-gradient(90deg, transparent, var(--aea-blue-100));
}

.aea-kicker::after {
	background: linear-gradient(90deg, var(--aea-blue-100), transparent);
}

/* ==========================================================================
   Intro — English left, Arabic right, divided
   ========================================================================== */

.aea-intro {
	padding-block: 24px 30px;
}

/*
 * Pinned to `ltr`. This block is a bilingual *pair*, not prose: English keeps
 * the left column and Arabic the right in both site directions, so the two
 * translations stay where the reader last saw them when the language switches.
 * Each column then declares its own direction, which is what makes the English
 * sentence keep its full stop at the end when the page is Arabic.
 *
 * Physical padding is deliberate here for the same reason — inside a container
 * whose direction is fixed, `padding-inline-start` resolves against each
 * column's own `dir` and would land on opposite sides of the divider.
 */
.aea-intro-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
	direction: ltr;
}

@media (min-width: 800px) {

	.aea-intro-grid {
		grid-template-columns: 1fr 1px 1fr;
		gap: 0;
	}
}

.aea-intro-col {
	direction: ltr;
	text-align: left;
	padding-left: 0;
	padding-right: 24px;
}

.aea-intro-col.is-ar {
	direction: rtl;
	text-align: right;
	padding-left: 24px;
	padding-right: 0;
}

@media (max-width: 799px) {

	.aea-intro-col,
	.aea-intro-col.is-ar {
		padding-inline: 0;
	}
}

.aea-intro-divider {
	background: var(--aea-steel-200);
}

.aea-intro-col h2 {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aea-blue);
	margin: 0 0 8px;
}

.aea-intro-col p {
	/* §5.4: 12.5px, 1.45 for English. */
	font-size: 12.5px;
	line-height: 1.45;
	color: #4b5a6b;
	margin: 0;
}

.aea-intro-col.is-ar h2,
.aea-intro-col.is-ar p {
	/* Cairo — the same Arabic face the rest of the site sets, so the two
	   programmes read as one publication rather than two. */
	font-family: var(--brand-font, 'Cairo', sans-serif);
}

.aea-intro-col.is-ar p {
	/* Same size as the English column, marginally more leading — Arabic needs
	   it to stay legible at an identical point size. */
	font-size: 12.5px;
	line-height: 1.6;
}

/* ==========================================================================
   Year tabs
   ========================================================================== */

.aea-years {
	text-align: center;
	padding: 20px 6vw;
	background: var(--aea-blue-50);
}

/* Years read oldest-to-newest left-to-right whatever the site direction: a
   mirrored strip puts 2027 before 2026 and reads as a mistake. */
.aea-year-tabs {
	display: inline-flex;
	direction: ltr;
	gap: 4px;
	border: 1.5px solid var(--aea-blue);
	border-radius: 999px;
	padding: 4px;
	background: #fff;
}

.aea-year-tab {
	border: none;
	background: transparent;
	border-radius: 999px;
	padding: 9px 26px;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--aea-blue-dark);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.aea-year-tab:hover,
.aea-year-tab:focus-visible {
	background: #fff;
	color: var(--aea-blue);
}

.aea-year-tab.is-active {
	background: var(--aea-blue);
	color: #fff;
}

/* ==========================================================================
   Category grid
   ========================================================================== */

.aea-categories {
	padding-block: 56px;
}

/* Same pairing rule as the intro: English heading left, Arabic heading right,
   in both site directions. */
.aea-cats-head {
	display: flex;
	direction: ltr;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-block-end: 30px;
	flex-wrap: wrap;
}

/*
 * §5.6: identical size and weight on both, verified in the inspector. Both
 * selectors resolve to the same declarations for exactly that reason — only
 * the family differs, and the Arabic half uses the site's own Cairo.
 */
.aea-cats-title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
	color: var(--aea-blue-deep);
	font-family: 'Inter', system-ui, sans-serif;
}

.aea-cats-title.is-ar {
	font-family: var(--brand-font, 'Cairo', sans-serif);
	color: var(--aea-blue-dark);
}

.aea-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (min-width: 640px) {

	.aea-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {

	.aea-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 22px;
	}
}

.aea-card {
	display: flex;
	flex-direction: column;
	text-align: center;
	border: 1.5px solid var(--aea-blue-100);
	border-radius: var(--aea-radius);
	overflow: hidden;
	background: #fff;
	padding: 0;
	margin: 0;
	inline-size: 100%;
	font: inherit;
	color: inherit;
	transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.aea-card.is-clickable {
	cursor: pointer;
}

.aea-card.is-clickable:hover,
.aea-card.is-clickable:focus-visible {
	box-shadow: var(--aea-shadow);
	transform: translateY(-4px);
	border-color: var(--aea-blue);
}

.aea-card.is-pending {
	cursor: default;
	opacity: 0.92;
}

.aea-card.is-active {
	border-color: var(--aea-blue);
	box-shadow: var(--aea-shadow);
}

.aea-card-top {
	display: block;
	padding: 16px 14px 12px;
}

.aea-cat-title {
	display: block;
	font-weight: 800;
	font-size: 14.5px;
	line-height: 1.3;
	margin-block-end: 6px;
	color: var(--aea-blue-deep);
	min-block-size: 38px;
}

.aea-cat-title-ar {
	display: block;
	font-family: var(--brand-font, 'Cairo', sans-serif);
	font-size: 12px;
	font-weight: 600;
	color: var(--aea-blue-dark);
}

.aea-thumb,
.aea-thumb-placeholder {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	display: block;
}

.aea-thumb {
	object-fit: cover;
}

.aea-thumb-placeholder {
	background: linear-gradient(135deg, var(--aea-blue-50), var(--aea-blue-100));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--aea-blue);
}

.aea-thumb-placeholder svg {
	inline-size: 32px;
	block-size: 32px;
	opacity: 0.5;
}

.aea-card-bottom {
	display: flex;
	justify-content: center;
	padding: 12px 14px 16px;
}

.aea-winner-box {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: var(--aea-blue-50);
	border: 1.5px solid var(--aea-blue);
	border-radius: 12px;
	padding: 7px 16px 8px;
	max-inline-size: 100%;
}

.aea-winner-label {
	font-size: 9.5px;
	font-weight: 800;
	color: var(--aea-blue);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.aea-winner-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--aea-blue-deep);
	line-height: 1.3;
}

.aea-pending-line {
	font-size: 11px;
	font-weight: 600;
	color: #8b93a0;
	font-style: italic;
}

.aea-legend {
	text-align: center;
	margin-block-start: 28px;
	font-size: 12.5px;
	color: #8b93a0;
}

.aea-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-inline: 10px;
}

.aea-dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	display: inline-block;
}

.aea-dot.is-blue {
	background: var(--aea-blue);
}

.aea-dot.is-grey {
	background: #c9ccd1;
}

.aea-empty {
	text-align: center;
}

/* ==========================================================================
   Inline detail panel
   ========================================================================== */

.aea-detail {
	border-block-start: 1px solid var(--aea-blue-100);
	margin-block-start: 44px;
	padding-block-start: 6px;
}

.aea-detail[hidden] {
	display: none;
}

.aea-detail-banner {
	position: relative;
	inline-size: 100%;
	block-size: 44vh;
	min-block-size: 300px;
	max-block-size: 440px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: #00112e;
	border-radius: var(--aea-radius);
	margin-block-start: 26px;
}

.aea-detail-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 44, 80, 0.3) 0%, rgba(13, 44, 80, 0.65) 60%, rgba(13, 44, 80, 0.94) 100%);
}

/*
 * Physical alignment, set from the *page* direction rather than each element's
 * own. The eyebrow and the winner name carry `dir="auto"` so a name typed in
 * either script gets correct bidi; without this rule that also flips their
 * `text-align: start`, and the banner ends up with the pill and the Arabic
 * category line on one edge and the winner's name on the other.
 */
.aea-detail-banner-inner,
.aea-detail-cat-ar,
.aea-detail-desc p {
	text-align: left;
}

[dir='rtl'] .aea-detail-banner-inner,
[dir='rtl'] .aea-detail-cat-ar,
[dir='rtl'] .aea-detail-desc p {
	text-align: right;
}

.aea-detail-banner-inner {
	position: relative;
	z-index: 2;
	block-size: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px;
	color: #fff;
}

/*
 * The banner is dark in both colour schemes, so everything printed on it uses
 * literal colours rather than the page tokens — a token that legitimately
 * inverts for dark mode would put pale text on this white pill.
 */
.aea-detail-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: #fff;
	color: #00112e;
	padding: 6px 14px;
	border-radius: 999px;
	margin-block-end: 14px;
	inline-size: fit-content;
}

.aea-detail-eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #c9d6ed;
}

.aea-detail-cat-ar {
	display: block;
	font-family: var(--brand-font, 'Cairo', sans-serif);
	font-size: 13px;
	color: #dce9f8;
	margin: 2px 0 12px;
}

.aea-detail-name {
	font-size: clamp(22px, 3.6vw, 34px);
	margin: 0;
	font-weight: 800;
	line-height: 1.12;
	color: #fff;
}

.aea-detail-body {
	max-inline-size: 900px;
	margin-inline: auto;
}

.aea-detail-section {
	font-size: 16px;
	font-weight: 700;
	margin: 30px 0 14px;
	color: var(--aea-blue-deep);
}

.aea-gallery {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding-block-end: 8px;
	scroll-snap-type: x mandatory;
}

.aea-gallery::-webkit-scrollbar {
	block-size: 6px;
}

.aea-gallery::-webkit-scrollbar-thumb {
	background: var(--aea-blue-100);
	border-radius: 3px;
}

.aea-gallery button {
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid var(--aea-blue-100);
	border-radius: 12px;
	background: none;
	cursor: pointer;
	overflow: hidden;
	scroll-snap-align: start;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aea-gallery button:hover,
.aea-gallery button:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--aea-shadow);
}

.aea-gallery img {
	inline-size: 200px;
	block-size: 136px;
	object-fit: cover;
	display: block;
}

.aea-detail-desc p {
	font-size: 14.5px;
	line-height: 1.7;
	color: #3a4a5c;
	margin: 0 0 10px;
}

.aea-detail-desc p.is-ar {
	font-family: var(--brand-font, 'Cairo', sans-serif);
	line-height: 1.85;
}

.aea-detail-desc p:empty {
	display: none;
}

.aea-close-detail {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--aea-blue-dark);
	background: var(--aea-blue-50);
	border: none;
	padding: 9px 18px;
	border-radius: 999px;
	cursor: pointer;
	margin-block-start: 30px;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

/*
 * Pinned to `ltr` so "previous" is always the left arrow. The keyboard and
 * swipe handlers move by a physical direction; mirroring the controls in Arabic
 * would make the left arrow advance and the right arrow go back. */
.aea-lightbox {
	position: fixed;
	direction: ltr;
	inset: 0;
	background: rgba(13, 44, 80, 0.95);
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aea-lightbox[hidden] {
	display: none;
}

.aea-lb-image {
	max-inline-size: 86vw;
	max-block-size: 78vh;
	border-radius: 10px;
}

.aea-lb-close {
	position: absolute;
	inset-block-start: 22px;
	inset-inline-end: 28px;
	background: none;
	border: none;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.aea-lb-arrow {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: 46px;
	block-size: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
}

.aea-lb-arrow.is-prev {
	inset-inline-start: 24px;
}

.aea-lb-arrow.is-next {
	inset-inline-end: 24px;
}

.aea-lb-count {
	position: absolute;
	inset-block-end: 26px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* ==========================================================================
   Dark mode — the page keeps its own palette, the chrome follows the site
   ========================================================================== */

/*
 * Dark mode is done at the token level rather than by patching individual
 * rules. The light palette is built on one navy used for text, borders, icons
 * and fills alike; re-pointing those six variables re-colours every rule that
 * reads them at once, which is why the previous per-rule approach kept leaving
 * things behind — the kicker, the section labels, the Arabic card subtitles,
 * the "WINNER" caption and the placeholder tiles were all still painting navy
 * on navy.
 *
 * The values below were checked against the surface each one lands on: body
 * text 14.9:1, accent text 6.6:1, muted text 5.3:1 — all clear of WCAG AA.
 */

[data-theme='dark'] .aea-page {
	--aea-blue: #7aa6ea;
	--aea-blue-dark: #b9cdf0;
	--aea-blue-deep: #e8eefb;
	--aea-blue-50: #15294a;
	--aea-blue-100: #2d4d84;
	--aea-steel-200: #2b3b57;
	--aea-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);

	background: #0b1830;
	color: #e8eefb;
}

[data-theme='dark'] .aea-logo-header {
	background: linear-gradient(180deg, #14294a 0%, #0b1830 100%);
}

[data-theme='dark'] .aea-card {
	background: #10203c;
}

/* Muted copy: the light values are near-black greys and vanish on navy. */
[data-theme='dark'] .aea-intro-col p {
	color: #aebfd8;
}

[data-theme='dark'] .aea-pending-line,
[data-theme='dark'] .aea-legend {
	color: #93a6c6;
}

[data-theme='dark'] .aea-detail-desc p {
	color: #c6d3e8;
}

[data-theme='dark'] .aea-dot.is-grey {
	background: #5f7395;
}

/* Surfaces that are literal white in the light scheme. */
[data-theme='dark'] .aea-year-tabs {
	background: #0b1830;
}

[data-theme='dark'] .aea-year-tab:hover,
[data-theme='dark'] .aea-year-tab:focus-visible {
	background: #16294a;
	color: #dbe6fa;
}

/*
 * The active tab is the one place the accent is a *fill* rather than text, so
 * it needs its own value: the lightened accent would leave white text on a
 * pale blue pill at 2.3:1.
 */
[data-theme='dark'] .aea-year-tab.is-active {
	background: #1e4fa3;
	color: #fff;
}