/*
 * hbd-testimonials — the patient-quote carousel.
 *
 * Every number here is a var(--hbd-*) from assets/css/tokens.css, where the measurement it came from is
 * named. Breakpoints are the ones production actually switches at: 768 / 1024 / 1280
 * (docs/audit/widgets/testimonials.md). Enqueued as `hbd-widget-testimonials` only on pages that render
 * the widget.
 */

/* ------------------------------------------------------------------ shell */

/* The section keeps live's discrete 20 / 60 / 80 gutter rather than the theme's clamp()ed
   --hbd-gutter, which lands on 56.32px at 1024 and 42.24px at 768. */
.hbd-w-testimonials { padding-block: var(--hbd-testimonials-pad); }
.hbd-w-testimonials > .hbd-w__inner { max-width: calc(var(--hbd-container) + 2 * var(--hbd-row-gutter)); padding-inline: var(--hbd-row-gutter); }

/* Cards per view. The modifier picks the desktop count; the ladder below it is live's own:
   3 → 2 at 1280, 2 → 1 at 768. */
.hbd-w-testimonials { --hbd-tst-cols: 1; }
.hbd-w-testimonials--per-1 { --hbd-tst-cols: 1; }

/* ----------------------------------------------------------------- header */

/* 31px of padding, then a hairline that live hides below 768 (sampled from the 390 screenshot:
   no non-white pixel where the rule sits at 768 and above). */
/* A flex row, as on live, so the heading is shrink-to-fit rather than the full content width. */
.hbd-w-testimonials__head { display: flex; padding-bottom: var(--hbd-testimonials-head-gap); }
.hbd-w-testimonials__heading { margin: 0; font-family: var(--hbd-font-display); font-weight: 300; font-size: var(--hbd-testimonials-heading); line-height: var(--hbd-testimonials-heading-lh); letter-spacing: normal; color: var(--hbd-text); }

/* --------------------------------------------------------------- carousel */

.hbd-w-testimonials__carousel { position: relative; margin-top: var(--hbd-testimonials-head-gap); }

/* The arrows are out of flow, exactly as on live: on a phone they sit under the heading and over the
   gap above the first card without pushing anything down. */
.hbd-w-testimonials__nav { position: absolute; z-index: 1; right: var(--hbd-testimonials-nav-inset); bottom: calc(100% + var(--hbd-testimonials-nav-lift)); display: flex; gap: var(--hbd-testimonials-nav-gap); }
/* `box-shadow: none` is not cosmetic housekeeping: Astra's global `button, .ast-button, …` rule puts
   `rgba(0,0,0,.05) 0 1px 2px` on every button, and live's arrows have none (measured on both, in rest
   *and* on hover). The base rule beats Astra's element selector, so the hover state inherits it. */
.hbd-w-testimonials__arrow { display: inline-flex; align-items: center; justify-content: center; width: var(--hbd-testimonials-nav-size); height: var(--hbd-testimonials-nav-size); padding: 0; border: 0; border-radius: var(--hbd-radius-pill); box-shadow: none; background: var(--hbd-navy); color: var(--hbd-white); cursor: pointer; transition: background var(--hbd-dur) var(--hbd-ease); }
/* Live's hover changes the background and nothing else — no shadow, no border, no transform, no
   opacity (measured with a hover style diff on both sides). */
.hbd-w-testimonials__arrow:hover { background: var(--hbd-slate); box-shadow: none; }
.hbd-w-testimonials__arrow:focus-visible { outline: 2px solid var(--hbd-navy); outline-offset: 2px; box-shadow: none; }
/* Both buttons draw the same glyph: live's two <svg> element boxes differ (14 for prev, 20 for next)
   but the path inside each renders identical 13.33 × 12.96 ink, so one box size reproduces both. The
   prev arrow is the next arrow mirrored — `arrow-left-bold`'s viewBox is 14 × 12 while its path is
   12.72 tall, so using it here would clip the arrowhead (it is shaped for the header drawer). */
.hbd-w-testimonials__arrow svg { width: var(--hbd-testimonials-nav-icon); height: var(--hbd-testimonials-nav-icon); }
.hbd-w-testimonials__arrow--prev svg { transform: scaleX(-1); }
/* There are no "ends" — the carousel loops, as live does — so this only fires when every card already
   fits and there is nothing to scroll at all. */
.hbd-w-testimonials__arrow[aria-disabled="true"] { opacity: .4; cursor: default; }

/* ------------------------------------------------------------------ track */

/* A native scroller rather than live's transform: it swipes, it takes the keyboard, and it still works
   with JavaScript off. The scrollbar is hidden because live shows none; the arrows are the affordance. */
/* The 1px right clip is a sub-pixel guard, not a design decision. The pitch is the content width ÷ the
   card count, and 1280 ÷ 3 does not land on a whole pixel: the three slides sum to 1279.97, so the
   fourth card begins 0.03px inside the track. Headless Chromium paints nothing there, but a real display
   antialiases that hair into a 1px line of card 4 down the right edge (client QC, 2026-09-21). Widening
   the slides to swallow it would drag every later card off live's x, so the overflow is clipped instead.
   It can never eat card ink: the track snaps to a pitch boundary, and at rest the nearest card stops a
   full gutter (10px) short of the edge. */
.hbd-w-testimonials__track { display: flex; gap: var(--hbd-testimonials-gap); overflow-x: auto; overflow-y: hidden; clip-path: inset(0 1px 0 0); scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.hbd-w-testimonials__track::-webkit-scrollbar { display: none; }
.hbd-w-testimonials__track:focus-visible { outline: 2px solid var(--hbd-navy); outline-offset: 4px; }

/* Live's pitch is content ÷ cards, with the 10px gutter *inside* it: at 1440 that is 1280 ÷ 3 = 426.67
   per slide and 416.67 of card. Subtracting cols × gap (not (cols − 1) × gap) is what reproduces it. */
.hbd-w-testimonials__slide { flex: 0 0 calc((100% - var(--hbd-tst-cols) * var(--hbd-testimonials-gap)) / var(--hbd-tst-cols)); min-width: 0; scroll-snap-align: start; }

/* ------------------------------------------------------------------- card */

/* Cards are top-aligned and each keeps its own art height, so neighbouring quotes deliberately do not
   line up — that is what live does. */
.hbd-w-testimonials__card { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }

.hbd-w-testimonials__media { position: relative; width: 100%; }
/* Both ratios are stated inline per card (--hbd-tst-art / --hbd-tst-photo, from the attachments' own
   dimensions) rather than inferred from the images: see HBD_Testimonials_Widget::ratio_style(). Below
   1024 live serves square crops of both, which is the token's default. */
.hbd-w-testimonials__art { display: block; width: 100%; aspect-ratio: var(--hbd-testimonials-art-ratio); object-fit: cover; border-radius: var(--hbd-radius-s); }
/* The photo floats centred on the art, inset by the measured padding. `box-sizing: content-box` is
   what reproduces live's heights exactly: the *content* box takes the photo's own ratio and the inset
   is added back on top of it — (card − 2 × inset) × ratio + 2 × inset. */
.hbd-w-testimonials__photo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: content-box; display: block; width: calc(100% - 2 * var(--hbd-testimonials-photo-inset)); aspect-ratio: var(--hbd-testimonials-art-ratio); padding: var(--hbd-testimonials-photo-inset); object-fit: cover; border-radius: var(--hbd-radius-m); }
/* Nothing to float it over: the photo takes the art slot instead. */
.hbd-w-testimonials__card--no-art .hbd-w-testimonials__art { border-radius: var(--hbd-radius-s); }

/* Astra styles <blockquote> with an indent, a rule and italics; live's quote is flush with the card,
   upright and rule-less. (Synthesised obliques keep roman metrics, so this is invisible to the
   measurement and visible to a reader — it was caught in the 1440 screenshot, not the delta table.) */
.hbd-w-testimonials__quote { margin: 0; border: 0; width: 100%; font-style: normal; padding: var(--hbd-testimonials-quote-pad) 0; font-size: var(--hbd-testimonials-quote); line-height: var(--hbd-testimonials-quote-lh); color: var(--hbd-text); }
.hbd-w-testimonials__quote p { margin: 0; }

.hbd-w-testimonials__meta { width: 100%; display: flex; flex-direction: column; gap: var(--hbd-testimonials-meta-gap); margin-top: var(--hbd-testimonials-meta-gap); font-family: var(--hbd-font-serif-2); font-size: var(--hbd-testimonials-meta); line-height: var(--hbd-testimonials-meta-lh); text-transform: uppercase; color: var(--hbd-text); }
.hbd-w-testimonials__name, .hbd-w-testimonials__label { display: block; }

/* ------------------------------------------------------------ breakpoints */

@media (min-width: 768px) {
	/* The hairline under the heading only exists from 768 up. */
	.hbd-w-testimonials__head { border-bottom: 1px solid var(--hbd-grey-300); }
	.hbd-w-testimonials--per-2, .hbd-w-testimonials--per-3 { --hbd-tst-cols: 2; }
}
@media (min-width: 1024px) {
	/* From 1024 each image takes its own aspect ratio instead of live's square crop, and the inset
	   doubles (the inset itself comes from the token). */
	.hbd-w-testimonials__art { aspect-ratio: var(--hbd-tst-art, var(--hbd-testimonials-art-ratio)); }
	.hbd-w-testimonials__photo { aspect-ratio: var(--hbd-tst-photo, var(--hbd-testimonials-art-ratio)); }
}
@media (min-width: 1280px) {
	.hbd-w-testimonials--per-3 { --hbd-tst-cols: 3; }
}

@media (prefers-reduced-motion: reduce) {
	.hbd-w-testimonials__track { scroll-behavior: auto; }
}