/* ── Testimonials 2026 ─────────────────────────────────────────────────────
 *
 * Canonical design source: docs/mockups/homepage-2026-05/ on the
 * relaxed-kirch-d4beda worktree (.vg-testimonials-block in that file).
 *
 * Dark green band with a forest-aerial photo behind it. 2-col layout:
 *   left = orange-prefixed eyebrow + heading + intro
 *   right = glassy frosted quote card + nav buttons row below
 * Quote card has orange opening ❝ glyph top-left and closing ❞ glyph
 * right-aligned below the quote text. Author shown white, company in orange
 * below it (no pill chip). Company logo (when uploaded) rendered as a white
 * silhouette via brightness/invert filter; text fallback when absent.
 * No watermark, no counter, no "more customer feedback" label — those
 * belonged to an older mockup variant.
 *
 * Selectors: .vig-testimonials-2026__* (BEM, section-scoped).
 *
 * Padding override note: the base .vig-acf-section { padding: 88px 24px }
 * rule in acf-sections.css WILL win if .vig-testimonials-2026 does not
 * declare padding explicitly at base AND mobile breakpoints. The overrides
 * below are intentional — do not remove them.
 *
 * Contrast notes (dark band on photo overlay):
 *   white-on-overlay  → AAA easily (overlay sits at 86–92% black-green)
 *   --color-secondary-500 (#F48113) on overlay → ~5.6:1 (AA small / AAA large)
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Section root ────────────────────────────────────────────────────────── */

/* IMPORTANT: explicit padding defeats base .vig-acf-section { padding: 88px 24px }. */
.vig-testimonials-2026 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	padding: 80px 32px;
	background:
		linear-gradient(145deg, rgba(8, 39, 20, 0.86), rgba(4, 20, 10, 0.92)),
		url("/wp-content/uploads/2026/05/03-forestry-aerial-drone.webp") center / cover no-repeat;
}

/* ── 2-col layout ────────────────────────────────────────────────────────── */

.vig-testimonials-2026__layout {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: 56px;
	align-items: stretch;
}

/* ── Lead column ─────────────────────────────────────────────────────────── */

.vig-testimonials-2026__lead {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.vig-testimonials-2026__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-secondary-500);
}

.vig-testimonials-2026__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

.vig-testimonials-2026__heading {
	margin: 0 0 16px;
	max-width: 280px;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: #fff;
}

.vig-testimonials-2026__intro {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
}

/* ── Stage column ────────────────────────────────────────────────────────── */

.vig-testimonials-2026__stage {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* Slides container — relative so absolute-positioned inactive slides can
 * stack on top of the active one without affecting flow. */
.vig-testimonials-2026__slides {
	position: relative;
}

/* ── Quote card (slide) ──────────────────────────────────────────────────── */

.vig-testimonials-2026__feature {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding: 56px 40px 34px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 28px;
	background:
		radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 42%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Opening quote glyph — heavy double turned comma (U+275D), orange, serif. */
.vig-testimonials-2026__feature::before {
	content: "\275D";
	position: absolute;
	top: 26px;
	left: 36px;
	color: var(--color-secondary-500);
	font-size: 3.4rem;
	line-height: 1;
	font-weight: 900;
	font-family: "Times New Roman", Georgia, serif;
	pointer-events: none;
}

/* Inactive slides stack absolutely over the active one — kept in DOM for
 * aria-live announcements, but invisible + non-interactive. We deliberately
 * do NOT use the `hidden` attribute so the opacity transition fires. */
.vig-testimonials-2026__feature:not(.is-active) {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.vig-testimonials-2026__feature.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.vig-testimonials-2026__feature {
		transition: opacity 240ms ease, visibility 0s linear 240ms;
	}

	.vig-testimonials-2026__feature.is-active {
		transition: opacity 240ms ease, visibility 0s linear 0s;
	}
}

/* ── Quote text + closing glyph ──────────────────────────────────────────── */

/* Defeat global blockquote chrome from typography.css (green border, italic,
 * padding-left, margin, secondary text colour). The inner <p> font-size also
 * has to be set explicitly because typography.css's global `p { font-size:
 * 15px }` rule otherwise wins over the blockquote font-size. */
.vig-testimonials-2026__quote {
	margin: 0;
	padding: 0;
	padding-top: 64px;
	border: 0;
	font-style: normal;
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -0.025em;
	color: rgba(255, 255, 255, 0.96);
}

.vig-testimonials-2026__quote p {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/* Closing quote glyph — sits below the quote text, right-aligned, same
 * orange + serif treatment as the opening one. */
.vig-testimonials-2026__quote::after {
	content: "\275E";
	display: block;
	text-align: right;
	margin-top: 16px;
	color: var(--color-secondary-500);
	font-size: 3.4rem;
	line-height: 0.8;
	font-weight: 900;
	font-family: "Times New Roman", Georgia, serif;
	pointer-events: none;
}

/* ── Footer (person + logo) ──────────────────────────────────────────────── */

.vig-testimonials-2026__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.vig-testimonials-2026__person {
	color: #fff;
	min-width: 0;
}

.vig-testimonials-2026__name {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

/* Company name in brand orange, BELOW the author name — not a pill chip,
 * just inline coloured text. */
.vig-testimonials-2026__company {
	margin: 4px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-secondary-500);
	letter-spacing: 0.02em;
}

/* Logo block sits to the right of the person info. */
.vig-testimonials-2026__logo {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 80px;
	flex: 0 0 auto;
}

/* Image variant — uploaded logo rendered in its actual colours, sat on a
 * small light chip so it stays legible against the dark forest band. */
.vig-testimonials-2026__logo-img {
	display: block;
	max-width: 116px;
	max-height: 76px;
	width: auto;
	height: auto;
	background: rgba(255, 255, 255, 0.94);
	padding: 8px 12px;
	border-radius: 8px;
	box-sizing: border-box;
}

/* Text fallback — uppercase, letter-spaced, muted-white. */
.vig-testimonials-2026__logo--text {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

/* ── Controls row (prev/next only) ──────────────────────────────────────── */

.vig-testimonials-2026__controls {
	display: flex;
	justify-content: flex-end;
	padding: 0 8px;
}

.vig-testimonials-2026__nav {
	display: inline-flex;
	gap: 12px;
}

.vig-testimonials-2026__nav-btn {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 220ms ease, border-color 220ms ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font: inherit;
}

.vig-testimonials-2026__nav-btn:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.4);
}

.vig-testimonials-2026__nav-btn:active {
	transform: translateY(1px);
}

.vig-testimonials-2026__nav-btn:focus-visible {
	outline: 2px solid var(--color-secondary-500);
	outline-offset: 3px;
}

.vig-testimonials-2026__nav-btn svg {
	display: block;
}

/* ── Breakpoints ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	/* IMPORTANT: explicit padding here defeats the base
	 * .vig-acf-section { padding: 64px 20px } from acf-sections.css's
	 * 768px breakpoint. */
	.vig-testimonials-2026 {
		padding: 36px 28px;
	}

	.vig-testimonials-2026__layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.vig-testimonials-2026__heading {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.vig-testimonials-2026 {
		padding: 32px 18px;
	}

	.vig-testimonials-2026__feature {
		padding: 44px 26px 26px;
		border-radius: 22px;
	}

	.vig-testimonials-2026__feature::before {
		top: 18px;
		left: 22px;
		font-size: 2.8rem;
	}

	.vig-testimonials-2026__quote {
		padding-top: 52px;
	}

	.vig-testimonials-2026__quote::after {
		font-size: 2.8rem;
	}

	.vig-testimonials-2026__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.vig-testimonials-2026__logo {
		justify-content: flex-start;
	}
}

/* ── Perf: defer offscreen render ───────────────────────────────────
 * Testimonials sits below the fold and ships a 248KB forest aerial
 * background. content-visibility: auto skips layout work until the
 * section nears the viewport, which keeps the testimonials drone
 * image out of the initial LCP race on mobile. */
.vig-testimonials-2026 {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}