/*
 * nsemm/testimonials frontend (and shared editor) styles.
 *
 * A branded, responsive grid of testimonial cards (student / parent / teacher
 * feedback). Each card is a white <blockquote> on the sandy canvas with a gold
 * quotation-mark accent, the quote text, and a <cite> attribution (name + role)
 * with an optional circular photo. Two cards across on desktop, one on mobile,
 * via the block's OWN CSS grid (no reliance on core/columns). Matches the
 * home-v6 brand card language (the .svc / .fp-card white-on-sandy look).
 *
 * Dark-mode note: the card drop-shadow is computed here with
 * color-mix(in srgb, var(--midnight) N%, transparent). In light mode --midnight
 * is near-black (a correct dark shadow); in dark mode --midnight flips to a
 * sandy-white, which would glow as a white halo, so the theme's dark.css re-pins
 * the .nsemm-testimonials .t-card shadow to a #000-based mix (same fix applied to
 * fp-card / svc / acc-list). Do NOT switch this base rule to #000 - it must use
 * --midnight so light mode stays correct and dark.css owns the override.
 *
 * Every selector is namespaced under .nsemm-testimonials so nothing leaks onto
 * WordPress body or template-part elements.
 */
: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);
}

/* Page container: ~90vw, mirrors the wireframe .page (max-width 1320px, gutters). */
.nsemm-testimonials {
	padding: 0 40px;
	max-width: 1320px;
	margin: 0 auto;
}

/* Section header (eyebrow + heading). Optional; hidden when toggled off. */
.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;
}

/* The grid: two cards across on desktop. The block owns its own CSS grid; it
   does NOT depend on core/columns. Cards stretch so a row reads as even tiles. */
.nsemm-testimonials .t-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* Each card is a white blockquote on the sandy ground, 16px radius, soft shadow
   (mirrors .fp-card / .svc). Native flex column so the attribution sits at the
   card foot regardless of quote length. */
.nsemm-testimonials .t-card {
	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;
	gap: 0;
	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, sitting just inside the card top-left. */
.nsemm-testimonials .t-mark {
	font-family: var(--head);
	font-size: 64px;
	line-height: .6;
	font-weight: 700;
	color: var(--blue);
	display: block;
	margin: 0 0 8px;
	opacity: .9;
}

/* Quote text. Kept at solid contrast (>=0.82 opacity) so it reads as a strong,
   AAA midnight on white, never washed out. flex:1 pushes the attribution down. */
.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 row (footer > cite): optional avatar + name/role stack. */
.nsemm-testimonials .t-attr {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}

/* Circular avatar. Holds its shape; only present when a photo is set. */
.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;
}

/* Name + role stack inside the <cite>. cite is italic by default; reset it so
   the brand type reads upright. */
.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;
}
.nsemm-testimonials .t-role {
	font-family: var(--body);
	font-size: 13px;
	color: var(--midnight);
	opacity: .6;
	line-height: 1.3;
}

/* Scroll-reveal initial state (theme global JS adds .visible). Scoped here. */
.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 ───────────────────────────────────────────
   Per-card controls (add / remove / move / photo buttons) and the add row only
   appear in the editor (the front end never emits them). Keep them quiet so the
   editing surface still reads like the rendered card. */
.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;
}

/* Mobile: single column + tighter section padding. */
@media (max-width: 900px) {
	.nsemm-testimonials {
		padding: 0 20px;
	}
	.nsemm-testimonials .t-grid {
		grid-template-columns: 1fr;
	}
	.nsemm-testimonials .t-heading {
		font-size: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nsemm-testimonials .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.nsemm-testimonials .t-card {
		transition: none;
	}
}

/* Editor-only: force visible, since the reveal animation JS does not run in the block editor canvas. */
.editor-styles-wrapper .reveal { opacity: 1 !important; transform: none !important; }