/* ============================================================
   mobile.css - responsive layer for staceylayne.com
   Scoped entirely to <=860px so desktop is untouched.
   Selectors target data-screen-label sections and the rendered
   grid-template-columns signatures of fixed multi-col layouts.
   ============================================================ */

@media (max-width: 860px) {

  /* ---- global guards ---- */
  img, svg { max-width: 100%; height: auto; }
  h1, h2, h3, h4 { overflow-wrap: break-word; }

  /* Flex rows may wrap on small screens */
  [data-dc-tpl][style*="display: flex"] { flex-wrap: wrap !important; }

  /* Grid/flex children may shrink below content size */
  [data-dc-tpl][style*="display: grid"] > *,
  [data-dc-tpl][style*="display: flex"] > * { min-width: 0; }

  /* ---- header / nav (all pages) ---- */
  [data-screen-label="Header"] { row-gap: 16px !important; padding: 20px 24px !important; }
  [data-screen-label="Header"] > a:first-child { flex-wrap: nowrap !important; gap: 14px !important; }
  [data-screen-label="Header"] > a:first-child img { width: 50px !important; }
  [data-screen-label="Header"] > a:first-child span span:first-child { font-size: 18px !important; }
  [data-screen-label="Header"] > a:first-child span span:last-child { font-size: 9.5px !important; }
  [data-screen-label="Header"] nav { gap: 10px 14px !important; }
  [data-screen-label="Header"] nav > a,
  [data-screen-label="Header"] nav > span {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }
  [data-screen-label="Header"] nav > span { padding: 9px 10px !important; }

  /* ---- tighten gap between header and the first content block ---- */
  [data-screen-label="Header"] { padding-bottom: 10px !important; }
  [data-screen-label="Header"] + section { padding-top: 14px !important; }
  [data-screen-label="Hero"] [style*="padding-top: 36px"] { padding-top: 0px !important; }

  /* ---- Home hero grid -> single column, decorative rail hidden ---- */
  [style*="grid-template-columns: minmax(0px, 44fr) minmax(0px, 42fr) 52px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
  }
  [style*="grid-template-columns: minmax(0px, 44fr) minmax(0px, 42fr) 52px"] > :nth-child(3) {
    display: none !important;
  }

  /* ---- flagship cards ---- */
  [style*="grid-template-columns: minmax(0px, 6fr) minmax(0px, 5fr)"],
  [style*="grid-template-columns: minmax(0px, 5fr) minmax(0px, 6fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  /* ---- case pages: label | body rows stack ---- */
  [style*="grid-template-columns: minmax(0px, 4fr) minmax(0px, 7fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  /* ---- About: profile text | portrait ---- */
  [style*="grid-template-columns: minmax(0px, 7fr) minmax(0px, 4fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
  }

  /* ---- About: THE RECORD ---- */
  [style*="grid-template-columns: 220px minmax(0px, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  /* ---- Home credentials strip -> 2-col, heading full row ---- */
  [style*="grid-template-columns: 200px repeat(4, minmax(0px, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  [style*="grid-template-columns: 200px repeat(4, minmax(0px, 1fr))"] > :first-child {
    grid-column: 1 / -1;
  }

  /* ---- Work index rows -> stacked card ---- */
  [style*="grid-template-columns: 56px 200px minmax(0px, 5fr) minmax(0px, 5fr) 24px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }
  [style*="grid-template-columns: 56px 200px minmax(0px, 5fr) minmax(0px, 5fr) 24px"] > :last-child {
    display: none !important;
  }

  /* ---- meta strips -> 2-up ---- */
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  section:not([data-screen-label]) [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  /* ---- footer columns -> 2-col, brand full row ---- */
  [style*="grid-template-columns: minmax(0px, 5fr) minmax(0px, 2fr) minmax(0px, 2fr) minmax(0px, 2fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
  }
  [style*="grid-template-columns: minmax(0px, 5fr) minmax(0px, 2fr) minmax(0px, 2fr) minmax(0px, 2fr)"] > :first-child {
    grid-column: 1 / -1;
  }

  /* ---- newsletter band: rows stack full width ---- */
  [data-screen-label="Newsletter"] [style*="min-width: 320px"] {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    max-width: none !important;
  }
  [data-screen-label="Newsletter"] form { width: 100%; }
  [data-screen-label="Newsletter"] form input[type="email"] { flex: 1 1 180px !important; }
  [data-screen-label="Newsletter"] > div { padding: 28px 22px !important; }

  /* ---- hero modes strip (01 INFLUENCE / 02 BUILD / 03 MAKE): tighter cells ---- */
  [data-screen-label="Hero"] [style*="repeat(3, minmax(0px, 1fr))"] > a {
    padding: 6px 10px 2px !important;
    gap: 6px !important;
  }
  [data-screen-label="Hero"] [style*="repeat(3, minmax(0px, 1fr))"] > a > span:first-child { font-size: 11px !important; }
  [data-screen-label="Hero"] [style*="repeat(3, minmax(0px, 1fr))"] > a > span:nth-child(2) {
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
  }
  [data-screen-label="Hero"] [style*="repeat(3, minmax(0px, 1fr))"] > a > span:last-child { font-size: 13px !important; }

  /* ---- display headlines: calmer scale on phones ---- */
  h1[style*="font-size: clamp("] { font-size: 30px !important; }

  /* ---- hero paper-airplane ornament: stay inside viewport ---- */
  [data-screen-label="Hero"] [style*="right: -56px"] { right: 0px !important; }
}