/**
 * Testimonial Section.
 *
 * Full-width background image with a 90% black overlay across the left half,
 * where the content sits. Full-height (100vh) at 1920px+.
 *
 * Brand colours: ink #1E1F1E · slate #454645 · brand #119100 ·
 *                sky #35AFC9 · cloud #F3EFE3
 */

.nops-ts {
	position: relative;
	width: 100%;
	color: #f3efe3; /* cloud */
	background: #454645; /* slate — the usual section background */
	padding: 98px 0; /* slate gap top/bottom */
}

/* The image frame — full viewport width, container's content height.
   Flex so the inner container stretches to the frame's full height. */
.nops-ts-frame {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 640px; /* fallback below 1920px (no 100vh to fill) */
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #1e1f1e;
}

/* Flat 90% black over the right half of the frame (where the text sits). */
.nops-ts-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	background: rgba(0, 0, 0, 0.9);
}

/* Container keeps the content aligned to the site grid, over the frame.
   As a flex child of the frame it stretches to the frame's full height. */
.nops-ts-inner {
	position: relative;
	z-index: 2;
	display: flex;
}

/* Content sits in the right half and fills the full height as a flex column
   so the arrow can sit at the bottom (margin-top: auto). */
.nops-ts-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 50%;
	height: 100%;
	margin-left: auto;
	/* Bottom padding reserves room for the absolutely-pinned arrow
	   (87px from the bottom + the arrow height) so it never overlaps the
	   attribution row. */
	padding: 80px 0 190px 60px;
}

/* Tagline */
.nops-ts-tagline {
	margin: 0;
	font-size: 18px;
	letter-spacing: 0.08em;
	text-transform: capitalize;
	color: #f3efe3;
}

/* Carousel slides — only the active one shows (cross-fade). */
.nops-ts-slides {
	position: relative;
}

.nops-ts-slide {
	display: none;
}

.nops-ts-slide.is-active {
	display: block;
	animation: nops-ts-fade 0.4s ease;
}

@keyframes nops-ts-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Quote — 200px below the tagline */
.nops-ts-quote {
	margin: 200px 0 0;
	padding: 0;
	border: 0;
	font-weight: 400;
	font-size: clamp(1.75rem, 2vw, 38px); /* 38px */
	line-height: 1.3;
	color: #f3efe3;
}

.nops-ts-quote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.nops-ts-quote p + p {
	margin-top: 0.5em;
}

/* Attribution row — 100px below the quote */
.nops-ts-attribution {
	display: flex;
	align-items: center;
	margin-top: 100px;
}

/* 59px white line to the left of the name, 24px gap. */
.nops-ts-line {
	display: inline-block;
	width: 59px;
	height: 1px;
	background: #ffffff;
	margin-right: 24px;
	flex: 0 0 auto;
}

.nops-ts-name {
	font-style: italic;
	font-size: 30px; /* 30px italic */
	color: #f3efe3;
	white-space: nowrap;
}

/* Stars — 62px to the right of the name. */
.nops-ts-stars {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 62px;
}

.nops-ts-star {
	display: block;
}

/* Arrow link — pinned to the bottom of the content, 87px from the bottom,
   so it stays in the same place regardless of quote length. */
.nops-ts-arrow-link {
	position: absolute;
	left: 60px;   /* align with the content's left padding */
	bottom: 87px;
	display: inline-block;
	margin: 0;
	line-height: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.nops-ts-arrow-link svg {
	display: block;
}

/* ---- 1920px and up: full-height section, frame fills the gap ---- */
@media (min-width: 1920px) {
	.nops-ts {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.nops-ts-frame {
		flex: 1 1 auto;
		min-height: 0; /* fill 100vh minus the 98px top/bottom padding */
	}
}

/* ---- Staged widths below 1920px: overlay + content grow 50% -> 60%
   -> 75% -> 100% so the text keeps enough dark background. ---- */
@media (max-width: 1700px) {
	.nops-ts-overlay,
	.nops-ts-content {
		width: 60%;
	}
}

@media (max-width: 1400px) {
	.nops-ts-overlay,
	.nops-ts-content {
		width: 75%;
	}
}

@media (max-width: 1024px) {
	.nops-ts-overlay,
	.nops-ts-content {
		width: 100%;
	}

	.nops-ts-overlay {
		background: rgba(0, 0, 0, 0.8);
	}

	.nops-ts-quote {
		margin-top: 120px;
	}

	.nops-ts-attribution {
		margin-top: 60px;
	}
}

@media (max-width: 600px) {
	.nops-ts-attribution {
		flex-wrap: wrap;
		gap: 16px;
	}

	.nops-ts-stars {
		margin-left: 0;
	}
}