/* ROUND 135, ITEM 18: THE REVIEWS PAGE, IN THE SITE'S OWN REVIEW LOOK.
 *
 * WHAT THE SITE'S REVIEW LOOK IS, measured on a recipe at 1440 rather than
 * invented: `.embed#reviews` with `reviews_ground_live` on is the golden
 * ground #fdebd0, a 40px corner, and the content inset 56px left / 64px
 * right with 48px above and below. Those four numbers are what this block
 * reproduces, so the reviews PAGE and a recipe's reviews read as the same
 * component.
 *
 * THE NUMBERS ARE LITERAL for the same reason item 31's are: --golden,
 * --r-lg and --pad-l/r are declared in recipe-v3.css's own :root, and the
 * reviews page never loads that file.
 *
 * EACH TESTIMONIAL IS A CARD ON THE SITE'S CARD GREY (#f7f7f7, --card) inside
 * the golden ground, which is the same pairing a recipe uses -- the golden
 * block, the grey card within it -- so nothing new enters the palette.
 *
 * THE WORDS ARE UNTOUCHED. app/r135reviews.py carries the original <p>
 * elements across byte for byte; this sheet only decides where they sit.
 *
 * ITS OWN SWITCH: `site_r135_reviewcards`, OFF by default -- neither the
 * transform nor this sheet happens until it is on.
 * ROLLBACK: site_r135_reviewcards off.
 */

/* THE FULL SELECTOR, AND IT HAS TO BE. The wrapper is emitted as
 * `gt-block text without-box r135-reviews`, and `without-box` is the THEME'S
 * OWN opt-out from `.content .text` padding -- its rule names five classes
 * and an element, so a three-class selector here lost and the golden ground
 * rendered with the cards hard against its edge. Measured in the first shot:
 * no inset at all. Naming the same classes plus this one outranks it. */
section.gt-block.text.without-box.r135-reviews > .content > .text {
  background: #fdebd0;                 /* --golden, the reviews ground */
  border-radius: 40px;                 /* --r-lg */
  padding: 48px 64px 48px 56px;        /* 48 / --pad-r / 48 / --pad-l */
}

.r135-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  align-items: start;
}

/* WHITE, NOT THE CARD GREY. #f7f7f7 was the first choice because it is the
 * site's card colour, and the screenshot said no: against the golden ground
 * the two tones are close enough that the band read as one grey slab with a
 * gold stripe down the gap between the cards. White is what a review card
 * sits on inside the Desk's own widget, and it is what separates a card from
 * the golden it is on. */
.r135-review {
  background: #fff;
  border-radius: 22px;
  padding: 26px 28px;
}

/* THE TYPE IS THE PAGE'S OWN, AND `rem` IS NOT USABLE HERE. The theme sets a
 * root font-size of 7.68px, so the first version's `1.05rem` rendered the
 * name at 8.064px -- SMALLER than the testimonial under it, which measures
 * 12.288px. Measured on the untouched page, the name is 18.432px and the
 * body is 12.288px; 18.432 / 12.288 is exactly 1.5em, so `em` reproduces the
 * page's own heading size and moves with the theme instead of against it.
 *
 * AND THE TESTIMONIAL'S OWN COLOUR IS LEFT ALONE. The first version set it to
 * --body rgb(78,81,85); the page draws it in rgb(26,36,40). These are real
 * people's words and this item is about where they sit, not how they look --
 * so only the ALIGNMENT changes, from the page's centring to ranged left,
 * which is what makes a card readable rather than a wall of prose.
 *
 * The name is the one thing recoloured, to the site's own heading maroon,
 * because in a card it is a heading rather than a centred line of text. */
.r135-review__who {
  margin: 0 0 10px;
  font-size: 1.5em;
  font-weight: 700;
  color: #51010e;                      /* --maroon, the site's heading ink */
  text-align: left;
}

.r135-review__said p {
  margin: 0 0 12px;
  text-align: left;                    /* beats the inline centring the page carries */
  line-height: 1.6;
}
.r135-review__said p:last-child { margin-bottom: 0; }

/* MOBILE: one card per row, and the golden ground's inset comes in, because
 * 56/64 of a 390px screen is a third of it. The same two numbers
 * recipe-v3.css falls back to below 1024. */
@media (max-width: 1023px) {
  section.gt-block.text.without-box.r135-reviews > .content > .text {
    padding: 26px 22px; border-radius: 28px;
  }
  .r135-reviews__grid { grid-template-columns: 1fr; gap: 16px; }
  .r135-review { padding: 20px 20px; }
}