/**
 * Styles for woo-sil7en/hero-carousel.
 *
 * All slides occupy the same grid cell (stacked); only the active slide is
 * visible. Fixed min-height + object-fit media = zero CLS. The text column is
 * left-aligned and constrained (asymmetric, never centered). Motion is opacity
 * only and gated by prefers-reduced-motion.
 *
 * @package woo-sil7en-blocks-hero
 */

.woo-sil7en-hero-carousel {
	position: relative;
	display: grid;
	min-height: var(--hc-min-height, clamp(30rem, 74svh, 46rem));
	isolation: isolate;
	overflow: clip;
	background: var(--wp--preset--color--surface-strong, #35008b);
}

.woo-sil7en-hero-carousel__viewport {
	display: grid;
	grid-template-areas: "stack";
	min-height: inherit;
}

.woo-sil7en-hero-carousel__slide {
	grid-area: stack;
	position: relative;
	display: grid;
	align-items: center;
	min-height: inherit;
	overflow: hidden;
	isolation: isolate; /* contain the layer z-indexes: fill < media < overlay < texture < content */
	opacity: 0;
	visibility: hidden;
	color: var(--hc-text-color, var(--wp--preset--color--base, #fff));
}

/*
 * Progressive enhancement: without JS (or before hydration) the FIRST slide is
 * visible by default so the H1 / LCP always paints. Once view.js hydrates it
 * toggles .is-active on the active slide; the [data-wp-class] hook below then
 * governs visibility and this fallback is suppressed via :where() specificity.
 */
.woo-sil7en-hero-carousel__slide:first-child {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.woo-sil7en-hero-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

/*
 * After hydration, a non-active first slide must hide again. The is-active
 * class is the single source of truth once JS runs, so an explicit "not active
 * but hydrated" rule keeps the first slide from staying pinned visible.
 */
.woo-sil7en-hero-carousel.is-hydrated
	.woo-sil7en-hero-carousel__slide:not(.is-active) {
	opacity: 0;
	visibility: hidden;
	z-index: 0;
}

/* ---- Layer 1: fill (colour / gradient), painted as the slide background --- */
.woo-sil7en-hero-carousel__slide.is-fill-color {
	background:
		radial-gradient(120% 120% at 85% 15%, rgb(255 255 255 / 0.12) 0%, transparent 45%),
		linear-gradient(
			145deg,
			var(--hc-bg-color, var(--wp--preset--color--surface-strong, #35008b)) 0%,
			color-mix(in srgb, var(--hc-bg-color, #35008b) 80%, #000) 100%
		);
}

.woo-sil7en-hero-carousel__slide.is-fill-gradient {
	background:
		radial-gradient(120% 120% at 85% 15%, rgb(255 255 255 / 0.12) 0%, transparent 45%),
		linear-gradient(
			145deg,
			var(--hc-bg-color, var(--wp--preset--color--primary, #35008b)) 0%,
			var(--hc-bg-color2, var(--wp--preset--color--accent, #c8102e)) 100%
		);
}

/* ---- Layer 2: media (image / video) --- */
.woo-sil7en-hero-carousel__media {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
}

.woo-sil7en-hero-carousel__img,
.woo-sil7en-hero-carousel__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Layer 3: overlay scrim (solid colour or directional gradient) --- */
.woo-sil7en-hero-carousel__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.woo-sil7en-hero-carousel__overlay--solid {
	background-color: var(--hc-overlay-color, #150a1e);
	opacity: var(--hc-overlay-opacity, 0.45);
}

.woo-sil7en-hero-carousel__overlay--gradient {
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--hc-overlay-color, #150a1e) calc(var(--hc-overlay-opacity, 0.45) * 130%), transparent) 0%,
		color-mix(in srgb, var(--hc-overlay-color, #150a1e) calc(var(--hc-overlay-opacity, 0.45) * 100%), transparent) 45%,
		color-mix(in srgb, var(--hc-overlay-color, #150a1e) calc(var(--hc-overlay-opacity, 0.45) * 25%), transparent) 100%
	);
}

/* ---- Layer 4: texture sits ABOVE the media so it is always visible --- */
.woo-sil7en-hero-carousel__slide .woo-sil7en-texture {
	z-index: 3;
}

/* ---- Layer 5: content. Vertical padding lives HERE (inside the slide). --- */
.woo-sil7en-hero-carousel__content {
	position: relative;
	z-index: 4;
	width: min(100% - 2 * var(--wp--preset--spacing--md, 1.5rem), var(--wp--custom--layout--wide-size, 78rem));
	margin-inline: auto;
	padding-block: var(--hc-content-pad, var(--wp--preset--spacing--2xl, 4.5rem));
	display: grid;
	gap: var(--wp--preset--spacing--sm, 1rem);
	justify-items: start;
	text-align: start;
}

@media (min-width: 768px) {
	.woo-sil7en-hero-carousel__content > * {
		max-width: 32rem;
	}
}

/*
 * Overlay-header clearance: when the transparent site-header sits over a leading
 * hero, grow that hero by the header height and push its (vertically centred)
 * content down by the same amount, so the content keeps its position in the
 * visible area BELOW the bar and never sits under it. Scoped to the first hero
 * in the content (the only one the header overlays). --woo-sil7en-overlay-header-h
 * is published by the header block per breakpoint (fallback kept here).
 */
.woo-sil7en-overlay-header .wp-block-post-content > .woo-sil7en-hero-carousel:first-child {
	min-height: calc(
		var(--hc-min-height, clamp(28rem, 70svh, 44rem)) + var(--woo-sil7en-overlay-header-h, 5rem)
	);
}

.woo-sil7en-overlay-header
	.wp-block-post-content
	> .woo-sil7en-hero-carousel:first-child
	.woo-sil7en-hero-carousel__slide {
	padding-block-start: var(--woo-sil7en-overlay-header-h, 5rem);
}

/* Chip — an inline-flex pill (optional icon + text). Flat or gradient fill,
   optional uppercase, with a premium hover + a perpetual shimmer on gradient. */
.woo-sil7en-hero-carousel__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.42em 0.9em;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.1;
	border-radius: var(--wp--custom--radius--pill, 999px);
	color: var(--wp--preset--color--accent-ink, #1a0800);
	background: var(--wp--preset--color--accent, #ffc800);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}

.woo-sil7en-hero-carousel__eyebrow.is-upper {
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.woo-sil7en-hero-carousel__eyebrow span {
	display: inline-block;
}

.woo-sil7en-hero-carousel__eyebrow-icon {
	flex: none;
	inline-size: 1.05em;
	block-size: 1.05em;
}

/* Gradient variant — on-brand teal → amber, dark legible text, animated. */
.woo-sil7en-hero-carousel__eyebrow--gradient {
	color: var(--wp--preset--color--primary-ink, #06302f);
	background-image: linear-gradient(
		115deg,
		var(--wp--preset--color--primary, #00b8bf),
		var(--wp--preset--color--accent, #ffc800),
		var(--wp--preset--color--primary, #00b8bf)
	);
	background-size: 220% 100%;
	background-position: 0% 50%;
}

/* Hover + perpetual micro-motion (motion-safe). */
@media (prefers-reduced-motion: no-preference) {
	.woo-sil7en-hero-carousel__eyebrow {
		transition:
			transform 280ms cubic-bezier(0.34, 1.4, 0.5, 1),
			box-shadow 280ms ease;
	}

	.woo-sil7en-hero-carousel__eyebrow:hover {
		transform: translateY(-2px) scale(1.04);
		box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--wp--preset--color--accent, #ffc800) 65%, transparent);
	}

	.woo-sil7en-hero-carousel__eyebrow:hover .woo-sil7en-hero-carousel__eyebrow-icon {
		animation: woo-sil7en-hc-chip-nudge 1.1s ease-in-out infinite;
	}

	.woo-sil7en-hero-carousel__eyebrow--gradient {
		animation: woo-sil7en-hc-chip-shimmer 4.5s linear infinite;
	}

	@keyframes woo-sil7en-hc-chip-shimmer {
		to {
			background-position: 220% 50%;
		}
	}

	@keyframes woo-sil7en-hc-chip-nudge {
		50% {
			transform: translateX(2px);
		}
	}
}

.woo-sil7en-hero-carousel__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
	font-size: var(--wp--preset--font-size--2xl, clamp(2.75rem, 2rem + 3.2vw, 4.5rem));
	font-weight: 500;
	line-height: var(--wp--custom--font--line-height--tight, 1.1);
	letter-spacing: var(--wp--custom--font--tracking--tight, -0.02em);
}

.woo-sil7en-hero-carousel__sub {
	margin: 0;
	font-size: var(--wp--preset--font-size--md, 1.25rem);
	line-height: var(--wp--custom--font--line-height--normal, 1.5);
	opacity: 0.92;
}

.woo-sil7en-hero-carousel__sub > :first-child { margin-block-start: 0; }
.woo-sil7en-hero-carousel__sub > :last-child { margin-block-end: 0; }

.woo-sil7en-hero-carousel__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2xs, 0.5rem);
	margin-top: var(--wp--preset--spacing--xs, 0.75rem);
	padding: 0.85em 1.5em;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--primary, #531099);
	color: var(--wp--preset--color--primary-ink, #fff);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--wp--custom--motion--duration--fast, 150ms)
			var(--wp--custom--motion--ease--standard, ease),
		transform var(--wp--custom--motion--duration--fast, 150ms)
			var(--wp--custom--motion--ease--standard, ease);
}

.woo-sil7en-hero-carousel__cta:hover {
	background: var(--wp--preset--color--primary-hover, #400080);
}

.woo-sil7en-hero-carousel__cta:active {
	transform: translateY(1px);
}

/* --- Controls --- */
.woo-sil7en-hero-carousel__controls {
	position: absolute;
	inset-inline: 0;
	bottom: var(--wp--preset--spacing--sm, 1rem);
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--2xs, 0.5rem);
	width: min(100% - 2 * var(--wp--preset--spacing--md, 1.5rem), var(--wp--custom--layout--wide-size, 78rem));
	margin-inline: auto;
	pointer-events: none;
}

.woo-sil7en-hero-carousel__nav {
	pointer-events: auto;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid rgb(255 255 255 / 0.5);
	border-radius: var(--wp--custom--radius--circle, 50%);
	background: rgb(21 10 30 / 0.45);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration--fast, 150ms) ease;
}

.woo-sil7en-hero-carousel__nav:hover {
	background: var(--wp--preset--color--primary, #531099);
}

.woo-sil7en-hero-carousel__dots {
	position: absolute;
	inset-inline: 0;
	bottom: var(--wp--preset--spacing--sm, 1rem);
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 0; /* the 44px buttons provide the spacing; visual dot is drawn via ::before */
	/* The full-width container sits over the prev/next arrows; let clicks in its
		empty areas fall through to the arrows, only the dots themselves catch them. */
	pointer-events: none;
}

/*
 * The button is a 44×44 WCAG touch target; the small visual dot is drawn with a
 * ::before so the tap area is accessible without enlarging the dot itself.
 */
.woo-sil7en-hero-carousel__dot {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
	pointer-events: auto; /* re-enable on the dots themselves (container is none) */
}

.woo-sil7en-hero-carousel__dot::before {
	content: "";
	inline-size: 0.75rem;
	block-size: 0.75rem;
	border: 1px solid rgb(255 255 255 / 0.7);
	border-radius: var(--wp--custom--radius--circle, 50%);
	background: transparent;
	transition: background-color var(--wp--custom--motion--duration--fast, 150ms) ease,
		transform var(--wp--custom--motion--duration--fast, 150ms) ease;
}

.woo-sil7en-hero-carousel__dot.is-active::before {
	background: var(--wp--preset--color--accent, #ffc800);
	border-color: var(--wp--preset--color--accent, #ffc800);
	transform: scale(1.15);
}

/* Visible focus on every control. */
.woo-sil7en-hero-carousel__nav:focus-visible,
.woo-sil7en-hero-carousel__dot:focus-visible,
.woo-sil7en-hero-carousel__cta:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #ffc800);
	outline-offset: 2px;
}

/* --- Motion: cross-fade only when motion is welcome --- */
@media (prefers-reduced-motion: no-preference) {
	.woo-sil7en-hero-carousel__slide {
		transition: opacity var(--wp--custom--motion--duration--slow, 400ms)
			var(--wp--custom--motion--ease--standard, ease);
	}
}

/* Reduced motion: hide background videos entirely; poster image remains. */
@media (prefers-reduced-motion: reduce) {
	.woo-sil7en-hero-carousel__video {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Dark section contrast (front-page brand story on surface-strong)
 * The brand-story sits on a dark purple section; its heading/body/buttons
 * default to dark ink and become unreadable. These scoped overrides restore
 * WCAG AA contrast (light text on dark purple) without touching the shared
 * media-text / button / section blocks. Tokens only.
 * ---------------------------------------------------------------------- */
.has-surface-strong-background-color {
	color: var(--wp--preset--color--base, #fff);
}

.has-surface-strong-background-color :is(h1, h2, h3, h4, p),
.has-surface-strong-background-color .woo-sil7en-heading {
	color: var(--wp--preset--color--base, #fff);
}

.has-surface-strong-background-color p {
	opacity: 0.92;
}

/* Secondary (outline) buttons: light outline + light ink on the dark band. */
.has-surface-strong-background-color .woo-sil7en-button--secondary {
	border-color: rgb(255 255 255 / 0.55);
	color: var(--wp--preset--color--base, #fff);
	background: transparent;
}

.has-surface-strong-background-color .woo-sil7en-button--secondary:hover {
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--surface-strong, #35008b);
	border-color: var(--wp--preset--color--base, #fff);
}

.has-surface-strong-background-color .woo-sil7en-button--secondary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #ffc800);
	outline-offset: 2px;
}