/* ============================================================================
   Live homepage hero (V4)
   ----------------------------------------------------------------------------
   Single variant: V4 Refined Hero, scoped by `.asi-hero-v4`. Reuses the
   existing `hero-slider.js` (keys off `.asi-homepage-hero` and toggles
   `.is-active` on `.asi-hero-slide`). RTL-safe via CSS logical properties.
   ============================================================================ */

/* ============================================================================
   V4 — REFINED HERO
   ----------------------------------------------------------------------------
   Evolution of the live homepage hero. Full-bleed banner, admin-positioned
   solid card (NOT a glass card like V3), trust-bar overlay strip, refined
   tab nav with subtle progress tracks. The aesthetic is catalog-poster:
   confident, grounded, no atmospheric effects. Reuses V3's anchor system
   so the same admin field controls card position on both variants.
   ============================================================================ */

.asi-hero-v4 {
	--asi-v4-ink: white;
	--asi-v4-rule: var(--wp--preset--color--warm-orange, #F59E0B);
	position: relative;
	overflow: hidden;
	min-block-size: calc(100svh - 120px);
	background: oklch(0.16 0.04 250);
	isolation: isolate;
}

/* Crossfade between slides, same as V3 */
.asi-hero-v4 .asi-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), visibility 600ms;
	will-change: opacity;
}

.asi-hero-v4 .asi-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.asi-hero-v4__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.asi-hero-v4__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 100%;
}

/* Atmospheric veil — gentle vignette, not the dramatic radial veil V3 uses.
   Keeps any card on any banner readable without competing for attention. */
.asi-hero-v4__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(15, 23, 42, 0.32) 0%,
			rgba(15, 23, 42, 0.15) 35%,
			rgba(15, 23, 42, 0.18) 70%,
			rgba(15, 23, 42, 0.55) 100%);
	pointer-events: none;
}

/* Per-style accent rule — short colored bar at the top of the card. */
.asi-hero-v4__slide.asi-hero-slide--top-picks { --asi-v4-rule: var(--wp--preset--color--accent-1, #0155B7); }
.asi-hero-v4__slide.asi-hero-slide--launched  { --asi-v4-rule: var(--wp--preset--color--warm-orange, #F59E0B); }
.asi-hero-v4__slide.asi-hero-slide--offers    { --asi-v4-rule: var(--wp--preset--color--accent-2, #72B94A); }
.asi-hero-v4__slide.asi-hero-slide--heritage  { --asi-v4-rule: var(--wp--preset--color--contrast, #0F172A); }

/* Solid card — high-contrast, no blur, refined silhouette. */
.asi-hero-v4__card {
	position: absolute;
	top: clamp(2rem, 8vh, 4rem);
	left: clamp(1.25rem, 5vw, 4rem);
	right: auto;
	bottom: auto;
	width: min(500px, calc(100% - 3rem));
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	padding-inline: clamp(1.5rem, 3vw, 2.25rem);
	background: color-mix(in oklch, var(--wp--preset--color--accent-1, #0155B7), oklch(0.18 0.04 250) 30%);
	border: 1px solid color-mix(in oklch, white, transparent 82%);
	border-radius: 6px;
	color: var(--asi-v4-ink);
	box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.6);
	transition:
		transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asi-hero-v4__card:hover {
	transform: translate3d(0, -3px, 0);
	box-shadow: 0 36px 72px -28px rgba(0, 0, 0, 0.65);
}

@media (hover: none) {
	.asi-hero-v4__card:hover { transform: none; }
}

/* Per-anchor physical positions */
.asi-hero-v4__card[data-anchor='top-right'] {
	top: clamp(2rem, 8vh, 4rem);
	right: clamp(1.25rem, 5vw, 4rem);
	left: auto;
	bottom: auto;
}

.asi-hero-v4__card[data-anchor='bottom-left'] {
	bottom: clamp(7rem, 14vh, 9.5rem);
	left: clamp(1.25rem, 5vw, 4rem);
	top: auto;
	right: auto;
}

.asi-hero-v4__card[data-anchor='bottom-right'] {
	bottom: clamp(7rem, 14vh, 9.5rem);
	right: clamp(1.25rem, 5vw, 4rem);
	top: auto;
	left: auto;
}

.asi-hero-v4__card[data-anchor='middle-left'],
.asi-hero-v4__card[data-anchor='middle-right'],
.asi-hero-v4__card[data-anchor='middle-center'] {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

.asi-hero-v4__card[data-anchor='middle-left']:hover,
.asi-hero-v4__card[data-anchor='middle-right']:hover,
.asi-hero-v4__card[data-anchor='middle-center']:hover {
	transform: translateY(calc(-50% - 3px));
}

.asi-hero-v4__card[data-anchor='middle-left'] {
	left: clamp(1.25rem, 5vw, 4rem);
	right: auto;
}

.asi-hero-v4__card[data-anchor='middle-right'] {
	right: clamp(1.25rem, 5vw, 4rem);
	left: auto;
}

.asi-hero-v4__card[data-anchor='middle-center'] {
	left: 50%;
	right: auto;
	transform: translate(-50%, -50%);
	text-align: center;
}

.asi-hero-v4__card[data-anchor='middle-center']:hover {
	transform: translate(-50%, calc(-50% - 3px));
}

/* The colored rule at the top — short, brand-accent, sets the slide tone. */
.asi-hero-v4__rule {
	display: block;
	inline-size: 56px;
	block-size: 3px;
	background: var(--asi-v4-rule);
	border-radius: 999px;
	margin-block-end: 1.5rem;
}

.asi-hero-v4__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.85rem;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in oklch, var(--asi-v4-ink), transparent 18%);
}

.asi-hero-v4__badge::before {
	content: '';
	display: inline-block;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 999px;
	background: var(--asi-v4-rule);
}

.asi-hero-v4__headline {
	margin: 0 0 0.85rem;
	font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif);
	font-size: clamp(1.85rem, 3.4vw, 2.85rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--asi-v4-ink);
	text-wrap: balance;
}

:lang(ar) .asi-hero-v4__headline {
	font-family: var(--wp--preset--font-family--tajawal, 'Tajawal', sans-serif);
	line-height: 1.22;
	letter-spacing: -0.005em;
}

.asi-hero-v4__lede {
	margin: 0 0 1.4rem;
	font-size: 0.98rem;
	line-height: 1.55;
	color: color-mix(in oklch, var(--asi-v4-ink), transparent 22%);
}

.asi-hero-v4__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.asi-hero-v4__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-block: 0.85rem;
	padding-inline: 1.5rem;
	border-radius: 4px;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition:
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		background 220ms ease,
		color 220ms ease,
		border-color 220ms ease;
}

.asi-hero-v4__cta--primary {
	background: var(--wp--preset--color--warm-orange, #F59E0B);
	color: oklch(0.18 0.04 250);
}

.asi-hero-v4__cta--primary:hover {
	background: var(--asi-v4-ink);
	transform: translateY(-1px);
}

.asi-hero-v4__cta--primary svg {
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asi-hero-v4__cta--primary:hover svg {
	transform: translateX(3px);
}

:lang(ar) .asi-hero-v4__cta--primary svg {
	transform: scaleX(-1);
}

:lang(ar) .asi-hero-v4__cta--primary:hover svg {
	transform: scaleX(-1) translateX(3px);
}

.asi-hero-v4__cta--ghost {
	background: transparent;
	color: var(--asi-v4-ink);
	border: 1px solid color-mix(in oklch, white, transparent 70%);
}

.asi-hero-v4__cta--ghost:hover {
	background: color-mix(in oklch, white, transparent 92%);
	border-color: var(--asi-v4-ink);
}

/* Reveal — single rise on slide activation. */
.asi-hero-v4__slide.is-active .asi-hero-v4__card {
	animation: asi-v4-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.asi-hero-v4__slide.is-active .asi-hero-v4__card[data-anchor='middle-left'],
.asi-hero-v4__slide.is-active .asi-hero-v4__card[data-anchor='middle-right'] {
	animation-name: asi-v4-rise-middle;
}

.asi-hero-v4__slide.is-active .asi-hero-v4__card[data-anchor='middle-center'] {
	animation-name: asi-v4-rise-center;
}

@keyframes asi-v4-rise {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes asi-v4-rise-middle {
	from { opacity: 0; transform: translateY(calc(-50% + 18px)); }
	to   { opacity: 1; transform: translateY(-50%); }
}

@keyframes asi-v4-rise-center {
	from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Trust bar — overlay strip across the bottom, same convention as the
   live homepage's `.asi-hero-trust-bar`. Sat at 72px before; lowered to
   50px so the gap to the tabs below matches the gap to the card above. */
.asi-hero-v4__trust-bar {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 50px;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2rem);
	padding-inline: 1.25rem;
	color: color-mix(in oklch, white, transparent 25%);
	pointer-events: none;
	font-size: 0.82rem;
}

.asi-hero-v4__trust-bar .asi-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	pointer-events: auto;
}

.asi-hero-v4__trust-bar svg {
	color: color-mix(in oklch, white, transparent 50%);
}

/* Tabs — thin tracks with active fill. Refined, less animated than V3. */
.asi-hero-v4__tabs {
	position: absolute;
	inset-inline: 0;
	inset-block-end: clamp(1.25rem, 3vh, 2rem);
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	padding-inline: 1.25rem;
	flex-wrap: wrap;
}

.asi-hero-v4__tab {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.45rem;
	min-inline-size: 130px;
	padding-block: 0.4rem 0;
	padding-inline: 0;
	background: transparent;
	border: 0;
	color: color-mix(in oklch, white, transparent 50%);
	cursor: pointer;
	font: inherit;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	transition: color 200ms ease;
}

.asi-hero-v4__tab:hover { color: white; }
.asi-hero-v4__tab.is-active { color: white; }

.asi-hero-v4__tab-track {
	display: block;
	block-size: 2px;
	background: color-mix(in oklch, white, transparent 80%);
	border-radius: 999px;
	position: relative;
	overflow: hidden;
}

.asi-hero-v4__tab.is-active .asi-hero-v4__tab-track::after {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	background: var(--wp--preset--color--warm-orange, #F59E0B);
	transform-origin: left;
	animation: asi-v4-tab-fill 6s linear forwards;
}

@keyframes asi-v4-tab-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

:lang(ar) .asi-hero-v4__tab.is-active .asi-hero-v4__tab-track::after {
	transform-origin: right;
}

.asi-hero-v4__tab-label {
	font-weight: 500;
	text-align: start;
}

.asi-hero-v4__dots {
	position: absolute;
	inset-inline: 0;
	inset-block-end: clamp(1rem, 3vh, 1.5rem);
	z-index: 4;
	display: none;
	justify-content: center;
	gap: 0.4rem;
}

@media (max-width: 720px) {
	.asi-hero-v4__tabs { display: none; }
	.asi-hero-v4__dots { display: flex; }
	.asi-hero-v4__dots .asi-hero-dot {
		inline-size: 8px;
		block-size: 8px;
		border-radius: 999px;
		background: color-mix(in oklch, white, transparent 70%);
		border: none;
		padding: 0;
		cursor: pointer;
	}
	.asi-hero-v4__dots .asi-hero-dot.is-active {
		inline-size: 24px;
		background: white;
	}

	/* Mobile stack — grid-overlap so every slide shares the same
	   height (no dimension jumps when switching banners). */
	.asi-hero-v4 {
		block-size: auto;
		min-block-size: 0;
		display: grid;
		grid-template-rows: 1fr auto auto;
		grid-template-columns: 100%;
	}

	.asi-hero-v4 .asi-hero-slide {
		grid-row: 1;
		grid-column: 1;
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
	}

	.asi-hero-v4__stage {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 3;
		block-size: auto;
		flex: 0 0 auto;
	}

	.asi-hero-v4__card,
	.asi-hero-v4__card[data-anchor] {
		position: relative;
		inset: auto;
		top: auto; right: auto; bottom: auto; left: auto;
		inline-size: auto;
		width: auto;
		max-inline-size: 100%;
		border-radius: 0;
		border-inline-start: 0;
		border-inline-end: 0;
		transform: none;
		animation: none !important;
		padding-block: clamp(1.5rem, 5vw, 2rem);
		padding-inline: clamp(1.25rem, 4vw, 1.75rem);
		text-align: start;
		flex: 1;
	}

	.asi-hero-v4__card:hover { transform: none; }

	.asi-hero-v4__trust-bar {
		position: relative;
		inset: auto;
		grid-row: 2;
		grid-column: 1;
		padding-block: 0.75rem;
		background: oklch(0.16 0.04 250);
		flex-wrap: wrap;
		font-size: 0.74rem;
	}

	.asi-hero-v4__dots {
		grid-row: 3;
		grid-column: 1;
		position: relative;
		inset: auto;
		padding-block: 1rem 1.5rem;
		background: oklch(0.16 0.04 250);
	}
}

/* ============================================================================
   Reduced motion — strip all V4 animations.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
	.asi-hero-v4 * {
		animation: none !important;
		transition-duration: 0ms !important;
	}
}

/* ============================================================================
   V6 — CENTERED OVERLAY HERO
   ----------------------------------------------------------------------------
   Editorial layout: full-bleed image, centered heading + lede + single
   primary CTA stacked over a soft veil. No card, no badge. Dots for slide
   navigation on both desktop and mobile.
   ============================================================================ */

.asi-hero-v6 {
	--asi-v6-ink: white;
	position: relative;
	overflow: hidden;
	min-block-size: calc(100svh - 120px);
	background: oklch(0.16 0.04 250);
	isolation: isolate;
}

.asi-hero-v6 .asi-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), visibility 600ms;
	will-change: opacity;
}

.asi-hero-v6 .asi-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.asi-hero-v6__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.asi-hero-v6__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Soft veil — radial dim centred on the content area, gentle on the edges.
   On mobile the veil intensifies to keep text legible against the busier
   bottom half of the bottle product shots. */
.asi-hero-v6__veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 55% at 50% 55%,
			rgba(15, 23, 42, 0.45) 0%,
			rgba(15, 23, 42, 0.20) 55%,
			rgba(15, 23, 42, 0.05) 100%),
		linear-gradient(180deg,
			rgba(15, 23, 42, 0.15) 0%,
			rgba(15, 23, 42, 0.05) 30%,
			rgba(15, 23, 42, 0.25) 75%,
			rgba(15, 23, 42, 0.45) 100%);
	pointer-events: none;
}

/* Centered content block — shifted down ~12vh so the headline sits in
   the lower portion of the image rather than dead-center. This avoids
   landing on hero focal points (building logo on heritage, the model's
   face on top-picks, etc.) and gives every slide a consistent rhythm. */
.asi-hero-v6__content {
	position: absolute;
	inset-block-start: 12vh;
	inset-block-end: 0;
	inset-inline: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: clamp(0.55rem, 1.1vw, 0.85rem);
	padding-inline: clamp(1.25rem, 6vw, 3rem);
	padding-block-end: clamp(5rem, 12vh, 8rem);
	color: var(--asi-v6-ink);
	z-index: 2;
}

/* EN content needs an extra ~10vh drop. Poppins headline + the wider
   one-line tagline render visually higher than Tajawal at the same
   centered inset, so without this override the EN heritage title
   collides with the building's ASI logo while AR sits cleanly below it.
   Lang-scoped via :lang(en) so AR stays at the approved 12vh position. */
:lang(en) .asi-hero-v6__content {
	inset-block-start: 22vh;
}

.asi-hero-v6__headline {
	margin: 0;
	font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif);
	font-size: clamp(2rem, 4.4vw, 3.6rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--asi-v6-ink);
	max-inline-size: min(820px, 90%);
	text-wrap: balance;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}

:lang(ar) .asi-hero-v6__headline {
	font-family: var(--wp--preset--font-family--tajawal, 'Tajawal', sans-serif);
	line-height: 1.22;
	letter-spacing: -0.005em;
}

.asi-hero-v6__lede {
	margin: 0;
	font-size: clamp(0.98rem, 1.4vw, 1.18rem);
	line-height: 1.55;
	color: color-mix(in oklch, var(--asi-v6-ink), transparent 12%);
	/* On desktop, give the lede room to stay on a single line so the
	   sentence reads as one phrase and never wraps onto the headline.
	   Mobile drops to a tighter cap via the @media block below so it
	   still wraps cleanly inside the narrow viewport. */
	max-inline-size: min(960px, 92%);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

.asi-hero-v6__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-block-start: clamp(0.25rem, 0.5vw, 0.4rem);
	padding-block: 0.95rem;
	padding-inline: 2rem;
	background: var(--wp--preset--color--accent-1, #0155B7);
	color: var(--asi-v6-ink);
	border-radius: 999px;
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: 0 18px 36px -16px rgba(1, 85, 183, 0.6);
	transition:
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		background 220ms ease,
		box-shadow 220ms ease;
}

.asi-hero-v6__cta:hover {
	background: color-mix(in oklch, var(--wp--preset--color--accent-1, #0155B7), white 10%);
	transform: translateY(-2px);
	box-shadow: 0 24px 46px -18px rgba(1, 85, 183, 0.7);
}

@media (hover: none) {
	.asi-hero-v6__cta:hover { transform: none; }
}

/* Reveal — single rise on slide activation. */
.asi-hero-v6__slide.is-active .asi-hero-v6__content > * {
	animation: asi-v6-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.asi-hero-v6__slide.is-active .asi-hero-v6__lede {
	animation-delay: 90ms;
}

.asi-hero-v6__slide.is-active .asi-hero-v6__cta {
	animation-delay: 180ms;
}

@keyframes asi-v6-rise {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Trust bar — overlay strip, same convention as V4. */
.asi-hero-v6__trust-bar {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 28px;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2rem);
	padding-inline: 1.25rem;
	color: color-mix(in oklch, white, transparent 25%);
	pointer-events: none;
	font-size: 0.82rem;
}

.asi-hero-v6__trust-bar .asi-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	pointer-events: auto;
}

.asi-hero-v6__trust-bar svg {
	color: color-mix(in oklch, white, transparent 50%);
}

/* Dots — on both desktop and mobile (no tabs in this variant). */
.asi-hero-v6__dots {
	position: absolute;
	inset-inline: 0;
	inset-block-end: clamp(4.5rem, 8vh, 6rem);
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 0.45rem;
}

.asi-hero-v6__dots .asi-hero-dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 999px;
	background: color-mix(in oklch, white, transparent 70%);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: inline-size 200ms ease, background 200ms ease;
}

.asi-hero-v6__dots .asi-hero-dot.is-active {
	inline-size: 24px;
	background: white;
}

/* ============================================================================
   V6 — MOBILE
   ----------------------------------------------------------------------------
   STACKED structure ported from V4: CSS grid with overlapping slides
   (so every slide is the same height, no jumps when switching), each slide
   is a flex column with the image at top (native aspect-ratio, no crop
   problems) and the V6 content panel BELOW. Trust bar + dots live in their
   own grid rows. This is the same architecture that makes V4 mobile work
   for any photo composition — it does not depend on object-position tuning.
   ============================================================================ */
@media (max-width: 720px) {
	/* Section becomes a grid: row 1 holds all slides (overlapped), rows 2-3
	   hold the trust bar and dots so they share the same baseline across
	   slides without re-rendering. */
	.asi-hero-v6 {
		block-size: auto;
		min-block-size: 0;
		display: grid;
		grid-template-rows: 1fr auto auto;
		grid-template-columns: 100%;
		background: oklch(0.16 0.04 250);
	}

	/* Every slide stacks into row 1, in column 1 — grid-overlap pattern.
	   The row takes the height of the tallest slide, so switching slides
	   never resizes the banner. */
	.asi-hero-v6 .asi-hero-slide {
		grid-row: 1;
		grid-column: 1;
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
	}

	/* Image stage gets its own row inside the flex slide, with a fixed
	   aspect ratio so the photo's composition is preserved. Any
	   reasonable landscape photo crops cleanly into 4:3. */
	.asi-hero-v6__stage {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 3;
		block-size: auto;
		flex: 0 0 auto;
	}

	/* Image fills its stage; the per-slide focal point still applies via
	   the inline object-position emitted by the shortcode. The slight zoom
	   keeps the subject feeling close. */
	.asi-hero-v6__image {
		transform: scale(1.02);
		transform-origin: center;
	}

	/* The atmospheric veil belongs to the desktop overlay layout; flatten
	   it on mobile since the photo stands on its own. */
	.asi-hero-v6__veil {
		background: linear-gradient(180deg,
			rgba(15, 23, 42, 0.06) 0%,
			transparent 30%,
			transparent 70%,
			rgba(15, 23, 42, 0.18) 100%);
	}

	/* The content panel becomes the bottom card of the slide — relative
	   flow, BELOW the image, NOT overlapping it. Still keeps V6's centered
	   text + blurred-photo background via the ::before pseudo. */
	.asi-hero-v6__content {
		position: relative;
		inset: auto;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: 0.85rem;
		padding-block: 1.75rem;
		padding-inline: 1.5rem;
		background: transparent;
		border-block-start: 0;
		overflow: hidden;
		isolation: isolate;
		animation: none !important;
	}

	/* Static pre-blurred copy of the slide photo as the panel background.
	   `filter: blur()` is universally supported — no backdrop-filter
	   dependency. */
	.asi-hero-v6__content::before {
		content: '';
		position: absolute;
		inset: -60px;
		background-image: var(--asi-v6-panel-bg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		filter: blur(32px) saturate(150%) brightness(0.7);
		z-index: -2;
		transform: scale(1.1);
	}

	/* Dark tint over the blurred photo for white-text legibility. */
	.asi-hero-v6__content::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg,
			rgba(15, 23, 42, 0.65) 0%,
			rgba(15, 23, 42, 0.85) 60%,
			rgba(15, 23, 42, 0.92) 100%);
		z-index: -1;
		pointer-events: none;
	}

	.asi-hero-v6__headline {
		font-size: clamp(1.55rem, 6.5vw, 2rem);
		max-inline-size: 92%;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
	}

	.asi-hero-v6__lede {
		font-size: 0.92rem;
		max-inline-size: 94%;
		text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
	}

	.asi-hero-v6__cta {
		padding-block: 0.85rem;
		padding-inline: 1.6rem;
		font-size: 0.94rem;
	}

	/* Trust bar lives in grid row 2, OUTSIDE the slide stack. */
	.asi-hero-v6__trust-bar {
		grid-row: 2;
		grid-column: 1;
		position: relative;
		inset: auto;
		padding-block: 0.85rem;
		padding-inline: 1.25rem;
		background: oklch(0.16 0.04 250);
		flex-wrap: wrap;
		justify-content: center;
		font-size: 0.72rem;
		gap: 0.7rem 1.1rem;
		color: color-mix(in oklch, white, transparent 22%);
	}

	/* Dots live in grid row 3, also outside the slide stack. */
	.asi-hero-v6__dots {
		grid-row: 3;
		grid-column: 1;
		position: relative;
		inset: auto;
		padding-block: 0.75rem 1.25rem;
		background: oklch(0.16 0.04 250);
	}
}

@media (prefers-reduced-motion: reduce) {
	.asi-hero-v6 * {
		animation: none !important;
		transition-duration: 0ms !important;
	}
}