/*
 * MiraeLaw Home — What Clients Say section
 *
 * The card list is rendered dynamically from the `testimonial` CPT via the
 * [miraelaw_home_testimonials] shortcode (inc/home/class-home-testimonials.php).
 * Unlike sections built entirely from Elementor widgets, the card typography/
 * color rules below are load-bearing — there's no Elementor widget generating
 * them. The section heading stays a separate Elementor Heading widget (see
 * .ml-testimonials-h2 below), matching the design's own eyebrow-style label,
 * not the fluid --ml-text-h2 scale used by every other section heading.
 *
 * The source design (Home-2.html) shows a single static quote with no
 * slider/carousel/navigation controls of any kind. With more than one
 * Homepage testimonial, that same static card is shown one at a time as a
 * lightweight carousel (assets/js/home-testimonials.js) — PHP still renders
 * every card into the markup; the script only toggles the `hidden` attribute
 * on inactive `.ml-testimonial-card` elements, so `.ml-testimonials-list`'s
 * existing flex/gap rules apply unchanged regardless of how many
 * testimonials exist. Since the design has no navigation of its own, subtle
 * pagination dots (`.ml-testimonials-dots`) were added below the card,
 * styled from the same green/muted tokens as everything else in this
 * section — not an invented new visual language.
 */

.ml-testimonials-root {
	background: #fff;
}

.ml-testimonials-inner {
	max-width: 880px;
	margin: 0 auto;
	/* Same local fluid vertical padding as the Our Offices section
	   (clamp(56px–88px)) — not the shared --ml-spacing-section-md token,
	   which has a different (96px) ceiling. */
	padding: clamp( 3.5rem, 8vw, 5.5rem ) 24px;
	text-align: center;
}

.ml-testimonials-h2 {
	margin: 0 0 28px;
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-xs );
	font-weight: 500;
	letter-spacing: var( --ml-tracking-widest );
	color: var( --ml-tertiary );
}

.ml-testimonials-list {
	display: flex;
	flex-direction: column;
	gap: var( --ml-spacing-xl );
}

.ml-testimonial-card {
	margin: 0;
	padding: clamp( 1.75rem, 5vw, 3rem );
	border: 1.5px dashed var( --ml-border-muted );
	font-family: var( --ml-font-body );
	font-size: 16px;
	color: var( --ml-primary );
	text-align: center;
}

.ml-testimonial-mark {
	display: block;
	font-family: var( --ml-font-heading );
	font-size: 52px;
	line-height: 0.6;
	color: var( --ml-tertiary );
}

.ml-testimonial-quote {
	margin: 14px 0 20px;
	font-family: var( --ml-font-heading );
	font-size: clamp( 1.1875rem, 2.5vw, 1.5rem );
	font-style: italic;
	line-height: var( --ml-leading-normal );
	color: var( --ml-neutral-500 );
}

.ml-testimonial-quote p {
	margin: 0;
}

.ml-testimonial-quote p + p {
	margin-top: 1em;
}

.ml-testimonial-caption {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Hello Elementor's reset.css sets figcaption { font-style: italic; }
	   by default — the source design's caption is upright, not italic. */
	font-style: normal;
}

.ml-testimonial-name-line {
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-xs );
	letter-spacing: 0.08em;
	color: var( --ml-tertiary );
}

.ml-testimonial-position {
	font-family: var( --ml-font-body );
	font-size: 13px;
	color: var( --ml-neutral-500 );
}

/* ---------------------------------------------------------------
 * Pagination dots — the source design has no navigation controls of
 * its own, so these are a minimal, subtle addition rather than an
 * invented visual language: same green/muted tokens as the rest of
 * the card, small enough to stay out of the way of the quote itself.
 *
 * `.ml-testimonials-dot` is a raw <button>, which Elementor's active Global
 * Kit unavoidably styles as a solid CTA button via `.elementor-kit-9
 * button` (background/color/padding/border/border-radius/font-weight) — a
 * class+element selector that outranks a single class selector on
 * specificity alone, regardless of source order (this was breaking the
 * dots into ~60x30px solid rectangles; same root cause fixed in
 * .ml-faq-trigger, see faq.css). Every rule touching the dot's own look is
 * therefore scoped as `.ml-testimonials-dots .ml-testimonials-dot` (two
 * classes) to reliably outrank it.
 *
 * The Kit also ships a SEPARATE `.elementor-kit-9 button:hover, ...:focus`
 * rule (background-color: rgb(168,74,38)) at (0,2,1). Our base dot rule is
 * only (0,2,0) — ties on class count but has one fewer element selector —
 * so the Kit's hover/focus background still wins there even though our own
 * `:hover`/`:focus-visible` rules (also (0,3,0)+) already win for
 * border-color. `background` is restated explicitly below so nothing is
 * left for the Kit's rule to win.
 * ------------------------------------------------------------- */
.ml-testimonials-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
}

.ml-testimonials-dots .ml-testimonials-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1.5px solid var( --ml-border-muted );
	border-radius: 50%;
	background: transparent;
	font-weight: normal;
	color: inherit;
	cursor: pointer;
	transition: background-color var( --ml-transition-base ), border-color var( --ml-transition-base );
}

.ml-testimonials-dots .ml-testimonials-dot:hover,
.ml-testimonials-dots .ml-testimonials-dot:focus {
	background: transparent;
	border-color: var( --ml-tertiary );
}

.ml-testimonials-dots .ml-testimonials-dot:focus-visible {
	outline: 2px solid var( --ml-accent );
	outline-offset: 2px;
}

.ml-testimonials-dots .ml-testimonials-dot[aria-current="true"]:hover,
.ml-testimonials-dots .ml-testimonials-dot[aria-current="true"]:focus {
	background: var( --ml-tertiary );
}

.ml-testimonials-dots .ml-testimonials-dot[aria-current="true"] {
	border-color: var( --ml-tertiary );
	background: var( --ml-tertiary );
}

@media ( prefers-reduced-motion: reduce ) {
	.ml-testimonials-dots .ml-testimonials-dot {
		transition: none;
	}
}