/*
  Kinetic Signal: Reviews page (DESIGN.md 6.3). The one paper page of the site.
  #intro (fitted 174), #featured (three tier 1 excerpts), #repeat (blue, six tier 3 excerpts),
  #wall (174 static cards, sticky filter bar), #start.

  Order: page layout, components, sections, media queries. Tokens and regime variables come
  from base.css. The filter crossfade runs in js/reviews.js (Web Animations), so this file
  has no hidden states: every review shows without JavaScript and with motion off.
*/

/* ==========================================================================
   #intro: the count as the title, in blue
   ========================================================================== */

/* The 1 has 0.065em of side bearing: pull the count left so its ink starts on the column edge. */
.page-reviews .count {
  margin-inline-start: -0.065em;
  color: var(--accent);
}

.intro-grid {
  row-gap: var(--s-6);
}

.intro-side {
  display: grid;
  gap: var(--s-5);
}

.intro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* ==========================================================================
   Components: the quote mark (base.css), one step smaller on the cards
   ========================================================================== */

.featured .quote-mark {
  width: 2.5rem;
}

/* ==========================================================================
   #featured: one tall lead card and two cards beside it
   ========================================================================== */

.featured {
  padding-top: 0;
}

.featured-grid {
  row-gap: var(--gutter);
}

.featured .review--feature {
  grid-template-rows: auto auto 1fr;
  gap: var(--s-5);
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
}

.feature-topic {
  color: var(--fg-2);
}

.featured .review--feature blockquote {
  max-width: 34em;
}

.featured .review--feature figcaption {
  align-self: end;
}

/* ==========================================================================
   #repeat: the blue break in the paper page
   ========================================================================== */

.repeat-head {
  row-gap: var(--s-6);
}

.repeat-lede {
  color: var(--fg-2);
}

.repeat-grid {
  display: grid;
  gap: var(--s-7) var(--gutter);
}

.repeat .review {
  align-content: space-between;
  gap: var(--s-6);
}

/* Short excerpts set as statements: one step wider and heavier than a wall quote. */
.repeat .review blockquote {
  font-size: clamp(1.375rem, 1rem + 1.3vw, 2.125rem);
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* ==========================================================================
   #wall: the sticky filter bar and the columns of cards
   ========================================================================== */

/*
  The wall is far below the first screen. The browser skips its layout and paint until it comes
  near the viewport; the intrinsic size is the measured height at each column count, so the
  scrollbar barely moves when the wall renders (auto keeps the real size after that).
*/
.wall {
  content-visibility: auto;
  contain-intrinsic-size: auto 36000px;
}

/* With the filter script running, the wall below 1024px starts with 24 cards (js/reviews.js). */
.wall[data-ready] {
  contain-intrinsic-size: auto 6900px;
}

/*
  Below 1024px only the chip row sticks (57px), so the header and the filter leave the screen
  to the reviews; the status line scrolls with the wall. The bar itself makes no box here.
  From 1024px the whole bar sticks, chips and status (see the media query).
*/
.wall-bar {
  display: contents;
}

/* The filter works only when js/reviews.js runs (it sets data-ready on #wall): until then, and
   after a filter failure, there is no bar and every review shows. */
.wall:not([data-ready]) .wall-bar,
.wall-bar[hidden] {
  display: none;
}

/*
  One row that scrolls sideways, under the compact header strip (3.5rem), so no card shows
  between the two. It bleeds into the page margin and covers the cards that scroll under it.
  The padding keeps the focus ring inside the scroller.
*/
.wall-filters {
  position: sticky;
  top: var(--header-h-compact);
  z-index: var(--z-filter);
  display: flex;
  gap: var(--s-2);
  margin-inline: calc(-1 * var(--margin));
  padding: 0.375rem var(--margin);
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.wall-filters .chip {
  flex: none;
}

.wall-status {
  margin-block: var(--s-3) var(--s-6);
  color: var(--fg-2);
}

/* "Show more reviews" (below 1024px): full width on a phone, like the CTA button. */
.wall-more {
  margin-top: var(--s-2);
}

.wall-more .btn {
  width: 100%;
}

.wall-list {
  columns: 1;
  column-gap: var(--gutter);
}

.wall-list .review {
  break-inside: avoid;
  margin-bottom: var(--s-7);
}

/* In a narrow wall column the shortest quotes step down, so no word breaks inside itself. */
.wall-list .review[data-len="xs"] blockquote {
  font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem);
}

/* Topic tags stay quiet on the wall, so the quotes carry the page. */
.wall .review-tags li {
  border-color: var(--line);
  transition: color var(--dur-tick) linear, background-color var(--dur-tick) linear;
}

/* The active filter lights its tag on every card that shows (js/reviews.js sets data-active on #wall). */
.wall[data-active="speed"] .review-tags [data-tag="speed"],
.wall[data-active="communication"] .review-tags [data-tag="communication"],
.wall[data-active="quality"] .review-tags [data-tag="quality"],
.wall[data-active="repeat"] .review-tags [data-tag="repeat"],
.wall[data-active="trading"] .review-tags [data-tag="trading"],
.wall[data-active="trust"] .review-tags [data-tag="trust"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ground);
}

/* The Arabic review: a larger size and more leading for the script. */
.wall .review[lang="ar"] blockquote {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
}

/* ==========================================================================
   Media queries
   ========================================================================== */

@media (min-width: 480px) {
  .wall-more .btn {
    width: auto;
  }
}

@media (min-width: 768px) {
  .repeat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wall {
    contain-intrinsic-size: auto 19400px;
  }

  .wall[data-ready] {
    contain-intrinsic-size: auto 3900px;
  }

  .wall-list {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  /*
    The count fills columns 1 to 7. The rest of the h1, the paragraph, and the chips sit in
    columns 8 to 12, aligned to the bottom of the digits. The h1 is a subgrid, so its two
    parts and the side block share the same columns and rows.
  */
  .intro-grid {
    grid-template-rows: 1fr auto;
    row-gap: var(--s-5);
  }

  .intro-grid .page-title {
    grid-row: 1 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    gap: inherit;
  }

  .intro-grid .fit {
    grid-column: 1 / 8;
    grid-row: 1 / span 2;
  }

  .intro-grid .h1-sub {
    grid-column: 8 / -1;
    grid-row: 1;
    align-self: end;
  }

  .intro-side {
    grid-column: 8 / -1;
    grid-row: 2;
    /* The digits' box ends about 0.19em under their baseline: lift the block to the baseline. */
    margin-bottom: min(4.2rem, calc((58.33vw - 1.17 * var(--margin)) * 0.082));
  }

  .featured .review--lead {
    grid-column: 1 / 8;
    grid-row: 1 / span 2;
  }

  .featured .review--feature:not(.review--lead) {
    grid-column: 8 / -1;
  }

  /* Beside the lead card the two shorter cards step down, so the pair is as tall as the lead. */
  .featured .review--feature:not(.review--lead) blockquote {
    font-size: clamp(1.25rem, 0.8rem + 0.7vw, 1.5rem);
    line-height: 1.35;
    letter-spacing: 0;
  }

  .featured .review--feature:not(.review--lead) .quote-mark {
    width: 1.75rem;
  }

  .repeat-head .h-display {
    grid-column: 1 / 8;
  }

  .repeat-lede {
    grid-column: 9 / -1;
    align-self: end;
    padding-bottom: 0.4em;
  }

  .repeat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* The whole bar sticks: the chips wrap (no sideways scroll) and the status stays in view. */
  .wall-bar {
    position: sticky;
    top: var(--header-h-compact);
    z-index: var(--z-filter);
    display: grid;
    gap: var(--s-2);
    margin-inline: calc(-1 * var(--margin));
    margin-bottom: var(--s-7);
    padding: var(--s-3) var(--margin);
    border-bottom: 1px solid var(--line);
    background: var(--ground);
  }

  .wall-filters {
    position: static;
    flex-wrap: wrap;
    margin-inline: 0;
    padding: 0;
    border-bottom: 0;
    overflow-x: visible;
  }

  .wall-status {
    margin-block: 0;
  }

  .wall,
  .wall[data-ready] {
    contain-intrinsic-size: auto 14400px;
  }

  .wall-list {
    columns: 3;
  }
}

@media (min-width: 1280px) {
  .wall,
  .wall[data-ready] {
    contain-intrinsic-size: auto 11500px;
  }

  .wall-list {
    columns: 4;
  }
}