/* ============================================================
   FABBRUCCIO: PRESS ROW + REVIEWS (section)

   Two bands in one file because they are one argument (third-party proof
   then customer proof) and beta2 renders them adjacent on both the home
   page and the PDP, with the home page nesting the rating line INSIDE the
   press section. Loaded on both routes by the section map.

   Ported from beta2 site.css:169-188 and :366-368.
   Structure: design-language/components.md sections 13 and 14.

   beta2 -> here
     .press      -> .fab-press
     .press-row  -> .fab-press__row
     .reviews    -> .fab-reviews
     .rev-head   -> .fab-reviews__head
     .rev-grid   -> .fab-reviews__grid
     .rev-card   -> .fab-review
     .who        -> .fab-review__who
   ============================================================ */

/* ============================================================
   THE PRESS ROW. Quiet third-party proof.

   EVERY MARK LINKS TO THE REAL ARTICLE, in a new tab, with rel=noopener
   and an aria-label naming the outlet. A PRESS MARK THAT DOES NOT LINK TO
   A REAL ARTICLE DOES NOT GO ON THE PAGE. The four SVGs in
   assets/img/press/ are authentic vector marks; a re-typeset outlet name
   is never acceptable here.
   ============================================================ */
.fab-press {
  padding-block: var(--fab-band-md);
  border-top: 1px solid var(--fab-hairline);
  text-align: center;
}
.fab-press .fab-eyebrow { margin-bottom: clamp(26px, 4vw, 44px); }

.fab-press__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4.5vw, 62px);
}

/* Each mark sits in a FIXED CELL, and the cells are equal so the marks
   optically align despite having very different aspect ratios. Without
   the cell, a wide wordmark and a square roundel would read as two
   different sizes of the same importance. */
.fab-press__row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(120px, 15vw, 168px);
  height: clamp(30px, 4vw, 44px);
}
/* `height: auto` IS THE ONE THAT MATTERS. The width/height attributes on
   these <img>s are the SVGs' real viewBox dimensions, so the row reserves
   its space before the vectors land, but without height:auto the attribute
   HEIGHT holds the box open: the cell measured 30px tall at 390 against
   beta2's 26.5, because beta2's <img> has no attributes at all and derives
   its height from the ratio. With height:auto the width is clamped by the
   cell and the height follows the ratio, which is beta2's box exactly, and
   the reserved-space benefit of the attributes is kept. */
.fab-press__row img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.42);
  transition: filter var(--fab-press-duration) var(--fab-ease);
}
.fab-press__row a:hover img,
.fab-press__row a:focus-visible img { filter: grayscale(0) opacity(.92); }

/* ============================================================
   REVIEWS. Real customer proof, framed honestly.

   The rating claim is TEXT. Never a graphic badge, never a seal, never a
   third-party widget skin. The stars are a glyph run carrying aria-hidden;
   the accessible rating is always the sentence beside them.
   ============================================================ */
.fab-reviews {
  padding-block: var(--fab-band-md);
  border-top: 1px solid var(--fab-hairline);
}
.fab-reviews__head {
  text-align: center;
  margin-bottom: clamp(34px, 5vw, 56px);
}
.fab-reviews__head .fab-stars { font-size: 1rem; }
.fab-reviews__head p {
  margin: 10px 0 0;
  font-size: 1rem;
  color: var(--fab-ink-secondary);
}
.fab-reviews__head b {
  color: var(--fab-ink);
  font-weight: var(--fab-weight-medium);
}

/* On the home page the rating line sits under the press row inside the
   SAME section, so it needs a top margin rather than its own band. */
.fab-press .fab-reviews__head {
  margin: clamp(32px, 4.5vw, 52px) 0 0;
}
.fab-press .fab-reviews__head p { font-size: var(--fab-size-lede); }

.fab-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
  max-width: var(--fab-wrap-narrow);
  margin: 0 auto;
}

/* THE ONLY BORDERED SURFACE IN THE SYSTEM: a 1px hairline on white. Still
   no shadow, still no radius. If a second bordered surface ever appears,
   one of the two is wrong. */
.fab-review {
  margin: 0;
  border: 1px solid var(--fab-hairline);
  background: var(--fab-ground-panel);
  padding: clamp(22px, 2.6vw, 32px);
}
.fab-review .fab-stars { font-size: var(--fab-size-detail); }
.fab-review q {
  display: block;
  margin: 14px 0 16px;
  font-size: var(--fab-size-quote);
  line-height: 1.5;
  /* Explicit curly quotes: the UA default varies by locale, and the
     design was approved with these. */
  quotes: "\201C" "\201D";
}
.fab-review__who {
  display: block;
  font-size: .64rem;
  letter-spacing: var(--fab-track-upper-wide);
  text-transform: uppercase;
  color: var(--fab-ink-secondary);
}

@media (max-width: 900px) {
  .fab-reviews__grid { grid-template-columns: 1fr; }
}