/* ==========================================================================
   Haus of Stone Africa — mobile refinements
   --------------------------------------------------------------------------
   The Fable export styles everything with inline `style` attributes, which beat
   any normal stylesheet rule — so overrides here use !important where, and only
   where, they must win against an inline declaration.

   IMPORTANT: support.js rebuilds the DOM from templates and re-serialises the
   style attributes with a space after each colon ("font-size: 11px"), while the
   authored source has none ("font-size:11px"). Attribute-substring selectors
   must therefore match BOTH spellings or they silently do nothing.

   Fixes, in order of severity:
     1. Primary nav was clipped off-screen below ~900px — WORK, ABOUT and
        CONTACT were unreachable. Now one non-wrapping row that scrolls.
     2. 48px side gutters ate 26% of a 375px viewport. Now 20px.
     3. 10–11px letter-spaced caps sat below comfortable reading size.
     4. Tap targets under 44px.
     5. model-viewer captured one-finger drag, trapping page scroll.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NAVIGATION — the critical fix
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Let the brand keep its own line and give the nav a full-width row of its
     own — cramming both onto one line leaves the nav a few dozen pixels. */
  header > div:first-child {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding-bottom: 10px !important;
  }

  header nav {
    width: 100%;
    flex-wrap: nowrap !important;
    gap: 22px !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    /* fade the right edge so it reads as "there is more this way" */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  }

  header nav::-webkit-scrollbar { display: none; }

  header nav > a {
    white-space: nowrap;
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  header > div:first-child > a:first-child { flex: 0 0 auto; }
  header > div:first-child > a:first-child span { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   1b. TWO-UP GRIDS WHOSE COLUMN MINIMUMS EXCEED THE VIEWPORT
   --------------------------------------------------------------------------
   These grids declare hard minimums that add up past a phone screen, so the
   *page* scrolled sideways rather than the grid reflowing:

     Founder            minmax(240px,300px) + minmax(280px,1fr) + 64 gap = 584
     About the label /
     About the Showroom minmax(280px,5fr)   + minmax(280px,4fr)  + 64 gap = 624

   Add the 48px gutters and they need stacking below ~680px and ~720px
   respectively; 760px covers both with room to spare. Kept out of the 640px
   block on purpose — by 640 the damage is long done.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  [style*="grid-template-columns:minmax(240px,300px) minmax(280px,1fr)"],
  [style*="grid-template-columns: minmax(240px, 300px) minmax(280px, 1fr)"],
  [style*="grid-template-columns:minmax(280px,5fr) minmax(280px,4fr)"],
  [style*="grid-template-columns: minmax(280px, 5fr) minmax(280px, 4fr)"],
  [style*="grid-template-columns:minmax(280px,4fr) minmax(280px,5fr)"],
  [style*="grid-template-columns: minmax(280px, 4fr) minmax(280px, 5fr)"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* the founder portrait is a fixed-max circle; centre it once stacked */
  section[data-screen-label="Founder"] img { margin: 0 auto !important; }
}

/* --------------------------------------------------------------------------
   2. GUTTERS
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  header,
  footer,
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --------------------------------------------------------------------------
     3. TYPE — nudge the small fixed sizes up one step.
        Both spellings, per the note at the top of this file.
     -------------------------------------------------------------------------- */
  [style*="font-size:10px"],
  [style*="font-size: 10px"] { font-size: 11.5px !important; }

  [style*="font-size:11px"],
  [style*="font-size: 11px"] {
    font-size: 12.5px !important;
    letter-spacing: 0.07em !important;
  }

  [style*="font-size:12px"],
  [style*="font-size: 12px"] {
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
  }

  [style*="font-size:13px"],
  [style*="font-size: 13px"] { font-size: 14px !important; }

  [style*="font-size:14px"],
  [style*="font-size: 14px"] { font-size: 15px !important; }

  [style*="font-size:15px"],
  [style*="font-size: 15px"] { font-size: 16px !important; }

  [style*="font-size:17px"],
  [style*="font-size: 17px"] { font-size: 18px !important; }

  /* running label rows: allow a wrap rather than cramming two into one line */
  [style*="justify-content:space-between"][style*="font-size:11px"],
  [style*="justify-content: space-between"][style*="font-size: 11px"] {
    flex-wrap: wrap;
    gap: 2px 12px;
  }

  /* ------------------------------------------------------------------------
     4. TAP TARGETS
     ------------------------------------------------------------------------ */
  a[style*="border:1px solid"],
  a[style*="border: 1px solid"],
  button {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Work page filter row → even two-up grid instead of a ragged wrap */
  section[data-screen-label="Work intro"] div[style*="flex-wrap:wrap"],
  section[data-screen-label="Work intro"] div[style*="flex-wrap: wrap"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
  }
  section[data-screen-label="Work intro"] div[style*="flex-wrap:wrap"] > a,
  section[data-screen-label="Work intro"] div[style*="flex-wrap: wrap"] > a {
    text-align: center;
    padding: 12px 8px !important;
  }

  /* ------------------------------------------------------------------------
     HERO — the lockup overlay was removed from the hero (the header wordmark
     already names the house, so it read as repetition). The rule that resized
     that image went with it.
     ------------------------------------------------------------------------ */
  section[data-screen-label="Hero"] { min-height: 78svh !important; }

  section[data-screen-label="Hero"] > div:last-child {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 44px !important;
  }

  /* ------------------------------------------------------------------------
     Dense index rows (year / title / place) collapse to two columns,
     with the place dropping under the title.
     ------------------------------------------------------------------------ */
  [style*="grid-template-columns:110px 1fr auto"],
  [style*="grid-template-columns: 110px 1fr auto"] {
    grid-template-columns: 68px 1fr !important;
    gap: 4px 12px !important;
  }
  [style*="grid-template-columns:110px 1fr auto"] > span:last-child,
  [style*="grid-template-columns: 110px 1fr auto"] > span:last-child {
    grid-column: 2 !important;
    color: #8c8073 !important;
  }

  /* Two-up content grids that are too tight to be worth keeping side by side */
  [style*="grid-template-columns:minmax(280px,1fr) minmax(280px,1fr)"],
  [style*="grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

/* --------------------------------------------------------------------------
   5. THE 3D LOOKS
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Shorter panels so the section doesn't run past two screens. touch-action
     is set on the elements themselves so one finger pans the page. */
  .hos-scan-cell model-viewer { height: 400px !important; }
  .hos-scan-live { gap: 22px !important; }
  .hos-scan-hint::after { content: " · 2 FINGERS"; }
}

/* --------------------------------------------------------------------------
   THE REACH MAP — narrower than its 760px minimum, so it pans sideways
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .hos-map-scroll {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .hos-map-hint { display: block !important; }
}

/* --------------------------------------------------------------------------
   Class-styled labels — these live in a <style> block rather than an inline
   attribute, so the substring rules above never reach them.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hos-scan-hint {
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
  }
}

/* --------------------------------------------------------------------------
   Stacked link lists (footer columns, inline "→" links). Full-width but only
   ~27px tall, so adjacent rows invite mis-taps. Give them room.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  footer a[style*="display:block"],
  footer a[style*="display: block"],
  section a[style*="display:block"],
  section a[style*="display: block"] {
    padding: 9px 0 !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }

  /* small trailing links such as "FULL INDEX →" / "ALL WORK →" */
  a[style*="letter-spacing"]:not([style*="border"]) {
    padding-block: 8px;
  }
}

/* --------------------------------------------------------------------------
   Touch devices: grow the map's invisible hit circles (SVG geometry properties
   are settable from CSS).

   Note the ceiling here. `r` is in viewBox units, and on a phone the 1180-unit
   map renders at its 760px minimum — a 0.64 scale — so r:22 yields roughly a
   28px physical target, not 44px. Pushing it high enough for 44px would make
   the Harare / Bulawayo / Eswatini / Maputo cluster overlap and the wrong city
   would answer the tap. 22 is the largest value that stays unambiguous.
   The authoritative data is the index directly below the map, which is fully
   reachable, so the map stays a supplementary view on small screens.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .hos-city circle[fill="transparent"] { r: 22px; }
}

/* --------------------------------------------------------------------------
   Landscape phones: reclaim vertical space
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) {
  section[data-screen-label="Hero"] { min-height: 92svh !important; }
  .hos-scan-cell model-viewer { height: 330px !important; }
}