/* mobile.css — narrow-viewport overrides.
   Uses attribute selectors against React-inline style strings + !important
   so we don't have to refactor the JSX. Targets ≤ 768px. */

@media (max-width: 768px) {

  html, body { overflow-x: hidden !important; }

  /* ── Section padding ─────────────────────────────────────────── */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section[id^="chapter-"] {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  /* Big titles + subtitles should wrap freely */
  h1, h2 { white-space: normal !important; }
  div[style*="white-space: nowrap"] { white-space: normal !important; }

  /* ── HERO ────────────────────────────────────────────────────── */
  /* The hero is a <section> with height:100vh — keep that, just shrink padding */
  section[style*="height: 100vh"] > div {
    padding: 28px 20px !important;
  }
  /* "Jeff Ge" / "JEdoubleF911" — let the wordmarks scale + wrap */
  section[style*="height: 100vh"] h1 {
    font-size: clamp(48px, 13vw, 84px) !important;
  }
  section[style*="height: 100vh"] div[style*="align-items: baseline"] {
    flex-wrap: wrap !important;
  }
  /* Bottom row: stack scatter vs button */
  section[style*="height: 100vh"] div[style*="justify-content: space-between"][style*="align-items: flex-end"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* ── 01 · ABOUT ──────────────────────────────────────────────── */
  #chapter-01 div[style*="padding: 64px 0"] {
    padding: 40px 0 !important;
  }

  /* ── 02 · CURRENTLY ──────────────────────────────────────────── */
  #chapter-02 div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  #chapter-02 div[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid var(--fg-22) !important;
  }
  #chapter-02 div[style*="min-height: 220px"] {
    min-height: auto !important;
    padding: 22px 18px !important;
  }

  /* ── 03 · EXPERIENCE ─────────────────────────────────────────── */
  /* Header row 70px / 1.5fr / 1fr / 180px / 20px → stacked label + content */
  #chapter-03 div[style*="grid-template-columns: 70px 1.5fr"] {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "num     plus"
      "co      co"
      "role    role"
      "period  period" !important;
    gap: 4px 12px !important;
    row-gap: 6px !important;
  }
  #chapter-03 div[style*="grid-template-columns: 70px 1.5fr"] > div:nth-child(1) { grid-area: num; }
  #chapter-03 div[style*="grid-template-columns: 70px 1.5fr"] > div:nth-child(2) {
    grid-area: co;
    font-size: 24px !important;
  }
  #chapter-03 div[style*="grid-template-columns: 70px 1.5fr"] > div:nth-child(3) { grid-area: role; }
  #chapter-03 div[style*="grid-template-columns: 70px 1.5fr"] > div:nth-child(4) { grid-area: period; }
  #chapter-03 div[style*="grid-template-columns: 70px 1.5fr"] > div:nth-child(5) { grid-area: plus; }

  /* Expanded bullets — kill the 98px left indent */
  #chapter-03 div[style*="padding-left: 98px"] {
    padding-left: 0 !important;
  }
  #chapter-03 ul li {
    grid-template-columns: 16px 1fr !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  /* Skills/Toolkit grid */
  #chapter-03 div[style*="grid-template-columns: 220px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #chapter-03 div[style*="grid-template-columns: 140px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px 0 !important;
  }

  /* ── 04 · MUSIC ──────────────────────────────────────────────── */
  /* Marquee shrink */
  #chapter-04 span[style*="font-size: clamp(80px"] {
    font-size: clamp(40px, 12vw, 72px) !important;
  }
  /* Track row: 5-col → stack */
  #chapter-04 div[style*="grid-template-columns: 70px 1fr 100px 90px 120px"] {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "num    listen"
      "title  title"
      "tag    year" !important;
    gap: 8px 12px !important;
    padding: 22px 0 !important;
  }
  #chapter-04 div[style*="grid-template-columns: 70px 1fr 100px 90px 120px"] > div:nth-child(1) { grid-area: num; }
  #chapter-04 div[style*="grid-template-columns: 70px 1fr 100px 90px 120px"] > div:nth-child(2) {
    grid-area: title;
    font-size: 30px !important;
  }
  #chapter-04 div[style*="grid-template-columns: 70px 1fr 100px 90px 120px"] > div:nth-child(3) { grid-area: tag; }
  #chapter-04 div[style*="grid-template-columns: 70px 1fr 100px 90px 120px"] > div:nth-child(4) {
    grid-area: year;
    text-align: right;
  }
  #chapter-04 div[style*="grid-template-columns: 70px 1fr 100px 90px 120px"] > a {
    grid-area: listen;
    justify-self: end;
  }

  /* Bottom 2-col blurb + meta → stack */
  #chapter-04 div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  #chapter-04 div[style*="grid-template-columns: 1fr 1fr"] > div:nth-child(2) {
    justify-self: start !important;
  }

  /* ── 05 · GALLERY ────────────────────────────────────────────── */
  /* Every tile spans the full 12-col grid + uniform aspect */
  #chapter-05 div[style*="repeat(12, 1fr)"] > div {
    grid-column: span 12 !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* ── 06 · CONTACT ────────────────────────────────────────────── */
  #chapter-06 div[style*="grid-template-columns: 1.1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* Tighten the email/linkedin/etc rows */
  #chapter-06 div[style*="grid-template-columns: 100px 1fr"] {
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
  }
  /* Footer copyright line — wrap */
  #chapter-06 div[style*="letter-spacing: 0.2em"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  /* Giant "Jeff Ge /END" footer — let it wrap, smaller */
  #chapter-06 div[style*="font-size: clamp(80px, 18vw"] {
    font-size: clamp(56px, 22vw, 120px) !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* ── EDUCATION ───────────────────────────────────────────────── */
  #chapter-edu div[style*="grid-template-columns: 70px 1.4fr"] {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "num    dates"
      "school school"
      "deg    deg" !important;
    gap: 4px 12px !important;
  }
  #chapter-edu div[style*="grid-template-columns: 70px 1.4fr"] > div:nth-child(1) { grid-area: num; }
  #chapter-edu div[style*="grid-template-columns: 70px 1.4fr"] > div:nth-child(2) {
    grid-area: school;
    font-size: 22px !important;
  }
  #chapter-edu div[style*="grid-template-columns: 70px 1.4fr"] > div:nth-child(3) { grid-area: deg; }
  #chapter-edu div[style*="grid-template-columns: 70px 1.4fr"] > div:nth-child(4) { grid-area: dates; }

  #chapter-edu div[style*="padding-left: 98px"] {
    padding-left: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }

  /* ── Side B toggle button — keep readable, smaller on tiny screens ── */
  button[style*="position: fixed"][style*="top: 20px"] {
    top: 12px !important;
    right: 12px !important;
    font-size: 9px !important;
    padding: 6px 11px !important;
  }
}

/* Extra tight for very small phones */
@media (max-width: 380px) {
  section[id^="chapter-"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #chapter-03 div[style*="grid-template-columns: 70px 1.5fr"] > div:nth-child(2) {
    font-size: 22px !important;
  }
  #chapter-04 div[style*="grid-template-columns: 70px 1fr 100px 90px 120px"] > div:nth-child(2) {
    font-size: 26px !important;
  }
}