/* ==========================================================================
   TBT Testimonial Modal
   Shared overlay — enqueued whenever the Testimonials widget is on the page.
   All colour values reference variables from tbt-global.css.
   ========================================================================== */

/* ── Overlay shell ──────────────────────────────────────────────────────── */

.tbt-tm {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.tbt-tm.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ── Backdrop ───────────────────────────────────────────────────────────── */

.tbt-tm__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(1, 0, 40, 0.6);
	backdrop-filter: blur(18px);
	/* Custom "x" cursor — there's no close button, clicking the backdrop
	   closes the modal, so the cursor is the only hint it's clickable. */
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cline x1='8' y1='8' x2='24' y2='24' stroke='%23CCFF8C' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='24' y1='8' x2='8' y2='24' stroke='%23CCFF8C' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, pointer;
}

/* ── Dialog ─────────────────────────────────────────────────────────────── */

.tbt-tm__dialog {
	position: relative;
	width: 100%;
	max-width: 1000px;
	max-height: 100svh;
	overflow-y: auto;
	background: var(--tbt-navy);
	border-radius: var(--tbt-radius-sm);
	transform: translateY(16px);
	transition: transform 0.25s ease;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.tbt-tm__dialog:focus-visible {
	outline: none;
}

.tbt-tm.is-open .tbt-tm__dialog {
	transform: translateY(0);
}

/* ── Video container ────────────────────────────────────────────────────── */

.tbt-tm__video-wrap {
	position: relative;
	width: 100%;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

/* Wistia player fills the wrap; the custom element has no intrinsic size
   until it upgrades, so it's pinned via absolute positioning regardless. */
.tbt-tm__video-wrap wistia-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ── Body ───────────────────────────────────────────────────────────────── */

.tbt-tm__body {
	position: relative;
	margin: 0 auto;
	padding: 40px;
}

.tbt-tm__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	width: 44px;
	height: 44px;
	display: flex;
	border-radius: 0px;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: none;
	color: var(--tbt-white);
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
	transition: color var(--tbt-transition), background-color var(--tbt-transition);
}

.tbt-tm__close:hover {
	background-color: transparent !important;
	color:var(--tbt-acid);
}

.tbt-tm__close:focus-visible {
	outline: 2px solid var(--tbt-acid);
	outline-offset: -2px;
}

.tbt-tm__title {
	font-family: var(--tbt-font-heading);
	font-size: var(--tbt-font-2xl);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--tbt-acid);
	line-height: 0.85;
	margin: 0 0 0.25em;
}

.tbt-tm__speaker {
	font-family: var(--tbt-font-heading);
	font-size: var(--tbt-font-xl);
	font-weight: 600;
	line-height: 0.85;
	text-transform: uppercase;
	color: var(--tbt-white);
	margin: 0 0 0.5em;
}

.tbt-tm__text {
	font-family: var(--tbt-font-body);
	font-size: var(--tbt-font-md);
	color: var(--tbt-white);
	line-height: 1.7;
	margin: 0 0 28px;
}

.tbt-tm__text p:last-child {
	margin-bottom: 0;
}

/* ── Tags ───────────────────────────────────────────────────────────────── */
/* Location and theme use the universal .tbt-tag--country / .tbt-tag--type
   classes from tbt-global.css (same ones the campaigns/map widgets use) —
   no bespoke colour rules needed here. */

.tbt-tm__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ── Loading state ──────────────────────────────────────────────────────── */

.tbt-tm__loading[hidden],
.tbt-tm__content[hidden],
.tbt-tm__error[hidden] {
	display: none;
}

/* Skeleton mirrors .tbt-tm__video-wrap + .tbt-tm__body 1:1, reusing the
   latter's padding, so the dialog is already the right size before data
   arrives instead of jumping once the real content swaps in. */
.tbt-tm__skeleton-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--tbt-ui-1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbt-tm__spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255, 255, 255, 0.12);
	border-top-color: var(--tbt-acid);
	border-radius: 50%;
	animation: tbt-tm-spin 0.75s linear infinite;
}

@keyframes tbt-tm-spin {
	to { transform: rotate(360deg); }
}

.tbt-tm__skeleton-bar {
	border-radius: 3px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.06) 25%,
		rgba(255, 255, 255, 0.14) 37%,
		rgba(255, 255, 255, 0.06) 63%
	);
	background-size: 400px 100%;
	animation: tbt-tm-shimmer 1.6s linear infinite;
}

.tbt-tm__skeleton-bar--title {
	width: 55%;
	height: var(--tbt-font-2xl);
	margin-bottom: 0.5em;
}

.tbt-tm__skeleton-bar--speaker {
	width: 30%;
	height: var(--tbt-font-xl);
	margin-bottom: 1.5em;
}

.tbt-tm__skeleton-bar--text {
	width: 100%;
	height: 1em;
	margin-bottom: 0.6em;
}

.tbt-tm__skeleton-bar--text-short {
	width: 60%;
	height: 1em;
}

@keyframes tbt-tm-shimmer {
	0%   { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}

/* ── Error state ────────────────────────────────────────────────────────── */

.tbt-tm__error {
	padding: 48px 0;
	text-align: center;
	color: var(--tbt-white);
	font-family: var(--tbt-font-body);
	font-size: var(--tbt-font-md);
}

/* ── Testimonial cards — make clickable ─────────────────────────────────── */

.tbt-testimonials-card--testimonial[data-post-id] {
	cursor: pointer;
}

.tbt-testimonials-card--testimonial[data-post-id]:focus-visible {
	outline: 2px solid var(--tbt-acid);
	outline-offset: 2px;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.tbt-tm,
	.tbt-tm__dialog,
	.tbt-tm__play-icon {
		transition: none;
	}

	.tbt-tm__skeleton-bar {
		animation: none;
	}

	.tbt-tm__spinner {
		animation: none;
		border-color: var(--tbt-acid);
	}
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.tbt-tm {
		padding: 0;
		align-items: flex-end;
	}

	.tbt-tm__dialog {
		max-height: 96vh;
		border-radius: 0;
		max-width: 100%;
		padding: 20px;
	}

	.tbt-tm__body {
		padding: 24px 0 0;
	}

	.tbt-tm__title {
		font-size: var(--tbt-font-xl);
	}
}