/* ═════════════════════════════════════════════════════════════════
   SECTION 7 — TESTIMONIALS
   Full-bleed infinite marquee of quote cards (cards duplicated
   in markup; track translates -50% → loops seamlessly).
   ═════════════════════════════════════════════════════════════════ */

.testi { background: var(--cream); position: relative; overflow: hidden; }
.testi::after {
	content: '';
	position: absolute;
	left: -10vw; top: 55%;
	transform: translateY(-50%);
	width: clamp(380px, 48vw, 720px);
	height: clamp(380px, 48vw, 720px);
	/* background: url(../../../img/object.png) center/contain no-repeat; */
	opacity: .10;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 40% 50%, black 25%, transparent 68%);
	mask-image:         radial-gradient(ellipse 70% 70% at 40% 50%, black 25%, transparent 68%);
}
.testi > * { position: relative; z-index: 1; }

.testi-head { max-width: 1280px; margin-bottom: clamp(48px, 6vw, 96px); }
.testi-head .display { text-transform: uppercase; }
/* The italic tail is rendered INSIDE the last .hl-line (see front-page.php),
   so it automatically sits on the same visual line as "staff". Align the
   italic baseline with the uppercase sans text and add a little breathing
   room between them. */
.testi-head .display .hl-line .it-tail {
	display: inline;
	margin-left: .2em;
	vertical-align: baseline;
}

/* ── Full-bleed drag-to-scroll slider ──
   Cards are rendered 3× in front-page.php. JS (initTestiSlider) parks
   scrollLeft in the middle copy on load and snaps it back to the
   middle whenever the user drags/scrolls past either edge — so scrolling
   feels infinite in both directions. */
.testi-slider {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	/* Soft fade at the left/right edges. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 5%, black 95%, transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, black 5%, black 95%, transparent 100%);
	/* Hide the native scrollbar while keeping the element scrollable. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.testi-slider::-webkit-scrollbar { display: none; }
.testi-slider.is-grabbing { cursor: grabbing; }

/* ── Slider controls under the slider ──
   Two clickable arrows (prev / next) that advance the slider by one
   card. Keeps the same centered visual position as the old drag hint.
   initTestiSlider() wires the click → scrollBy(step) logic. */
.testi-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(16px, 2vw, 28px);
	margin-top: clamp(24px, 3vw, 40px);
	margin-left: 50vw;
}
.testi-arrow {
	background: transparent;
	border: 0;
	padding: 6px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: transform .2s ease, opacity .2s ease;
	color: var(--ink);
}
.testi-arrow img {
	display: block;
	width: clamp(64px, 7vw, 96px);
	height: auto;
	pointer-events: none; /* clicks land on the button, not the img */
	transition: opacity .2s ease;
}
.testi-arrow:hover            { transform: scale(1.08); }
.testi-arrow:hover img        { opacity: .75; }
.testi-arrow:active           { transform: scale(.94); }
.testi-arrow:focus-visible    { outline: 2px solid var(--orange); outline-offset: 4px; }
.testi-track {
	display: flex;
	width: max-content;
	padding: 16px 0;     /* breathing room for the hover-lift shadow */
}

/* ── Quote cards (Figma spec) ──
   555 × auto, 40px padding, 24px inner gap, 23px radius, 1px #FF5304
   border over a 27%-opaque cream fill with 19.5px backdrop-blur. */
.quote-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 555px;
	padding: 40px;
	border-radius: 23px;
	border: 1px solid #FF5304;
	background: rgba(240, 240, 239, 0.27);
	-webkit-backdrop-filter: blur(19.5px);
	        backdrop-filter: blur(19.5px);
	position: relative;
	transition: box-shadow .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
	/* Slider sizing — fixed width + margin-right spacing between cards. */
	flex-shrink: 0;
	margin-right: 24px;
}
.testi-slider.is-grabbing .quote-card { pointer-events: none; }

/* Inline opening/closing quote marks live INSIDE .quote-text, wrapping
   the first and last characters of the quote. Same serif-italic style
   as the quote text itself but a touch larger/coloured for punch.
   `.qm-l` sits flush to the first word; `.qm-r` hugs the last word. */
.quote-text .qm {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--orange);
	line-height: 1;
}
.quote-text .qm-l { margin-right: .08em; }
.quote-text .qm-r { margin-left: .04em; }
.quote-card.green .quote-text .qm { color: var(--green); }

.quote-text {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(17px, 1.3vw, 22px);
	line-height: 1.45;
	color: var(--ink);
	margin: 0;
}
/* Children are set to full width because the card uses
   `align-items: flex-start`, which would otherwise shrink them to their
   content and cut the attribution's top border short. */
.quote-text { width: 100%; }
.quote-text em { color: var(--orange); font-style: italic; }
.quote-card.green .quote-text em { color: var(--green); }

.quote-attr {
	width: 100%;
	margin-top: auto;
	font-family: var(--f-sans);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 38px;      /* 237.5% */
	text-transform: uppercase;
	color: rgba(26, 26, 26, 0.75);
}

/* ── Responsive ──
   The 555px spec width would overflow tablets and phones, so shrink
   on narrower viewports while keeping the rest of the Figma spec
   (padding, gap, radius, blur) intact. */
@media (max-width: 1024px) {
	.quote-card { width: clamp(320px, 64vw, 480px); padding: 32px; gap: 20px; }
}
@media (max-width: 767px) {
	.quote-card { width: min(86vw, 420px); padding: 28px; gap: 18px; margin-right: 16px; }
}