/* ============================================================
 * responsive.css — shared "mobile rescue" layer (the middle road).
 *
 * Loaded LAST on every public page so it overrides. It forces the
 * universal mobile collapses below 768px WITHOUT rewriting each page's
 * bespoke CSS — the cheap 80/20 baseline that makes the site
 * "not broken" on a phone, before any page-by-page polish:
 *
 *   1. Side-pinned "text-over-photo" story blocks → full-width + left
 *      (kills the "narrow strips to the far right").
 *   2. Multi-column content grids → single column (un-crushes them).
 *
 * Mobile-first is the long-term doctrine; this layer applies that
 * principle as an override to a desktop-first site. Brett-approved
 * 2026-06-03 ("go the middle road"). The LOGIC ports to ipqld +
 * cagerace next — their selectors differ, the rules are the same.
 * ============================================================ */

@media (max-width: 768px) {

  /* 1 ── Side-pinned story text → full-width, left-aligned ──────────
     story-card / broker-story / mk-breaker / about-welcome pin their
     text to one side over a sticky photo (cinematic on desktop, a thin
     trapped column on a phone). On a phone: stack it, fill the width. */
  .story-card__inner--right,   .story-card__inner--left,
  .broker-story__inner--right, .broker-story__inner--left,
  .mk-breaker__inner--right,   .mk-breaker__inner--left,
  .about-welcome__inner {
    flex-direction: column !important;   /* STACK headline + body — don't sit side-by-side */
    align-items: stretch !important;     /* each block fills the width */
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .story-card__inner > *,
  .broker-story__inner > *,
  .mk-breaker__inner > *,
  .about-welcome__inner > *,
  .about-welcome__body {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  /* 2 ── Multi-column content grids → single column ─────────────────
     The crushed 3/4/5-across grids on phones. (Small stat tiles keep
     their own 2-up rule — they read fine two-wide.) */
  .mk-grid--2up, .mk-grid--3up,
  .mk-tiers, .mk-platforms, .mk-utm-grid,
  .brokers-qualities__grid,
  .tv__grid {
    grid-template-columns: 1fr !important;
  }

}