/*
 * 99-mobile-b-classes.css — mobile QA lane B (classes + discipline pages), 19 Sep 2026.
 *
 * Every rule below repairs a defect measured on the LIVE site at 375/390/430px with
 * Playwright, and re-measured with this file injected. Phones only; nothing here can
 * reach a tablet or a desktop, because every rule sits inside (max-width:599px) —
 * the same query that creates the two faults it repairs. Measured at 700px, 768px and
 * 1200px the same pages are already correct, so those widths are deliberately untouched.
 *
 * TWO UPSTREAM CAUSES, both in files this lane may not edit:
 *
 * A. style.css, @media (max-width:599px):
 *      main#riverhouse-public-main :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,label,...)
 *      { inline-size:auto; margin-left:auto; margin-right:auto;
 *        max-inline-size: calc(-2rem + 100vw) !important; }
 *    Those auto side margins are harmless on a block, but on a FLEX or GRID child they
 *    switch off stretch alignment, so the child shrinks to its own text width and is
 *    then centered in its track. That is why, on a phone only, the discipline hero
 *    ("Needlework", its breadcrumb and its button), the "Next times you can come"
 *    heading, every teacher row, the calendar's studio links, the credit-bar link and
 *    the first credit card on /book/ all drift to the middle of the screen while the
 *    paragraphs beside them stay left. Fix: put the side margins back to 0 on the exact
 *    children of this lane's blocks, which restores stretch. (Their max-inline-size cap
 *    is !important and is left alone — it is never narrower than the column it sits in
 *    once the gutters below are back, so it never binds.)
 *
 * B. assets/css/overhaul/12-alignment.css, lines 47-60, @media (max-width:599px):
 *      main#riverhouse-public-main:where(...,.rh-discipline-page,...) > :where(.wp-block-group,section)
 *      { padding-inline: 0; }
 *    That rule assumes every such section "already contains its own padded wrap". Three
 *    sections on the discipline pages do NOT — .rh-disc-read, .rh-next-times and
 *    .rh-disc-teachers carry their gutter on the section itself (50-disciplines.css
 *    lines 63, 80 and 133: padding 22px at <=899px). Stripping padding-inline therefore
 *    left them with NO side gutter at all. Their paragraphs and headings survived on an
 *    accidental 16px from cause A's auto margins; the dated rows of "Next times you can
 *    come" are <a> elements, are not in that :where list, got nothing, and landed hard
 *    against the left edge of the screen. That is the bug the owner photographed.
 *    Fix: give those three sections back the 22px the design declares. 22px is the
 *    theme's own mobile gutter (it is what .rh-disc-hero__text already uses on the same
 *    page), and it sits within 2px of the header bar's 18px and the calendar wrap's 20px.
 *
 * Because 12-alignment.css uses :where() its selector counts zero classes, so every
 * selector here outranks it on specificity as well as on load order.
 */

@media (max-width: 599px) {

  /* ---------------------------------------------------------------- CAUSE B
   * /needlework/, /pottery/, /painting/, /drama-dance/ at 375, 390 and 430px.
   * Owner's bug: the dated rows under "Next times you can come" (22 SEP /
   * Needlework Open Studio / PLACES OPEN / See this class) sat at x=0 with no
   * gutter while the copy above them had one. Also restores the gutter on the
   * reading band and the teacher band, which had been leaning on cause A. */
  main#riverhouse-public-main > .rh-next-times,
  main#riverhouse-public-main > .rh-disc-read,
  main#riverhouse-public-main > .rh-disc-teachers {
    padding-inline: 22px;
  }

  /* ---------------------------------------------------------------- CAUSE A
   * Discipline hero, all four pages, 375/390/430px: "Needlework", the
   * "Classes / Needlework" crumb and the "See the calendar" button were each
   * centered on their own axis (h1 at x=85, crumb at x=134, button at x=109 on
   * a 390px screen) instead of stacking on the 22px gutter, which is what the
   * same page does at 700px and wider. */
  main#riverhouse-public-main .rh-disc-hero__text > :where(p, h1, h2, ul, ol) {
    margin-inline: 0;
  }

  /* "Next times you can come" heading, /needlework/ /pottery/ /painting/:
   * centered at x=40 while its own sub-line sat at the gutter. */
  main#riverhouse-public-main .rh-next-times__head > :where(h2, p),
  main#riverhouse-public-main .rh-next-times__in > :where(p, h2, ul, ol) {
    margin-inline: 0;
  }

  /* Reading band ("What happens at the needlework table", "What Deborah
   * teaches", the craft lists). These were only at the gutter by accident;
   * with the section padding back above, they must not keep the extra 16px. */
  main#riverhouse-public-main .rh-disc-read__inner > :where(p, h2, h3, h4, ul, ol) {
    margin-inline: 0;
  }

  /* "Who teaches needlework / pottery / painting and drawing / here": every
   * teacher row was centered on its own width, so Deborah's portrait began at
   * x=51 and Diana's at x=65 on the same 390px screen — two rows, two
   * different left edges, neither matching the heading above them. */
  main#riverhouse-public-main .rh-disc-teachers__in > :where(p, h2, ul, ol),
  main#riverhouse-public-main .rh-disc-teacher-list > li {
    margin-inline: 0;
  }

  /* /classes/ credit bar: "How credits work" was centered (used margin 115.5px
   * a side) once it wrapped under the "Every class costs one credit" line. */
  main#riverhouse-public-main .rhc-creditbar .rhc-wrap > :where(p, ul, ol) {
    margin-inline: 0;
  }

  /* /classes/ studio links ("Painting & Drawing ->", "Pottery ->", ...): each
   * link was centered on its own text width, so a four-item list read as a
   * ragged stack down the middle of the screen. */
  main#riverhouse-public-main .rhc-dlinks > li {
    margin-inline: 0;
  }

  /* /classes/ class cards: the "10 of 10 places left" line sits on the same
   * row as the "Book this class" button, so it is a flex item too. Its auto
   * margins made it drift by its own text width — 45px in on one card, 52px in
   * on the next — so a stack of cards had a ragged places-left column instead
   * of one line under the class title. At 700px it is already at the card
   * gutter (39px), which is what this restores on a phone. */
  main#riverhouse-public-main .rhcl-card .rhcl-seats {
    margin-inline: 0;
  }

  /* /book/?session=<id>, signed out and signed in: the first credit card
   * ("Single class credit, $80") was 287px wide and centered in a 350px
   * column while the cards under it were the full 350px — the card whose
   * copy happens to be shortest is the one the eye reads as broken. */
  main#riverhouse-public-main .rhbk-packs > :where(label, div, p),
  main#riverhouse-public-main .rhbk-content-inner > :where(p, h1, h2, h3, ul, ol, form, label) {
    margin-inline: 0;
  }
}