/* =====================================================================
   Reviews — Figma "D - Reviews" 8047:54962.
   A pale-blue band (--pale-blue) padded by 80px, content locked to the 1240
   content area. A header row (H2 heading LEFT, rating-platform logos RIGHT;
   wraps with a 40px row gap) over a horizontally-scrollable row of fixed-size
   review cards (280x350, white, soft-blue border, radius 20). Each card holds
   a centred star image + name + location + quote, with the date pinned to the
   bottom. Mobile (<=767.98px) stacks the header (heading then left-aligned
   logos) and lets the cards row bleed toward the screen edge.
   Tokens only; component-local --rv-* properties for non-token values.
   ===================================================================== */

.reviews {
  /* Component-local values (no token edits; mirrors about-values' --av-* pattern). */
  --rv-section-gap: 40px;     /* header -> cards row, and header row-gap          */
  --rv-card-gap: 20px;        /* between cards, and stacking inside a card        */
  --rv-logos-h: 45px;         /* rating-platform logo row height                  */
  --rv-logo-max-h: 30px;      /* per-logo cap (each <img> sized by its own w/h)   */
  --rv-card-w: 280px;         /* fixed card width                                 */
  --rv-card-h: 350px;         /* fixed card height                                */
  --rv-card-pad: 40px 20px;   /* card padding                                     */
  --rv-stars-w: 127px;        /* star rating image width                          */
  --rv-stars-h: 20px;         /* star rating image height                         */

  background: var(--pale-blue);
}

.reviews__inner {
  display: flex;
  flex-direction: column;
  gap: var(--rv-section-gap);
  padding-block: var(--home-sec-pad-y);
}

/* ---- Header row: heading LEFT, logos RIGHT, wraps with 40px row gap ---- */
.reviews__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--rv-section-gap);
  column-gap: var(--rv-card-gap);
  width: 100%;
}

/* H2 — Axiforma Medium 32/45 (OG Desktop H2). */
.reviews__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--gray-8);
  word-break: break-word;
}

/* Right-aligned logo row, 45px tall, 20px gap. Each <img> keeps its own
   aspect ratio (height auto by its w/h) but is capped at ~30px tall. */
.reviews__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rv-card-gap);
  height: var(--rv-logos-h);
}

.reviews__logo-item {
  display: flex;
  align-items: center;
}

.reviews__logo {
  display: block;
  width: auto;
  /* Explicit height (not auto) so SVG logos with no intrinsic size don't
     collapse to 0 in the flex row; width follows each logo's aspect ratio. */
  height: var(--rv-logo-max-h);
  max-width: 100%;
}

/* ---- Cards row: swipeable carousel of fixed-size cards ----
   Mandatory snap so a swipe/drag lands cleanly on the next card, and the
   native scrollbar is hidden at every width (the row is driven by swipe /
   trackpad / shift-scroll, not a visible scrollbar). ---- */
.reviews__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: var(--rv-card-gap);
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* legacy Edge/IE */
}
.reviews__list::-webkit-scrollbar { display: none; } /* WebKit / Blink */

/* A single review card: 280x350, white, soft-blue border, radius 20.
   Content is centred and pushed apart so the date pins to the bottom. */
.reviews__card {
  flex: none;
  width: var(--rv-card-w);
  height: var(--rv-card-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--rv-card-pad);
  background: var(--gray-0);
  border: 1px solid var(--soft-blue);
  border-radius: var(--radius-20);
  text-align: center;
  scroll-snap-align: start;
}

/* Centred stack: stars + name + location + quote. */
.reviews__card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rv-card-gap);
  width: 100%;
}

.reviews__stars {
  display: block;
  flex: none;
  width: var(--rv-stars-w);
  height: var(--rv-stars-h);
}

/* Name — Axiforma Bold 20, leading 1.3. */
.reviews__name {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  line-height: 1.3;
  color: var(--gray-8);
  word-break: break-word;
}

/* Location — Axiforma Regular 16. */
.reviews__location {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--gray-7);
  word-break: break-word;
}

/* Quote — Axiforma Regular 16, centred. */
.reviews__quote {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--gray-8);
  word-break: break-word;
}

/* Date — Axiforma Regular 16, pinned to the bottom of the card. */
.reviews__date {
  margin: 0;
  flex: none;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Tablet (600–1023px): show 2–3 cards by widening the card and letting
   the row wrap; the cards list is still scrollable if there are many cards. ---- */
@media (max-width: 1023.98px) {
  .reviews__heading {
    font-size: var(--fs-26);
    line-height: var(--lh-36);
  }

  /* Wider cards on tablet so 2 fit comfortably at ~768px, ~3 at 1024px. */
  .reviews__card {
    --rv-card-w: clamp(260px, 42%, 320px);
    height: auto;
    min-height: var(--rv-card-h);
  }
}

/* ---- Large-mobile (<=767.98px): header stacks, tighter band padding, reduced heading. ---- */
@media (max-width: 767.98px) {
  .reviews {
    padding-inline: var(--pad-mobile);
  }

  .reviews__inner {
    gap: var(--rv-card-gap);
    padding-block: var(--ba-pad-y);
  }

  .reviews__header {
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--rv-card-gap);
  }

  .reviews__heading {
    width: 100%;
  }

  .reviews__logos {
    justify-content: flex-start;
  }
}

/* ---- Phone (<=599.98px): cards bleed to the screen edge (carousel behaviour). ---- */
@media (max-width: 599.98px) {
  /* Reset the tablet card sizing back to the fixed phone dimensions. */
  .reviews__card {
    --rv-card-w: 280px;
    height: var(--rv-card-h);
    min-height: 0;
  }

  /* Cards bleed to the screen edge; the gutter is restored as padding so the
     first card isn't glued to the edge (scroll-padding keeps snap aligned).
     Scrollbar is already hidden on the base rule. */
  .reviews__list {
    flex-wrap: nowrap;
    margin-inline: calc(var(--pad-mobile) * -1);
    padding-inline: var(--pad-mobile);
    scroll-padding-inline: var(--pad-mobile);
  }
}