/*
 * Design System - AELITA
 * components/home-promo.css - homepage promo banners (three-up).
 *
 * Sits between the car picker and the brand grid. Three equal banners on
 * desktop, one per row on mobile. Each banner is a single link; the artwork
 * already carries its own copy, so nothing is layered on top.
 *
 * Consumes tokens.css / layout.css only; no hex values, no Bootstrap grid.
 * The images keep their intrinsic aspect ratio (width / height attributes on
 * the <img>), so nothing is cropped or stretched and CLS stays at zero.
 *
 * Loaded on the front page only (see inc/enqueue.php).
 */

/* -------------------------------------------------------------------- */
/* Section                                                              */
/* -------------------------------------------------------------------- */
.a-home-promo {
	/* Top padding owns the gap under the car picker. The brand section that
	 * follows supplies its own top padding, so this section keeps no bottom
	 * padding - that keeps the welcome space above and below the banners
	 * equal instead of doubling it below. */
	padding-block: var(--home-section-space) 0;
	background-color: var(--bg);
}

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

/* -------------------------------------------------------------------- */
/* Grid - mobile: one banner per row, desktop: three in a row            */
/* -------------------------------------------------------------------- */
.a-home-promo__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.a-home-promo__item {
	display: flex;
	min-width: 0;
}

/* -------------------------------------------------------------------- */
/* Banner link                                                          */
/* -------------------------------------------------------------------- */
.a-home-promo__link {
	position: relative;
	display: block;
	width: 100%;
	/* Grey placeholder while the lazy image loads. */
	background-color: var(--bg-muted);
	/* Sharp corners: matches the rest of the AELITA design system. */
	border-radius: var(--radius);
	transition:
		transform var(--dur-popover) var(--ease-out),
		box-shadow var(--dur-popover) var(--ease-out);
}

.a-home-promo__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

/* -------------------------------------------------------------------- */
/* States                                                               */
/* -------------------------------------------------------------------- */

/* Light lift + tinted shadow, only on devices that can actually hover. */
@media (hover: hover) and (pointer: fine) {
	.a-home-promo__link:hover {
		transform: translateY(-3px);
		box-shadow: var(--shadow-overlay);
	}
}

/* Legacy theme ships `*:focus{outline:none!important}`, so keep the ring local. */
.a-home-promo__link:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}

/* Reduced motion: keep the shadow feedback, drop the movement. */
@media (prefers-reduced-motion: reduce) {
	.a-home-promo__link {
		transition-duration: 0.01ms;
	}
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
	.a-home-promo__link:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------- */
/* Mobile carousel (Slick) - one banner per view with a side peek       */
/* -------------------------------------------------------------------- */
/* Slick is initialised from js/main.js only below 768px (mobileFirst +
 * unslick on desktop), so the desktop three-up grid is untouched. The
 * banners keep their intrinsic ratio, and Slick's clipped list means the
 * page never gains a horizontal scrollbar. No arrows, dots or progress. */
@media (max-width: 767px) {
	/* Pre-init: lay the banners in one clipped row so handing over to Slick
	 * causes no layout shift - the visible banner keeps the same size and
	 * the 32px side gutter that matches Slick's centerPadding. */
	.a-home-promo__grid:not(.slick-initialized) {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		gap: 0;
		padding-inline: var(--space-6); /* 32px == Slick centerPadding */
		overflow: hidden;
	}

	/* 16px gap between banners (8px each side), same as the models carousel.
	 * Applies both to the pre-init grid item and the Slick slide. */
	.a-home-promo__item {
		padding-inline: var(--space-2);
	}

	/* The peek is driven by Slick's centerPadding, so the list needs no
	 * negative margin (unlike the multi-card models row). */
	.a-home-promo__grid .slick-list {
		margin-inline: 0;
	}

	/* Keep the slide flush to the Slick geometry; Slick owns the widths. */
	.a-home-promo__grid .slick-slide {
		min-width: 0;
	}

	.a-home-promo__grid .slick-track {
		align-items: stretch;
	}

	.a-home-promo__grid .slick-slide > .a-home-promo__link {
		width: 100%;
	}
}