/* ==========================================================================
   TeamCNF testimonials (the "Testimonials" block)
   A dark section over a city photo. The quotes are a stacked deck: the front
   card is readable, the next two peek out behind it, up and to the right.
   It sits on a photo, so it keeps the dark roles in both themes.
   Every value comes from the theme tokens (theme.json): --wp--preset--* and
   --wp--custom--*.
   ========================================================================== */
.tcnf-testimonials {
	isolation: isolate;
	overflow: hidden;
}

/* ---- Background photo ---------------------------------------------------- */
.tcnf-testimonials__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.tcnf-testimonials__bg img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* Darkens the photo and fades it into the sections around it */
.tcnf-testimonials__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--overlay--section), var(--wp--custom--scrim--base);
}

/* ---- Layout -------------------------------------------------------------- */
.tcnf-testimonials__grid {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.tcnf-testimonials__head {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-content: start;
}

.tcnf-testimonials__head > * {
	margin: 0;
}

.tcnf-testimonials__note {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	justify-items: start;
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--small);
}

.tcnf-testimonials__note p {
	margin: 0;
}

/* ---- The deck -------------------------------------------------------------- */
.tcnf-deck {
	display: grid;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--70) 0 0;
	touch-action: pan-y;
}

/* Scoped under .tcnf-testimonials so the padding and radius win over .tcnf-glass */
.tcnf-testimonials .tcnf-quote-card {
	grid-area: 1 / 1;
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-content: space-between;
	margin: 0;
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--xl);
	transform-origin: 100% 0;
	transition:
		transform var(--wp--custom--duration--slow) var(--wp--custom--ease--out),
		opacity var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.tcnf-quote-card > * {
	transition: opacity var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-testimonials .tcnf-quote-card[data-pos="0"] {
	z-index: var(--wp--custom--z--overlap);
}

.tcnf-testimonials .tcnf-quote-card[data-pos="1"] {
	z-index: var(--wp--custom--z--raised);
	opacity: var(--wp--custom--opacity--soft);
	transform: translate(var(--wp--preset--spacing--50), calc(var(--wp--preset--spacing--50) * -1)) scale(0.95);
}

.tcnf-testimonials .tcnf-quote-card[data-pos="2"] {
	z-index: var(--wp--custom--z--base);
	opacity: var(--wp--custom--opacity--dim);
	transform: translate(var(--wp--preset--spacing--70), calc(var(--wp--preset--spacing--70) * -1)) scale(0.9);
}

/* Every card further back waits out of sight */
.tcnf-testimonials .tcnf-quote-card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) {
	opacity: 0;
	transform: translate(var(--wp--preset--spacing--80), calc(var(--wp--preset--spacing--80) * -1)) scale(0.85);
}

.tcnf-quote-card:not([data-pos="0"]) {
	pointer-events: none;
}

.tcnf-quote-card:not([data-pos="0"]) > * {
	opacity: 0;
}

.tcnf-quote-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.tcnf-quote-card__mark {
	opacity: var(--wp--custom--opacity--soft);
	--tcnf-glyph-size: var(--wp--custom--size--icon-badge);
}

.tcnf-quote-card__text {
	margin: 0;
	padding: 0;
	border: 0;
}

.tcnf-quote-card__text p {
	margin: 0;
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: var(--wp--custom--leading--snug);
	letter-spacing: var(--wp--custom--tracking--snug);
}

.tcnf-quote-card__by {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--glass--border-subtle);
}

.tcnf-quote-card__by > span:last-child {
	display: grid;
	font-size: var(--wp--preset--font-size--small);
}

.tcnf-quote-card__by strong {
	font-weight: 600;
}

/* ---- Arrows and dots ----------------------------------------------------- */
.tcnf-deck-controls {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.tcnf-deck-controls .tcnf-icon-btn {
	margin: 0;
	font-family: inherit;
}

.tcnf-deck-dots {
	display: flex;
	align-items: center;
}

.tcnf-deck-dot {
	display: grid;
	place-items: center;
	width: var(--wp--preset--spacing--50);
	height: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	font-family: inherit;
	cursor: pointer;
	transition: width var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-deck-dot::before {
	content: "";
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--glass--border-strong);
	transition:
		width var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		background-color var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-deck-dot[aria-current="true"] {
	width: calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--40));
}

.tcnf-deck-dot[aria-current="true"]::before {
	width: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--accent);
}

@media (min-width: 900px) {
	.tcnf-testimonials__grid {
		grid-template-columns: 0.85fr 1.15fr;
		align-items: center;
		gap: var(--wp--preset--spacing--80);
	}

	.tcnf-testimonials .tcnf-quote-card {
		padding: var(--wp--preset--spacing--70);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tcnf-testimonials .tcnf-quote-card,
	.tcnf-quote-card > *,
	.tcnf-deck-dot,
	.tcnf-deck-dot::before {
		transition: none;
	}
}

/* Editor placeholder when the block has no content yet */
.tcnf-testimonials-empty {
	padding: var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--custom--text--meta);
	font-size: var(--wp--preset--font-size--small);
}