/*
 * hbd-google-reviews — the Google review slider.
 *
 * 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 switches at: 640 and 1024 for the column count, 768
 * for the gutter, the section padding and the heading (docs/audit/widgets/google-reviews.md §2).
 * Enqueued as `hbd-widget-google-reviews` only on pages that render the widget.
 */

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

/* No background of its own — live's section is transparent — and the site-wide 20/60/80 gutter. */
.hbd-w-google-reviews { padding-block: var(--hbd-reviews-pad); }
.hbd-w-google-reviews > .hbd-w__inner { max-width: calc(var(--hbd-container) + 2 * var(--hbd-row-gutter)); padding-inline: var(--hbd-row-gutter); }

/* ------------------------------------------------------------------- head */

/* Heading + rating on the left, arrows on the right, a hairline under both. The arrows are centred on
   the *content* box (the 24px of padding below the rating line is outside it), which is what puts them
   at live's y. */
.hbd-w-google-reviews__head { display: flex; align-items: center; justify-content: space-between; gap: var(--hbd-reviews-head-col-gap); padding-bottom: var(--hbd-reviews-head-pad); margin-bottom: var(--hbd-reviews-head-space); border-bottom: var(--hbd-reviews-rule); }
.hbd-w-google-reviews__intro { display: flex; flex-direction: column; gap: var(--hbd-reviews-head-gap); min-width: 0; }
.hbd-w-google-reviews__heading { margin: 0; font-family: var(--hbd-font-display); font-weight: 300; font-size: var(--hbd-reviews-heading); line-height: var(--hbd-reviews-heading-lh); letter-spacing: normal; color: var(--hbd-text); }

.hbd-w-google-reviews__rating { display: flex; align-items: center; gap: var(--hbd-reviews-rating-gap); margin: 0; font-family: var(--hbd-font-body); }
.hbd-w-google-reviews__score { font-size: var(--hbd-reviews-score); line-height: var(--hbd-reviews-score-lh); font-weight: 500; letter-spacing: var(--hbd-reviews-ls); color: var(--hbd-navy); }
.hbd-w-google-reviews__count { font-size: var(--hbd-reviews-count); line-height: var(--hbd-reviews-count-lh); letter-spacing: var(--hbd-reviews-ls); color: var(--hbd-reviews-count-color); }

/* ------------------------------------------------------------------ stars */

/* The rows themselves are the shared component (hbd_stars(), assets/css/utilities.css): two
   superimposed layers of five fixed-size glyphs, the coloured one clipped to the score. Only the
   card's wider gap is this widget's — the aggregate row takes the theme's default 20px / 2px, which
   is live's own 108px row. */

/* ----------------------------------------------------------------- arrows */

.hbd-w-google-reviews__nav { display: flex; flex: none; gap: var(--hbd-reviews-nav-gap); }
/* `box-shadow: none` is not 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, in rest and on hover. */
.hbd-w-google-reviews__arrow { display: inline-flex; align-items: center; justify-content: center; width: var(--hbd-reviews-nav-size); height: var(--hbd-reviews-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 transform, no opacity. */
.hbd-w-google-reviews__arrow:hover:not([disabled]) { background: var(--hbd-slate); box-shadow: none; }
.hbd-w-google-reviews__arrow:focus-visible { outline: 2px solid var(--hbd-navy); outline-offset: 2px; box-shadow: none; }
/* Live disables the button at each end rather than looping, with exactly this opacity and cursor. */
.hbd-w-google-reviews__arrow[disabled] { opacity: .4; cursor: not-allowed; }
.hbd-w-google-reviews__arrow svg { width: var(--hbd-reviews-nav-icon); height: var(--hbd-reviews-nav-icon); }
.hbd-w-google-reviews__arrow--prev svg { transform: scaleX(-1); }

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

/* A native scroller rather than live's re-render: 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. */
.hbd-w-google-reviews__track { display: flex; gap: var(--hbd-reviews-gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.hbd-w-google-reviews__track::-webkit-scrollbar { display: none; }
.hbd-w-google-reviews__track:focus-visible { outline: 2px solid var(--hbd-navy); outline-offset: 4px; }

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

/* Live's grid: n columns with the gap *between* them, so a card is (100% − (n−1) × gap) ÷ n. */
.hbd-w-google-reviews__card { flex: 0 0 calc((100% - (var(--hbd-reviews-cols) - 1) * var(--hbd-reviews-gap)) / var(--hbd-reviews-cols)); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; height: var(--hbd-reviews-card-h); margin: 0; padding: var(--hbd-reviews-card-pad); border-radius: var(--hbd-reviews-card-radius); background: var(--hbd-sky); font-family: var(--hbd-font-body); color: var(--hbd-text); }

.hbd-w-google-reviews__meta { display: flex; align-items: center; gap: var(--hbd-reviews-avatar-gap); }
.hbd-w-google-reviews__avatar { flex: none; display: block; width: var(--hbd-reviews-avatar); height: var(--hbd-reviews-avatar); border-radius: var(--hbd-radius-pill); object-fit: cover; }
/* The letter disc Google itself falls back to when a reviewer has no picture. */
.hbd-w-google-reviews__avatar--initial { display: flex; align-items: center; justify-content: center; background: var(--hbd-navy); color: var(--hbd-white); font-size: var(--hbd-reviews-avatar-initial); font-weight: 500; line-height: 1; }

.hbd-w-google-reviews__date { display: block; margin: var(--hbd-reviews-date-top) 0 var(--hbd-reviews-date-bottom); font-size: var(--hbd-reviews-date); line-height: var(--hbd-reviews-date-lh); color: var(--hbd-reviews-date-color); }

/* The text region is the card's only flexible part, which is what makes every card 320px tall and
   every name line up — and it scrolls, exactly as live's does, rather than growing when expanded. */
.hbd-w-google-reviews__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.hbd-w-google-reviews__body:focus-visible { outline: 2px solid var(--hbd-navy); outline-offset: 2px; }
/* `pre-line` keeps the paragraph breaks reviewers type, as live does. */
.hbd-w-google-reviews__text { margin: 0; font-size: var(--hbd-reviews-text); line-height: var(--hbd-reviews-text-lh); white-space: pre-line; }

/* Without the script the full text is what shows (and the box scrolls); the script adds `is-clamped`
   and reveals the button, so nothing a reader needs depends on JavaScript. */
.hbd-w-google-reviews__short { display: none; }
.hbd-w-google-reviews__card.is-clamped .hbd-w-google-reviews__short { display: inline; }
.hbd-w-google-reviews__card.is-clamped .hbd-w-google-reviews__full { display: none; }
.hbd-w-google-reviews__more { padding: 0; border: 0; background: none; box-shadow: none; font: inherit; font-weight: 500; line-height: inherit; color: var(--hbd-navy); text-decoration: none; cursor: pointer; }
.hbd-w-google-reviews__more:hover { background: none; box-shadow: none; color: var(--hbd-navy); text-decoration: underline; }
.hbd-w-google-reviews__more:focus-visible { outline: 2px solid var(--hbd-navy); outline-offset: 2px; }

.hbd-w-google-reviews__name { margin: 0; padding-top: var(--hbd-reviews-name-top); font-size: var(--hbd-reviews-name); line-height: var(--hbd-reviews-name-lh); font-weight: 500; text-transform: uppercase; color: var(--hbd-text); }

/* --------------------------------------------------------------- fallback */

/* What takes the cards' place when Google has nothing for us. The rating line above it is still the
   clinic's own, from the numbers saved on the post. */
.hbd-w-google-reviews__fallback { margin: 0; font-family: var(--hbd-font-body); font-size: var(--hbd-reviews-text); line-height: var(--hbd-reviews-text-lh); color: var(--hbd-text); }

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.hbd-w-google-reviews__track { scroll-behavior: auto; }
	.hbd-w-google-reviews__arrow { transition: none; }
}