/* ==================== Adaptive layout — orientation, dynamic viewport, foldables ====================
   Loaded after style.css so it overrides where needed. Targets Pixel Fold,
   Galaxy Fold/Flip, Surface Duo and any device that fires viewport-segments
   or orientation changes mid-session.

   Strategy:
   1. Replace 100vh with 100dvh on critical full-height containers so the
      layout reflows when Chrome's URL bar shows/hides during a fold/unfold.
   2. Use viewport-segment env() vars when the device exposes a fold/hinge.
   3. Container queries on key modules so cards reflow with their parent,
      not just the global viewport. */

/* --- 1. Dynamic viewport units — Chrome's URL bar shows/hides on a fold --- */
@supports (height: 100dvh) {
    .app-layout > main { min-height: calc(100dvh - var(--topbar-height)); }
}

/* --- 2. Foldable: horizontal hinge (book mode — segments side-by-side) ---
   Pixel Fold opened in landscape, Surface Duo book mode. Two-column split
   along the hinge: nav rail in left segment, content in right. */
@media (horizontal-viewport-segments: 2) {
    html { --fold-orientation: book; }
    .app-layout {
        display: grid;
        grid-template-columns:
            env(viewport-segment-width 0 0, 1fr)
            env(viewport-segment-width 1 0, 1fr);
        column-gap: env(viewport-segment-left 1 0, 0px);
        max-width: none;
    }
    .app-layout > main { min-width: 0; }
    /* Avoid sticky elements straddling the hinge */
    body.benzo-ready > nav.bottom { left: 0; right: env(viewport-segment-width 1 0); }
}

/* --- 3. Foldable: vertical hinge (laptop mode — segments stacked) ---
   Surface Duo posture, Pixel Fold half-folded standing up. Top segment for
   primary content, bottom for nav/secondary. */
@media (vertical-viewport-segments: 2) {
    html { --fold-orientation: laptop; }
    .app-layout { max-width: none; }
    body.benzo-ready > nav.bottom {
        position: fixed;
        top: env(viewport-segment-bottom 0 0);
        bottom: auto;
        height: env(viewport-segment-height 0 1);
    }
}

/* --- 4. Pixel Fold inner display unfolded (no hinge reported, just very wide
   tablet aspect ratio ~6:5). Promote to 2-pane when wide enough. --- */
@media (min-width: 840px) and (orientation: portrait) {
    .app-layout { max-width: 1080px; }
}

/* --- 5. Container queries: dashboard quick-actions reflow with parent ---
   Beer CSS lays out quick-actions as <div class="grid"><div class="s6">…</div></div>.
   We promote the `.grid:has(.quick-action)` to a container and override the
   `s6` (50%) child width when the container itself becomes wide enough,
   regardless of viewport size — this is what makes the layout react to
   half-folded foldables where the global viewport stays narrow but the
   content pane is wide. */
@supports (container-type: inline-size) and (selector(:has(*))) {
    .app-layout > main { container-type: inline-size; container-name: app-main; }

    .grid:has(> .s6 > .quick-action) {
        container-type: inline-size;
        container-name: quick-actions;
    }
    @container quick-actions (min-width: 600px) {
        .grid:has(> .s6 > .quick-action) > .s6 { grid-column: span 3; }
    }
    @container quick-actions (min-width: 900px) {
        .grid:has(> .s6 > .quick-action) > .s6 { grid-column: span 2; }
    }
}

/* --- 6. Smooth orientation changes — disable layout transitions to avoid
   janky animation while the viewport is mid-resize on a fold. --- */
html[data-fold-transitioning] *,
html[data-fold-transitioning] *::before,
html[data-fold-transitioning] *::after {
    transition: none !important;
    animation-duration: 0s !important;
}

/* --- 7. Forced-portrait elements: relax for tablet/foldable widths --- */
@media (min-width: 600px) {
    /* Prevent hard width caps on landing/marketing sections at fold widths */
    .disclaimer-banner { max-width: none; }
}