/*
 * Design System - AELITA
 * components/home-models.css - homepage "АКТУАЛЬНІ МОДЕЛІ" section.
 *
 * Surface/section styles only. Reuses the reusable .a-car-card component and
 * the existing Slick slider; nothing here belongs in car-card.css.
 *
 * Uses only tokens.css variables. No hex, no !important, no `transition: all`,
 * no global .row/.container/.slick-slide rules. The Slick adjustments are
 * scoped to the homepage car slider container (.a-home-models .models_slider).
 */

/* -------------------------------------------------------------------- */
/* Section shell                                                        */
/* -------------------------------------------------------------------- */
.a-home-models {
	padding-block: var(--home-section-space);
}

/* -------------------------------------------------------------------- */
/* Section header                                                       */
/* -------------------------------------------------------------------- */
.a-home-models__header {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block-end: var(--space-5); /* 24px header -> slider */
}

.a-home-models__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;
}

/* Short brand accent under the title. */
.a-home-models__accent {
	display: block;
	width: var(--space-8); /* 64px */
	height: var(--space-1); /* 4px */
	background-color: var(--c-red-600);
}

/* -------------------------------------------------------------------- */
/* Section arrows (custom Slick prev/next)                              */
/* -------------------------------------------------------------------- */
.a-home-models__nav {
	display: flex;
	gap: var(--space-2);
	align-self: flex-end;
	margin-block-start: calc(-1 * var(--space-1));
}

.a-home-models__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--space-6) + var(--space-3));  /* 44px */
	height: calc(var(--space-6) + var(--space-3));
	padding: 0;
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	background-color: var(--bg);
	color: var(--text-primary);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		color var(--dur-press) var(--ease-out),
		border-color var(--dur-press) var(--ease-out),
		background-color var(--dur-press) var(--ease-out);
}

.a-home-models__arrow svg {
	display: block;
	width: var(--space-5);
	height: var(--space-5);
}

@media (hover: hover) and (pointer: fine) {
	.a-home-models__arrow:hover {
		border-color: var(--text-secondary);
		background-color: var(--bg-muted);
		color: var(--link-hover);
	}
}

.a-home-models__arrow:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.a-home-models__arrow.slick-disabled,
.a-home-models__arrow[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	.a-home-models__arrow {
		transition-duration: 0.01ms;
	}
}

/* -------------------------------------------------------------------- */
/* Desktop / tablet: arrows on the title row                            */
/* -------------------------------------------------------------------- */
@media (min-width: 768px) {
	.a-home-models__nav {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		margin-block-start: 0;
	}
}

/* -------------------------------------------------------------------- */
/* Slider shell                                                         */
/* -------------------------------------------------------------------- */
.a-home-models__slider {
	min-width: 0;
}

/* -------------------------------------------------------------------- */
/* Card gap (Slick-safe)                                                */
/* -------------------------------------------------------------------- */
/* Slick computes slideWidth = ceil(listWidth / slidesToShow) and subtracts
 * each slide's own horizontal padding (offset) from the rendered card, so a
 * gap on .slick-track would corrupt the sizing. Instead pad each slide by
 * half the gap and pull the list back by the same amount so the first and
 * last cards stay flush with the container grid. */
.a-home-models .models_slider .slick-slide {
	padding-inline: var(--space-2); /* 8px each side => 16px visual gap */
}

.a-home-models .models_slider .slick-list {
	margin-inline: calc(-1 * var(--space-2));
}

/* Mobile peek: Slick centerMode supplies the side padding; the list offset
 * must not double it up, otherwise the neighbouring card gap grows. */
@media (max-width: 767px) {
	.a-home-models__nav {
		display: none;
	}

	.a-home-models .models_slider .slick-list {
		margin-inline: 0;
	}
}

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

/* The slide itself is the flex row item; keep the card filling it. */
.a-home-models .models_slider .slick-slide > .a-car-card {
	width: 100%;
}

/* -------------------------------------------------------------------- */
/* Focus: keep the keyboard ring visible inside the slider              */
/* -------------------------------------------------------------------- */
.a-home-models .models_slider .slick-slide .a-car-card__link:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Controls: pagination dots                                            */
/* -------------------------------------------------------------------- */
/* Only the dots remain (the autoplay progress line was removed), so the
 * block no longer needs a flex column or a gap. */
.a-home-models__controls {
	margin-block-start: var(--space-4); /* 16px below the slider */
}

/* Pagination dots. One dot per page of visible cards, built in JS. */
.a-home-models__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: calc(var(--space-1) / 2); /* 2px */
}

.a-home-models__pagination[hidden] {
	display: none;
}

.a-home-models__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-5);  /* 24px hit target, visual dot is smaller */
	height: var(--space-5);
	padding: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.a-home-models__dot::before {
	content: "";
	width: calc(var(--space-1) * 1.5); /* 6px visual dot */
	height: calc(var(--space-1) * 1.5);
	border-radius: 50%;
	background-color: var(--text-secondary);
	transition:
		background-color var(--dur-press) var(--ease-out),
		transform var(--dur-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.a-home-models__dot:hover::before {
		background-color: var(--text-primary);
	}
}

/* Active state is not colour-only: the dot also grows. */
.a-home-models__dot[aria-current="true"]::before {
	background-color: var(--c-red-600);
	transform: scale(1.4);
}

.a-home-models__dot:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.a-home-models__dot::before {
		transition-duration: 0.01ms;
	}
}

/* -------------------------------------------------------------------- */
/* Slick height integration (CLS reserve + equal-height cards)          */
/* -------------------------------------------------------------------- */
/* Reserve models slider height before Slick init (CLS). Matches the
   tallest card at 4-up so the pre-init reserve stays close. */
.models_slider.cars_grid:not(.slick-initialized) {
	height: 400px;
	overflow: hidden;
}
/* After Slick init the homepage cars track must size to its tallest
   card, so every slide keeps an equal height. Scoped to
   .models_slider.cars_grid so other Slick sliders are unaffected. */
.models_slider.cars_grid.slick-initialized .slick-track {
	height: auto;
}
.models_slider.cars_grid.slick-initialized .slick-track > .slick-slide {
	height: auto;
	display: flex;
}
.models_slider.cars_grid.slick-initialized .slick-track > .slick-slide > .a-car-card {
	width: 100%;
	height: auto;
	min-height: 100%;
}

/* -------------------------------------------------------------------- */
/* Mobile: swipe only - no pagination dots                              */
/* -------------------------------------------------------------------- */
/* Hiding the whole controls block also removes its top spacing, so no
 * extra vertical space is left behind after the indicators are gone. */
@media (max-width: 767px) {
	.a-home-models .a-home-models__controls {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* Card media hover                                                     */
/* -------------------------------------------------------------------- */
/* Every homepage card gets a gentle zoom; cards with several gallery
 * frames additionally swap frames on pointer move (car-card-scrub.js)
 * through a cross-fading ghost layer. Deliberately NOT gated behind
 * (hover:hover)/(pointer:fine): that query is unreliable (touch laptops,
 * device emulation, some browsers report "no hover" while a mouse is
 * present) and was silently disabling the effect. */
.a-home-models .a-car-card__image {
	transition: transform 520ms var(--ease-out);
}

.a-home-models .a-car-card:hover .a-car-card__image {
	transform: scale(1.045);
}

/* Cross-fade layer injected by car-card-scrub.js. Sits over the cover and
 * under the badges (source order), so it scales together with the cover. */
.a-home-models .a-car-card__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 170ms var(--ease-out),
		transform 520ms var(--ease-out);
}

.a-home-models .a-car-card:hover .a-car-card__frame {
	transform: scale(1.045);
}