/* Device fixes (device QA, 29 Oct 2026): foldables (Apple iPhone Duo, Galaxy Z Fold and Flip,
   Pixel Fold), Surface Duo spanned, Safari split view, small phones and in-app browsers.
   Source: integrated/pages/assets/device.css. scripts/build_pages.py copies it to public/assets
   and links it last in the head of every page, with js/device.js. */

/* 1. Hero sample video on /video and /grandparents/video: the <video> kept its 640x360
   attributes inside the 16:10 frame (overflow hidden), so phones played only its top left part. */
.vframe > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vframe.gr-real > video { object-fit: contain; }

/* 2. Very narrow screens (iPhone Duo split view 313 px, Fold cover 344 px): the shop, gift guide,
   template and guide headers keep the logo on one line and the top link on screen. */
@media (max-width: 380px) {
  header.top .wrap { gap: 10px; }
  header.top .brand { font-size: 18px; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
  header.top .top-cta { font-size: 13px; flex: 0 0 auto; }
}
@media (max-width: 330px) {
  header.top .top-cta { display: none; }
}

/* 3. Cookie bar: js/device.js keeps room for it at the end of the page and when a field scrolls
   into view (scroll padding and a spacer of the bar's height), so it never hides the last button
   or the field being typed in. While the keyboard is up (html.lfs-typing) the bar and the sticky
   buy bar step aside; they come back when the field loses focus. */
#lfs-dev-room { display: block; width: 100%; pointer-events: none; }
html.lfs-typing .lfs-cc { transform: translateY(calc(100% + 24px)); transition: transform .15s ease-out; }
html.lfs-typing .mbar { transform: translateY(110%) !important; }
@media (prefers-reduced-motion: reduce) { html.lfs-typing .lfs-cc { transition: none; } }
/* The bar at the top instead (js/device.js adds html.lfs-cc-top when, at the bottom, it would
   cover the email field or the main button on the first screen). */
html.lfs-cc-top .lfs-cc { top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto !important; }
html.lfs-cc-top .mbar { bottom: 0 !important; }
html.lfs-cc-top.lfs-typing .lfs-cc { transform: translateY(calc(-100% - 24px - env(safe-area-inset-top, 0px))); }
@media (max-width: 560px) {
  html.lfs-cc-top .lfs-cc { top: 0; border-radius: 0 0 14px 14px; border-width: 0 0 2px; border-bottom: 2px solid #c9a35b; padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 4px !important; }
}

/* 4. Dual screen spanned (Surface Duo, foldables in two pane mode): one pane, nothing under the
   hinge. The page uses the first screen; fixed bars and popups stay on it too. */
@media (horizontal-viewport-segments: 2) {
  body { width: env(viewport-segment-width 0 0, 100%); max-width: env(viewport-segment-width 0 0, 100%); margin-right: auto; box-sizing: border-box; overflow-x: hidden; }
  .lfs-cc, .gr-ov, #lfs-coemail, #mbar, #mbcta, .lfs-toast { right: calc(100vw - env(viewport-segment-right 0 0, 100vw)) !important; max-width: none; }
  .lfs-cc { left: 0 !important; }
  /* Rows laid out for a wide screen squeeze into the one pane: stack them (the SEO email row). */
  .lead-row { grid-template-columns: minmax(0, 1fr) !important; }
  html .gr-ov .gr-dlg, #lfs-coemail > form { max-width: min(520px, calc(env(viewport-segment-width 0 0, 100vw) - 24px)); }
}
/* Folded half open (iPhone Duo tent or laptop posture, Galaxy Flex mode): popups and sheets stay
   on the top half, above the fold. */
@media (vertical-viewport-segments: 2) {
  .gr-ov, #lfs-coemail { bottom: calc(100vh - env(viewport-segment-bottom 0 0, 100vh)) !important; }
  /* html .gr-ov beats the rule js/growth.js adds at run time, which comes later in the page. */
  html .gr-ov .gr-dlg { max-height: calc(env(viewport-segment-height 0 0, 92vh) - 8px - env(safe-area-inset-top, 0px)); }
}

/* 5. The sticky buy bar stays on phones in landscape (re review N4); it steps aside only on very
   short screens (under about 320 px, the iPhone Duo with the video pinned) and while the keyboard
   is up (device.js sets lfs-kb from the visual viewport, lfs-typing while a field has focus). */
@media (max-height: 320px) {
  #mbar, #mbcta { display: none !important; }
}
html.lfs-kb #mbar, html.lfs-kb #mbcta, html.lfs-typing #mbar, html.lfs-typing #mbcta { display: none !important; }