/* ============================================================
   reviews.css
   ────────────────────────────────────────────────────────────
   Page styles for reviews.html. Three bespoke patterns:
     – Rating stars row
     – Source-channel bar list (a tiny chart)
     – Hero composition with the rating stat
   ============================================================ */

/* ── 1. Hero ───────────────────────────────────────────────── */
.reviews-hero {
  grid-auto-rows: clamp(160px, 16vw, 220px);
  margin-bottom: var(--s-7);
}

.reviews-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--paper-bone);
}
.reviews-title__italic {
  font-style: italic;
  color: rgba(246,240,225,0.7);
  display: inline-block;
  margin-left: -0.02em;
}
.reviews-lede {
  font-family: var(--font-ui);
  font-size: clamp(0.96rem, 0.88rem + 0.5vw, 1.12rem);
  color: rgba(246,240,225,0.78);
  max-width: 42ch;
  line-height: 1.5;
}

/* ── 2. Rating stars ───────────────────────────────────────── */
.rating-stars {
  display: flex;
  gap: 4px;
  margin-top: var(--s-3);
  font-size: 1.6rem;
  color: var(--paper-bone);
  letter-spacing: 4px;
  /* Drop the standard list-item bullet — we set list-style none in
     base.css but explicit display here for clarity. */
  list-style: none;
  padding: 0;
}

/* ── 3. Reviews grid ───────────────────────────────────────── */
.reviews-grid {
  grid-auto-rows: clamp(160px, 15vw, 240px);
  margin-bottom: var(--s-7);
}

/* ── 4. Source channel bar-list (mini chart) ───────────────── */
.source-list {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.source-list li {
  display: grid;
  grid-template-columns: 220px 1fr 50px;
  align-items: center;
  gap: var(--s-4);
}
.source-list__channel {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--ink-900);
  font-weight: 500;
}
.source-list__bar {
  display: block;
  height: 6px;
  background: var(--paper-dim);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.source-list__bar > span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(to right, var(--matcha-700), var(--matcha-500));
  border-radius: var(--r-pill);
  /* Animate from 0 to the inline width on reveal. Driven by the
     [data-reveal] intersection observer that already runs site-wide. */
  transform-origin: left;
  animation: bar-fill 1.2s var(--ease-out) both;
}
@keyframes bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.source-list__pct {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--ink-500);
  text-align: right;
}

@media (max-width: 720px) {
  .source-list li { grid-template-columns: 1fr; }
  .source-list__bar { display: none; }
  .source-list__pct { text-align: left; color: var(--matcha-700); }
}