/* ============================================================
   GALIS COLLECTIONS — PORTRAIT / MOBILE PREVIEW
   ------------------------------------------------------------
   REVIEW CONVENIENCE ONLY. Every rule here is scoped under
   body[data-mode="mobile"], which app.jsx sets only when the
   viewport is narrow / portrait. The 1920×1080 landscape kiosk
   (body[data-mode="kiosk"] or unset) never sees any of this and
   stays 100% as designed for dedicated hardware.

   What it does: bypasses the fixed scaled canvas and lays the
   SAME screens out as a fluid, single-column, vertically
   scrolling web page that fills the viewport width.
   ============================================================ */

/* ---- un-fix the page so it flows + scrolls naturally ---- */
body[data-mode="mobile"] {
  --margin: 18px;            /* the big lever — most padding uses var(--margin) */
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--paper);
}

body[data-mode="mobile"] #viewport {
  position: static;
  inset: auto;
  display: block;
  overflow: visible;
  background: var(--paper);
}

body[data-mode="mobile"] #stage {
  position: static;
  width: 100%;
  height: auto;
  min-height: 100dvh;
  transform: none !important;   /* defeat the inline scale() from app.jsx */
  overflow: visible;
}

/* only the active screen, in normal flow (kiosk uses opacity layers) */
body[data-mode="mobile"] .screen {
  display: none;
  position: static;
  inset: auto;
  height: auto;
  opacity: 1;
  visibility: visible;
  transition: none;
}
body[data-mode="mobile"] .screen.is-active {
  display: flex;
  position: relative;        /* anchor for full-bleed absolute children (attract) */
  min-height: 100dvh;
  pointer-events: auto;
}
body[data-mode="mobile"] .screen-inner {
  height: auto !important;
  transform: none !important;
  animation: none !important;
}

/* inner scroll regions become part of the page scroll */
body[data-mode="mobile"] .home-scroll,
body[data-mode="mobile"] .browse-scroll,
body[data-mode="mobile"] .search-scroll,
body[data-mode="mobile"] .sel-scroll,
body[data-mode="mobile"] .cmp-scroll,
body[data-mode="mobile"] .detail-text {
  overflow: visible;
  flex: none;
  height: auto;
  min-height: 0;
}

/* ============================================================
   Shared chrome — slim top bars, smaller controls
   ============================================================ */
body[data-mode="mobile"] .topbar,
body[data-mode="mobile"] .home-top,
body[data-mode="mobile"] .detail-top {
  height: auto;
  min-height: 56px;
  padding: 8px 14px;
  gap: 4px;
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body[data-mode="mobile"] .bar-mark,
body[data-mode="mobile"] .home-mark {
  font-size: 14px; letter-spacing: 0.26em; padding: 6px 4px;
}
body[data-mode="mobile"] .home-mark span { display: none; }
body[data-mode="mobile"] .ctl,
body[data-mode="mobile"] .back {
  min-height: 44px; padding: 0 8px;
  font-size: 10px; letter-spacing: 0.08em; gap: 6px;
}
body[data-mode="mobile"] .lang button { padding: 6px 7px; font-size: 11px; }
body[data-mode="mobile"] .sel-tab { min-height: 44px; padding: 0 8px; font-size: 10px; }
body[data-mode="mobile"] .home-top-right { gap: 4px; }

/* ============================================================
   ATTRACT — already full-bleed; just shrink the type
   ============================================================ */
body[data-mode="mobile"] .attract-ui { padding: 28px 22px 34px; }
body[data-mode="mobile"] .attract-mark { font-size: 12px; letter-spacing: 0.34em; }
body[data-mode="mobile"] .attract-foot { flex-direction: column; align-items: flex-start; gap: 22px; }
body[data-mode="mobile"] .attract-caption { max-width: 100%; }
body[data-mode="mobile"] .attract-title { font-size: 42px; }
body[data-mode="mobile"] .attract-meta { font-size: 18px; margin-top: 12px; }
body[data-mode="mobile"] .attract-prompt { font-size: 12px; letter-spacing: 0.22em; }

/* ============================================================
   HOME — hero + featured object stack to one column
   ============================================================ */
body[data-mode="mobile"] .hero {
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 30px var(--margin) 40px;
}
body[data-mode="mobile"] .hero-text h1 { font-size: 38px; }
body[data-mode="mobile"] .hero-text .hero-orig { font-size: 20px; }
body[data-mode="mobile"] .hero-text .hero-blurb { font-size: 18px; max-width: 100%; }
body[data-mode="mobile"] .hero-cta { min-height: 52px; }
body[data-mode="mobile"] .hero-media {
  order: -1;                  /* image above the text reads better on a phone */
  height: auto; aspect-ratio: 4 / 3; padding: 20px;
}

body[data-mode="mobile"] .home-tl .htl {
  grid-template-columns: 1fr; gap: 26px; padding-top: 40px;
}
body[data-mode="mobile"] .htl-text h2 { font-size: 34px; }
body[data-mode="mobile"] .htl-blurb { font-size: 18px; max-width: 100%; }

body[data-mode="mobile"] .rooms { padding: 30px var(--margin) 70px; }
body[data-mode="mobile"] .rooms-label { padding-top: 32px; padding-bottom: 30px; }
body[data-mode="mobile"] .rooms-grid {
  grid-template-columns: repeat(2, 1fr); gap: 28px 16px;
}
body[data-mode="mobile"] .room h3 { font-size: 21px; }
body[data-mode="mobile"] .room-blurb { display: none; }   /* density on a small screen */
body[data-mode="mobile"] .room-all-inner { padding: 0 22px; }
body[data-mode="mobile"] .room-all h3 { font-size: 21px; }

/* ============================================================
   BROWSE — masonry collapses to a 2-up phone grid
   ============================================================ */
body[data-mode="mobile"] .collection-head { padding: 30px var(--margin) 0; }
body[data-mode="mobile"] .collection-head h1 { font-size: 40px; }
body[data-mode="mobile"] .collection-head .lede { font-size: 19px; max-width: 100%; }
body[data-mode="mobile"] .filters { padding: 26px var(--margin) 0; gap: 2px; }
body[data-mode="mobile"] .filter { min-height: 46px; padding: 0 14px; font-size: 11px; }
body[data-mode="mobile"] .filter[aria-pressed="true"]::after { left: 14px; right: 14px; }
body[data-mode="mobile"] .grid {
  column-count: 2; column-gap: 16px;
  padding: 30px var(--margin) 70px;
}
body[data-mode="mobile"] .card { margin-bottom: 34px; }
body[data-mode="mobile"] .card-meta { padding-top: 14px; }
body[data-mode="mobile"] .card-meta .ctitle { font-size: 19px; }
body[data-mode="mobile"] .card-meta .corig { font-size: 14px; }
body[data-mode="mobile"] .card-meta .cline { font-size: 12px; margin-top: 8px; }

/* ============================================================
   DETAIL — image over text, single column
   ============================================================ */
body[data-mode="mobile"] .detail-body {
  display: flex; flex-direction: column; min-height: 0;
}
body[data-mode="mobile"] .detail-figure-col {
  border-right: 0; border-bottom: 1px solid var(--hairline);
}
body[data-mode="mobile"] .detail-figure {
  padding: 22px 16px 78px;   /* bottom room reserved for the floating controls */
  min-height: 58vh;
}
body[data-mode="mobile"] .figure-mount { padding: 18px; }
body[data-mode="mobile"] .figure-mount img { max-height: 52vh; }
/* keep the prev/next nav, push it to the bottom; move actions up-right; drop the duplicate caption */
body[data-mode="mobile"] .figure-cap { display: none; }
body[data-mode="mobile"] .figure-nav { left: 14px; right: 14px; bottom: 22px; gap: 16px; }
body[data-mode="mobile"] .figure-nav .navbtn { width: 52px; height: 52px; }
body[data-mode="mobile"] .figure-actions { top: 14px; right: 14px; bottom: auto; }

body[data-mode="mobile"] .detail-text { padding: 30px var(--margin) 40px; }
body[data-mode="mobile"] .detail-text h2 { font-size: 32px; }
body[data-mode="mobile"] .detail-text .orig { font-size: 19px; }
body[data-mode="mobile"] .meta { gap: 14px 24px; margin-top: 30px; padding-top: 26px; }
body[data-mode="mobile"] .meta dd { font-size: 17px; }
body[data-mode="mobile"] .descr { font-size: 18px; margin-top: 28px; padding-top: 26px; }
body[data-mode="mobile"] .similar {
  padding: 18px var(--margin) 22px; flex-direction: column; gap: 12px; align-items: flex-start;
}
body[data-mode="mobile"] .similar-row { gap: 18px 26px; }

/* ============================================================
   SEARCH / SELECTION / COMPARE / TIMELINE — secondary screens,
   keep them usable (fluid columns, smaller type)
   ============================================================ */
body[data-mode="mobile"] .search-field { padding: 18px var(--margin); gap: 14px; }
body[data-mode="mobile"] .sf-input { font-size: 30px; }
body[data-mode="mobile"] .search-suggest { padding: 36px var(--margin); }
body[data-mode="mobile"] .chip { font-size: 18px; min-height: 50px; padding: 0 20px; }

body[data-mode="mobile"] .sel-body {
  grid-template-columns: 1fr; gap: 40px; padding: 36px var(--margin) 80px;
}
body[data-mode="mobile"] .sel-grid { column-count: 1; }
body[data-mode="mobile"] .takehome { position: static; }
body[data-mode="mobile"] .sel-empty h1 { font-size: 40px; }
body[data-mode="mobile"] .sel-empty p { font-size: 19px; }

body[data-mode="mobile"] .cmp-body {
  grid-template-columns: 1fr; gap: 30px; padding: 30px var(--margin) 8px;
}
body[data-mode="mobile"] .cmp-mid { padding: 8px 0; }
body[data-mode="mobile"] .cmp-mid .cmp-swap svg { transform: rotate(90deg); }
body[data-mode="mobile"] .cmp-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; text-align: center; }
body[data-mode="mobile"] .cmp-val-a, body[data-mode="mobile"] .cmp-val-b { text-align: center; padding: 0; }
body[data-mode="mobile"] .cmp-table { margin: 30px var(--margin) 80px; }
body[data-mode="mobile"] .s2s { margin: 14px var(--margin) 18px; }

/* timeline is an inherently wide/landscape band — let it scroll within,
   just fit the head + scrubber to the narrow width */
body[data-mode="mobile"] .tl-head { height: auto; padding: 14px var(--margin); flex-wrap: wrap; gap: 10px; }
body[data-mode="mobile"] .tl-head h1 { font-size: 30px; }
body[data-mode="mobile"] .tl-head .tl-lede { font-size: 15px; text-align: left; max-width: 100%; }
body[data-mode="mobile"] .tl-scrubwrap { padding: 0 var(--margin); }
body[data-mode="mobile"] .tl-scrub { width: 100%; }

/* generic guard: nothing should force horizontal overflow */
body[data-mode="mobile"] .home,
body[data-mode="mobile"] .timeline { max-width: 100vw; }