/*
 * Design System - AELITA
 * components/home-brands.css - homepage "official representatives" brand grid.
 *
 * Redesign (WP4): light, minimal, mobile-first. Three CSS-only tabs (a radio
 * group, no JavaScript) switch between the brand groups; every brand of the
 * active group is shown at once in a compact grid. Consumes tokens.css /
 * layout.css only; no hex values, no Bootstrap grid.
 *
 * Loaded on the front page only (see inc/enqueue.php).
 */

/* -------------------------------------------------------------------- */
/* Section                                                              */
/* -------------------------------------------------------------------- */
.a-home-brands {
	padding-block: var(--home-section-space);
	background-color: var(--bg);
}

.a-home-brands .a-container {
	max-width: var(--container);
}

.a-home-brands__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block-end: var(--space-5);
}

/* Unified design-system section heading (matches .a-home-models__title). */
.a-home-brands__title {
	margin: 0;
	font-family: var(--font-display-strong);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--text-primary);
	text-transform: uppercase;
}

.a-home-brands__accent {
	display: block;
	width: var(--space-8); /* 64px */
	height: var(--space-1); /* 4px */
	background-color: var(--c-red-600);
}

/* -------------------------------------------------------------------- */
/* Tabs (radio group)                                                   */
/* -------------------------------------------------------------------- */
.a-brand-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
}

/* Visually hidden but focusable radio controls. */
.a-brand-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.a-brand-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: calc(var(--space-6) + var(--space-3)); /* 44px touch target */
	padding: var(--space-2) var(--space-4);
	/* No box; only the active tab gets a red bottom rule (kept transparent
	 * here so the label never shifts when switching tabs). */
	border: 0;
	border-bottom: 2px solid transparent;
	background-color: transparent;
	color: var(--text-secondary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		color var(--dur-popover) var(--ease-out),
		border-color var(--dur-popover) var(--ease-out);
}

/* Active tab. */
.a-brand-radio:checked + .a-brand-tab {
	color: var(--text-primary);
	border-bottom-color: var(--c-red-600);
}

/* Keyboard focus: legacy theme ships `*:focus{outline:none!important}`, so the
 * outline needs a local !important (same pattern as the header/nav). */
.a-brand-radio:focus-visible + .a-brand-tab {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.a-brand-tab:hover {
		color: var(--text-primary);
	}
}

/* The panel row always starts on its own line below the tabs. */
.a-brand-panels {
	flex: 1 1 100%;
	width: 100%;
	margin-top: var(--space-3);
}

/* -------------------------------------------------------------------- */
/* Panels (CSS-only tab switching)                                      */
/* -------------------------------------------------------------------- */
.a-brand-panel {
	display: none;
}

#a-brand-radio-cars:checked ~ .a-brand-panels > #a-brand-panel-cars,
#a-brand-radio-trucks:checked ~ .a-brand-panels > #a-brand-panel-trucks,
#a-brand-radio-moto:checked ~ .a-brand-panels > #a-brand-panel-moto {
	display: block;
}

/* -------------------------------------------------------------------- */
/* Brand grid                                                           */
/* -------------------------------------------------------------------- */
.a-brand-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

@media (min-width: 992px) {
	.a-brand-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--space-6) var(--space-5);
	}
}

.a-brand-cell {
	margin: 0;
}

.a-brand-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	height: 100%;
	padding: var(--space-3) var(--space-2);
	color: var(--link);
	text-align: center;
	text-decoration: none;
	transition: color var(--dur-popover) var(--ease-out);
}

/* Fixed logo box keeps every brand on a common baseline regardless of the
 * source artwork's aspect ratio (also guards against Bootstrap's
 * `.img-responsive { height:auto }` added by legacy main.js). */
.a-brand-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
}

@media (min-width: 992px) {
	.a-brand-logo-wrap {
		height: 56px;
	}
}

.a-brand-logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.a-brand-kind,
.a-brand-count {
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading);
	color: var(--text-secondary);
	white-space: nowrap;
}

.a-brand-count {
	font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
	.a-brand-link:hover {
		color: var(--link-hover);
	}
}

.a-brand-link:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.a-brand-tab,
	.a-brand-link {
		transition-duration: 0.01ms;
	}
}