/* ====================================================================
   mobile.css — responsive overrides for narrow viewports
   --------------------------------------------------------------------
   The site is built with inline JSX styles (clamp() sizes, fixed
   multi-column grids). On phones those inline values win over normal
   CSS, so every rule here is scoped by a class name added to the JSX
   AND uses !important to defeat the inline styles. Two breakpoints:
     ≤768px  — tablet & phone landscape
     ≤480px  — phone portrait (further tightening)
   ==================================================================== */

@media (max-width: 768px) {
  /* ---- Page paddings — most sections use 24-32px gutters; on mobile
         16px gives more breathing room for content. */
  .page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---- Giant display titles ("Gabrielle", "About", "Contact", "Work")
         The clamp() minimums (110-140px) are way too big for a 375px
         viewport. Force a smaller floor that fits comfortably. */
  .m-giant-title {
    font-size: clamp(64px, 20vw, 140px) !important;
    line-height: 0.92 !important;
  }

  /* ---- Home: color reel — render the 9 tiles as a symmetric 3×3 grid of
         squares (mirrors the Work page grid). Square tiles come from an
         aspect-ratio on each tile button rather than a fixed reel height. */
  .m-color-reel {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    align-items: start !important;
    gap: 8px !important;
  }
  .m-color-reel > button {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* ---- Home: selected work row — drop "kind" col, tighten */
  .m-selected-row {
    grid-template-columns: 32px 1fr 56px !important;
    gap: 12px !important;
    padding: 18px 0 !important;
  }
  .m-selected-kind { display: none !important; }
  .m-selected-title {
    font-size: clamp(22px, 5.5vw, 32px) !important;
  }

  /* ---- About: stack ALL multi-column grids (portrait split,
         3-col CV, mantra+skills) */
  .m-about-split,
  .m-about-cv,
  .m-about-mantra {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .m-about-cv { gap: 48px !important; }
  /* Tighten massive vertical spacing on mobile */
  .m-about-split { margin-top: 64px !important; }
  .m-about-cv { margin-top: 80px !important; }
  .m-about-mantra { margin-top: 64px !important; }

  /* ---- Contact: stack left details + right form */
  .m-contact-split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    margin-top: 48px !important;
    padding-bottom: 64px !important;
  }
  /* "Send →" button shrinks so the row doesn't break */
  .m-contact-send {
    font-size: clamp(28px, 8vw, 48px) !important;
  }

  /* ---- Work index: 3-col project grid -> 2-col */
  .m-work-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ---- Work index: tabular row — drop kind+client cols */
  .m-work-table-header,
  .m-work-table-row {
    grid-template-columns: 32px 1fr 56px !important;
    gap: 12px !important;
  }
  .m-work-table-kind,
  .m-work-table-client { display: none !important; }
  .m-work-table-title {
    font-size: clamp(20px, 5vw, 32px) !important;
  }

  /* ---- Project detail: stack 2-col layouts */
  .m-detail-hero,
  .m-detail-meta,
  .m-detail-deliverables,
  .m-detail-next {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .m-detail-meta {
    margin-top: 32px !important;
    padding-bottom: 40px !important;
  }
  .m-detail-deliverables {
    margin-top: 48px !important;
    padding-bottom: 40px !important;
  }
  /* The hard-coded 135.28px under-image title -> fluid */
  .m-detail-bigtitle {
    font-size: clamp(44px, 13vw, 88px) !important;
    line-height: 0.95 !important;
  }
  .m-detail-meta-text {
    font-size: clamp(18px, 4.5vw, 24px) !important;
  }
  /* Reduce huge marginTop:160 under the hero */
  .m-detail-bigtitle-wrap { margin-top: 64px !important; }

  /* ---- Plates grid — each plate full-width on mobile */
  .m-plates-grid {
    row-gap: 32px !important;
    gap: 12px !important;
  }
  .m-plates-grid > figure {
    grid-column: 1 / -1 !important;
  }

  /* ---- Next link block at end of project. The next project's title is set
         in the Sacrifice SCRIPT font, whose tall loops + descenders collide
         (and look cut off) when long titles wrap at a tight line-height.
         Drop the size, open up the leading, and let long/hyphenated tokens
         wrap so nothing spills past the edge. */
  .m-detail-next-title {
    font-size: clamp(38px, 11vw, 96px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* ---- Shell: nav tighter, footer stacks */
  .m-nav {
    padding: 16px 16px !important;
  }
  .m-nav-links {
    gap: 18px !important;
  }
  .m-nav-name { display: none !important; }
  .m-footer {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
    padding: 32px 16px 24px !important;
    margin-top: 96px !important;
  }
  .m-footer-links {
    flex-wrap: wrap !important;
    gap: 14px 18px !important;
  }

  /* ---- Home page hero spacing — tighten the giant top padding */
  .m-home-hero {
    padding-top: 56px !important;
    padding-bottom: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .m-home-caption,
  .m-home-bio,
  .m-home-reel-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .m-home-bio {
    padding-top: 32px !important;
    font-size: clamp(16px, 4.5vw, 22px) !important;
  }
}

/* ====================================================================
   INTRO OVERLAY — the animated "Gabrielle" wordmark.
   The drawn SVG scales to the stage automatically, but the final filled
   Sacrifice text (.intro__final) is sized clamp(140px, 22vw, 320px) in
   style.css. On a phone the 140px FLOOR is ~700px wide, so the wordmark
   blows past the screen edges and reads as clipped / askew. Bring the
   floor down so the text fits the stage on every load.
   ==================================================================== */
@media (max-width: 768px) {
  .intro__stage {
    width: min(88vw, 1200px) !important;
  }
  .intro__final {
    font-size: clamp(44px, 17vw, 140px) !important;
    line-height: 0.95 !important;
  }
  .intro__caption {
    font-size: 10px !important;
    letter-spacing: 0.26em !important;
    bottom: -12vh !important;
  }
}

/* ---- Further tightening for true phone portrait */
@media (max-width: 480px) {
  .intro__final {
    font-size: clamp(38px, 15vw, 96px) !important;
  }
  .m-giant-title {
    font-size: clamp(52px, 19vw, 96px) !important;
  }
  /* Reel stays a symmetric 3×3 of squares — just trim the gap a touch */
  .m-color-reel {
    gap: 6px !important;
  }
  .m-work-grid {
    grid-template-columns: 1fr !important;
  }
  /* Form section title above writeup textarea — keep readable */
  textarea {
    font-size: 15px !important;
  }
}