/* ============================================================
   DESIGN CREED — Mobile polish (shared, loaded after each
   template's own CSS so it cascades on top).
   ------------------------------------------------------------
   Goal: smooth, professional behaviour on phones across all
   59 editions WITHOUT rewriting each one. We rely on the
   common naming pattern editions follow (each one prefixes
   classes — .br-*, .ho-*, .nr-*, .ln-*, etc.) and target
   layout-shape selectors only. We never touch colour, font
   family, or anything that would betray the edition's voice.
   Just spacing, alignment, type scale, and layout collapse.
============================================================ */

/* ── 480px and under (phones, portrait) ────────────────── */
@media (max-width: 480px) {
  /* Trim oversized padding on common section blocks.
     Almost every edition uses *-top / *-hero / *-foot /
     *-contact / *-comms / *-comm / *-labs / *-list / *-grid
     conventions — we soften only the side padding so the
     content actually breathes inside a 360–414px viewport. */
  [class*="-top"],
  [class*="-hero"],
  [class*="-foot"],
  [class*="-contact"],
  [class*="-comms"],
  [class*="-comm"],
  [class*="-labs"],
  [class*="-list"],
  [class*="-claim"],
  [class*="-quote"],
  [class*="-cta"],
  [class*="-stat"],
  [class*="-marquee"],
  [class*="-section"] {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* Hero verticals: most editions stuff 80–130px of vertical
     padding which crushes phones — half it cleanly. */
  [class*="-hero"] {
    padding-top: clamp(36px, 12vw, 64px) !important;
    padding-bottom: clamp(36px, 10vw, 56px) !important;
  }

  /* Reign in display titles. Many editions cap the title
     scale at 200px+ via clamp(); on a 360px viewport that
     can still emit 80–130px which overruns. Soft cap. */
  h1, [class$="-title"], [class*="-title"]:not([class*="sub"]) {
    font-size: clamp(36px, 11vw, 64px) !important;
    line-height: 0.95 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  h2 {
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.05 !important;
  }

  /* Centre hero copy when the layout is a single column.
     Most heroes already are at this width — this just
     guarantees alignment is intentional, not accidental. */
  [class*="-hero"] {
    text-align: center;
  }
  [class*="-hero"] p,
  [class*="-hero"] [class*="-lede"],
  [class*="-hero"] [class*="-eyebrow"],
  [class*="-hero"] [class*="-cta"] {
    margin-left: auto;
    margin-right: auto;
  }
  [class*="-hero"] [class*="-cta"] {
    justify-content: center;
  }
  [class*="-hero"] ul,
  [class*="-hero"] ol {
    text-align: left;
  }

  /* Force any remaining N-column grid to collapse to 1
     column. Catches grids that only declared a 2-col fallback
     at 800/900px but never went down to 1. */
  [style*="grid-template-columns"]:not([style*="1fr"]),
  [class$="-grid"]:not([class*="grid-cards-2"]),
  [class*="-grid-cards"]:not([class*="2"]),
  [class*="-c-grid"],
  [class*="-cards"]:not([class*="cards-row"]),
  [class*="-list-grid"],
  [class*="-stat-grid"],
  [class*="-temps"],
  [class*="-fleet"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Hero grids that use 2 columns must stack and lose their
     huge gap on phones. */
  [class*="-hero"][class] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Buttons: ensure tap targets and reasonable sizing. */
  [class$="-btn"],
  [class*="-btn-"],
  button:not([class*="dc-tw"]):not(.theme-tab) {
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px !important;
  }
  /* CTA rows centre their buttons. */
  [class*="-cta"] {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 10px !important;
  }
  [class*="-cta"] > * {
    flex: 0 1 auto;
  }

  /* Any 2/3/4-column contact grids → 1 column. */
  [class*="-contact"] [class*="-grid"],
  [class*="-c-grid"],
  [class*="-comm-list"],
  [class*="-comms"] [class*="-grid"] {
    grid-template-columns: 1fr !important;
  }
  [class*="-comm-list"] li,
  [class*="-c-list"] li {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 12px 14px !important;
  }

  /* Footer rows centre. */
  [class*="-foot"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    align-items: center !important;
  }

  /* Stat / metric rows wrap nicely. */
  [class*="-stat-row"],
  [class*="-stats"],
  [class*="-kpi"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
  }

  /* Marquees on phones: shrink type so they don't dwarf the screen */
  [class*="-marquee"] {
    font-size: clamp(18px, 6vw, 32px) !important;
  }

  /* "Back to editions" pill: keep it from colliding with the
     theme switcher widget in the bottom-right. */
  .back {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    font-size: 10.5px !important;
    padding: 6px 10px !important;
    z-index: 100;
  }

  /* Body text floor. Some editions ship tiny body text. */
  body { font-size: 15px; }

  /* Don't let nested fixed cards explode out of view */
  table, pre, code { max-width: 100%; overflow-x: auto; }

  /* Long, hyphenless mono strings (urls, kbds, codes) wrap. */
  [class*="-mono"], code, kbd, pre {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ── 380px and under (small phones) — extra tightening ─── */
@media (max-width: 380px) {
  [class*="-top"],
  [class*="-hero"],
  [class*="-foot"],
  [class*="-contact"],
  [class*="-comms"],
  [class*="-labs"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  h1, [class$="-title"] {
    font-size: clamp(30px, 9.5vw, 52px) !important;
  }
}

/* ── Large-card heroes: prevent overflow on tablet too ── */
@media (max-width: 720px) {
  [class*="-hero-l"],
  [class*="-hero-r"],
  [class*="-hero-content"] {
    min-width: 0;
  }
  /* Force nav bars to wrap rather than overflow. */
  nav, [class*="-top"], [class*="-nav"] {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
}

/* Honour reduced motion on top of any per-template motion */
@media (prefers-reduced-motion: reduce) {
  [class*="-orb"], [class*="-marquee"] > div,
  [class*="-spin"], [class*="-foil"] {
    animation: none !important;
  }
}