/* =========================================================================
   Foldables: iPhone Duo and friends                          (2026-09-11)
   -------------------------------------------------------------------------
   Apple's "Designing for iPhone Duo" (HIG, published 2026-09-09) publishes
   no fixed device dimensions on purpose. It asks for layouts that adapt to
   SHAPE via safe areas and size classes, and explicitly warns against
   "fixed widths or anything tied to a specific display". Three consequences
   for a website:

   1. Safe areas matter on ALL FOUR sides. On the outer display, and on the
      inner display in landscape, the system moves its controls, the status
      bar and the camera to the SIDE instead of the top and bottom, so the
      left/right insets stop being zero. They only resolve at all when the
      viewport meta carries viewport-fit=cover (added to header.php).

   2. The outer display is "wider and shorter" than other iPhone displays,
      so anything measured in viewport height gets cramped. dvh plus a
      short-viewport tier keeps the booking search reachable without a
      scroll, which is the whole job of the hero.

   3. The folding region divides the inner display down the middle while the
      device is part-open. Content should avoid the centre line, and grids
      want an even number of columns so they divide cleanly.

   Everything below uses max() against the existing value, so a device with
   no insets renders exactly as it did before.
   ========================================================================= */

/* --- 1. Side safe areas on the full-width containers -------------------- */
.container,
.container-narrow {
    padding-left:  max(var(--vri-gap-xl), env(safe-area-inset-left));
    padding-right: max(var(--vri-gap-xl), env(safe-area-inset-right));
}

.vri-header__inner {
    padding-left:  max(var(--vri-gap-lg), env(safe-area-inset-left));
    padding-right: max(var(--vri-gap-lg), env(safe-area-inset-right));
}
@media (max-width: 640px) {
    /* keeps the mobile capsule inset from header.css, floored by the inset */
    .vri-header__inner {
        padding-left:  max(clamp(12px, 4vw, var(--vri-gap-lg)), env(safe-area-inset-left));
        padding-right: max(clamp(12px, 4vw, var(--vri-gap-lg)), env(safe-area-inset-right));
    }
}

.vri-footer__container {
    padding-left:  max(var(--vri-gap-xl), env(safe-area-inset-left));
    padding-right: max(var(--vri-gap-xl), env(safe-area-inset-right));
}

.vri-hero__content--editorial {
    padding-left:  max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
}

/* --- 2. Dynamic viewport height ---------------------------------------- */
/* 100vh is wrong twice over here: it ignores browser chrome, and on a short
   outer display it reserves more height than exists. */
@supports (height: 100dvh) {
    .vri-hero { min-height: 100dvh; }
    div.vri-results-map-section {
        height: calc(100dvh - var(--vri-header-height)) !important;
    }
}

/* --- 3. Short viewport: the outer display, and any phone in landscape --- */
/* Wider than it is tall and not much of it: collapse the hero's vertical
   drama so the search bar stays on screen. */
@media (max-height: 560px) and (min-width: 480px) {
    /* front-page.php sets the hero type inline with !important, so these
       selectors carry extra specificity to win regardless of source order. */
    section.vri-hero {
        min-height: 0 !important;
        padding-top: calc(var(--vri-header-height) + 8px);
        padding-bottom: 16px;
    }
    .vri-hero .vri-hero__title--editorial {
        font-size: clamp(1.7rem, 4.6vw, 2.6rem) !important;
        letter-spacing: 0.08em !important;
        line-height: 1 !important;
    }
    .vri-hero .vri-hero__title-hotel {
        font-size: 0.56em;
        letter-spacing: 0.24em;
        margin-right: -0.24em;
    }
    .vri-hero .vri-hero__rule { margin: 8px auto 8px !important; }
    .vri-hero .vri-hero__lede {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        max-width: 680px;
        margin-bottom: 12px !important;
    }
    .vri-hero .vri-hero__content--editorial { margin-bottom: 10px !important; }
    /* The search bar stacks into four rows below 640px. Forcing it back into
       a row collides the fields, so keep the stack and just make each row
       shorter: same layout, less height. */
    .vri-hero .vri-hero__search { margin-bottom: 0; }
    .vri-search-bar { padding: 4px !important; }
    .vri-sb-field { height: 44px !important; }
    .vri-sb-submit, .vri-search-bar button[type="submit"] { height: 46px !important; }
}

/* --- 4. Folding region -------------------------------------------------- */
/* While the device is part-open the centre of the inner display is folded
   away. Anything that must stay readable gets nudged off the centre line,
   and full-bleed media keeps its subject out of the middle. Browsers that
   expose the fold as a viewport segment get the precise treatment; the rest
   inherit the safe defaults above. */
@media (horizontal-viewport-segments: 2) {
    /* Two side-by-side segments: stop stretching single rows across the
       hinge and let the natural columns take one segment each. */
    .vri-hero__search { max-width: 46vw; margin-left: auto; margin-right: auto; }
    .container,
    .container-narrow { padding-left: 4vw; padding-right: 4vw; }
}
@media (vertical-viewport-segments: 2) {
    /* Book pose: the fold runs across the middle, so avoid tall media that
       would be bisected. */
    .vri-hero { min-height: 0; }
}