/*
 * Route `winner_detail` — the full winner page.
 *
 * Ported from `awards/winner.html`: every length, radius, weight and breakpoint
 * below is the prototype's value. What changed is *how* the colour is named —
 * each raw hex became the semantic token declared in public.css so dark mode is
 * inherited rather than re-implemented — and every physical offset became a
 * logical property so the page mirrors in Arabic.
 *
 * The prototype's steel greys (`--steel-100/200`) have no semantic equivalent
 * because they only ever appear on the hero, which is dark in both themes. There
 * they survive as translucent whites, which is what they were being used for.
 *
 * Shared chrome (`.wrap`, `.btn`, `.pca-field`, `.pca-empty`, `.pca-lightbox`,
 * `.section-heading`) comes from public.css and is never redefined here.
 */

/* ==========================================================================
   1. Back link
   ========================================================================== */

/* The link sits outside `.wrap` in the template, so it reproduces the wrap's
   inline gutter itself: 24px on narrow viewports, and the same optical margin
   as the centred content once the page is wider than `--max`. */
.backlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 800;
	color: var(--heading-ink);
	margin-block-start: 16px;
	margin-inline-start: max(24px, calc((100% - var(--max)) / 2 + 24px));
}

.backlink:hover {
	color: var(--blue-bright);
}

/* The arrow glyph is directional; the label is not. */
[dir='rtl'] .backlink .pca-chevron {
	display: inline-flex;
	transform: scaleX(-1);
}

/* ==========================================================================
   2. Hero banner
   ========================================================================== */

.winner-banner {
	position: relative;
	width: 100%;
	height: 56vh;
	min-height: 360px;
	max-height: 560px;
	overflow: hidden;
	margin-block-start: 10px;
	background-color: var(--navy-darker);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.winner-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 31, 58, 0.25) 0%, rgba(11, 31, 58, 0.55) 60%, rgba(11, 31, 58, 0.92) 100%);
}

.winner-banner-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block-end: 34px;
	color: #fff;
}

.winner-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin-block-end: 14px;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: linear-gradient(180deg, #fff, #c7ccd0);
	color: var(--navy-deep);
}

.winner-tag .badge-primary {
	white-space: nowrap;
}

.winner-tag .badge-secondary {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.78;
	white-space: nowrap;
}

.winner-banner .eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.winner-banner .ar-cat {
	display: block;
	margin-block: 2px 14px;
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.88);
}

.winner-banner-content h1 {
	margin: 0;
	/* The prototype's 500 belongs to a serif face; the PCA brand font ships
	   400/600/700/800/900, so the nearest display weight is used. */
	font-weight: 900;
	font-size: clamp(30px, 5vw, 58px);
	line-height: 1.02;
}

/* ==========================================================================
   3. Section shell and headings
   ========================================================================== */

.winner-section {
	padding-block: 44px;
}

.winner-section .section-heading {
	margin-block-end: 20px;
}

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

.section-heading-row h2 {
	margin: 0;
	font-size: 22px;
	font-weight: 900;
	color: var(--heading-ink);
}

.section-heading-row .ar {
	direction: rtl;
	font-size: 18px;
	font-weight: 800;
	color: var(--blue-bright);
}

/* The winner page reads as a document, not a landing page: its headings run
   from the start edge rather than centred like the shared default. */
.section-heading-start {
	text-align: start;
}

.section-heading-start .section-heading-row {
	justify-content: flex-start;
}

/* ==========================================================================
   4. Gallery
   ========================================================================== */

/* The strip reserves 8px below itself for its scrollbar gutter, which already
   supplies part of the section's closing rhythm. */
.winner-gallery {
	padding-block-end: 36px;
}

.gallery-shell {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gallery-strip {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: safe center;
	gap: 14px;
	overflow-x: auto;
	padding-block-end: 8px;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--card-border) transparent;
}

.gallery-strip::-webkit-scrollbar {
	height: 6px;
}

.gallery-strip::-webkit-scrollbar-thumb {
	background: var(--card-border);
	border-radius: 3px;
}

.gallery-thumb {
	flex: 0 0 auto;
	width: 320px;
	height: 214px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-radius: 12px;
	background: var(--blue-pale);
	scroll-snap-align: start;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-thumb:hover,
.gallery-thumb:focus-visible {
	transform: translateY(-3px);
	border-color: var(--blue-bright);
	box-shadow: var(--shadow);
}

.gallery-nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1.5px solid var(--card-border);
	border-radius: 50%;
	background: var(--card-bg);
	color: var(--heading-ink);
	font-size: 15px;
	line-height: 1;
	transition: border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

/* The template ships the buttons hidden and the script reveals them only when
   the strip actually overflows — `display:flex` above must not defeat that. */
.gallery-nav[hidden] {
	display: none;
}

.gallery-nav:hover:not(:disabled) {
	border-color: var(--blue-bright);
	color: var(--blue-bright);
}

.gallery-nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Chevrons point along the reading direction, so they flip with it. */
[dir='rtl'] .gallery-prev,
[dir='rtl'] .gallery-next {
	transform: scaleX(-1);
}

/* ==========================================================================
   5. Why It Won
   ========================================================================== */

.winner-desc p {
	max-width: 760px;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--body-ink);
}

.winner-desc .desc-secondary {
	margin-block-start: 12px;
	color: var(--muted);
}

/* ==========================================================================
   6. Features
   ========================================================================== */

/* Features is the one section with no heading of its own — it continues the
   description above it, so it does not restate that section's opening gap. */
.winner-features {
	padding-block-start: 0;
}

.features-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}

@media (min-width: 720px) {
	.features-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.feature-col h3 {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 800;
	color: var(--heading-ink);
}

.feature-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.feature-col li {
	position: relative;
	padding-inline-start: 20px;
	margin-block-end: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--body-ink);
}

.feature-col li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--heading-ink);
}

.winner-divider {
	height: 1px;
	margin-block-start: 34px;
	background: var(--card-border);
}

/* ==========================================================================
   7. Details
   ========================================================================== */

.details-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 40px;
}

@media (min-width: 640px) {
	.details-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.detail-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-block: 13px;
	border-bottom: 1px solid var(--card-border);
	font-size: 14px;
}

.detail-row .label {
	font-weight: 800;
	color: var(--muted);
}

.detail-row .label-alt {
	display: block;
	margin-block-start: 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--blue-bright);
}

.detail-row .value {
	text-align: end;
	color: var(--body-ink);
}

/* Prices stay LTR inside an RTL page — a reversed figure is a wrong figure. */
.winner-details .pca-price {
	direction: ltr;
	unicode-bidi: isolate;
}

.detail-row-colors {
	align-items: center;
}

.colors-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
}

.swatch-wrap {
	position: relative;
	display: inline-flex;
}

.swatch {
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid var(--card-border);
	border-radius: 50%;
}

/* The colour name must survive a page that has no pointer at all, so the tip is
   a real element toggled by hover, focus *and* the script's tap handler — never
   a `title` attribute or a `:hover`-only reveal. */
.swatch-tip {
	position: absolute;
	inset-block-end: calc(100% + 8px);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 5;
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--navy-darker);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

[dir='rtl'] .swatch-tip {
	transform: translateX(50%);
}

.swatch-wrap:hover .swatch-tip,
.swatch:focus-visible + .swatch-tip,
.swatch-tip.is-visible {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   8. Dealership
   ========================================================================== */

/*
 * The prototype renders the dealership card and the showroom grid inside one
 * section. The template splits them so either can disappear on its own, so the
 * pair closes the gap between them and reads as a single block again — 26px is
 * the prototype's `.dealer-card` bottom margin.
 */
.winner-dealer {
	padding-block-end: 0;
}

.winner-showrooms {
	padding-block-start: 26px;
}

.dealer-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--card-border);
	border-radius: 16px;
	background: var(--card-bg);
}

.dealer-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--navy-deep);
}

.dealer-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
}

.dealer-name {
	font-size: 16px;
	font-weight: 800;
	color: var(--heading-ink);
}

.dealer-name span {
	display: block;
	margin-block-start: 2px;
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
}

/* ==========================================================================
   9. Showrooms and contact cards
   ========================================================================== */

/* The brochure button already carries the prototype's 22px stand-off below the
   contact grid, so the section does not add a second one. */
.winner-contact {
	padding-block-end: 22px;
}

.info-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media (min-width: 640px) {
	.info-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.info-card {
	padding: 16px 18px;
	border: 1px solid var(--card-border);
	border-radius: 14px;
	background: var(--card-bg);
}

.info-card .label {
	display: block;
	margin-block-end: 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.info-address {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--body-ink);
}

.info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-block: 6px;
	font-size: 14px;
}

.info-row-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.info-row-text small {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--muted);
}

.winner-section .pca-tel {
	direction: ltr;
	unicode-bidi: isolate;
	font-weight: 700;
}

.info-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 800;
	color: var(--heading-ink);
	border-bottom: 1.5px solid var(--heading-ink);
	overflow-wrap: anywhere;
}

.info-link:hover {
	color: var(--blue-bright);
	border-bottom-color: var(--blue-bright);
}

[dir='rtl'] .info-link .pca-chevron {
	display: inline-flex;
	transform: scaleX(-1);
}

.chip-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--heading-ink);
	border-radius: 999px;
	background: var(--card-bg);
	color: var(--heading-ink);
	font-size: 12.5px;
	font-weight: 800;
	white-space: nowrap;
}

.chip-btn.solid {
	background: var(--navy-deep);
	border-color: var(--navy-deep);
	color: #fff;
}

.chip-btn:hover {
	opacity: 0.85;
}

.brochure-row {
	margin-block-start: 22px;
}

.brochure-btn {
	gap: 8px;
	font-size: 14px;
}

/* ==========================================================================
   10. Send a message
   ========================================================================== */

/* Last section on the page: it carries the stand-off from the site footer. */
.winner-message {
	padding-block-end: 56px;
}

.msg-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 560px;
}

.msg-form textarea {
	min-height: 110px;
	resize: vertical;
}

.msg-form button[type='submit'] {
	align-self: flex-start;
}

/* ==========================================================================
   11. Not-found state
   ========================================================================== */

.winner-missing {
	padding-block: 64px;
}

.winner-missing .pca-empty .ar {
	display: block;
	direction: rtl;
	margin-block-end: 6px;
	font-weight: 800;
	color: var(--blue-bright);
}

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

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 639px) {
	.winner-banner {
		height: 46vh;
		min-height: 300px;
	}

	.winner-section {
		padding-block: 32px;
	}

	.gallery-thumb {
		width: 232px;
		height: 156px;
	}

	.detail-row {
		flex-direction: column;
		gap: 4px;
	}

	.detail-row .value {
		text-align: start;
	}

	.colors-row {
		justify-content: flex-start;
	}
}


/* -- Dealer panel -------------------------------------------------------
   Sits directly under the gallery and answers "who do I contact about this
   car". Centred as a single column: the facts are read top to bottom, not
   scanned across, and a centred block under a centred gallery reads as one
   unit rather than two competing left edges. */
.dealer-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-inline-size: 560px;
	margin-inline: auto;
	padding: 28px 24px;
	text-align: center;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius, 22px);
	box-shadow: var(--shadow);
}

.dealer-panel-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 132px;
	block-size: 132px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--card-border);
	border-radius: 18px;
}

.dealer-panel-logo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.dealer-facts {
	inline-size: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dealer-fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-block-end: 14px;
	border-block-end: 1px dashed var(--card-border);
}

.dealer-fact:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.dealer-fact dt {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted, #5a6b86);
}

.dealer-fact dd {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--ink, #0b1830);
	overflow-wrap: anywhere;
}

.dealer-fact dd a {
	color: var(--blue-bright, #009cde);
	text-decoration: none;
	font-weight: 700;
}

.dealer-fact dd a:hover,
.dealer-fact dd a:focus-visible {
	text-decoration: underline;
}

.dealer-phone {
	display: block;
}

.dealer-phone + .dealer-phone {
	margin-block-start: 6px;
}

.dealer-phone small {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--muted, #5a6b86);
}

.dealer-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

@media (max-width: 640px) {
	.dealer-panel {
		padding: 22px 16px;
	}

	.dealer-panel-logo {
		inline-size: 104px;
		block-size: 104px;
	}
}