/* ============================================================
   Local runtime overrides
   Rules Cargo applied via inline styles or its own JS, plus the
   requested deviations from the original (marked CHANGE).
   ============================================================ */

/* --- responsive header swap -------------------------------
   Cargo ships two header pages; only one is shown per breakpoint. */
.mobile-only { display: none !important; }
html.mobile .mobile-only { display: flex !important; }
html.mobile .desktop-only { display: none !important; }

/* --- video backdrop ---------------------------------------
   The engine stylesheet already positions .video_background,
   .video_wrapper_outer/_inner and .video_embed, centring them with
   `left/right: -2000px; margin: auto`. Do NOT set position/left/top
   on those here -- it over-constrains the centring and the video
   lands off-screen. Only the outer container needs help. */
.backdrop {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.backdrop-contents { position: absolute; inset: 0; overflow: hidden; }
/* CHANGE: poster frame behind the video, so the page shows the scene
   immediately instead of YouTube's black buffering screen. The iframe
   fades in over it once playback actually starts (see site.js). */
.backdrop_background {
  position: absolute; inset: 0;
  background-image: url("../img/video-poster.jpg");
  background-size: cover;
  background-position: center;
}
.video_embed { border: 0; }

/* Page content sits above the video. */
[page-url="oversized-title"] .page-layout,
[page-url="oversized-title"] .page-content { position: relative; z-index: 1; }

/* --- pinned header / footer ------------------------------- */
.page.pinned.pinned-top.fixed {
  position: fixed; top: 0; left: 0; right: 0; width: 100%;
}
.page.pinned.pinned-bottom {
  position: fixed; bottom: 0; left: 0; right: 0; width: 100%;
}

/* CHANGE: centre the middle item on the true page centre.
   Originally these sat inside their own grid column, so
   remotemagazine.com started at the 1/3 mark and the clock at the
   9/12 mark rather than being optically centred. Taking them out of
   flow and spanning the full width centres them exactly; the last
   unit flex-grows to keep "shop" and the arrow hard right. */
[page-url="header-desktop"] column-unit[slot="1"],
[page-url="footer"] column-unit[slot="1"] {
  position: absolute;
  left: 0;
  right: 0;
  width: auto !important;
  text-align: center;
  pointer-events: none;
}
[page-url="header-desktop"] column-unit[slot="1"] a,
[page-url="footer"] column-unit[slot="1"] a { pointer-events: auto; }

/* --- overlay pages ----------------------------------------
   Overlays paint above the pinned header/footer (z 399/395). The
   engine only defines --viewport-height on stacked pages, so overlays
   declare their own. */
.overlay-page {
  position: relative;
  z-index: 400;
  width: 100%;
  --viewport-height: 100svh;
  min-height: var(--viewport-height);
}

/* Full-width overlays (Information, Index) replace the scroll stack. */
body.overlay-open:not([data-overlay="example-project-1-info"]) .pages { display: none; }

/* CHANGE: the shop panel slides in from the right as a true overlay.
   Originally it had no transition and blanked the page behind it. Now
   the site stays visible underneath and the panel animates in. */
body[data-overlay="example-project-1-info"] .overlay-page {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  width: 25%;
  min-width: 320px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Start off-screen; site.js animates it in and out with the Web Animations
     API. No CSS transition here -- a transition on a newly-inserted element
     is unreliable and used to make the panel appear instantly. */
  transform: translateX(100%);
  will-change: transform;
  box-shadow: -1px 0 24px -6px rgba(0, 0, 0, 0.18);
}
body[data-overlay="example-project-1-info"] .overlay-page.is-open { transform: translateX(0); }

/* The panel fills its own width -- the 25% now lives on the panel.
   .page-layout's 1rem padding is dropped so the neon reaches the panel
   edges; .page-content keeps its own 1rem padding, so the text inset is
   unchanged. Without this the padding ring is transparent and shows the
   page behind it as a white border down the left edge. */
body[data-overlay="example-project-1-info"] .overlay-page {
  background-color: rgba(216, 255, 33, 0.99);
}
body[data-overlay="example-project-1-info"] .overlay-page .page-layout {
  max-width: 100% !important;
  width: 100%;
  padding: 0;
}
body[data-overlay="example-project-1-info"] .overlay-page .page-content {
  min-height: 100%;
  width: 100%;
}

/* On phones the panel takes the full screen. */
html.mobile body[data-overlay="example-project-1-info"] .overlay-page,
body.mobile[data-overlay="example-project-1-info"] .overlay-page {
  width: 100%;
  min-width: 0;
}

/* Under reduced-motion site.js skips the animation and applies the final
   state directly, so nothing further is needed here. */