/* ==========================================================================
   BLOCK: .sh-reviews-v3
   v3 Google reviews carousel — white ground, three centred columns separated
   by hairline dividers, draggable progress bar underneath.

   Measured off the design reference (1024px render):

     content column   x 74 -> 948.5  = 85.4% of the viewport, centred
     dividers         x 365.5 and 657 — exact thirds of the column, so the
                      slides are contiguous (spaceBetween: 0 in the JS) and
                      the divider sits on each slide's own left edge
     star row         116 / 291 = 40% of a column (the same ratio as the
                      205px five-star asset the v2 block uses)
     progress bar     x 345 -> 690 = 39.5% of the content column, centred,
                      thumb covering ~24% of the track (3 of 12 reviews)

   Everything is scoped under .sh-reviews-v3 and every custom property carries
   the --shr3- prefix, so the block neither leaks nor inherits.
   ========================================================================== */

.sh-reviews-v3 {
  /* --- palette ---------------------------------------------------------
     The pink is the v3 refresh pink already in use for
     `.kd-v3 .sh-home-types__card-title`; the bar red is --kd-v3-red from
     style.css, with the literal kept as a fallback. */
  --shr3-accent:   #F34C7F;  /* stars                                  */
  --shr3-bar:      var(--kd-v3-red, #d61821);  /* progress thumb       */
  --shr3-track:    #f0dede;  /* progress groove                        */
  --shr3-divider:  #e6e6e6;  /* column hairlines                       */
  --shr3-ink:      #282728;  /* quote + name                           */
  --shr3-bg:       #ffffff;

  /* --- type families ---------------------------------------------------
     Canto (display serif) and Agenda (UI sans) are the licensed theme
     faces; the fallbacks stay close in proportion. */
  --shr3-font-display: "Canto", "Canto Web", Georgia, "Times New Roman", serif;
  --shr3-font-text:    "Agenda", "Agenda Web", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- type scale ------------------------------------------------------- */
  --shr3-fs-title: clamp(1.75rem,  2.4vw,  2.8125rem);  /* 28 -> 45px */
  --shr3-fs-quote: clamp(1rem,     1.2vw,  1.375rem);   /* 16 -> 22px */
  --shr3-fs-name:  clamp(1.125rem, 1.25vw, 1.5rem);     /* 18 -> 24px */
  --shr3-lh-quote: 1.55;

  /* --- rhythm ----------------------------------------------------------- */
  --shr3-pad-y:        clamp(3rem,    6vw,    6.5rem);    /* 48 -> 104px */
  --shr3-gutter:       clamp(1rem,    2.5vw,  1.5rem);
  --shr3-content-max:  clamp(1140px, 79.167vw + .1px, 1520px);
  --shr3-title-gap:    clamp(1.75rem, 3vw,    3.25rem);
  --shr3-progress-gap: clamp(2rem,    4.5vw,  5rem);

  /* --- card ------------------------------------------------------------- */
  --shr3-card-pad-x:  clamp(1rem,     2.2vw,  2.125rem);  /* 16 -> 34px */
  --shr3-card-pad-y:  clamp(1.5rem,   2.9vw,  2.75rem);   /* 24 -> 44px */
  --shr3-gap-quote:   clamp(1.5rem,   3vw,    3.625rem);  /* stars -> quote */
  --shr3-gap-attrib:  clamp(1.125rem, 2vw,    2.375rem);  /* quote -> Google */
  --shr3-gap-name:    clamp(0.375rem, 0.8vw,  0.875rem);  /* Google -> name */
  --shr3-quote-max:   30ch;

  /* --- chrome ----------------------------------------------------------- */
  --shr3-star:        clamp(1.125rem, 1.6vw,  1.9375rem); /* 18 -> 31px */
  --shr3-star-gap:    clamp(0.375rem, 0.57vw, 0.6875rem); /*  6 -> 11px */
  --shr3-source:      clamp(1.625rem, 1.95vw, 2.3125rem); /* 26 -> 37px */
  --shr3-progress-w:  39.5%;
  --shr3-progress-h:  4px;

  box-sizing: border-box;
  padding: var(--shr3-pad-y) var(--shr3-gutter);
  background-color: var(--shr3-bg);
  font-family: var(--shr3-font-text);
  color: var(--shr3-ink);
  -webkit-font-smoothing: antialiased;
}

.sh-reviews-v3 *,
.sh-reviews-v3 *::before,
.sh-reviews-v3 *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Content column
   ----------------------------------------------------------------------- */
.sh-reviews-v3__inner {
  max-width: var(--shr3-content-max);
  width: 100%;
  margin: 0 auto;
}

.sh-reviews-v3__title {
  margin: 0 0 var(--shr3-title-gap);
  font-family: var(--shr3-font-display);
  font-size: var(--shr3-fs-title);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: var(--shr3-ink);
}

/* --------------------------------------------------------------------------
   Carousel
   ----------------------------------------------------------------------- */
.sh-reviews-v3__viewport {
  width: 100%;
  overflow: hidden;
}

/* `flex-start` and `height: auto` deliberately leave the slides at their own
   natural height. That is what lets Swiper's autoHeight measure the tallest
   review currently on screen; stretching them here would measure the wrapper
   back to itself and the section could then only ever grow. The JS stretches
   the on-screen slides to the measured height afterwards, which is what makes
   a row's cards match and the dividers span the full card. */
.sh-reviews-v3__track {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-reviews-v3__slide {
  position: relative;
  display: flex;
  height: auto;
  flex-shrink: 0;
}

/* Divider, drawn on each slide's left edge. Hidden by default and revealed
   only on a visible slide that follows another visible slide, which yields
   exactly two hairlines for three columns and leaves the outer edges of the
   viewport clean. Depends on `watchSlidesProgress: true` in the JS. */
.sh-reviews-v3__slide::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background-color: var(--shr3-divider);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.sh-reviews-v3__slide.swiper-slide-visible
  + .sh-reviews-v3__slide.swiper-slide-visible::before {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Card — everything centred, the attribution pinned to the bottom so the
   Google marks and names sit in a consistent band across the row.
   ----------------------------------------------------------------------- */
.sh-reviews-v3__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%; /* fill the height the JS stamps on the slide */
  padding: var(--shr3-card-pad-y) var(--shr3-card-pad-x);
  text-align: center;
  min-height: 420px;
}

.sh-reviews-v3__stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--shr3-star-gap);
  margin-bottom: var(--shr3-gap-quote);
  color: var(--shr3-accent);
}

.sh-reviews-v3__star {
  display: block;
  width: var(--shr3-star);
  height: auto;
  flex-shrink: 0;
}

.sh-reviews-v3__quote {
  margin: 0 0 var(--shr3-gap-attrib);
  max-width: var(--shr3-quote-max);
  font-size: var(--shr3-fs-quote);
  font-weight: 400;
  line-height: var(--shr3-lh-quote);
  color: var(--shr3-ink);
}

.sh-reviews-v3__quote p {
  margin: 0;
}

.sh-reviews-v3__quote p + p {
  margin-top: 0.75em;
}

.sh-reviews-v3__quote strong,
.sh-reviews-v3__quote b {
  font-weight: 700;
}

/* `margin-top: auto` absorbs whatever vertical slack the card has left, which
   is what keeps the Google marks and names in one band across a row now that
   the row is only as tall as its tallest visible review. */
.sh-reviews-v3__attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--shr3-gap-name);
  margin-top: auto;
}

.sh-reviews-v3__source {
  display: block;
  width: var(--shr3-source);
  height: auto;
}

.sh-reviews-v3__name {
  margin: 0;
  font-family: var(--shr3-font-display);
  font-size: var(--shr3-fs-name);
  font-weight: 400;
  line-height: 1.3;
  color: var(--shr3-ink);
}

/* --------------------------------------------------------------------------
   Progress bar — Swiper's scrollbar, pulled out of its absolute placement
   and centred in the flow. The extra .swiper-scrollbar in the selector
   outranks Swiper's own `.swiper-scrollbar.swiper-scrollbar-horizontal`.
   ----------------------------------------------------------------------- */
.sh-reviews-v3 .swiper-scrollbar.sh-reviews-v3__progress {
  position: static;
  width: var(--shr3-progress-w);
  height: var(--shr3-progress-h);
  margin: var(--shr3-progress-gap) auto 0;
  border-radius: 999px;
  background-color: var(--shr3-track);
}

.sh-reviews-v3 .swiper-scrollbar.sh-reviews-v3__progress .swiper-scrollbar-drag {
  border-radius: 999px;
  background-color: var(--shr3-bar);
}

.sh-reviews-v3 .swiper-scrollbar.swiper-scrollbar-disabled {
  display: none;
}

/* --------------------------------------------------------------------------
   Tablet — 1024px and under. Two columns (set in the JS); type stops
   tracking the viewport and holds a readable size.
   ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .sh-reviews-v3 {
    --shr3-pad-y:        clamp(3rem, 6vw, 4.5rem);
    --shr3-fs-title:     1.875rem;  /* 30px */
    --shr3-fs-quote:     1.0625rem; /* 17px */
    --shr3-fs-name:      1.1875rem; /* 19px */
    --shr3-star:         1.375rem;  /* 22px */
    --shr3-star-gap:     0.5rem;
    --shr3-source:       1.75rem;   /* 28px */
    --shr3-gap-quote:    1.75rem;
    --shr3-gap-attrib:   1.375rem;
    --shr3-progress-w:   55%;
    --shr3-progress-gap: 2.5rem;
    --shr3-quote-max:    28ch;
  }
}

/* --------------------------------------------------------------------------
   Mobile — 768px and under. One column (set in the JS), so there is no
   column boundary left to draw.
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
  .sh-reviews-v3 {
    --shr3-pad-y:        3rem;
    --shr3-card-pad-x:   1.25rem;
    --shr3-card-pad-y:   1.5rem;
    --shr3-fs-title:     1.625rem;  /* 26px */
    --shr3-fs-quote:     1rem;      /* 16px */
    --shr3-fs-name:      1.125rem;  /* 18px */
    --shr3-star:         1.25rem;   /* 20px */
    --shr3-source:       1.625rem;  /* 26px */
    --shr3-gap-quote:    1.5rem;
    --shr3-gap-attrib:   1.25rem;
    --shr3-progress-w:   70%;
    --shr3-progress-gap: 2rem;
    --shr3-progress-h:   3px;
    --shr3-quote-max:    34ch;
  }

  .sh-reviews-v3__slide::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-reviews-v3 * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}