/*
 * Design System - AELITA
 * components/brand-page.css - car-brand taxonomy page (taxonomy-cars_brands.php,
 * top-level terms only).
 *
 * Composition follows the Stitch screen "HYUNDAI — Офіційний дилер Автохолдинг
 * AELITA", expressed with AELITA brand tokens: MyriadSetPro, one red accent
 * (--c-red-600), sharp corners (--radius: 0), flat surfaces, restrained motion.
 *
 * Everything is scoped under .a-brand-page, so no other page or term is
 * affected. Consumes tokens.css / layout.css only: no raw hex, no !important
 * (except the local focus rings the legacy theme forces), no `transition: all`.
 * Hover effects are gated behind (hover: hover) and (pointer: fine).
 *
 * Loaded only for top-level cars_brands terms (see inc/enqueue.php; buttons,
 * car cards, news cards and dealer cards are enqueued alongside it).
 */

/* -------------------------------------------------------------------- */
/* Page shell                                                           */
/* -------------------------------------------------------------------- */
.a-brand-page {
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	overflow-x: clip;
}

.a-brand-page__section {
	padding-block: var(--section-space);
}

.a-brand-page__section--muted {
	background-color: var(--bg-muted);
}

.a-brand-page__section--invert {
	background-color: var(--bg-invert);
	color: var(--c-ink-100);
}

/* -------------------------------------------------------------------- */
/* Live data bar (crumbs + counters; bar surface lives in breadcrumbs.css) */
/* -------------------------------------------------------------------- */
.a-brand-page__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-5);
	font-size: var(--fs-small);
	color: var(--text-secondary);
}

.a-brand-page__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.a-brand-page__dot {
	width: 8px;
	height: 8px;
	background-color: var(--c-red-600);
}

/* -------------------------------------------------------------------- */
/* Section header                                                       */
/* -------------------------------------------------------------------- */
.a-brand-page__head {
	margin-bottom: var(--space-6);
}

.a-brand-page__head--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
}

.a-brand-page__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-red-500);
}

/* The red accent is carried by the marker on every background; the label
 * itself switches to a light neutral on dark sections so the small text stays
 * WCAG AA (the brand red does not reach 4.5:1 on --bg-invert). */
.a-brand-page__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 2px;
	background-color: var(--c-red-600);
}

.a-brand-page__section--invert .a-brand-page__eyebrow {
	color: var(--c-ink-100);
}

.a-brand-page__section-title {
	margin: 0;
	font-family: var(--font-display-strong);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-transform: uppercase;
	color: var(--text-primary);
}

.a-brand-page__section--invert .a-brand-page__section-title {
	color: var(--c-white);
}

/* -------------------------------------------------------------------- */
/* Hero                                                                 */
/* -------------------------------------------------------------------- */
.a-brand-page__hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-8) var(--space-7);
}

/* Brand banner behind the hero content (taxonomy image, when present). */
.a-brand-page__hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.a-brand-page__hero-bg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Legibility scrim only when the banner is used as the background. */
.a-brand-page__hero--media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		90deg,
		rgba(22, 22, 24, 0.95) 0%,
		rgba(22, 22, 24, 0.86) 50%,
		rgba(22, 22, 24, 0.78) 100%
	);
}

.a-brand-page__hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: center;
}

.a-brand-page__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display-strong);
	font-size: var(--fs-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-display);
	text-transform: uppercase;
	color: var(--text-on-brand);
}

/* Light outline button for use on the dark hero. */
.a-brand-page__button--on-dark {
	--btn-bg: transparent;
	--btn-fg: var(--c-white);
	--btn-border: rgba(255, 255, 255, 0.5);
	--btn-bg-hover: rgba(255, 255, 255, 0.12);
	--btn-fg-hover: var(--c-white);
	--btn-border-hover: var(--c-white);
}

.a-brand-page__lead {
	max-width: var(--measure);
	margin: 0 0 var(--space-5);
	font-size: var(--fs-body);
	color: var(--text-secondary);
}

.a-brand-page__section--invert .a-brand-page__lead {
	color: var(--c-ink-100);
}

.a-brand-page__hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Compact live stats (cars in stock + dealer centres). */
.a-brand-page__stats {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-self: start;
	gap: var(--space-2) var(--space-6);
	padding: var(--space-3) var(--space-4);
	border: var(--border-w) solid rgba(255, 255, 255, 0.22);
	background-color: rgba(22, 22, 24, 0.35);
}

.a-brand-page__stat {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
}

.a-brand-page__stat-value {
	font-family: var(--font-display-strong);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--c-red-500);
}

.a-brand-page__stat-label {
	font-size: var(--fs-caption);
	color: var(--c-ink-100);
	white-space: nowrap;
}

/* -------------------------------------------------------------------- */
/* Model range (search-style tiles)                                     */
/* -------------------------------------------------------------------- */
.a-brand-page__models {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-brand-page__model {
	display: flex;
}

/* Mirrors the search .a-model-card tile, with a slightly larger image and name. */
.a-brand-page__model-link {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	width: 100%;
	height: 100%;
	padding: var(--space-3);
	border: var(--border-w) solid var(--border);
	background-color: var(--bg);
	color: var(--text-primary);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--dur-popover) var(--ease-out);
}

.a-brand-page__model-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 7;
	overflow: hidden;
}

.a-brand-page__model-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform var(--dur-overlay) var(--ease-out);
}

.a-brand-page__model-name {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------- */
/* Cars in stock                                                        */
/* -------------------------------------------------------------------- */
.a-brand-page__cars {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

.a-brand-page__more {
	margin: var(--space-6) 0 0;
}

.a-brand-page__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
	text-decoration: none;
}

.a-brand-page__link svg,
.a-brand-page__link span[aria-hidden] {
	transition: transform var(--dur-press) var(--ease-out);
}

/* -------------------------------------------------------------------- */
/* Brand DNA (existing rich text)                                       */
/* -------------------------------------------------------------------- */
.a-brand-page__prose {
	width: 100%;
	color: var(--text-primary);
}

.a-brand-page__prose > :first-child {
	margin-top: 0;
}

.a-brand-page__prose :where(h2, h3, h4) {
	margin: var(--space-6) 0 var(--space-3);
	font-family: var(--font-display-strong);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-transform: none;
	color: var(--text-primary);
}

.a-brand-page__prose h2 {
	font-size: var(--fs-h3);
}

.a-brand-page__prose h3 {
	font-size: var(--fs-h4);
}

.a-brand-page__prose p {
	margin: 0 0 var(--space-4);
}

.a-brand-page__prose ul,
.a-brand-page__prose ol {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-6);
	list-style-position: outside;
}

.a-brand-page__prose ul {
	list-style-type: disc;
}

.a-brand-page__prose ol {
	list-style-type: decimal;
}

.a-brand-page__prose li {
	margin-bottom: var(--space-3);
}

.a-brand-page__prose li:last-child {
	margin-bottom: 0;
}

/* The source content opens each list item with a bold term, then the text.
 * Put that term on its own line so the list reads as formatted entries. */
.a-brand-page__prose li > b:first-child,
.a-brand-page__prose li > strong:first-child {
	display: block;
	margin-bottom: var(--space-1);
}

/* Nested lists. */
.a-brand-page__prose li > ul,
.a-brand-page__prose li > ol {
	margin-top: var(--space-2);
	margin-bottom: 0;
}

.a-brand-page__prose li::marker {
	color: var(--c-ink-500);
	font-weight: var(--fw-semibold);
}

.a-brand-page__prose a {
	color: var(--c-red-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.a-brand-page__prose strong {
	color: var(--text-primary);
}

.a-brand-page__prose img {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------- */
/* News                                                                 */
/* -------------------------------------------------------------------- */
.a-brand-page__news {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

/* -------------------------------------------------------------------- */
/* Dealers                                                              */
/* -------------------------------------------------------------------- */
.a-brand-page__dealers {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	align-items: stretch;
}

/* -------------------------------------------------------------------- */
/* Test-drive / consultation form                                       */
/* -------------------------------------------------------------------- */
.a-brand-page__testdrive-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

/* Keep the anchored test-drive section clear of the sticky header. */
.a-brand-page__testdrive {
	scroll-margin-top: 96px;
}

.a-brand-page__form {
	display: grid;
	gap: var(--space-4);
}

.a-brand-page__form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.a-brand-page__field {
	display: grid;
	gap: var(--space-2);
}

.a-brand-page__field-label {
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.a-brand-page__form input {
	width: 100%;
	min-height: calc(var(--space-6) + var(--space-3));
	padding: var(--space-3) var(--space-4);
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	background-color: var(--bg);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-heading);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--dur-press) var(--ease-out);
}

.a-brand-page__form input::placeholder {
	color: var(--text-secondary);
}

.a-brand-page__form input.is-invalid {
	border-color: var(--c-red-500);
}

.a-brand-page__form-actions {
	display: grid;
	gap: var(--space-3);
	justify-items: start;
}

.a-brand-page__privacy {
	margin: 0;
	font-size: var(--fs-caption);
	line-height: 1.5;
	color: var(--text-secondary);
}

.a-brand-page__privacy a {
	color: var(--text-primary);
	text-decoration: underline;
}

.a-brand-page__form-status:not(:empty) {
	margin-top: var(--space-3);
	padding-left: var(--space-3);
	border-left: 3px solid var(--c-ink-500);
	font-size: var(--fs-small);
	color: var(--text-primary);
}

.a-brand-page__form-status.is-error {
	border-left-color: var(--c-red-600);
}

.a-brand-page__form-status.is-success {
	border-left-color: var(--status-success);
}

/* -------------------------------------------------------------------- */
/* Breakpoints                                                          */
/* -------------------------------------------------------------------- */
@media (min-width: 600px) {
	.a-brand-page__models {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.a-brand-page__cars,
	.a-brand-page__news {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.a-brand-page__form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.a-brand-page__dealers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.a-brand-page__hero {
		padding-block: var(--space-9) var(--space-8);
	}

	.a-brand-page__hero-grid {
		grid-template-columns: 7fr 5fr;
		gap: var(--space-7);
	}

	.a-brand-page__cars {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.a-brand-page__news {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.a-brand-page__dealers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.a-brand-page__testdrive-grid {
		grid-template-columns: 5fr 7fr;
		gap: var(--space-8);
	}
}

/* -------------------------------------------------------------------- */
/* States                                                               */
/* -------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.a-brand-page__model-link:hover {
		border-color: var(--c-ink-300);
	}

	.a-brand-page__model-link:hover .a-brand-page__model-img {
		transform: scale(1.08);
	}

	.a-brand-page__link:hover {
		color: var(--c-red-600);
	}

	.a-brand-page__link:hover svg,
	.a-brand-page__link:hover span[aria-hidden] {
		transform: translateX(3px);
	}

	.a-brand-page__privacy a:hover {
		color: var(--c-red-500);
	}
}

/* The legacy theme ships `*:focus { outline: none !important }`, so the local
 * focus rings need !important (same pattern as the header/nav components). */
.a-brand-page a:focus-visible,
.a-brand-page button:focus-visible,
.a-brand-page input:focus-visible,
.a-brand-page select:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Reduced motion                                                       */
/* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.a-brand-page__model-link,
	.a-brand-page__model-img,
	.a-brand-page__link svg,
	.a-brand-page__link span[aria-hidden],
	.a-brand-page__form input {
		transition-duration: 0.01ms;
	}

	.a-brand-page__model-link:hover .a-brand-page__model-img {
		transform: none;
	}

	.a-brand-page__link:hover svg,
	.a-brand-page__link:hover span[aria-hidden] {
		transform: none;
	}
}