/* Shared mobile composition for generated pages.
   The desktop templates intentionally use inline layout styles. These scoped
   overrides give narrow viewports a real reading order without duplicating the
   site or changing the desktop art direction. */
@media (max-width: 767px) {
  html { overflow-x: hidden; }
  body { min-width: 0; overflow-x: hidden; }

  header > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 9px 12px !important;
    padding: 9px 16px !important;
    min-height: 0 !important;
  }
  header > div > nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    justify-content: flex-start !important;
    gap: 8px 16px !important;
    padding: 2px 0 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  header > div > nav::-webkit-scrollbar { display: none; }
  header > div > div:last-child {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    gap: 6px !important;
  }
  header [data-knob] { display: none; }
  header a[href*="buymeacoffee"] { font-size: .78rem !important; padding: .42rem .7rem !important; }

  [style*="max-width:1140px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [style*="grid-template-columns:"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="position:sticky"]:not(header) {
    position: static !important;
  }
  [style*="width:693px"], [style*="width: 693px"] {
    width: auto !important;
    max-width: 100% !important;
  }

  h1 { font-size: clamp(2rem, 11vw, 3rem) !important; }
  h2 { font-size: clamp(1.55rem, 8vw, 2.15rem) !important; }
  section[style*="padding:80px"],
  section[style*="padding:78px"],
  section[style*="padding:76px"],
  section[style*="padding:72px"],
  section[style*="padding:66px"],
  section[style*="padding:64px"] {
    padding-top: 42px !important;
  }
  [style*="height:360px"] { height: 220px !important; }

  img { max-width: 100%; }
  pre, code { max-width: 100%; }
  [style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }

  /* Cards remain roomy enough to scan with a thumb, rather than becoming a
     dense two-column desktop grid squeezed into a phone. */
  [data-card] { padding: 18px !important; }
  [data-card] img { width: 52px !important; height: 52px !important; }
}

@media (max-width: 420px) {
  header > div > a:first-child { font-size: 1.18rem !important; }
  header > div > nav { font-size: .86rem !important; }
  [style*="padding:34px"] { padding: 22px 16px !important; }
  [style*="padding:32px"] { padding: 22px 16px !important; }
  [style*="padding:30px"] { padding: 20px 16px !important; }
}