/* ---------------------------------------------------------------------------
   Mobile layout pass — Maya Creative Co

   The design pages are authored with inline styles (they come out of Claude
   Design that way), so every rule here needs !important to win against them.
   Selectors lean on `data-screen-label` and on inline-style substrings, which
   the runtime re-serialises with a space after each colon — so match on
   property names, not on value spacing.

   Desktop is untouched: everything lives inside the max-width query.
   --------------------------------------------------------------------------- */

@media (max-width: 760px) {

  /* ---- nav: stack the wordmark, links and CTA ------------------------- */
  /* stacked it is ~140px tall, so it scrolls away instead of sticking */
  nav {
    position: static !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
    padding: 14px 18px !important;
    justify-items: center !important;
    text-align: center !important;
  }
  nav > div:nth-child(2) {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 16px !important;
  }
  nav > div:last-child {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ---- page rhythm ---------------------------------------------------- */
  section, footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* ---- every multi-column grid collapses to one column ----------------- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  /* …and anything explicitly placed into a cell stops being placed */
  [style*="grid-column"], [style*="grid-row"], [style*="grid-area"] {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
  }
  /* right-aligned desktop columns read badly stacked */
  [style*="justify-self"] { justify-self: start !important; }
  [style*="place-self"]   { place-self: auto !important; }
  section [style*="text-align: right"], footer [style*="text-align: right"] {
    text-align: left !important;
  }

  /* the footer link list stays two columns — it's short labels */
  footer > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ---- cards and hard shadows ----------------------------------------- */
  [style*="padding: 48px"] { padding: 26px !important; }
  [style*="padding: 32px"] { padding: 22px !important; }
  [style*="box-shadow: rgb(20, 20, 20) 6px 6px 0px"],
  [style*="box-shadow: 6px 6px 0"] { box-shadow: 4px 4px 0 #141414 !important; }

  /* ---- handwriting scales down but stays above the 32px brand floor ---- */
  [style*="font-size: 52px"] { font-size: 38px !important; }
  [style*="font-size: 48px"] { font-size: 36px !important; }
  [style*="font-size: 44px"] { font-size: 34px !important; }
  [style*="font-size: 40px"] { font-size: 32px !important; }

  /* Boldonse has tall ascenders/descenders — 1.2 collides once headlines
     wrap onto three or four lines at phone width */
  [style*="Boldonse"] { line-height: 1.32 !important; }
  nav [style*="Boldonse"] { line-height: 1.1 !important; }

  /* long sticker pills (the hero price line) wrap instead of running off the
     edge — but never the marquee, which is deliberately wider than the screen */
  [style*="width: max-content"]:not([style*="animation"]) {
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* ---- media never overflows ------------------------------------------ */
  img, video { max-width: 100% !important; }

  /* =====================================================================
     Poster hero (index only — it is the one hero with container-type)
     Desktop layers giant handwriting over the booth strip in a 3x3 grid.
     On a phone that becomes a stack: words, strip, bio, then the labels.
     ===================================================================== */
  section[data-screen-label="Hero"][style*="container-type"] > div {
    min-height: 0 !important;
    padding: 24px 20px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }
  section[data-screen-label="Hero"][style*="container-type"] > div > :nth-child(1) { order: 4 !important; }
  section[data-screen-label="Hero"][style*="container-type"] > div > :nth-child(2) { order: 2 !important; align-self: center !important; }
  section[data-screen-label="Hero"][style*="container-type"] > div > :nth-child(3) { order: 5 !important; margin-bottom: 0 !important; }
  section[data-screen-label="Hero"][style*="container-type"] > div > :nth-child(4) { order: 1 !important; }
  section[data-screen-label="Hero"][style*="container-type"] > div > :nth-child(5) { order: 3 !important; margin-top: 0 !important; }

  /* the giant words drop out of the absolute overlay and into flow */
  section[data-screen-label="Hero"] div[style*="pointer-events"] {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 0.82 !important;
  }
  section[data-screen-label="Hero"] div[style*="pointer-events"] > div {
    position: static !important;
    font-size: clamp(56px, 18vw, 96px) !important;
    inset: auto !important;
  }

  /* the pills pinned either side of the strip sit under it instead */
  section[data-screen-label="Hero"][style*="container-type"] span[style*="position: absolute"] {
    position: static !important;
    display: inline-block !important;
    margin: 8px 4px 0 0 !important;
    white-space: normal !important;
  }
  section[data-screen-label="Hero"][style*="container-type"] > div > :nth-child(2) > div[style*="background: rgb(20, 20, 20)"] {
    margin: 0 auto !important;
  }
}

/* very small phones: give the wordmark room so it never breaks mid-word */
@media (max-width: 380px) {
  nav > div:nth-child(2) { font-size: 13px !important; gap: 8px 12px !important; }
}