/* See ./reviews.md for design notes and rationale.
 *
 * Reviews block - EDS-mode stylesheet. Loaded by aem.js loadBlock in
 * EDS mode and by loadBlockForAuthor in author mode. Mobile-first;
 * canonical breakpoints 768 / 1024 / 1440. Scoped to .reviews. */

.reviews__root {
  /* Figma SM (node 20065:34445): 24px (space-7) header->cards gap, 0 top /
   * 40px (space-9) bottom padding. 0 top because the preceding page section
   * owns the space above (matches the desktop frame's pt-0). */
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-7);
  padding-block: 0 var(--ll-space-9);
}

/* --- Header: section heading -------------------------------------- */

.reviews__header {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-3);
}

.reviews__heading {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-h6-family);
  font-size: var(--ll-text-h6-size);
  line-height: var(--ll-text-h6-line-height);
  letter-spacing: var(--ll-text-h6-letter-spacing);
  font-weight: var(--ll-text-h6-weight);
}

/* --- Marquee: continuously-scrolling review cards ------------------ *
 * The awards-block pattern (no arrows, no dots): the track holds 3 x N
 * items (authored + two aria-hidden clone cycles appended by
 * reviews.js) and the keyframe translates by calc(-100% / 3) so
 * the seam is invisible regardless of N. padding-block gives the cards
 * vertical breathing room so their borders are not clipped by the
 * marquee's overflow. The inline edge fade (mask) is applied at MD+ only
 * (tablet + desktop); mobile has no fade - the peeking card is simply
 * clipped by the overflow. */

.reviews__marquee {
  /* SM (Figma 20065:34445): 20px (space-6) card gap. Card width keeps a peek
   * for the marquee (Figma's 343 = full content width / single-slide model,
   * which the continuous marquee shows as one card + peek). */
  --reviews-gap: var(--ll-space-6);
  --reviews-card-width: 300px;
  --reviews-duration: 60s;

  overflow: hidden;
  padding-block: var(--ll-space-2);
}

.reviews__track {
  display: flex;
  align-items: stretch;
  gap: var(--reviews-gap);
  width: max-content;
  margin: 0;

  /* Trailing-only padding keeps the clone seam invisible: one full cycle
   * (N cards + N gaps) equals exactly calc(-100% / 3) of the 3-cycle track. */
  padding-block: 0;
  padding-inline: 0 var(--reviews-gap);
  list-style: none;
  animation: reviews-scroll var(--reviews-duration) linear infinite;
}

.reviews__marquee[data-pause-on-hover='true']:hover .reviews__track {
  animation-play-state: paused;
}

@keyframes reviews-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% / 3), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__marquee {
    overflow-x: auto;
  }

  .reviews__track {
    animation: none;
  }
}

.reviews__item {
  display: flex;
  flex: none;
  width: var(--reviews-card-width);
  margin: 0;
  padding: 0;
}

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

.reviews__card {
  /* No height:100% - a percentage height here races the nested flex sizing
   * (track -> item -> card) and lets the tallest card overflow its item, so
   * the marquee's overflow clips the bottom border. The item's default
   * align-items:stretch already makes every card match the tallest. */
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-3);
  width: 100%;
  padding: var(--ll-space-6); /* SM 20px; MD+ bumps to 32px below */
  border: 1px solid var(--ll-color-border-default);
  border-radius: var(--ll-radius-card);
  background: var(--ll-color-bg-default);
}

.reviews__card-headline {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-lg-family);
  font-size: var(--ll-text-body-lg-size);
  line-height: var(--ll-text-body-lg-line-height);
  letter-spacing: var(--ll-text-body-lg-letter-spacing);
  font-weight: var(--ds-font-weight-semibold, 600);
}

.reviews__product {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ll-text-body-sm-weight);
}

/* Five solid-green stars. The SVG is masked with the success token so the
 * glyph renders in #16a761 with crisp vector edges. Figma Stars group: 4px
 * gap (space-2), no extra margin - the card's 8px (space-3) column gap owns
 * the spacing above/below the row. */
.reviews__stars {
  display: inline-flex;
  gap: var(--ll-space-2);
}

.reviews__star {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.reviews__star img {
  display: none;
}

.reviews__star.icon {
  background-color: var(--ll-color-signal-success);
  mask-image: var(--reviews-star-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* --- Meta line: reviewer - date, verified tag --------------------- */

.reviews__meta {
  margin: 0;
  color: var(--ll-color-text-tertiary);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
}

.reviews__reviewer {
  color: var(--ll-color-text-secondary);
  font-weight: var(--ds-font-weight-semibold, 600);
}

.reviews__verified {
  color: var(--ll-color-text-brand);
}

/* --- Review body --------------------------------------------------- */

/* Figma nests title/product/stars/meta in a "Review Title" group (8px gap)
 * and separates the body by 20px (space-6). Our card is a flat flex column
 * with an 8px gap, so add 12px (space-4) on the body: 8 + 12 = 20. */
.reviews__content {
  margin: 0;
  margin-block-start: var(--ll-space-4);
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
}

/* --- Tablet (>=768px) ---------------------------------------------- */

@media (width >= 768px) {
  .reviews__marquee {
    /* Figma card = 416px; at XL 3x416 + 2x32 gap = 1312 = content width. */
    --reviews-gap: var(--ll-space-8);
    --reviews-card-width: 416px;
    --reviews-fade: 96px;

    /* Edge fade is tablet/desktop only (mobile has none). */
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--reviews-fade),
      #000 calc(100% - var(--reviews-fade)),
      transparent 100%
    );
  }

  .reviews__card {
    padding: var(--ll-space-8);
  }

  .reviews__content {
    font-family: var(--ll-text-body-lg-family);
    font-size: var(--ll-text-body-lg-size);
    line-height: var(--ll-text-body-lg-line-height);
    letter-spacing: var(--ll-text-body-lg-letter-spacing);
  }
}

/* --- Desktop (>=1024px) -------------------------------------------- */

@media (width >= 1024px) {
  .reviews__root {
    /* Figma section (node 20029:19245): 48px (space-11) header->cards gap,
     * 80px (space-15) bottom padding. Figma shows 0 top padding because the
     * preceding page section owns the space above; kept 0 here to match. */
    gap: var(--ll-space-11);
    padding-block: 0 var(--ll-space-15);
  }

  .reviews__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--ll-space-6);
  }

  .reviews__heading {
    font-family: var(--ll-text-h3-family);
    font-size: var(--ll-text-h3-size);
    line-height: var(--ll-text-h3-line-height);
    letter-spacing: var(--ll-text-h3-letter-spacing);
    font-weight: var(--ll-text-h3-weight);
  }

  .reviews__card-headline {
    font-family: var(--ll-text-body-xl-family);
    font-size: var(--ll-text-body-xl-size);
    line-height: var(--ll-text-body-xl-line-height);
    letter-spacing: var(--ll-text-body-xl-letter-spacing);
  }
}