/* ============================================================
   flair/testimonial-slider and flair/testimonial-slide: a quote band.

   Shows one testimonial at a time, with dash controls to jump between them.
   assets/js/testimonial-slider.js switches the active slide.
   ============================================================ */
.flair-testimonial-slider{
	background:var(--flair-companion-color-foreground);color:var(--flair-companion-color-background);
	/* Side padding is larger than the default section padding. The quote has
	   room between the text and the band's edges. */
	padding:var(--flair-companion-space-section) var(--flair-companion-space-xl);
	/* Cross-fade duration. Each block sets its own value (the "Transition speed"
	   control in inc/blocks/testimonial-slider.php). The 1s value here is only the
	   fallback. */
	--flair-testimonial-transition:1s;
}
.flair-testimonial-slides{
	max-width:48rem;margin:0 auto;
	/* All slides share one grid cell, so they overlap and fade in place. The cell
	   takes the height of the tallest slide, so the band does not change height
	   between slides. */
	display:grid;
}
.flair-testimonial-slide{
	grid-area:1/1;
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity var(--flair-testimonial-transition) ease,
						 visibility 0s linear var(--flair-testimonial-transition);
}
.flair-testimonial-slide.is-active{
	opacity:1;visibility:visible;pointer-events:auto;
	/* The inactive slides do not use a visibility transition. A slide becomes
	   visible and clickable at once, before its fade-in finishes. */
	transition:opacity var(--flair-testimonial-transition) ease;
}
@media (prefers-reduced-motion: reduce){
	/* A dash click always changes the slide instantly, even with motion on. Reduced
	   motion visitors also get no auto-advance. */
	.flair-testimonial-slide{transition:none}
}
.flair-testimonial-quote-mark{
	display:block;font-family:Georgia,'Times New Roman',serif;
	font-size:clamp(3.5rem,6vw,6rem);line-height:1;
	color:var(--flair-companion-color-muted);margin-bottom:var(--flair-companion-space-sm);
}
.flair-testimonial-quote{
	margin:0 0 var(--flair-companion-space-md);border:none;padding:0;
	font-family:var(--flair-companion-font-body);font-weight:400;
	font-size:var(--flair-companion-font-size-lead);line-height:1.5;
	color:var(--flair-companion-color-background);
}
.flair-testimonial-quote > *:first-child{margin-top:0}
.flair-testimonial-quote > *:last-child{margin-bottom:0}
.flair-testimonial-name{
	margin:0;font-family:var(--flair-companion-font-headings);font-weight:700;
	font-size:var(--flair-companion-font-size-small);letter-spacing:.08em;text-transform:uppercase;
	color:var(--flair-companion-color-background);
}
.flair-testimonial-dashes{
	display:flex;gap:var(--flair-companion-space-xs);margin-top:var(--flair-companion-space-lg);
	max-width:48rem;margin-left:auto;margin-right:auto;
}
.flair-testimonial-dash{
	appearance:none;background:color-mix(in srgb,var(--flair-companion-color-background) 30%,transparent);border:none;cursor:pointer;
	width:2rem;height:0.125rem;padding:0;
	/* The Motion token has a fallback, for the same reason as the product carousel. */
	transition:background var(--flair-motion-fast, .18s) var(--flair-motion-ease, ease),width var(--flair-motion-fast, .18s) var(--flair-motion-ease, ease);
}
.flair-testimonial-dash:hover{background:color-mix(in srgb,var(--flair-companion-color-background) 55%,transparent)}
.flair-testimonial-dash[aria-current="true"]{background:var(--flair-companion-color-background);width:3rem}
.flair-testimonial-dash:focus-visible{outline:0.125rem solid var(--flair-companion-color-background);outline-offset:0.125rem}

/* ---- Style: Light card ----
   A lighter alternative to the default dark band. Same structure, different
   background. */
.flair-testimonial-slider.is-style-light{
	background:var(--flair-companion-color-background-alt);
	color:var(--flair-companion-color-foreground);
	border:var(--flair-companion-border-card,0.0625rem solid var(--flair-companion-color-border));
	border-radius:var(--flair-companion-radius-card,1rem);
}
.flair-testimonial-slider.is-style-light .flair-testimonial-quote,
.flair-testimonial-slider.is-style-light .flair-testimonial-name{color:var(--flair-companion-color-foreground)}
.flair-testimonial-slider.is-style-light .flair-testimonial-quote-mark{color:var(--flair-companion-color-primary)}
.flair-testimonial-slider.is-style-light .flair-testimonial-dash{background:var(--flair-companion-color-border)}
.flair-testimonial-slider.is-style-light .flair-testimonial-dash:hover{background:var(--flair-companion-color-muted)}
.flair-testimonial-slider.is-style-light .flair-testimonial-dash[aria-current="true"]{background:var(--flair-companion-color-primary)}
.flair-testimonial-slider.is-style-light .flair-testimonial-dash:focus-visible{outline-color:var(--flair-companion-color-primary)}

/* ---- Style: Minimal ----
   No background of its own. Use it inside a section that already has a
   background, so there are not two backgrounds stacked. The text takes the
   color of its surroundings. */
.flair-testimonial-slider.is-style-minimal{
	background:transparent;color:inherit;
	padding:var(--flair-companion-space-lg) 0;
}
.flair-testimonial-slider.is-style-minimal .flair-testimonial-quote,
.flair-testimonial-slider.is-style-minimal .flair-testimonial-name{color:inherit}
.flair-testimonial-slider.is-style-minimal .flair-testimonial-quote-mark{color:var(--flair-companion-color-primary)}
.flair-testimonial-slider.is-style-minimal .flair-testimonial-dash{background:color-mix(in srgb,currentColor 25%,transparent)}
.flair-testimonial-slider.is-style-minimal .flair-testimonial-dash:hover{background:color-mix(in srgb,currentColor 45%,transparent)}
.flair-testimonial-slider.is-style-minimal .flair-testimonial-dash[aria-current="true"]{background:currentColor}
.flair-testimonial-slider.is-style-minimal .flair-testimonial-dash:focus-visible{outline-color:currentColor}