/*
 * nsemm/testimonials frontend (and shared editor) styles — CAROUSEL edition.
 *
 * Architecture:
 *   .nsemm-testimonials          — block wrapper, region, page-width container
 *   .t-header                    — optional eyebrow + section heading
 *   .t-carousel-outer            — relative wrapper that clips the track and
 *                                  holds the floating prev/next buttons
 *   .t-track                     — horizontal flex row; overflow-x:auto;
 *                                  scroll-snap-type:x mandatory; no scrollbar
 *   .t-card (blockquote)         — snap child; fixed width via --card-w;
 *                                  flex column so attribution sits at foot
 *   .t-controls (.t-btn-prev/next) — floating arrow buttons, sides of track
 *   .t-dots                      — dot indicators below the track
 *
 * Responsive card widths (CSS custom props, overridden at breakpoints):
 *   Mobile  (<600px)  : ~88vw  (one card visible)
 *   Tablet  (600-959) : calc(50% - 12px)  (two cards)
 *   Desktop (≥960px)  : calc(33.333% - 16px)  (three cards)
 *
 * Per-block CSS loads independently; the :root map ties our names to WP presets
 * (Brand-Sync recolours everything through the presets). No brand hex is
 * hard-coded; alpha / shadows use color-mix.
 *
 * Dark-mode: .nsemm-testimonials .t-card shadow is re-pinned by dark.css
 * (same as fp-card / svc). Do NOT switch base rule to #000.
 *
 * Every selector is namespaced under .nsemm-testimonials so nothing leaks.
 */

:root {
	--blue:    var(--wp--preset--color--university-blue);
	--gold:    var(--wp--preset--color--knowledge-gold);
	--teal:    var(--wp--preset--color--discovery-teal);
	--brown:   var(--wp--preset--color--foundational-brown);
	--sandy:   var(--wp--preset--color--sandy-brown);
	--midnight: var(--wp--preset--color--midnight);
	--bg:      var(--wp--preset--color--white);
	--r-pill:  9999px;
	--r-card:  16px;
	--body:    var(--wp--preset--font-family--readex-pro);
	--head:    var(--wp--preset--font-family--sora);
}

/* ── Block wrapper ──────────────────────────────────────────────────────── */
.nsemm-testimonials {
	padding: 0 40px;
	max-width: 1320px;
	margin: 0 auto;
}

/* ── Section header ─────────────────────────────────────────────────────── */
.nsemm-testimonials .t-header {
	margin: 0 0 36px;
	text-align: center;
}
.nsemm-testimonials .t-eyebrow {
	font-family: var(--head);
	font-size: 12px;
	font-weight: 700;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: .14em;
	margin: 0 0 10px;
}
.nsemm-testimonials .t-heading {
	font-family: var(--head);
	font-size: 32px;
	font-weight: 700;
	color: var(--blue);
	line-height: 1.2;
	margin: 0;
	text-wrap: balance;
}

/* ── Carousel outer: clips the track, positions the arrow buttons ───────── */
.nsemm-testimonials .t-carousel-outer {
	position: relative;
}

/* ── Track: horizontal scroll-snap container ────────────────────────────── */
.nsemm-testimonials .t-track {
	display: flex;
	flex-direction: row;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* Hide scrollbar visually but keep it functional */
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* IE/Edge */
	/* Padding so card shadows are not clipped at edges */
	padding: 8px 4px 20px;
	/* Give keyboard focus a visible ring on the track itself */
	border-radius: 4px;
	outline-offset: 3px;
}
.nsemm-testimonials .t-track::-webkit-scrollbar {
	display: none;                  /* Chrome/Safari */
}
.nsemm-testimonials .t-track:focus-visible {
	outline: 3px solid var(--gold);
}

/* ── Card (snap child) ──────────────────────────────────────────────────── */
/*
 * --card-w is set per breakpoint; default (desktop) = 3 across.
 * flex: 0 0 var(--card-w) keeps all cards the same width; align-items:stretch
 * on the track (flex default) makes them equal height within a "row" of
 * visible cards.
 */
.nsemm-testimonials .t-card {
	--card-w: calc(33.333% - 16px);
	flex: 0 0 var(--card-w);
	scroll-snap-align: start;
	position: relative;
	background: var(--bg);
	border: 1px solid color-mix(in srgb, var(--midnight) 6%, transparent);
	border-radius: var(--r-card);
	box-shadow: 0 10px 36px color-mix(in srgb, var(--midnight) 8%, transparent);
	padding: 36px 32px 28px;
	margin: 0;
	display: flex;
	flex-direction: column;
	transition: box-shadow .3s ease, transform .3s ease;
}
.nsemm-testimonials .t-card:hover {
	box-shadow: 0 16px 44px color-mix(in srgb, var(--midnight) 12%, transparent);
	transform: translateY(-4px);
}

/* ── Decorative gold quotation mark ─────────────────────────────────────── */
.nsemm-testimonials .t-mark {
	font-family: var(--head);
	font-size: 64px;
	line-height: .6;
	font-weight: 700;
	color: var(--gold);
	display: block;
	margin: 0 0 8px;
	opacity: 1;
}

/* ── Quote text ─────────────────────────────────────────────────────────── */
.nsemm-testimonials .t-quote {
	font-family: var(--body);
	font-size: 16px;
	color: var(--midnight);
	opacity: .86;
	line-height: 1.65;
	margin: 0 0 24px;
	flex: 1;
}

/* ── Attribution (footer > cite) ────────────────────────────────────────── */
.nsemm-testimonials .t-attr {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}
.nsemm-testimonials .t-avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: var(--r-pill);
	overflow: hidden;
	background: color-mix(in srgb, var(--midnight) 6%, transparent);
}
.nsemm-testimonials .t-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.nsemm-testimonials .t-cite {
	display: flex;
	flex-direction: column;
	font-style: normal;
	min-width: 0;
}
.nsemm-testimonials .t-name {
	font-family: var(--head);
	font-size: 15px;
	font-weight: 700;
	color: var(--blue);
	line-height: 1.3;
}
/* Meta line below the name: Persona · Subject · County. A flex row that wraps
   gracefully on a narrow card; the middot separators are decorative. Colour is
   used (not opacity) for the muted parts so the persona can stay crisp without
   opacity compounding from the parent. */
.nsemm-testimonials .t-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	margin-top: 2px;
	font-family: var(--body);
	font-size: 13px;
	line-height: 1.4;
}
/* Subject + county read as quiet supporting detail. */
.nsemm-testimonials .t-meta-part {
	color: color-mix(in srgb, var(--midnight) 62%, transparent);
}
/* The persona word (first part) reads as a clear, on-brand label. */
.nsemm-testimonials .t-meta-part:first-child {
	font-weight: 600;
	color: var(--blue);
}
.nsemm-testimonials .t-meta-sep {
	color: var(--gold);
	font-weight: 700;
}

/* ── Hover-to-reveal attribution ────────────────────────────────────────── */
/*
 * The cue ("Hover to see more") and the real attribution share one grid cell
 * (both placed at row 1 / column 1) so swapping between them costs no layout —
 * the card height never jumps. The cue is shown by default; on :hover or
 * :focus-within (keyboard accessible) the cue fades out and the attribution
 * fades in. Pointer events are disabled on whichever layer is hidden so it
 * never blocks interaction.
 */
.nsemm-testimonials .t-reveal {
	display: grid;
	margin: 0;
}
.nsemm-testimonials .t-reveal > .t-cue,
.nsemm-testimonials .t-reveal > .t-attr {
	grid-area: 1 / 1;
	transition: opacity .3s ease;
}
/* Cue: visible by default. */
.nsemm-testimonials .t-cue {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--blue);
	opacity: .75;
	align-self: center;
	pointer-events: none;
}
.nsemm-testimonials .t-cue svg {
	flex: 0 0 auto;
	color: var(--gold);
}
/* Attribution: hidden by default, no layout impact (still occupies the cell). */
.nsemm-testimonials .t-attr {
	opacity: 0;
	pointer-events: none;
}
/* Reveal on hover OR keyboard focus anywhere in the card. */
.nsemm-testimonials .t-card:hover .t-cue,
.nsemm-testimonials .t-card:focus-within .t-cue {
	opacity: 0;
}
.nsemm-testimonials .t-card:hover .t-attr,
.nsemm-testimonials .t-card:focus-within .t-attr {
	opacity: 1;
	pointer-events: auto;
}

/* Touch fallback: devices that cannot hover always show the attribution and
   never show the cue (a finger has no hover state to trigger the reveal). */
@media (hover: none) {
	.nsemm-testimonials .t-cue {
		display: none;
	}
	.nsemm-testimonials .t-attr {
		opacity: 1;
		pointer-events: auto;
	}
}

/* ── Prev / Next arrow buttons ──────────────────────────────────────────── */
.nsemm-testimonials .t-controls {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;   /* let clicks through to track when not on buttons */
	/* Slight horizontal pull so buttons sit just outside the card edge */
	margin: 0 -20px;
}
.nsemm-testimonials .t-btn {
	pointer-events: all;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--r-pill);
	border: 2px solid var(--blue);
	background: var(--bg);
	color: var(--blue);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--midnight) 14%, transparent);
	flex-shrink: 0;
}
.nsemm-testimonials .t-btn:hover {
	background: var(--blue);
	color: var(--bg);
	transform: scale(1.08);
}
.nsemm-testimonials .t-btn:active {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--blue);
	transform: scale(.97);
}
.nsemm-testimonials .t-btn:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
}
/* Disabled state when at first/last slide */
.nsemm-testimonials .t-btn[disabled],
.nsemm-testimonials .t-btn[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

/* ── Dot indicators ─────────────────────────────────────────────────────── */
.nsemm-testimonials .t-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}
.nsemm-testimonials .t-dot {
	width: 10px;
	height: 10px;
	border-radius: var(--r-pill);
	border: 2px solid var(--blue);
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: background .2s ease, transform .2s ease, width .25s ease;
}
.nsemm-testimonials .t-dot:hover {
	background: color-mix(in srgb, var(--blue) 30%, transparent);
}
.nsemm-testimonials .t-dot.is-active {
	background: var(--blue);
	width: 28px;            /* pill stretch for the active dot */
}
.nsemm-testimonials .t-dot:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
}

/* ── Scroll-reveal initial state ────────────────────────────────────────── */
.nsemm-testimonials .reveal {
	opacity: 0.08;
	transform: translateY(28px);
	transition: opacity .65s ease, transform .65s ease;
}
.nsemm-testimonials .reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ── Editor-only repeater chrome ────────────────────────────────────────── */
.nsemm-testimonials .t-card-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--midnight) 8%, transparent);
}
.nsemm-testimonials .t-avatar-btn {
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	width: 48px;
	height: 48px;
	border-radius: var(--r-pill);
	overflow: hidden;
}
.nsemm-testimonials .t-avatar-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.nsemm-testimonials .t-add-row {
	margin-top: 24px;
	display: flex;
	justify-content: center;
}

/* ── Responsive card widths ─────────────────────────────────────────────── */
/* Tablet: 2 cards visible. gap=24px; 2 cards + 1 gap across the track. */
@media (max-width: 959px) {
	.nsemm-testimonials .t-card {
		--card-w: calc(50% - 12px);
	}
	.nsemm-testimonials .t-controls {
		margin: 0 -12px;
	}
}

/* Mobile: 1 card visible (~88 vw so the next card peeks). */
@media (max-width: 599px) {
	.nsemm-testimonials {
		padding: 0 20px;
	}
	.nsemm-testimonials .t-heading {
		font-size: 26px;
	}
	.nsemm-testimonials .t-card {
		--card-w: 88vw;
		padding: 28px 24px 22px;
	}
	.nsemm-testimonials .t-controls {
		/* On small screens arrows sit just inside the wrapper so they stay tappable */
		margin: 0;
		padding: 0 4px;
	}
	.nsemm-testimonials .t-btn {
		width: 40px;
		height: 40px;
	}
}

/* ── prefers-reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.nsemm-testimonials .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.nsemm-testimonials .t-card {
		transition: none;
	}
	.nsemm-testimonials .t-track {
		scroll-behavior: auto;
	}
	.nsemm-testimonials .t-btn {
		transition: none;
	}
	.nsemm-testimonials .t-dot {
		transition: none;
	}
	.nsemm-testimonials .t-reveal > .t-cue,
	.nsemm-testimonials .t-reveal > .t-attr {
		transition: none;
	}
}

/* ── Editor carve-out ───────────────────────────────────────────────────── */
/* scroll-reveal .visible is added by frontend JS; force visible in editor. */
.editor-styles-wrapper .reveal {
	opacity: 1 !important;
	transform: none !important;
}
/* In the editor the track is a static grid so cards stack/wrap instead of scroll. */
.editor-styles-wrapper .nsemm-testimonials .t-track {
	flex-wrap: wrap;
	overflow-x: visible;
	scroll-snap-type: none;
}
.editor-styles-wrapper .nsemm-testimonials .t-card {
	flex: 1 1 280px;
}
.editor-styles-wrapper .nsemm-testimonials .t-controls,
.editor-styles-wrapper .nsemm-testimonials .t-dots {
	display: none;
}
/* The editor (index.js) renders a bare .t-attr footer with no .t-reveal/.t-cue
   wrapper and no hover, so force the attribution fully visible while editing. */
.editor-styles-wrapper .nsemm-testimonials .t-attr {
	opacity: 1;
	pointer-events: auto;
}