/* ============================================================
   Atmos Lab — mobile-patch.css
   Upload to: /assets/css/mobile-patch.css
   Add to header.php: <?= css('assets/css/mobile-patch.css') ?>
   ============================================================ */

/* ── Hide mobile-only elements on desktop ─────────────────── */
/* These elements are injected by the mobile PHP snippets.     */
/* Without this rule they would render as unstyled text on     */
/* desktop. Shown only inside the max-width:800px block below. */
.mobile-project-nav,
.mobile-generic-nav,
.mgn-intro-text,
#nav-mobile { display: none; }

/* DESKTOP-AFFECTING (deliberately outside the media query):
   #intro-wrap (home.php) must pass main's percentage width down the chain.
   index.css pins the intro with `#intro.fixed { width: inherit }` — it used
   to inherit '80%' straight from main; with the wrapper in between it would
   inherit 'auto' and the fixed intro shrinks-to-fit (text wraps wrongly).
   width:inherit forwards main's computed '80%' (or 66.7%/61%/41%) so the
   fixed intro resolves it against the viewport exactly as before. */
#intro-wrap { width: inherit; }

/* ── Base layout ──────────────────────────────────────────── */
@media screen and (max-width: 800px) {
  .mobile-project-nav,
  .mobile-generic-nav,
  #nav-mobile { display: block; }
  .page { flex-direction: column; }

  main {
    width: 100% !important;
    height: auto !important;
    padding-bottom: 90px; /* clear fixed bottom nav (14 + 4×14 + 14 = 84px) */
  }

  /* Single-column text content */
  .main-text-content { columns: 1; padding-bottom: 80px; }
}

/* Suppress custom cursors on touch */
@media (hover: none), (pointer: coarse) {
  *, *:before, *:after { cursor: auto !important; }
  a, button, [role="button"] { cursor: pointer !important; }
}

/* ── Homepage: drawing area ───────────────────────────────── */
@media screen and (max-width: 800px) {
  .image-container {
    display: block !important;
    position: sticky;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100vw !important;
    background: #d9d8d2;
    overflow: hidden;
  }

  /* Silhouette layer */
  .image-layer.layer-1 {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
  }

  /* Project containers (silhouettes) */
  .project-container {
    display: none;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
  }
  .project-container.active { display: block; }

  .project-container > svg {
    width: 100%; height: 100%; background: #d9d8d2;
  }

  /* Axonometric layer: sits on top of the silhouette SVG.
     opacity uses !important so it overrides the inline opacity that the desktop
     script (script.min.js / main.js initMainChangeShape) sets via jQuery .css()
     on mouseenter/mouseleave — those mouse events fire on touch and would
     otherwise flash the axo on before our .visible logic runs. */
  /* Hidden until the user taps to reveal (mobile.js adds .visible), with a
     fade. The axo renders as an <img> (image-layers-home.php) so its lines
     are continuous like live, not the dashed look inline <svg> produced. */
  .project-building {
    display: block !important;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0 !important;
    transition: opacity 0.35s;
    pointer-events: none;
    overflow: hidden;
  }
  .project-building.visible {
    opacity: 1 !important;
    pointer-events: all;
  }
  /* Axonometric as <img> fallback */
  .project-building img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
  }
  /* Axonometric as inline SVG — guaranteed same render as silhouette */
  .project-building svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
  }
}

/* ── Homepage: scrollable content over drawing ──────────────
   NO z-index here — the live site stacks this area purely by DOM order
   among z-index-free positioned elements:
     drawing (first) → #intro / #contact (relative, via .main-home section)
     → #nav-mobile (fixed, LAST in DOM → paints on top).
   So the text scrolls above the drawing but BEHIND the bottom nav,
   exactly like live. Adding z-index to the text would lift it over the
   (z-index-free) #nav-mobile and break that.                          */
@media screen and (max-width: 800px) {
  #contact {
    position: relative;
    background: transparent;
  }

  /* Desktop intro choreography (home.js, desktop-only): text scrolls in,
     pins fully readable, stays until the about/contact block touches it,
     then everything scrolls together. Mobile equivalent: sticky #intro
     inside the #intro-wrap runway (home.php) — sticky releases exactly
     when the wrapper's bottom (= where contact starts) reaches it.
     The !importants neutralise home.js's .fixed/.scrolled inline styles. */
  /* Load choreography (same as desktop): on load only the silhouette is
     visible — the intro starts exactly at the bottom edge of the first
     viewport (padding-top = viewport minus the square drawing). After 2s,
     home.js autoIntroScroll (NOT desktop-guarded — it runs here too)
     animates the scroll to 0.8×vh, sliding the intro up from the bottom.
     Settle point: intro pins when scrollY = 100vh − top; with top:20vh
     that's exactly the 0.8vh the auto-scroll targets.                   */
  #intro-wrap {
    padding-top: calc(100vh - 100vw);
    min-height: 140vh;                /* runway length = how long it stays pinned */
  }
  #intro,
  #intro.fixed, #intro.scrolled {
    position: sticky !important;
    top: 20vh !important;             /* settle position = auto-scroll target */
    min-height: auto !important;
    background: transparent;
  }
  /* runway lives in #intro-wrap now (was margin-top: 100vh) */
  .main-home #contact {
    margin-top: 0;
  }
}

/* ── Bottom nav (#nav-mobile) ─────────────────────────────────
   The live design comes ENTIRELY from index.css:
     #nav-mobile        fixed bottom, white, Scto 13.25/700/14
     .bottom-navigation flex row, space-between, uppercase
     #projects-title    width:100%; padding:14px 15px
     #projects-list     height:0; transition:height .25s; .inner pads
     .languages         (≤800px) static, 7.5rem, right-aligned
   Below: ONLY the categories we add beyond the live version, using the
   exact same parameters, plus overflow clipping the mid-stack lists need
   (live's single bottom list hides its collapsed overflow off-screen;
   lists stacked above other rows cannot).                              */
@media screen and (max-width: 800px) {
  /* Desktop-nav rhythm for the category rows: tight 14px line-height rows
     with NO per-row vertical padding (like .nav-container line-height:14px
     stacking); the breathing room comes from the container block padding,
     mirroring desktop's `ul.level-1 > .inner { padding-top: 14px }`.
     (The live 14px-per-row padding was designed for a single PROJECTS row;
     with four stacked rows it reads as oversized gaps.) */
  #nav-mobile {
    padding: 14px 0;
    /* same 1px black stroke the desktop nav-container has on its side
       (index.css: border-left: 1px solid #000) — here on top */
    border-top: 1px solid #000;
  }
  #projects-title,
  #research-title, #academic-title, #exhibitions-title {
    width: 100%;
    padding: 0 15px;
    text-transform: uppercase;
  }
  /* Languages share the row: align to the same 14px line (index.css gives
     them 14px 15px for the live single-row bar) */
  #nav-mobile .languages { padding: 0 15px; }
  /* Collapsed lists: full bar width × 0 height (live: 390×0 on a 390px
     viewport). #projects-list included for explicitness — index.css
     already gives it height:0. */
  #projects-list, #research-list, #academic-list, #exhibitions-list {
    width: 100%;
    height: 0;
    transition: height .25s;
  }
  /* 14px gap between a category title and its first item when expanded
     (live shows this via #projects-title's bottom padding, which our tight
     rows dropped) + 14px below the list before the next title — the
     desktop `ul .inner { padding: 14px … }` rhythm. */
  #projects-list .inner,
  #research-list .inner, #academic-list .inner, #exhibitions-list .inner {
    padding: 14px 15px;
  }
  #nav-mobile > ul { overflow: hidden; }
}

/* ── Project page: drawing area (3 layers) ───────────────── */
@media screen and (max-width: 800px) {
  /* image-container already set above — same sticky square rules */

  .image-layer {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
  }
  /* Stacking (bottom -> top): silhouette (layer-1) -> image_3/image_4 -> main (layer-2).
     The main axo (layer-2 = image_2) is applied LAST and sits on top, matching the
     canonical desktop DOM order in image-container.php. */
  .image-layer.layer-1 { z-index: 0; }
  .image-layer.layer-3 { z-index: 1; }
  .image-layer.layer-4 { z-index: 1; }
  .image-layer.layer-2 { z-index: 2; }

  /* All imgs: cover + left-align to match SVG xMinYMid slice */
  .image-layer img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: left center;
  }
  /* Silhouette layer SVGs — grey background is the page background colour */
  .image-layer svg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: #d9d8d2;
  }
  /* Axonometric (layer-2) must be transparent so the silhouette shows through */
  .image-layer.layer-2 > svg {
    background: transparent;
  }
  /* Project page DEFAULT view = clean silhouette only, like desktop live
     (where layer-2 is empty until JS fills it on interaction). Our inline
     main axo would otherwise show its hairline strokes as a dashed contour
     over the silhouette. Hide the base svg; the subcategory override
     (.override img, shown via .has-override) is unaffected. */
  main.main-project .image-layer.layer-2 > svg { display: none; }
  /* Axonometric overlay SVG inside .project-building MUST be transparent
     so the white silhouette beneath it remains visible.
     index.css sets .layer-1 path/polyline/polygon { fill:#fff } which
     incorrectly whitens the axonometric paths too — override with none. */
  .project-building svg {
    background: transparent !important;
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
  }
  .project-building path,
  .project-building polyline,
  .project-building polygon,
  .project-building circle,
  .project-building rect,
  .project-building line {
    fill: none !important;
  }
}

/* ── Project page: white panel ───────────────────────────── */
@media screen and (max-width: 800px) {
  .mobile-project-nav {
    position: relative; z-index: 1;
    background: #fff;
    border-top: 1px solid #000;
    font-family: 'Scto', sans-serif;
    font-size: 13.25px; font-weight: 700;
    line-height: 14px;
    /* White must reach the bottom of the screen even when the panel content
       is short: viewport height minus the square drawing above it. */
    min-height: calc(100vh - 100vw);
    /* block breathing like the bottom nav — rows inside are tight 14px lines */
    padding: 14px 0;
  }
  /* Project pages have no fixed bottom bar — the global 90px clearance
     would otherwise show as a grey strip under the white panel. */
  main.main-project { padding-bottom: 0 !important; }
  /* Level-1 buttons (Projects / Research / Academic) */
  /* Tight 14px rows, same rhythm as the bottom nav (block padding on the
     panel provides the breathing, not the rows) */
  .mpn-l1-btn {
    display: block; width: 100%;
    padding: 0 15px;
    background: #fff; border: none;
    font-family: 'Scto', sans-serif;
    font-size: 13.25px; font-weight: 700;
    line-height: 14px; text-transform: uppercase;
    text-align: left; color: #000;
    -webkit-tap-highlight-color: transparent;
  }
  .mpn-l1-btn:active { color: #c5c4bb; }
  .mpn-l1-content {
    height: 0; overflow: hidden;
    transition: height 0.25s ease;
  }

  /* Project title row — 14px gap above (from PROJECTS row), meta follows
     DIRECTLY below with no extra gap, exactly like the live desktop nav
     (a.single-project then .meta as consecutive 14px lines). */
  .mpn-l2-title {
    padding: 14px 15px 0 30px;
    font-family: 'Scto', sans-serif;
    font-size: 13.25px; font-weight: 700;
    line-height: 14px; color: #000;
  }

  /* Metadata block — same Scto Bold, no border, no separator.
     No top padding: Location: sits on the line right after the title. */
  .mpn-meta {
    padding: 0 15px 14px 30px;
    font-family: 'Scto', sans-serif;
    font-size: 13.25px; font-weight: 700; line-height: 14px;
  }
  /* nav-meta.php outputs .meta > .meta-item inside .mpn-meta */
  .mpn-meta .meta { all: unset; display: block; }
  .mpn-meta .meta-item { display: flex; margin-bottom: 1px; }
  .mpn-meta .meta-item label { min-width: 90px; font-weight: 700; }
  .mpn-meta .meta-item a { color: inherit; text-decoration: none; }
  /* Show ONLY Location / Architect / Type / Program on mobile project panels
     (shorter panel). Hide the rest — done in CSS, not by editing the shared
     desktop nav-meta.php. Each row carries its label as a class. */
  .mpn-meta .meta-item { display: none; }
  .mpn-meta .meta-item.location,
  .mpn-meta .meta-item.architect,
  .mpn-meta .meta-item.type,
  .mpn-meta .meta-item.program { display: flex; }

  /* Subcategory section — indented one level DEEPER than the meta (live
     desktop: li-l3 items live inside .inner, +15px relative to .meta) */
  .mpn-l3-section { padding: 0 15px 14px 45px; }
  /* Live blueprint: li-l3 titles are tight consecutive 14px lines —
     no vertical padding between + Project / + Architecture / + Climate */
  .mpn-l3-btn {
    display: block; width: 100%;
    padding: 0;
    background: none; border: none;
    font-family: 'Scto', sans-serif;
    font-size: 13.25px; font-weight: 700;
    line-height: 14px; text-align: left; color: #000;
    -webkit-tap-highlight-color: transparent;
  }
  .mpn-l3-btn:before { content: '+'; display: inline-block; width: 1rem; padding-right: .6rem; }
  .mpn-l3-btn.open:before { content: '–'; }
  .mpn-l3-btn:active { color: #c5c4bb; }

  /* Close — below the subcategories, at the SAME indent as the meta
     (live desktop: a.close after .inner, level with .meta) */
  .mpn-close {
    display: block;
    padding: 0 15px 14px 30px;
    font-family: 'Scto', sans-serif;
    font-size: 13.25px; font-weight: 700;
    line-height: 14px; color: #000;
    text-decoration: none;
  }
  .mpn-close:before {
    content: '✕ '; display: inline-block;
    transform: scale(0.7); transform-origin: left;
  }
  .mpn-close:active { color: #c5c4bb; }

  /* Inline panel section content */
  .mpn-section-content {
    height: 0; overflow: hidden;
    transition: height 0.25s ease;
    background: #fff;
  }

  /* Section body text — indented one level past the – Project marker,
     like desktop's ul.level-4 .inner (+30px); Scto Bold inherited like
     the desktop nav */
  .mpn-section-text {
    padding: 0 0 0 30px;
    font-family: 'Scto', sans-serif;
    font-size: 13.25px; font-weight: 700; line-height: 14px;
  }
  .mpn-section-text p { padding-bottom: 14px; }

  /* ── TRY01 — capped scrollable accordion ─────────────────────
     Open section: capped height so the rows below (+ other sections,
     Close, R&P / Academic / Exhibitions) stay visible at the bottom of
     the screen; content scrolls internally; a white gradient fades the
     content out where it meets what follows (same 42px white fade the
     live desktop uses above the languages row, index.css ~line 615).
     REVERT: delete this block (and nothing else).                    */
  .mpn-section-content.open {
    /* 65vw = drawing height still visible after the open-scroll covers ~35%
       of it (see activateLayers in mobile.js) */
    max-height: max(150px, calc(100vh - 65vw - 310px));   /* fallback */
    max-height: max(150px, calc(100dvh - 65vw - 310px));  /* dynamic viewport */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mpn-section-content.open::after {
    content: '';
    position: sticky;
    display: block;
    bottom: 0;
    width: 100%;
    height: 42px;
    margin-top: -42px;
    background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
    pointer-events: none;
  }
  /* TRY01: while a section is open, the panel becomes a viewport-bound flex
     column — ONLY the open section content absorbs the size change (it
     flexes + scrolls internally), so the trailing rows (Close, Research &
     Publications, Academic, Exhibitions) are always pinned on screen.
     Height = 100vh − 65vw (the panel's top sits at 65vw after the
     open-scroll in activateLayers). The !importants override the inline
     heights the accordion JS sets. */
  .mobile-project-nav.section-open {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 65vw);   /* fallback */
    height: calc(100dvh - 65vw);  /* dynamic viewport (phone URL bar) */
    overflow: hidden;
  }
  .mobile-project-nav.section-open .mpn-l1-content.open {
    flex: 1 1 0;
    min-height: 0;
    height: auto !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }
  .mobile-project-nav.section-open .mpn-l1-content.open .mpn-l3-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .mobile-project-nav.section-open .mpn-section-content.open {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none;
  }
  /* ── /TRY01 ─────────────────────────────────────────────────── */
  .mpn-section-content .panel-block {
    margin-right: 0; padding: 14px 15px;
    border-bottom: 1px dashed #000;
  }
  .mpn-section-content .panel-block:last-child { border-bottom: none; }
  .mpn-section-content figure { width: 100% !important; margin: 0 0 8px; }
  .mpn-section-content figure img {
    width: 100%; height: auto; display: block; padding-bottom: 0;
  }

  /* Layered figures: always show info (top) layer */
  .mpn-section-content .layered { position: relative; }
  .mpn-section-content .layered img { position: absolute; top: 0; left: 0; width: 100%; }
  .mpn-section-content .layered img:first-child { position: relative; }
  .mpn-section-content .layered img.info { z-index: 10; }
  .mpn-section-content .layered img.graphic { z-index: 1; }

  /* Typography inside panel blocks */
  .mpn-section-content .title {
    text-decoration: underline; padding: 8px 0 4px;
    font-family: 'Styrene', sans-serif; font-size: 11.5px; line-height: 14px;
  }
  .mpn-section-content .legenda { margin-bottom: 8px; }
  .mpn-section-content .legenda-item { display: flex; align-items: flex-start; margin-bottom: 3px; }
  .mpn-section-content .legenda-item .tile {
    width: 2.5em; min-width: 2.5em; height: 0.7em;
    margin-top: 0.225em; margin-right: .3em; flex-shrink: 0;
  }
  .mpn-section-content .description {
    font-family: 'Styrene', sans-serif; font-size: 11.5px; line-height: 14px;
  }
  .mpn-section-content .scale ul { display: flex; width: 100%; }
  .mpn-section-content .scale .scale-item { flex: 1; }
  .mpn-section-content .scale .scale-item .tile { height: 0.7em; }
  /* The scale numbers (0 10 20 30…) — Styrene like desktop; without this they
     inherit Scto from the .mobile-project-nav panel (the wrong font). */
  .mpn-section-content .scale .text,
  .mpn-section-content .scale .unit {
    font-family: 'Styrene', sans-serif; font-size: 11.5px; line-height: 14px;
  }
  .mpn-section-content .scale .unit { margin-top: 4px; }
  .mpn-section-content .block-description {
    font-family: 'Styrene', sans-serif; font-size: 11.5px; line-height: 14px; padding-top: 4px;
  }
  .mpn-section-content .block-description p { padding-bottom: 8px; }

  /* Nav list items — EXACT same rhythm as the bottom-nav lists
     (#projects-list .inner): 14px gap above/below, 15px indent,
     tight 14px lines */
  .mpn-list { padding: 14px 15px; list-style: none; }
  .mpn-list li { padding: 0; }
  .mpn-list a {
    display: block;
    color: #000; text-decoration: none;
    font-family: 'Scto', sans-serif;
    font-size: 13.25px; font-weight: 700; line-height: 14px;
  }
  .mpn-list a:active { color: #c5c4bb; }
}

/* ── R&P / Academic / Exhibition item pages ───────────────────
   The panel reuses the mpn-* classes from the project panel — identical
   rhythm, spacing and indents. Page-specific bits only:              */
@media screen and (max-width: 800px) {
  /* Hide desktop text column — content is in the mobile panel */
  .main-generic-item .main-text-content { display: none; }

  /* Upper part (logo block + section description) is WHITE, like the live
     desktop, and ALWAYS VISIBLE: the page is viewport-locked (main = 100vh
     flex column, no page scroll) — the panel takes exactly the remaining
     space below the text and scrolls internally when needed. */
  main.main-generic-item,
  .page[data-barba-namespace="l1-generic-category"] main {
    display: flex;
    flex-direction: column;
    height: 100vh !important;   /* fallback */
    height: 100dvh !important;  /* dynamic viewport: tracks the phone URL bar,
                                   so logo + description are ALWAYS fully
                                   visible and the panel gets exactly the rest */
    overflow: hidden;
    padding-bottom: 0;
  }
  .mgn-intro-text {
    display: block;
    flex: 0 0 auto;
    margin-top: 42px;                 /* below the logo block */
    padding: 14px 15px;
    font-family: 'Styrene', sans-serif;
    font-size: 11.5px; line-height: 14px;
  }
  .mgn-intro-text p { padding-bottom: 14px; }
  .mobile-generic-nav {
    position: relative; z-index: 1;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;                 /* panel scrolls internally if needed */
    background: #fff;
    border-top: 1px solid #000;
    margin-top: 42px;                 /* below the logo block (no-text fallback) */
    padding: 14px 0;                  /* same block breathing as the panels */
    font-family: 'Scto', sans-serif;
    font-size: 13.25px; font-weight: 700;
    line-height: 14px;
  }
  /* when the description precedes the panel, it already provides the offset */
  .mgn-intro-text + .mobile-generic-nav { margin-top: 0; }

  /* TRY01 on these pages too — same rules as + Project: when + Content is
     open, only the content flexes/scrolls (fade applies), bottom rows stay
     pinned. The panel already fills its viewport slot (flex above) — it
     just switches from its own scrolling to internal flex layout. */
  .mobile-generic-nav.section-open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .mobile-generic-nav.section-open .mpn-l1-content.open {
    flex: 1 1 0;
    min-height: 0;
    height: auto !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }
  .mobile-generic-nav.section-open .mpn-l1-content.open .mpn-l3-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .mobile-generic-nav.section-open .mpn-section-content.open {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none;
  }

  /* Category pages (l1-generic-category, main.main-default): same mobile
     panel; hide the desktop text column; no fixed bottom bar */
  .page[data-barba-namespace="l1-generic-category"] .main-text-content { display: none; }
  .page[data-barba-namespace="l1-generic-category"] main { padding-bottom: 0; }
}

/* ── Panel (desktop right side): hide on mobile ──────────── */
@media screen and (max-width: 800px) {
  .panel-container { display: none !important; }
}