/*
 * 12-alignment.css - lane M4, 11 Sep 2026.
 *
 * Left/right edge alignment defects found by measuring getBoundingClientRect()
 * on the live pages at 1400px and 390px. Every rule below names the page and the
 * defect it repairs. Alignment only - no colour, type or spacing changes.
 *
 * Out of scope for this file: /create/ and the home tile markup (lane M3).
 */

/* ------------------------------------------------------- /school-field-trips/
 * "What a visit costs" sat 313px inboard of every other section on the page
 * (text at x=447 against a page edge of x=134). Cause: the 68ch measure was put
 * on .rhft-cost__in, which is the WRAP that owns the page edge, so margin-inline:
 * auto centred the whole panel. The paragraphs already carry their own 64ch
 * measure, so the wrap only has to go back to the page width. The .rhft-wrap
 * class is repeated in the selector purely to outrank 55-field-trips.css, which
 * loads after this file. */
.rh-fieldtrip-page .rhft-wrap.rhft-cost__in {
  max-inline-size: var(--max);
}

/* ------------------------------------------------------ /event/<single event>
 * The row of teacher portraits was ragged: align-items:flex-end bottom-aligned
 * the cards, so any teacher whose name wrapped to two lines (Betty Poindexter on
 * the Immersion Weekend) pushed her portrait 20px above the other four. Top-
 * aligning puts every portrait on one line; the names stay under them. The
 * main.rhx-event prefix is there to outrank 30-events.css, which loads later. */
main.rhx-event .rhx-event__teacher-list {
  align-items: flex-start;
}

main.rhx-event .rhx-event__teacher-list li {
  justify-content: flex-start;
}

/* --------------------------------------------------- phones, every page ----
 * At 390px the header logo sat at x=18 but the page heading sat at x=36-38, a
 * visible 18-20px stagger on every page listed below. Cause: the mobile guard in
 * style.css (max-width:599px) pads every direct section of #riverhouse-public-main
 * by max(1rem, safe-area), and those sections already contain their own padded
 * wrap (.wrap / .rhc-wrap / .rhcx-wrap / .rhft-wrap / .rhav-wrap / *__text), so the
 * gutter was applied twice. Dropping the outer half returns each page to the
 * gutter its own wrap declares (16-22px), which is what the header already uses.
 * Scoped to the page classes that were measured as double-padded, so sections
 * that rely on the guard as their only gutter keep it. */
@media (max-width: 599px) {
  main#riverhouse-public-main:where(
    .rhcx-home,
    .rh-discipline-page,
    .rh-classes-page,
    .rhx-events-page,
    .rh-fieldtrip-page,
    .rh-teachers-page,
    .rhav-page,
    .rhc-legal-page,
    .rhc-cancellation-page
  ) > :where(.wp-block-group, section) {
    padding-inline: 0;
  }

  /* Home hero: the painting was pulled out of the guard by an equal negative
   * margin. With the guard gone the section edge is already the screen edge, so
   * the negative margin would push the painting off-canvas. */
  .rhcx-home .rhcx-hero__art {
    margin-inline: 0;
  }
}