/* HERO-01 (#783): the big home slider, shortcode [ra_hero_slider]. Plain CSS, loaded only where the shortcode renders.
   Reference: docs/design/home-v8 (lead/home-v8-reference, v22). Production CleanSkin look: Josefin Sans + Lato, purple buttons with 4px corners. */

.ra-hero {
	--ra-hero-brand: #875fa3;
	--ra-hero-brand-dark: #7a5395;
	/* The button radius is Home v3's one token (--h3-r-btn, 8px; --h3-r-pill for the small outline arrows), so the
	   hero buttons and the rest of the page round together; the fallbacks are for a page without home-v3.css. */
	--ra-hero-radius: var(--h3-r-btn, 8px);
	--ra-hero-pill: var(--h3-r-pill, 999px);
	--ra-hero-gut: clamp(16px, 4vw, 88px);
	--ra-hero-dur: 11s;
	position: relative;
	box-sizing: border-box;
	/* As wide as its container, which on the Home v3 page is the whole window (home-v3.css lifts the
	   parent theme's column). The earlier 100vw plus negative margins went wrong in a narrower
	   container (shifted 30 to 55px left after a resize) and ignored the scrollbar width. */
	width: 100%;
	max-width: none;
	margin-inline: 0;
	height: clamp(540px, calc(100svh - 120px), 1240px);
	overflow: hidden;
	background: #2b2522;
	color: #fff;
}

.ra-hero *,
.ra-hero *::before,
.ra-hero *::after {
	box-sizing: border-box;
}

/* Without JS the first slide shows and nothing moves. */
.ra-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.8s ease, visibility 0s linear 1.8s;
}

.ra-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1.8s ease, visibility 0s;
}

.ra-hero__scene picture {
	display: block;
	position: absolute;
	inset: 0;
}

.ra-hero__scene {
	position: absolute;
	inset: 0;
	transform-origin: 65% 50%;
}

.ra-hero__slide.is-active .ra-hero__scene {
	animation: ra-hero-zoom 13s ease-out both;
}

.ra-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

.ra-hero__scrim {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(20, 16, 14, 0.42) 0%, rgba(20, 16, 14, 0.22) 60%, rgba(20, 16, 14, 0.12) 100%);
}

/* The gift-box slide has a light photo (white flowers, a pale box) and its centred headline could not
   be read (Owner, 2026-10-06). A darker oval behind the text; measured on the staging page with the
   copy hidden, white text against the 95th-percentile luminance of the pixels under the heading:
   5.3:1 at 390px, 5.8:1 at 1440px, 5.9:1 at 2560px (the page as it was: 2.8, 3.5 and 3.6:1). WCAG AA
   for text of this size is 3:1; 4.5:1 is the stricter target the Owner asked for. This selector is
   more specific than the plain scrim rules, so it also wins inside the phone media query. */
.ra-hero__slide[data-slide="gifts"] .ra-hero__scrim {
	background:
		radial-gradient(ellipse 85% 60% at 50% 50%, rgba(18, 14, 12, 0.52) 0%, rgba(18, 14, 12, 0.44) 55%, rgba(18, 14, 12, 0.2) 100%),
		linear-gradient(rgba(18, 14, 12, 0.08), rgba(18, 14, 12, 0.08));
}

/* The soap-basket slide: its headline sits low on a light basket. Same method, a darker bottom:
   5.8:1 at 390px, 5.2:1 at 1440px, 5.3:1 at 2560px (the slide with the white headline and no extra scrim:
   3.4, 2.5 and 2.8:1). */
.ra-hero__slide[data-slide="garden"] .ra-hero__scrim {
	background: linear-gradient(0deg, rgba(18, 14, 12, 0.66) 0%, rgba(18, 14, 12, 0.52) 40%, rgba(18, 14, 12, 0.14) 74%, rgba(18, 14, 12, 0.06) 100%);
}

/* The founders slide (slide 1): the headline is low and white on the couple's shirts and hair. Only the
   bottom is darker, so the faces above stay as photographed. Same method, worst 5% of the pixels behind
   the heading: 5.3:1 at 390px, 5.5:1 at 1440px, 6.1:1 at 2560px (before: 3.7, 3.4 and 4.7:1). */
.ra-hero__slide[data-slide="founders"] .ra-hero__scrim {
	background: linear-gradient(0deg, rgba(18, 14, 12, 0.62) 0%, rgba(18, 14, 12, 0.52) 34%, rgba(18, 14, 12, 0.18) 62%, rgba(18, 14, 12, 0.05) 100%);
}

.ra-hero__copy {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	justify-items: center;
	text-align: center;
	gap: clamp(22px, 2.2vw, 44px);
	padding-inline: var(--ra-hero-gut);
}

/* Slides 1 and 3: the text sits low and a little smaller so the faces and the basket stay clear. */
.ra-hero__copy--low {
	align-content: end;
	padding-bottom: clamp(96px, 12vh, 170px);
	gap: clamp(18px, 1.8vw, 36px);
}

.ra-hero__copy--low .ra-hero__heading {
	font-size: clamp(2rem, 3.4vw, 4.8rem);
}

.ra-hero .ra-hero__heading {
	margin: 0;
	max-width: 20ch;
	font-family: "Josefin Sans", "Century Gothic", "Futura", system-ui, sans-serif;
	font-weight: 300;
	font-size: clamp(2.1rem, 3.9vw, 5.4rem);
	line-height: 1.14;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.25);
}

.ra-hero__slide.is-active .ra-hero__copy > * {
	animation: ra-hero-rise 1.1s ease both;
}

.ra-hero__slide.is-active .ra-hero__copy > *:nth-child(2) {
	animation-delay: 0.25s;
}

/* One button style: purple, filled on photos, darker on hover and focus; 4px corners. */
.ra-hero .ra-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Master design `btn` (PARITY-A row 7): 14px text, 48px high. It was 0.78rem and 37 to 40px. */
	min-height: 48px;
	padding: 0 2.2em;
	border: 2px solid var(--ra-hero-brand);
	border-radius: var(--ra-hero-radius);
	background: var(--ra-hero-brand);
	color: #fff;
	font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s, color 0.25s;
}

.ra-hero .ra-hero__btn:hover,
.ra-hero .ra-hero__btn:focus-visible {
	background: var(--ra-hero-brand-dark);
	border-color: var(--ra-hero-brand-dark);
	color: #fff;
}

/* From 1024px every slide's text sits in the lower third (Lead 05.10 "text low", PARITY-A row 3, LEAD 6247263259): the headline was
   four lines of 56px and its block began at 45% of the hero, across the faces of the founders' slide. Now two lines (a wider
   measure, in em so it follows the size), a little smaller, the block pushed down to the controls, and a darker bottom behind it
   on every slide (the gifts slide's centred oval became a bottom gradient, as the garden slide's). A phone is unchanged. */
@media (min-width: 1024px) {
	.ra-hero__copy {
		align-content: end;
		padding-bottom: 84px;
		gap: clamp(16px, 1.4vw, 24px);
	}

	.ra-hero .ra-hero__copy .ra-hero__heading {
		max-width: 20em;
		font-size: clamp(2rem, 3vw, 4.2rem);
	}

	.ra-hero__scrim,
	.ra-hero__slide[data-slide="gifts"] .ra-hero__scrim {
		background: linear-gradient(0deg, rgba(18, 14, 12, 0.66) 0%, rgba(18, 14, 12, 0.52) 34%, rgba(18, 14, 12, 0.16) 62%, rgba(18, 14, 12, 0.06) 100%);
	}
}

.ra-hero__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(20px, 3vw, 48px);
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-inline: var(--ra-hero-gut);
}

.ra-hero__lines {
	display: flex;
	gap: 0;
	align-items: center;
}

/* Slide indicators as thin bars (Owner, 2026-10-07): the button is a 44 x 44px tap area (the active one is
   longer), the bar itself is 2px, white at low opacity when inactive, solid while it fills. The parent theme
   draws every <button> with a 2px border and padding and wins over a plain rule, which made these three
   outlined boxes of about 74 x 36px; the !important on the box properties is for that. */
.ra-hero .ra-hero__line {
	position: relative;
	box-sizing: border-box !important;
	width: 44px;
	height: 44px !important;
	min-width: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: width 0.35s ease;
}

.ra-hero .ra-hero__line[aria-current="true"] {
	width: 76px;
}

.ra-hero .ra-hero__line:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -6px;
}

.ra-hero__line::before {
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
	background: #fff;
	opacity: 0.4;
}

.ra-hero__line span {
	position: absolute;
	left: 6px;
	top: 50%;
	width: 0;
	max-width: calc(100% - 12px);
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
	background: #fff;
}

.ra-hero__line[aria-current="true"] span {
	animation: ra-hero-fill var(--ra-hero-dur) linear forwards;
}

.ra-hero.is-paused .ra-hero__line[aria-current="true"] span {
	animation-play-state: paused;
}

.ra-hero.is-static .ra-hero__line[aria-current="true"] span {
	animation: none;
	width: 100%;
}

.ra-hero__count {
	margin-left: 8px;
	font-family: "Josefin Sans", "Century Gothic", system-ui, sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.ra-hero__arrows {
	position: absolute;
	right: var(--ra-hero-gut);
	display: flex;
	gap: 8px;
}

.ra-hero .ra-hero__arrow {
	width: 46px;
	height: 46px;
	min-width: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--ra-hero-pill);
	background: none;
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s;
}

.ra-hero .ra-hero__arrow:hover,
.ra-hero .ra-hero__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.18);
}

@keyframes ra-hero-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.07); }
}

@keyframes ra-hero-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes ra-hero-fill {
	to { width: 100%; }
}

@media (max-width: 700px) {
	.ra-hero {
		height: clamp(520px, 82svh, 760px);
	}

	.ra-hero__scrim {
		background: linear-gradient(0deg, rgba(20, 16, 14, 0.5) 0%, rgba(20, 16, 14, 0.25) 55%, rgba(20, 16, 14, 0.12) 100%);
	}

	.ra-hero__copy {
		padding-top: 40px;
	}

	.ra-hero__arrows {
		display: none;
	}
}

/* Reduced motion: no zoom, no rise, an instant swap; the JS also stops the autoplay. */
@media (prefers-reduced-motion: reduce) {
	.ra-hero__slide,
	.ra-hero__slide.is-active {
		transition: none;
	}

	.ra-hero__slide.is-active .ra-hero__scene,
	.ra-hero__slide.is-active .ra-hero__copy > * {
		animation: none;
	}

	.ra-hero__line[aria-current="true"] span {
		animation: none;
		width: 100%;
	}
}