/*
 * Homepage — Green Strips (A/B variant)
 *
 * Loaded ONLY for template-homepage-green.php, on top of home.css. Every rule
 * is scoped under .hero-slider--green so the standard homepage hero is
 * completely unaffected. The idea: drop the full dark image overlay and back
 * the hero copy with heritage-green strips instead, so the photography reads
 * cleaner while the text stays legible.
 */

/* 1. Remove the dark wash — the whole point of the test. */
.hero-slider--green .hero-slide__shade {
	display: none;
}

/* 2. Let the photography breathe now there's no dark overlay softening it. */
.hero-slider--green .hero-slide__bg {
	filter: saturate(0.95) contrast(1.03);
}

/* 3. Green backing strips behind the hero copy. Each element hugs its own
 *    text width so the strips sit tight to the words rather than spanning
 *    the whole column. */
.hero-slider--green .hero-slide__eyebrow {
	background: #fff;
	color: var(--heritage-green);
	padding: 0.4em 0.7em;
	border-radius: 3px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.hero-slider--green .hero-slide__title {
	width: fit-content;
	max-width: 100%;
	background: var(--heritage-green);
	color: #fff;
	padding: 0.22em 0.5em;
	border-radius: 3px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.2);
}

.hero-slider--green .hero-slide .container > p {
	width: fit-content;
	max-width: min(72ch, 100%); /* wider main-copy strip */
	background: var(--heritage-green);
	color: #fff;
	padding: 0.55em 0.8em;
	border-radius: 3px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
}

/* 4. Keep a hint of bottom shading purely so the pagination dots stay
 *    visible against bright photos (much lighter than the removed overlay). */
.hero-slider--green .hero-slide::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 30%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.28), transparent);
	z-index: 1;
	pointer-events: none;
}

/* 5. Smoother motion.
 *
 * The standard hero restarts a scale(1.12)→scale(1) zoom on every slide
 * change, which snaps the background at the moment of the swap (the jerky
 * jump on pagination). Here every slide's background instead runs one slow,
 * eased, continuous drift-zoom that never resets — so a slide change is a
 * pure crossfade between two images already moving in sync, with nothing to
 * snap to. The higher-specificity selector overrides the standard rule for
 * both idle and active slides. */
@keyframes heroGreenDrift {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

.hero-slider--green .hero-slide__bg,
.hero-slider--green .hero-slide.is-active .hero-slide__bg {
	animation: heroGreenDrift 26s ease-in-out infinite alternate;
}

/* Gentler, slightly longer crossfade between slides. */
.hero-slider--green .hero-slide {
	transition: opacity 1s ease, visibility 1s ease;
}

/* Soften the copy cascade — shorter travel, smoother easing. */
.hero-slider--green .hero-slide .container > * {
	transform: translateY(0.6rem);
	transition:
		opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Inline "Read more" after the trailing ellipsis of the intro copy. Sits
 * inside the green strip, so it's white to read against the green. */
.hero-slider--green .hero-slide__readmore {
	display: inline-block;
	margin-left: 0.5em;
	white-space: nowrap;
	font-family: var(--font-heading);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 1px;
}

.hero-slider--green .hero-slide__readmore span {
	display: inline-block;
	transition: transform 0.25s ease;
}

.hero-slider--green .hero-slide__readmore:hover span {
	transform: translateX(3px);
}

/* First-load copy entrance — hold the first slide's copy in the hidden base
 * state (no transition) for one frame so the cascade can then play in on
 * load, instead of the copy appearing instantly. Released by homepage.js. */
.hero-slider--green .hero-slide--entering .container > * {
	opacity: 0 !important;
	transform: translateY(0.6rem) !important;
	transition: none !important;
}

/* Hero CTA button — solid white with green text by default, inverting to
 * green with white text on hover, to match the green-strip treatment. */
.hero-slider--green .hero-slide .btn-secondary {
	background: #fff;
	color: var(--heritage-green);
	border-color: #fff;
}

/* One transition for the button covering BOTH jobs, with per-property delays:
 *  - opacity/transform inherit the copy cascade's stagger (0.42s — this is the
 *    4th item) so the button fades in with the rest of the hero copy;
 *  - the hover colours run on zero delay so the invert is immediate.
 * Higher specificity than the cascade's nth-child transition-delay rule so
 * these per-property delays win. */
.hero-slider--green .hero-slide.is-active:not(.hero-slide--exiting) .container > .btn-secondary {
	transition:
		opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.42s,
		transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.42s,
		background-color 0.28s ease 0s,
		color 0.28s ease 0s,
		border-color 0.28s ease 0s;
}

.hero-slider--green .hero-slide .btn-secondary:hover,
.hero-slider--green .hero-slide .btn-secondary:focus-visible {
	background: var(--heritage-green);
	color: #fff;
	border-color: var(--heritage-green);
}

/* Respect reduced-motion: hold still, no drift. */
@media (prefers-reduced-motion: reduce) {
	.hero-slider--green .hero-slide__bg,
	.hero-slider--green .hero-slide.is-active .hero-slide__bg {
		animation: none !important;
		transform: none !important;
	}
}