/* ==========================================================================
   sections/reviews.css · owner: reviews-agent
   Mounts: section#more-reasons (reviews--more-reasons.html, inside .band--light)
           section#reviews      (reviews.html, full bleed)
   Spec: DESIGN_SPEC §12 (more-reasons), §13 (reviews); motion.md §6.1, §7, §11, §12.
   Breakpoints: tablet (max-width: 1199.98px) · phone (max-width: 789.98px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. more-reasons (§12). No motion.
   -------------------------------------------------------------------------- */
#more-reasons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
  width: 100%;                          /* .band--light children shrink to fit */
  max-width: var(--container-max);      /* 1000 / 772 / 342 inside the 24px band padding */
}

.more-reasons__title {
  max-width: var(--text-w-more-h3);     /* 624 */
  color: var(--color-text-ink-violet);
  text-align: center;
}

.more-reasons__row {
  display: flex;
  gap: var(--space-16);
  width: 100%;
}

.more-reasons__card {
  flex: 1 1 0;
  min-width: 0;
  height: 184px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-32) var(--space-40);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-20);
}

.more-reasons__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-12);
  background: var(--color-bg);
  box-shadow: var(--shadow-ring-03);
  color: var(--color-text);
}

.more-reasons__slot {
  width: 50px;
  height: 38px;
}

.more-reasons__glyph {
  width: 32px;
  height: 32px;
}

.more-reasons__text {
  color: var(--color-text-55);
}

.more-reasons__leadin {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

@media (max-width: 1199.98px) {
  .more-reasons__card { padding: var(--space-32) var(--space-24); }   /* 378×184 */
}

@media (max-width: 789.98px) {
  #more-reasons { gap: var(--space-32); }
  .more-reasons__row { flex-direction: column; }
  .more-reasons__card {
    flex: none;
    height: 152px;                      /* 342×152 */
    padding: var(--space-24);
  }
  .more-reasons__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-8);
  }
  .more-reasons__slot {
    width: 34px;
    height: 26px;
  }
}

/* --------------------------------------------------------------------------
   2. reviews: section shell and heading (§13)
   -------------------------------------------------------------------------- */
#reviews {
  /* Collapsed / expanded wall heights (DESIGN_SPEC "Tokens not in tokens.css":
     --reviews-wall-h 720 / 700 / 1000, --reviews-wall-expanded-h 1464).
     Below 1200 reviews.js writes the measured expanded height on the wall. */
  --reviews-wall-h: 720px;
  --reviews-wall-expanded-h: 1464px;
  --reviews-pill-w: 452px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  padding: var(--space-150) 0 var(--space-160);
  overflow: hidden;
  background: var(--color-bg);
}

.reviews__heading {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 var(--gutter);
}

.reviews__title {
  max-width: var(--text-w-reviews-h3);  /* 731 */
  color: var(--color-text-80);
  text-align: center;
}

/* --------------------------------------------------------------------------
   3. Wall (viewport), inner columns, fade mask
   -------------------------------------------------------------------------- */

/* Mask stops are registered so the fade can animate away on expand. */
@property --reviews-fade-a {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 36%;
}
@property --reviews-fade-b {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 48%;
}

.reviews__wall {
  position: relative;
  flex: none;
  width: var(--reviews-wall-max);       /* fixed 1400, centered (overflows equally below 1400) */
  height: var(--reviews-wall-h);
  overflow: hidden;
  background: var(--color-bg);
  transition: height var(--t-spring);
}

.reviews__wall[data-expanded="true"] {
  height: var(--reviews-wall-expanded-h);
}

.reviews__inner {
  --reviews-fade-a: 36%;
  --reviews-fade-b: 48%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
  padding: var(--space-40) var(--space-8);
  /* = var(--mask-reviews-fade), written with animatable stops */
  -webkit-mask-image: linear-gradient(180deg, #000 var(--reviews-fade-a), transparent var(--reviews-fade-b));
          mask-image: linear-gradient(180deg, #000 var(--reviews-fade-a), transparent var(--reviews-fade-b));
  transition: --reviews-fade-a var(--t-spring), --reviews-fade-b var(--t-spring);
}

.reviews__wall[data-expanded="true"] .reviews__inner {
  --reviews-fade-a: 100%;
  --reviews-fade-b: 100%;
}

.reviews__col {
  --reviews-drift: 20px;                /* static offset; reviews.js drifts +20 → −20 */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  background: rgba(255, 255, 255, .02); /* --color-review-col (not in tokens.css) */
  translate: 0 var(--reviews-drift);
}

.reviews__col--2,
.reviews__col--4 {
  --reviews-drift: -20px;               /* drifts −20 → +20 */
}

/* --------------------------------------------------------------------------
   4. Cards
   -------------------------------------------------------------------------- */
.reviews__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-ring-04);
}

.reviews__head {
  flex: none;
  display: flex;
  padding: var(--space-20);
}

.reviews__head--social {
  height: 80px;
  align-items: center;
  gap: var(--space-10);
}

.reviews__head--store {
  height: 104px;
  flex-direction: column;
  gap: var(--space-7);                  /* 20 + 20.4 + 15.6 + 14 + 2 gaps + 20 = 104 */
}

.reviews__head--email {
  height: 112px;
  flex-direction: column;
  gap: var(--space-10);
}

.reviews__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad-placeholder);
  color: var(--color-text-60);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1;
  font-weight: var(--fw-semibold);
  user-select: none;
}

.reviews__avatar--sm {
  width: 30px;
  height: 30px;
  font-size: var(--fs-micro);
}

/* Feature-note badge: a line icon (assets/placeholders/icons/) inside the round badge */
.reviews__glyph {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}

.reviews__glyph--calendar { --glyph: url("../assets/placeholders/icons/calendar.svg"); }
.reviews__glyph--check    { --glyph: url("../assets/placeholders/icons/check.svg"); }
.reviews__glyph--clock    { --glyph: url("../assets/placeholders/icons/clock.svg"); }
.reviews__glyph--heart    { --glyph: url("../assets/placeholders/icons/heart.svg"); }
.reviews__glyph--leaf     { --glyph: url("../assets/placeholders/icons/leaf.svg"); }
.reviews__glyph--pin      { --glyph: url("../assets/placeholders/icons/pin.svg"); }
.reviews__glyph--screen   { --glyph: url("../assets/placeholders/icons/screen.svg"); }

.reviews__avatar--sm .reviews__glyph {
  width: 16px;
  height: 16px;
}

.reviews__who {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.reviews__name {
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviews__handle,
.reviews__meta {
  color: var(--color-text-50);
  white-space: nowrap;
}

.reviews__stars {
  display: flex;
  gap: var(--space-4);
  width: 86px;
  height: 14px;
  color: var(--color-star);
}

/* Store-style cards: "Já no app" tag in the old stars slot (no ratings) */
.reviews__stars--tag {
  align-items: center;
  width: auto;
  color: var(--color-text-50);
  font-size: 12px;
  line-height: 14px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.reviews__star {
  flex: none;
  width: 14px;
  height: 14px;
}

.reviews__email-row {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  height: 44px;
}

.reviews__subject {
  color: var(--color-text);
  white-space: nowrap;
}


.reviews__date {
  align-self: flex-start;
  margin-left: auto;
  color: var(--color-text-footnote);
  white-space: nowrap;
}

.reviews__to {
  color: var(--color-text-footnote);
}

.reviews__to-label {
  color: var(--color-text);
}

/* Dashed rule between header and body (§18 #6): 2 tall, #e2e2e2, dash 6/6 */
.reviews__rule {
  flex: none;
  height: 2px;
  background: repeating-linear-gradient(90deg, #e2e2e2 0 6px, transparent 6px 12px) center / 100% 1px no-repeat;
}

.reviews__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-20);
}

.reviews__text {
  color: var(--color-text-80);
}

.reviews__signature {
  color: var(--color-text);
}

/* Video card: 331×588 (ratio 0.563), dark placeholder */
.reviews__card--video {
  cursor: pointer;
}

.reviews__video {
  position: relative;
  width: 100%;
  aspect-ratio: 331 / 588;
  border-radius: var(--radius-12);
}

.reviews__progress {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  right: var(--space-12);
  height: 2px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .3);
}

.reviews__progress-fill {
  display: block;
  height: 100%;
  background: var(--color-text-inverse);
  transform-origin: left center;
  transform: scaleX(.35);
  animation: reviews-progress 15s linear infinite paused;
  animation-delay: -5.25s;              /* starts at the 35% mark */
}

.reviews__card--video[data-playing="true"] .reviews__progress-fill {
  animation-play-state: running;
}

@keyframes reviews-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.reviews__video-who {
  position: absolute;
  top: var(--space-24);
  left: var(--space-12);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.reviews__video-name {
  color: var(--color-text-inverse);
}

.reviews__video-meta {
  color: rgba(255, 255, 255, .7);       /* 70% white (§13) */
}

.reviews__play {
  position: absolute;
  right: var(--space-16);
  bottom: var(--space-16);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-scrim-white-60);
  -webkit-backdrop-filter: blur(var(--blur-pill));
          backdrop-filter: blur(var(--blur-pill));
  color: var(--color-text);
  cursor: pointer;
}

.reviews__play-glyph {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  opacity: .4;
  transition: opacity var(--t-spring);
}

.reviews__play-glyph--pause { opacity: 0; }
.reviews__card--video[data-playing="true"] .reviews__play-glyph--play { opacity: 0; }
.reviews__card--video[data-playing="true"] .reviews__play-glyph--pause { opacity: .4; }

/* --------------------------------------------------------------------------
   5. Progressive blur overlay (8 layers, 298 tall)
   -------------------------------------------------------------------------- */
.reviews__blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 298px;
  pointer-events: none;
  transition: opacity var(--t-spring);
}

.reviews__wall[data-expanded="true"] .reviews__blur {
  opacity: 0;
}

.reviews__blur-layer {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--reviews-blur));
          backdrop-filter: blur(var(--reviews-blur));
  -webkit-mask-image: linear-gradient(180deg, transparent var(--reviews-a), #000 calc(var(--reviews-a) + 12.5%), #000 calc(var(--reviews-a) + 25%), transparent calc(var(--reviews-a) + 37.5%));
          mask-image: linear-gradient(180deg, transparent var(--reviews-a), #000 calc(var(--reviews-a) + 12.5%), #000 calc(var(--reviews-a) + 25%), transparent calc(var(--reviews-a) + 37.5%));
}

.reviews__blur-layer--1 { --reviews-blur: var(--blur-prog-1); --reviews-a: 0%; }
.reviews__blur-layer--2 { --reviews-blur: var(--blur-prog-2); --reviews-a: 12.5%; }
.reviews__blur-layer--3 { --reviews-blur: var(--blur-prog-3); --reviews-a: 25%; }
.reviews__blur-layer--4 { --reviews-blur: var(--blur-prog-4); --reviews-a: 37.5%; }
.reviews__blur-layer--5 { --reviews-blur: var(--blur-prog-5); --reviews-a: 50%; }
.reviews__blur-layer--6 { --reviews-blur: var(--blur-prog-6); --reviews-a: 62.5%; }
.reviews__blur-layer--7 { --reviews-blur: var(--blur-prog-7); --reviews-a: 75%; }
.reviews__blur-layer--8 { --reviews-blur: var(--blur-prog-8); --reviews-a: 87.5%; }

/* --------------------------------------------------------------------------
   6. Expand pill (452×48, bottom 48 of the wall)
   -------------------------------------------------------------------------- */
.reviews__pill {
  position: absolute;
  left: 50%;
  bottom: var(--space-48);
  z-index: var(--z-raised);
  translate: -50% 0;
  /* 452 (317 phone) in the reference face. Inter sets the 30ch label ~10px
     wider, so the pill may grow to fit instead of clipping its content. */
  width: max-content;
  min-width: var(--reviews-pill-w);
  height: 48px;
  justify-content: flex-start;
  gap: var(--space-16);
  padding: 0 var(--space-12) 0 var(--space-8);
  background: var(--color-btn-dark);
  box-shadow: var(--shadow-ring-06);
  color: var(--color-text-inverse);
}

.reviews__pill-avatars {
  flex: none;
  display: flex;
  margin-right: calc(var(--space-8) * -1);   /* avatars → label 8 (16 − 8); divider keeps 16 each side */
}

.reviews__pill-avatar {
  width: 33px;
  height: 33px;
  border: 2px solid var(--color-ring-dark);
  border-radius: 50%;
  background: var(--grad-placeholder);
}

.reviews__pill-avatar + .reviews__pill-avatar {
  margin-left: -7px;                    /* 26px pitch */
}

.reviews__pill-count {
  color: var(--color-text-inverse-75);
  font-weight: var(--fw-medium);
  letter-spacing: -0.25px;              /* typography.md §3: Inter 15/500 tracking to match the reference width */
}

.reviews__pill-count--short { display: none; }

.reviews__pill-divider {
  flex: none;
  width: 1px;
  height: 16px;
  margin-left: auto;
  background: var(--color-divider-vert);
}

.reviews__pill-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse);
  transition: color var(--t-spring);
}

.reviews__pill-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--color-text-inverse);
  transition: opacity var(--t-spring), rotate var(--t-spring);
}

.reviews__pill-icon-v {
  transform-box: fill-box;
  transform-origin: center;
  transition: scale var(--t-spring);
}

@media (hover: hover) {
  .reviews__pill:hover .reviews__pill-action { color: var(--color-text-inverse-75); }
  .reviews__pill:hover .reviews__pill-icon { opacity: .75; }
}

.reviews__pill[aria-expanded="true"] .reviews__pill-icon { rotate: 180deg; }
.reviews__pill[aria-expanded="true"] .reviews__pill-icon-v { scale: 1 0; }

/* --------------------------------------------------------------------------
   7. Tablet: 3 columns, wall 100% × 700, mask 34% → 43%
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  #reviews { --reviews-wall-h: 700px; }

  .reviews__wall { width: 100%; }

  .reviews__inner {
    --reviews-fade-a: 34%;
    --reviews-fade-b: 43%;
  }

  .reviews__col--4 { display: none; }
}

/* --------------------------------------------------------------------------
   8. Phone: one column of 4 groups, wall 100% × 1000, mask 17% → 25%
   -------------------------------------------------------------------------- */
@media (max-width: 789.98px) {
  #reviews {
    --reviews-wall-h: 1000px;
    --reviews-pill-w: 317px;
    padding-top: var(--space-120);
  }

  .reviews__inner {
    --reviews-fade-a: 17%;
    --reviews-fade-b: 25%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;                             /* groups are spaced by group 2's 20px padding (reference: 20 between cards) */
    padding: var(--space-8) 0;
  }

  .reviews__col,
  .reviews__col--4 {
    display: flex;
    width: 100%;
    padding: 0 var(--gutter);
    translate: none;
  }

  .reviews__col--2 { padding: var(--space-20) var(--gutter); }
  .reviews__col--4 { padding-top: var(--space-20); }   /* keeps the 20 rhythm between groups 3 and 4 (spec-silent, below the fold) */

  /* Cards 02 and 03 are not rendered on phone (content.md: lines "–" at 390) */
  .reviews__card[data-card="02"],
  .reviews__card[data-card="03"] { display: none; }

  .reviews__pill-count--full { display: none; }
  .reviews__pill-count--short { display: inline; }
}