/*
 * Shubh Laabh Arts — Homepage Hero Slider
 *
 * The banner artwork (assets/images/hero/desktop-slide-{1,2,3}.png +
 * mobile-slide-{1,2,3}.png) is a COMPLETE composition per slide — headline,
 * copy and CTA are all baked into the image itself. This stylesheet never
 * lays out a separate text/CTA column over it: it only sizes the artwork
 * full-bleed and styles the slider chrome (arrows, dots, pause).
 *
 * Breakpoint: 768px (min-width for desktop/tablet, max-width 767px for
 * mobile) — tablet intentionally stays on the desktop/tablet artwork per
 * the brief ("do not switch to mobile artwork merely because the screen
 * becomes narrower").
 *
 * Sizing: width:100%, height:auto — the artwork is shown at its own
 * natural aspect ratio with zero cropping and zero distortion, per
 * breakpoint (2075:758 desktop/tablet, 1086:1448 mobile — both slide sets
 * share one ratio each, confirmed by inspecting the six source files).
 * aspect-ratio is set explicitly (not left to the <img> width/height
 * attributes alone) so the browser reserves the CORRECT box the instant
 * picture/source swaps art direction at 768px — no layout shift either
 * side of that breakpoint.
 *
 * Motion: a real horizontal slide (.sla-hero-slider__track translateX),
 * not a crossfade — every slide sits side by side in a flex row and the
 * track itself moves. Independent of assets/css/header-footer.css: no
 * shared selectors, colors read from assets/css/design-tokens.css's
 * --sla-* tokens (loaded globally, before this file — see functions.php).
 */

:root {
	--hero-slide-duration: 700ms;
	--hero-slide-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* -----------------------------------------------------------------------
 * Slider shell — true full-bleed: 100% width, no max-width, no side
 * padding, flush against <main>'s own top edge (page.php wraps
 * the_content()/this render with no margin or padding of its own, so
 * there is nothing here to override).
 * --------------------------------------------------------------------- */
.sla-hero-slider {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	margin: 0;
	background: var(--sla-ivory);
}

.sla-hero-slider__track {
	display: flex;
	width: 100%;
	transition: transform var(--hero-slide-duration) var(--hero-slide-ease);
}

.sla-slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	max-width: 100%;
}

.sla-slide__picture {
	display: block;
	width: 100%;
	line-height: 0;
}

.sla-slide__picture img {
	display: block;
	width: 100%;
	height: auto;
	/* Mobile-first default ratio; overridden at 768px below. */
	aspect-ratio: 1086 / 1448;
}

@media (min-width: 768px) {
	.sla-slide__picture img {
		aspect-ratio: 2075 / 758;
	}
}

/* -----------------------------------------------------------------------
 * Reduced motion — the slider still advances (autoplay/dots/arrows/swipe
 * all keep working), it just snaps instead of animating the translate.
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sla-hero-slider__track {
		transition: none;
	}
}

/* -----------------------------------------------------------------------
 * Controls — arrows, pagination dots, pause toggle. Minimal and
 * semi-transparent so they never compete with the artwork; positioned
 * over the lower portion of the frame, clear of the baked-in CTA (which
 * sits well above the bottom edge on every slide).
 * --------------------------------------------------------------------- */
.sla-hero-slider__arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sla-ivory) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--sla-champagne-gold) 45%, transparent);
	color: var(--sla-peacock-navy);
	cursor: pointer;
	opacity: 0.55;
	backdrop-filter: blur(2px);
	transition: opacity 250ms ease, transform 250ms ease, background-color 250ms ease, border-color 250ms ease;
}

.sla-hero-slider__arrow svg {
	width: 18px;
	height: 18px;
}

.sla-hero-slider__arrow--prev {
	left: clamp(0.75rem, 2.5vw, 2rem);
}

.sla-hero-slider__arrow--next {
	right: clamp(0.75rem, 2.5vw, 2rem);
}

.sla-hero-slider:hover .sla-hero-slider__arrow,
.sla-hero-slider__arrow:focus-visible {
	opacity: 1;
}

.sla-hero-slider__arrow:hover,
.sla-hero-slider__arrow:focus-visible {
	transform: translateY(-50%) scale(1.06);
	background: var(--sla-champagne-gold);
	border-color: var(--sla-champagne-gold);
	opacity: 1;
}

.sla-hero-slider__footer {
	position: absolute;
	z-index: 2;
	bottom: clamp(0.85rem, 2.5vh, 1.5rem);
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.sla-hero-slider__dots {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.sla-hero-slider__dot {
	display: inline-flex;
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sla-ivory) 75%, transparent);
	border: 1px solid color-mix(in srgb, var(--sla-peacock-navy) 35%, transparent);
	cursor: pointer;
	transition: transform 250ms ease, background-color 250ms ease, border-color 250ms ease;
}

.sla-hero-slider__dot:hover,
.sla-hero-slider__dot:focus-visible {
	transform: scale(1.2);
	border-color: var(--sla-champagne-gold);
}

.sla-hero-slider__dot.is-active {
	background: var(--sla-champagne-gold);
	border-color: var(--sla-champagne-gold);
	transform: scale(1.15);
}

.sla-hero-slider__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--sla-champagne-gold) 45%, transparent);
	background: color-mix(in srgb, var(--sla-ivory) 55%, transparent);
	color: var(--sla-peacock-navy);
	cursor: pointer;
	backdrop-filter: blur(2px);
	transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}

.sla-hero-slider__pause svg {
	width: 11px;
	height: 11px;
}

.sla-hero-slider__pause .sla-icon-play {
	display: none;
}

.sla-hero-slider__pause.is-paused .sla-icon-pause {
	display: none;
}

.sla-hero-slider__pause.is-paused .sla-icon-play {
	display: block;
}

.sla-hero-slider__pause:hover,
.sla-hero-slider__pause:focus-visible {
	background: var(--sla-champagne-gold);
	border-color: var(--sla-champagne-gold);
}

/* A single slide: nothing to navigate to. */
.sla-hero-slider--single .sla-hero-slider__arrow,
.sla-hero-slider--single .sla-hero-slider__footer {
	display: none;
}

/* Mobile: swipe + dots only — no arrows, per the brief. */
@media (max-width: 767px) {
	.sla-hero-slider__arrow {
		display: none;
	}
}