/* ==========================================================================
   DAJAI.IO — MOBILE & TABLET RESPONSIVE OVERRIDES
   Loaded LAST so these rules win. Original styles.css / basquiat.css / casa.css
   / exhibit.css were designed at desktop resolution; this file makes them
   not-cut-off on phones + tablets without touching the originals.
   ========================================================================== */

/* Universal: kill horizontal scroll EVERYWHERE on every viewport */
html, body { overflow-x: hidden !important; max-width: 100vw; }
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
* { word-wrap: break-word; overflow-wrap: break-word; }

/* Container safety — anything with explicit width breaks mobile */
@media (max-width: 1024px) {
  [style*="width: 100"][style*="vw"],
  [style*="min-width:"] {
    max-width: 100vw !important;
  }
  .module, .module-bd { width: auto !important; max-width: 100%; }
}

/* ===== TABLET / SMALL DESKTOP (≤ 1024px) ===== */
@media (max-width: 1024px) {
  .huge { font-size: clamp(64px, 16vw, 200px) !important; }
  body { font-size: 13px; }
  .module-bd { padding: 12px !important; }
  /* row grid collapses */
  .row {
    grid-template-columns: 28px 32px 1fr 60px 50px !important;
    gap: 8px !important;
    font-size: 11px !important;
    padding: 8px !important;
  }
  /* Hide the chart/play/heart cells we don't have room for at this width */
  .row > *:nth-child(6),
  .row > *:nth-child(7) {
    display: none !important;
  }
}

/* ===== TABLET PORTRAIT (≤ 768px) ===== */
@media (max-width: 768px) {
  body {
    cursor: default !important;
    font-size: 12px;
    background-attachment: scroll;
  }
  /* Kill the playhead crosshair on touch — it's a mouse-only thing */
  .playhead, .playhead-h { display: none !important; }
  /* Soften scanlines + grid bg on small screens */
  .scanlines { opacity: 0.3 !important; }
  .grid-bg { background-size: 32px 32px !important; opacity: 0.5; }
  .vignette { box-shadow: inset 0 0 80px rgba(0,0,0,0.6) !important; }

  .huge { font-size: clamp(54px, 18vw, 140px) !important; }

  /* Module headers: allow wrap so they don't bleed */
  .module-hd {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
  }
  .module-hd > * { white-space: normal !important; }

  /* Track row — drop more columns at this width */
  .row {
    grid-template-columns: 24px 28px 1fr 50px !important;
    gap: 6px !important;
    font-size: 10.5px !important;
    padding: 8px 6px !important;
  }
  .row > *:nth-child(5),
  .row > *:nth-child(6),
  .row > *:nth-child(7) { display: none !important; }

  /* Buttons */
  .btn {
    font-size: 9.5px !important;
    padding: 7px 10px !important;
    letter-spacing: 0.12em !important;
  }

  /* Frequency map — make it tappable */
  .freq-cell { cursor: default !important; }

  /* Common page-wide containers — force max-width */
  .module, [class*="grid"], [class*="container"] {
    max-width: 100% !important;
  }
}

/* ===== PHONE (≤ 480px) ===== */
@media (max-width: 480px) {
  .huge { font-size: clamp(44px, 18vw, 92px) !important; line-height: 0.9 !important; }
  body { font-size: 11.5px; }
  .module-hd { padding: 7px !important; font-size: 8px !important; }
  .module-bd { padding: 10px !important; }

  .row {
    grid-template-columns: 22px 1fr auto !important;
    gap: 6px !important;
    font-size: 10.5px !important;
  }
  /* Hide all but: # / title / plays */
  .row > *:nth-child(2) { display: none !important; }
  .row > *:nth-child(4),
  .row > *:nth-child(5),
  .row > *:nth-child(6),
  .row > *:nth-child(7) { display: none !important; }

  /* Tweaks-panel — push way off-canvas on phone, only slide in via toggle */
  [class*="tweaks"],
  .tweaks-panel,
  .tweaks-trigger {
    transform: scale(0.85);
    transform-origin: bottom right;
  }

  .btn { font-size: 9px !important; padding: 6px 9px !important; }
}

/* Even tighter for super-small screens (older iPhones, watch-adjacent) */
@media (max-width: 380px) {
  .huge { font-size: clamp(38px, 17vw, 72px) !important; }
  .row { grid-template-columns: 20px 1fr auto !important; gap: 4px !important; }
  .module-bd { padding: 8px !important; }
}

/* ===== Touch-device / no-hover safety ===== */
@media (hover: none) {
  body { cursor: default !important; }
  .freq-cell:hover { transform: none !important; }
  .row:hover { background: transparent !important; }
}

/* ===== Reduced motion preference ===== */
@media (prefers-reduced-motion: reduce) {
  .scroll-feed, .glow-pulse, .flicker { animation: none !important; }
  .freq-cell { transition: none !important; }
}

/* ===== EMBEDDED SOUNDCLOUD / VIDEO RESPONSIVE ===== */
iframe[src*="soundcloud.com"],
iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9;
  border: none;
}

video {
  max-width: 100% !important;
  height: auto !important;
}

/* On phone, cap the hero video so it doesn't take over the entire viewport */
@media (max-width: 768px) {
  video[autoplay] {
    max-height: 50vh !important;
  }
}

/* Make ANY 100vw element behave on mobile */
@media (max-width: 1024px) {
  [style*="100vw"], [class*="hero"] [style*="width:"] {
    max-width: 100% !important;
  }
}

/* ===== ANIMATIONS — keep them on, but smoothly throttle on phone ===== */
@media (max-width: 768px) {
  /* Slow down animations on phone for battery */
  * {
    animation-duration: var(--anim-dur, inherit);
  }
  /* But keep core animations visible */
  .scroll-feed { animation-duration: 60s !important; }
}

/* Tap target safety — anything clickable needs ≥44px hit area */
@media (max-width: 768px) {
  a, button, [role="button"], [onclick] {
    min-height: 44px;
  }
}

/* ============================================================
   HERO GRID OVERRIDES — added 2026-04-28 (mobile fix pass)
   The Hero (hero.jsx) uses a hard-coded 3-column grid via inline
   style: `gridTemplateColumns: 'minmax(220px, 1.2fr) minmax(0 minmax(140px, 1.5fr)'`.
   This blew the layout at <=1280px and was unreadable on mobile.
   Targeting the inline style directly via attribute selector since
   the grid div has no className.
   ============================================================ */

/* Tablet + small desktop: collapse to 2 columns (skull + middle) */
@media (max-width: 1280px) {
  div[style*="minmax(220px, 1.2fr)"][style*="minmax(0"] {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr) !important;
    gap: 24px !important;
    padding: 32px 28px 60px !important;
  }
  /* Hide the 3rd column (extra TapeNote / sidebar) at this width */
  div[style*="minmax(220px, 1.2fr)"][style*="minmax(0"] > *:nth-child(3) {
    display: none !important;
  }
}

/* Tablet portrait: single column, stacked */
@media (max-width: 900px) {
  div[style*="minmax(220px, 1.2fr)"][style*="minmax(0"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 16px 56px !important;
    min-height: auto !important;
  }
  div[style*="minmax(220px, 1.2fr)"][style*="minmax(0"] > * {
    display: flex !important;
  }
  /* Re-show the 3rd column on this single-col layout */
  div[style*="minmax(220px, 1.2fr)"][style*="minmax(0"] > *:nth-child(3) {
    display: flex !important;
  }
  /* Anatomy SVG: cap so it doesn't dominate the screen */
  svg[width][height][viewBox="0 0 360 460"] {
    max-width: 280px !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* Phone: extra-tight padding, smaller hero typography */
@media (max-width: 480px) {
  div[style*="minmax(220px, 1.2fr)"][style*="minmax(0"] {
    padding: 16px 12px 40px !important;
    gap: 16px !important;
  }
  /* Hero typography: cap the clamp upper bound */
  div[style*="minmax(220px, 1.2fr)"][style*="minmax(0"] [style*="clamp"][style*="76px"] {
    font-size: clamp(28px, 9vw, 56px) !important;
    max-width: 100% !important;
  }
}

/* StatusBar (sticky top): allow wrap on small screens, stack the right side */
@media (max-width: 768px) {
  div[style*="position: sticky"][style*="top: 0"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 6px 10px !important;
  }
  /* The session.id center fills the row — let it shrink */
  div[style*="position: sticky"][style*="top: 0"] > div:nth-child(2) {
    order: 99 !important;
    flex-basis: 100% !important;
    text-align: left !important;
  }
}

/* Desktop overflow safety net — body scrollWidth must never exceed viewport
   except for marquees and other intentional horizontal-scrollers */
@media (min-width: 1025px) {
  body > *:not(.scroll-feed):not([class*="marquee"]) {
    max-width: 100vw;
  }
}

/* ====================================================================
   .huge TYPOGRAPHY CAP across viewports (added 2026-04-28)
   The design assumed >=1500px viewports for `.huge` (200-300px fonts).
   At 1024-1500px laptop widths, these blow out their grid columns.
   Cap by viewport so they always fit while staying dramatic.
   ==================================================================== */
@media (max-width: 1500px) {
  .huge { font-size: clamp(72px, 11vw, 180px) !important; line-height: 0.92 !important; }
  .huge.readout-num { font-size: clamp(80px, 12vw, 200px) !important; max-width: 100% !important; }
  /* The "1,585" giant counter and similar — keep them readable, never overflow */
  span.huge.readout-num { display: inline-block !important; max-width: 100% !important; }
}

/* On the tightest laptop width (1024-1280) the grid column for the count
   is ~700-900px — cap accordingly so the giant number stays in its lane */
@media (min-width: 901px) and (max-width: 1280px) {
  .huge { font-size: clamp(64px, 9.5vw, 140px) !important; }
  .huge.readout-num { font-size: clamp(72px, 10.5vw, 160px) !important; }
  /* The big "records" / "tracks" word also caps */
  div[style*="font-size"] [style*="clamp(34px, 5.4vw, 76px)"] {
    font-size: clamp(34px, 4.4vw, 60px) !important;
  }
}

/* Force-stop the "BIG" type in the Hero from running off — it's the main
   visible cutoff offender in the screenshots */
@media (max-width: 1500px) {
  .huge.readout-num,
  .huge.italic {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Universal: any element with text > 100px should never exceed its parent */
.huge, [class*="huge"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* ====================================================================
   MARGINALIA (.marg) — absolute-positioned scribbles like
   "★ KING OF VEGAS ★", "NO LABEL.", "↑ THE OPERATOR ↑". Originally
   placed at left:50% / right:5% etc. with rotation. On <=768px they
   blow past the viewport. Constrain.
   ==================================================================== */
@media (max-width: 1024px) {
  .marg {
    font-size: clamp(11px, 2.6vw, 18px) !important;
    max-width: 60vw !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}
@media (max-width: 768px) {
  .marg {
    font-size: clamp(10px, 3.2vw, 15px) !important;
    max-width: 70vw !important;
  }
  /* Anything positioned with `left: 5X%` shifted to a safer position */
  .marg[style*="left: 50%"], .marg[style*="left: 52%"], .marg[style*="left: 55%"],
  .marg[style*="left: 60%"], .marg[style*="left: 65%"], .marg[style*="left: 70%"] {
    left: auto !important;
    right: 4% !important;
    max-width: 50vw !important;
  }
}
@media (max-width: 480px) {
  .marg { font-size: clamp(9px, 3.6vw, 13px) !important; max-width: 60vw !important; }
}

/* ====================================================================
   STRIP CBA / CODE BLACK STORYLINE FROM dajai.io/music
   The user clarified 2026-04-28: dajai.io is MUSIC ONLY. The CBA roster,
   Code Black lineage names, and DossierWall belong on codeblack.dajai.io
   not on the music page.

   .list-painting renders the rosters (DAJAI / ARMAND PERRY / JALEEL
   WADOOD / NICCO FERTITTA / etc + CORDELL BROADUS lineage). Hide ALL of
   them on the music page until we either (a) strip from compiled JSX or
   (b) port them properly to codeblack.dajai.io.
   ==================================================================== */
.list-painting {
  display: none !important;
}

/* Hide the immediate parent wrapper of a list-painting (the column that
   holds it) so its sibling label disappears too. Use `> .list-painting`
   (immediate child only) so we don't accidentally nuke the whole Hero. */
div > .list-painting {
  display: none !important;
}
/* Hide siblings of .list-painting that are CBA-related labels (// LINEAGE,
   // CODE BLACK SINCE 2012 — ROSTER©) using attribute-style targeting */
.label[style*="b-red"]:has(+ .list-painting),
.label[style*="b-yellow"]:has(+ .list-painting) {
  display: none !important;
}

/* ====================================================================
   MOBILE-FIRST CLEANUP for the music landing
   At <=768px we want a CLEAN MUSIC-FIRST layout — no decorative scribbles
   overlapping content, no anatomy-diagram labels bleeding off the edge.
   The user said "needs to look different on mobile" — making it simple.
   ==================================================================== */
@media (max-width: 768px) {
  /* Hide ALL marginalia scribbles on phone — they're decorative and they
     overflow with absolute positioning. Desktop keeps them. */
  .marg {
    display: none !important;
  }
  /* Hide AnatomyHead SVG corner labels (FRONTAL · 4 STATE TITLES, etc.)
     They're decorative and bleed past the 360px SVG width when scaled. */
  svg[viewBox="0 0 360 460"] text {
    display: none !important;
  }
  /* Center the AnatomyHead skull only */
  svg[viewBox="0 0 360 460"] {
    display: block;
    margin: 0 auto;
  }
  /* (DossierWall hide is handled at the JS source-edit layer instead —
     hiding via `:has(.list-painting)` collapsed the Hero accidentally
     because the Hero contained the LINEAGE list as one of many children.) */
}