/* ============================================================
 * page-testimonials-v4.css
 * Loaded only on the Client Testimonials (v4) page template.
 *
 * Layout per MDR-OCA-Testimonials-v3 design:
 *   - Main column: page intro + 2-col video grid + stacked quote cards
 *   - Sidebar:     diamond logo + address + directions + Ready card with
 *                  Call and Free Consultation buttons
 *   - Then the home Section 13 strategic CTA strip (reused)
 *
 * Stacks to single column at <= 960px. Inherits .mdl-modal styles from
 * home-v4.css for the video lightbox.
 * ============================================================ */

/* ---------- Page-level container ---------------------------- */
.mdl-home-v4.mdl-testimonials-v4 .mdl-test-v4 {
	background: #fff;
	padding: 60px 0 96px;
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-test-v4__layout {
	max-width: 1366px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 379px;   /* matches CRI grid */
	gap: 64px;                                     /* matches CRI gap */
	align-items: start;
}

/* ---------- Page intro -------------------------------------- */
.mdl-home-v4.mdl-testimonials-v4 .mdl-test-v4__title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;             /* Bold */
	font-size: 46px;              /* Figma H1 */
	line-height: 58px;
	text-transform: uppercase;
	color: var(--mdl-prussian, #243952);
	letter-spacing: 0;
	margin: 0 0 24px;
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-test-v4__intro {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;             /* Regular */
	font-size: 17px;              /* Figma P2 */
	line-height: 27px;
	color: var(--mdl-paynes, #506272);
	margin: 0 0 24px;
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-test-v4__rule {
	border: 0;
	border-top: 1px solid #647C90;   /* Figma divider color */
	margin: 0 0 36px;
}

/* ---------- Video grid ---------------------------------------
 * 2-column responsive grid with full card styling (Prussian
 * background, play button, caption typography).
 *
 * INTENTIONALLY NOT INCLUDED here: any CSS that sizes / fits the
 * poster image inside .mdl-vid-card__media. Add your own image-
 * fit rules in Customize -> Additional CSS - the markup leaves
 * those elements present and unstyled by this file.
 * --------------------------------------------------------------- */
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 0 0 56px;
}

/* Card container: Prussian background, rounded corners, shadow. */
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card {
	background: var(--mdl-prussian, #243952);
	border: 0;
	border-radius: 4px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	box-shadow: 0 4px 12px rgba(36, 57, 82, 0.08);
}

/* Media area: only provides a positioning context for the play
 * button. No height / aspect-ratio constraints - the image sizes
 * itself, you control it. */
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__media {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* Gold play button - 90 x 90 Figma circle, centered on the media. */
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: var(--mdl-gold, #CAA45D);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease, background 0.2s ease;
	z-index: 2;
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__play svg {
	width: 36px;
	height: 36px;
	margin-left: 5px;
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__media:hover .mdl-vid-card__play,
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__media:focus-visible .mdl-vid-card__play {
	transform: translate(-50%, -50%) scale(1.06);
	background: var(--mdl-gold-dark, #B5903F);
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__media:focus-visible {
	outline: 3px solid var(--mdl-gold, #CAA45D);
	outline-offset: 3px;
}

/* Caption strip on Prussian background. */
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__cap {
	padding: 18px 20px 22px;
	text-align: center;
	background: var(--mdl-prussian, #243952);
}

/* Title - Montserrat SemiBold 21 / 31 / White (Figma spec). */
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__title {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 21px;
	line-height: 31px;
	letter-spacing: 0;
	color: #FFFFFF;
	margin: 0;
}

/* Subtitle - Montserrat SemiBold 18 / 28 / Gold #CAA45C (Figma spec). */
.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__sub {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	color: #CAA45C;
	margin: 4px 0 0;
}

/* ---------- Written testimonials ----------------------------- */
.mdl-home-v4.mdl-testimonials-v4 .mdl-quotes {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-quote {
	background: #F4F5F7;
	border-radius: 4px;
	padding: 24px 28px 28px;
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-quote__name {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	color: var(--mdl-prussian, #243952);
	margin: 0 0 12px;
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-quote__text {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;             /* Regular */
	font-size: 17px;              /* Figma P2 */
	line-height: 27px;
	color: #294D5F;
	margin: 0 0 14px;
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-quote__stars {
	display: inline-flex;
	gap: 2px;
	color: #D8DDE3;          /* off / empty star */
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-quote__star.is-on {
	color: var(--mdl-gold, #CAA45D);
}
/* Half-star: the SVG uses a linearGradient that references currentColor
 * via the .mdl-quote__star-on-stop class on its first <stop>. */
.mdl-home-v4.mdl-testimonials-v4 .mdl-quote__star.is-half {
	color: var(--mdl-gold, #CAA45D);
}
.mdl-home-v4.mdl-testimonials-v4 .mdl-quote__star-on-stop {
	stop-color: var(--mdl-gold, #CAA45D);
}

/* ---------- Sidebar ------------------------------------------
 * Sidebar markup + styling come straight from the Case Result
 * Detail page (.mdl-cri-sidebar / .mdl-cri-contact-card / .mdl-
 * cri-contact-btn -- defined in case-result-individual-v4.css,
 * scoped to .mdl-cri-v4 which we add to this page's wrapper).
 * That stylesheet is enqueued alongside this one in functions.php.
 *
 * On the testimonials page (only - not on Case Result Detail)
 * we make the sidebar sticky so it follows the reader down through
 * the long stack of written testimonials. The CRI sidebar uses
 * `align-self: stretch; min-height: 100%` which fills the grid row
 * and would block sticky behavior, so we override both here.
 * --------------------------------------------------------------- */
@media (min-width: 961px) {
	.mdl-home-v4.mdl-testimonials-v4 .mdl-cri-sidebar {
		position: sticky;
		top: 90px;              /* room for site header */
		align-self: start;      /* override CRI's `stretch` */
		min-height: 0;          /* override CRI's `100%` */
	}
}

/* ---------- Responsive --------------------------------------- */
@media (max-width: 960px) {
	.mdl-home-v4.mdl-testimonials-v4 .mdl-test-v4__layout {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 0 20px;
	}
}

@media (max-width: 640px) {
	.mdl-home-v4.mdl-testimonials-v4 .mdl-test-v4 { padding: 40px 0 56px; }
	.mdl-home-v4.mdl-testimonials-v4 .mdl-test-v4__title { font-size: 30px; line-height: 38px; }
	.mdl-home-v4.mdl-testimonials-v4 .mdl-test-v4__intro { font-size: 15px; line-height: 24px; }
	.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-grid { grid-template-columns: 1fr; gap: 16px; }
	.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__play { width: 72px; height: 72px; }
	.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__play svg { width: 30px; height: 30px; }
	.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__title { font-size: 18px; line-height: 26px; }
	.mdl-home-v4.mdl-testimonials-v4 .mdl-vid-card__sub   { font-size: 15px; line-height: 22px; }
	.mdl-home-v4.mdl-testimonials-v4 .mdl-quote { padding: 18px 20px 20px; }
}