/*
 * Design System - AELITA
 * components/main-slider.css - homepage hero banner ("mainslider").
 *
 * Surface controls for the existing Slick hero slider: a full-width autoplay
 * progress strip directly below the banner, and minimalist pagination dots
 * overlaid on the banner. Everything is scoped to .a-main-slider so no other
 * slider and no global .slick-dots rule is affected. Uses only tokens.css
 * variables (no hex, no !important).
 */

.a-main-slider {
	position: relative;
}

/* Dots are anchored to the banner itself, so the progress strip below the
 * banner never shifts their position. */
.a-main-slider__viewport {
	position: relative;
}

/* -------------------------------------------------------------------- */
/* Progress strip (full width, directly below the banner)               */
/* -------------------------------------------------------------------- */
.a-main-slider__progress {
	display: block;
	width: 100%;
	height: calc(var(--border-w) * 4); /* 4px */
	background-color: var(--border);
	overflow: hidden;
}

/* -------------------------------------------------------------------- */
/* Dots overlay                                                          */
/* -------------------------------------------------------------------- */
.a-main-slider__controls {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	padding-block-end: var(--space-3);
	/* Let banner clicks pass through; only the dots opt back in. */
	pointer-events: none;
}

/* Localised scrim behind the dots only (not the whole banner width). */
.a-main-slider__controls::before {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 0;
	width: min(360px, 90%);
	height: 64px;
	transform: translateX(-50%);
	background-image: radial-gradient(
		ellipse 180px 64px at 50% 100%,
		var(--bg-invert),
		transparent
	);
	opacity: 0.55;
	z-index: -1;
	pointer-events: none;
}

.a-main-slider__progress-bar {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--c-red-600);
	transform: scaleX(0);
	transform-origin: left center;
}

.a-main-slider__progress.is-running .a-main-slider__progress-bar {
	animation-name: a-main-slider-progress;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.a-main-slider__progress.is-paused .a-main-slider__progress-bar {
	animation-play-state: paused;
}

@keyframes a-main-slider-progress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* -------------------------------------------------------------------- */
/* Pagination dots                                                       */
/* -------------------------------------------------------------------- */
.a-main-slider__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: calc(var(--space-1) / 2); /* 2px */
	pointer-events: auto;
}

.a-main-slider__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-main-slider__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(--c-white);
	opacity: 0.65;
	transition:
		background-color var(--dur-press) var(--ease-out),
		opacity var(--dur-press) var(--ease-out),
		transform var(--dur-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.a-main-slider__dot:hover::before {
		opacity: 1;
	}
}

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

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

/* -------------------------------------------------------------------- */
/* Pre-Slick init state (CLS reserve)                                   */
/* -------------------------------------------------------------------- */
/* Reserve main slider height before Slick init (CLS); show only first banner until init */
.mainslider:not(.slick-initialized) {
	aspect-ratio: 1920 / 530;
	overflow: hidden;
}
.mainslider:not(.slick-initialized) > div:not(:first-child) {
	display: none;
}
.mainslider:not(.slick-initialized) img {
	display: block;
	width: 100%;
	height: auto;
}
/* Mobile banners: 1024x1536 (2/3) aspect ratio */
@media (max-width: 767px) {
	/* Reserve the correct mobile height before Slick init (CLS) */
	.mainslider.mainslider--has-mobile:not(.slick-initialized) {
		aspect-ratio: 1024 / 1536;
	}
	/* Keep the mobile ratio after Slick init for slides that actually have a mobile image */
	.mainslider .mainslider-slide.has-mobile-image img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1024 / 1536;
		object-fit: cover;
	}
}