/* =====================================================================
   Mobile adjustments for Amine Tazit portfolio.
   Inline styles win specificity, so we use [style*="grid-template..."]
   attribute selectors + !important to surgically retarget known grids
   without breaking the desktop layout.
   ===================================================================== */

@media (max-width: 900px) {
  :root {
    --margin: clamp(20px, 5vw, 32px);
  }

  /* Prevent horizontal overflow globally */
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* ---------- NavBar: hide desktop list, show hamburger ---------- */
  nav > ul {
    display: none !important;
  }

  /* hamburger trigger (only present on mobile, see NavBar.jsx) */
  .nav-mobile-trigger {
    display: inline-flex !important;
  }

  /* mobile sheet defaults closed */
  .nav-mobile-sheet {
    display: flex !important;
  }

  /* ---------- HERO: stack vertically, photo full width ---------- */
  section#top > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: auto !important;
  }
  section#top > div > div:first-child {
    padding: 100px 20px 56px !important;
    min-height: auto !important;
    gap: 56px;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  section#top > div > div:first-child > * { min-width: 0; max-width: 100%; }
  section#top h1 {
    font-size: clamp(64px, 18vw, 120px) !important;
  }
  /* triptych: 1 col on small mobile, keep tighter rhythm */
  section#top div[style*="repeat"][style*="1fr 1fr 1fr"],
  section#top div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    padding-top: 24px !important;
  }
  /* hero photo: keep as a separate scrolled block */
  section#top > div > div:nth-child(2) {
    min-height: 80vh !important;
    aspect-ratio: 3/4;
  }
  /* hero bottom strip: stack */
  section#top > div[style*="position: absolute"][style*="bottom: 0"] {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    padding: 14px 20px !important;
    font-size: 9px !important;
  }
  /* hero photo caption: smaller */
  section#top div[style*="bottom: 80px"] {
    bottom: 24px !important;
    left: 20px !important;
    right: 20px !important;
    font-size: 10px !important;
  }
  section#top div[style*="bottom: 80px"] span[style*="font-size: 15"] {
    font-size: 13px !important;
  }

  /* ---------- All section paddings ---------- */
  section#image,
  section#theatre,
  section#voix,
  section#galerie,
  section#apropos,
  section#contact {
    padding: 80px 20px 64px !important;
  }

  /* ---------- THEATRE: stack title above list, no sticky ---------- */
  section#theatre > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
  }
  section#theatre > div > * { min-width: 0; max-width: 100%; }
  section#theatre > div > div:first-child {
    position: static !important;
  }
  section#theatre h2 {
    font-size: clamp(44px, 12vw, 72px) !important;
  }

  /* ---------- IMAGE: featured project stacks ---------- */
  section#image > div[style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr)"],
  section#image > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    margin-bottom: 56px !important;
  }
  section#image > div > * { min-width: 0; max-width: 100%; }
  section#image > div > div:nth-child(2) {
    padding-left: 0 !important;
  }
  section#image h3 {
    font-size: clamp(36px, 10vw, 56px) !important;
  }
  section#image dl[style*="grid-template-columns: 120px"] {
    grid-template-columns: 100px 1fr !important;
    gap: 10px 16px !important;
  }

  /* ---------- VOIX: stack header, then 2-col rows ---------- */
  section#voix header[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  section#voix h2 {
    font-size: clamp(40px, 11vw, 64px) !important;
  }
  section#voix ul li[style*="grid-template-columns: 90px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 20px 0 !important;
  }
  section#voix ul li > span:first-child {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.7;
  }

  /* ---------- GALERIE: 2 columns on tablet, 1 on phone ---------- */
  section#galerie > div[style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  section#galerie header {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 16px !important;
    padding-bottom: 20px !important;
    margin-bottom: 32px !important;
  }
  section#galerie h2 {
    font-size: clamp(40px, 11vw, 64px) !important;
  }

  /* ---------- ABOUT: stack bio + sidebar, sidebar not sticky ---------- */
  section#apropos > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 48px !important;
  }
  section#apropos > div > * { min-width: 0; max-width: 100%; }
  section#apropos aside[style*="position: sticky"] {
    position: static !important;
    padding: 28px 22px !important;
  }
  section#apropos h2 {
    font-size: clamp(44px, 12vw, 72px) !important;
  }
  section#apropos dl[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 14px !important;
  }
  section#apropos ul li[style*="grid-template-columns: 110px"] {
    grid-template-columns: 80px 1fr !important;
    gap: 14px !important;
    padding: 12px 0 !important;
  }

  /* ---------- CONTACT: stack ---------- */
  section#contact > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 48px !important;
    align-items: flex-start !important;
    min-height: auto !important;
  }
  section#contact > div > * { min-width: 0; max-width: 100%; }
  section#contact h2 {
    font-size: clamp(44px, 12vw, 72px) !important;
  }
  section#contact div[style*="grid-template-columns: repeat(3, auto)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  section#contact > div > div:nth-child(2) {
    max-width: 280px;
    margin: 0 auto;
  }
  section#contact > div[style*="margin-top: 100"] {
    margin-top: 56px !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 14px !important;
    text-align: left;
  }

  /* ---------- CreditRow: stack year+title, role+mes ---------- */
  section ul li[style*="grid-template-columns: 78px"] {
    grid-template-columns: 60px 1fr !important;
    grid-template-rows: auto auto;
    gap: 4px 16px !important;
    padding: 18px 0 !important;
  }
  /* Year stays in column 1 row 1 */
  section ul li[style*="grid-template-columns: 78px"] > span:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
  }
  /* Title spans row 1 column 2 */
  section ul li[style*="grid-template-columns: 78px"] > span:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
  }
  /* Role goes to row 2 */
  section ul li[style*="grid-template-columns: 78px"] > span:nth-child(3) {
    grid-row: 2;
    grid-column: 2;
  }
  /* Mes goes to row 3 */
  section ul li[style*="grid-template-columns: 78px"] > span:nth-child(4) {
    grid-row: 3;
    grid-column: 2;
  }
  /* Status goes to row 4 */
  section ul li[style*="grid-template-columns: 78px"] > span:nth-child(5) {
    grid-row: 4;
    grid-column: 2;
    text-align: left !important;
  }

  /* table headers in sections become hidden (too cluttered on mobile) */
  section span[style*="letter-spacing: 0.2em"][style*="font-size: 10px"]:has-text("Année · Titre"),
  section span[style*="letter-spacing: 0.2em"]:contains("Année · Pièce") {
    display: none !important;
  }

  /* ---------- Tweaks panel: smaller on mobile ---------- */
  .tweaks-panel,
  [class*="tweaks"] {
    max-width: calc(100vw - 24px) !important;
  }
}

/* Smaller phones */
@media (max-width: 480px) {
  section#galerie > div[style*="repeat(3, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  section#galerie > div > div[style*="margin-top"] {
    margin-top: 0 !important;
  }
  section#top h1 {
    font-size: clamp(56px, 16vw, 96px) !important;
  }
  section#top div[style*="padding-top: 28"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}