/*
 * VALDIER V3 — Shift experiment (shift/index.html only).
 *
 * The hero booking card starts as a compact preview on the right and, when
 * opened, travels over the editorial column and becomes the editorial
 * booking form (design-system/src/islands/ShiftIsland.vue sets [data-shift]
 * on the card and animates it). The homepage does not load this file.
 *
 *   closed           the card in its own place, over the photograph
 *   opening / open   desktop (>= 992px): absolute at the top of the hero
 *                    grid, as wide as its first column (--shift-open-w),
 *                    as tall as its content (nothing scrolls inside: the
 *                    page is the only scroller);
 *                    no card left: no radius or shadow, on the page's own
 *                    white, the form on the page's gutter. The column underneath
 *                    stays put under a soft white veil; the photograph is
 *                    untouched. Narrower (ShiftIsland sets
 *                    [data-shift-present]): phones (the field sheets'
 *                    breakpoint) a bottom sheet, tablets a centred dialog,
 *                    both as tall as their contents, over a dimmed page.
 *   closing          desktop: back in its place; sheet / dialog: still fixed
 *                    while they leave.
 *
 * The grid row is at least as tall as the open card (--shift-row-h, measured
 * by the island), so the hero never changes height while the card moves and
 * nothing is cut at its bottom; on a short screen the island scrolls the
 * page to bring the open card into view.
 */

/* The island draws the padding inside (.vs-shift__body). */
.hero_booking_card[data-island-variant='shift'][data-island-mounted] {
  --vs-cta-h: var(--v-control-lg, 3.625rem); /* Start booking's height (island.css) */
  position: relative;
  z-index: 2;
  padding: 0;
  overflow: hidden;
}

/* Closed: Start booking floats on the card's bottom edge, half outside (island.css .vs-shift__cta). The card lets it
   out (its body still clips the hidden form) and keeps that half as its own bottom margin, so the hero's grid centres
   the card with its floating half and the next content never runs under it. Travelling and open: clipped, no margin
   (the button is hidden then). */
.hero_booking_card[data-island-variant='shift'][data-island-mounted][data-shift='closed'] {
  margin-bottom: calc(var(--vs-cta-h) / 2);
  overflow: visible;
}

/* The inside of the card: 500px wide at most, the width of the HTML card on
   phones (viewport minus the hero gutters) below that. */
.hero_booking_card[data-island-variant='shift'] > .vb-island {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: min(31.25rem, 100vw - 2.5rem);
  min-height: 0;
}

@media screen and (min-width: 992px) {
  #vario-header-02 .hero_content-grid {
    position: relative;
    min-height: var(--shift-row-h, auto);
  }

  .hero_booking_card[data-island-variant='shift'] > .vb-island {
    width: 100%;
  }

  .hero_booking_card[data-island-variant='shift'][data-island-mounted]:is([data-shift='opening'], [data-shift='open']) {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: var(--shift-open-w, 31.25rem);
    max-width: none;
    min-height: 100%; /* the whole row: nothing of the column shows below */
    border-radius: 0;
    background-color: var(--vs-page, #fff); /* the page's own white: no edge, no card */
    box-shadow: 0 0 0 12px var(--vs-page, #fff); /* covers the veil-blurred edges of the column below */
  }

  /* The form is laid out at its open width from the start (hidden while
     closed), so it never reflows while the card widens; open, it starts on
     the column's edge. */
  .hero_booking_card[data-island-variant='shift'] .vs-shift__form {
    top: 0;
    inset-inline: 0 auto;
    width: var(--shift-open-w, 31.25rem);
  }

  .hero_booking_card[data-island-variant='shift']:is([data-shift='opening'], [data-shift='open']) .vs-shift__body {
    padding: 0;
  }

  /* The X beside the heading, at the end of the 640px form centred in the
     column (or of the column when narrower), inside the card's edge (the
     card clips while it animates: a negative offset would cut the ring). */
  .hero_booking_card[data-island-variant='shift']:is([data-shift='opening'], [data-shift='open']) .vs-shift__close.v-icon-btn {
    top: 0;
    inset-inline-end: max(0px, (100% - 40rem) / 2);
  }

  .hero_booking_card[data-island-variant='shift']:is([data-shift='opening'], [data-shift='open']) .vs-shift__preview {
    inset-inline-end: auto;
    width: calc(var(--shift-card-w, 31.25rem) - 2 * var(--vs-pad-x));
  }

  /* The veil over the editorial column: white, feathered at its edges. */
  #vario-header-02 .hero_left-wrapper {
    position: relative;
  }

  #vario-header-02 .hero_left-wrapper::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -2rem -2.5rem;
    background: var(--vs-veil, rgba(255, 255, 255, 0.9));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2rem, #000 calc(100% - 2rem), transparent), linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent, #000 2rem, #000 calc(100% - 2rem), transparent), linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    mask-composite: intersect;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 600ms;
  }

  #vario-header-02 .hero_content-grid[data-shift-open] .hero_left-wrapper::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1);
  }
}

/* Below desktop: over the page, above the navbar (99) and the overlay (1049), below the field sheets and popovers
   (1100 and up). The page behind is locked (.vs-shift-locked); only the form scrolls, when taller than the screen. */
@media screen and (max-width: 991px) {
  .hero_booking_card[data-island-variant='shift'][data-island-mounted]:is([data-shift='opening'], [data-shift='open'], [data-shift='closing']) {
    position: fixed;
    z-index: 1050;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .hero_booking_card[data-island-variant='shift'][data-island-mounted]:is([data-shift='opening'], [data-shift='open'], [data-shift='closing']) > .vb-island {
    width: 100%;
  }

  /* Phones: a bottom sheet, as tall as the form, never under the status bar; on the virtual keyboard when it is up
     (--vs-vh / --vs-kb: the visible area, set by the island); at most 40rem wide (a phone in landscape). */
  .hero_booking_card[data-island-variant='shift'][data-island-mounted][data-shift-present='sheet']:is([data-shift='opening'], [data-shift='open'], [data-shift='closing']) {
    inset: auto 0 var(--vs-kb, 0px) 0;
    width: auto;
    max-width: 40rem;
    margin-inline: auto;
    max-height: calc(100vh - 2.5rem);
    max-height: calc(var(--vs-vh, 100dvh) - max(2.5rem, env(safe-area-inset-top, 0px) + 0.75rem));
    border-radius: var(--v-radius-sheet, 1.625rem) var(--v-radius-sheet, 1.625rem) 0 0;
    box-shadow: 0 -8px 40px -12px rgba(0, 0, 0, 0.22);
  }

  .hero_booking_card[data-island-variant='shift'][data-island-mounted][data-shift-present='sheet']:is([data-shift='opening'], [data-shift='open'], [data-shift='closing']) .vs-shift__body {
    padding-top: 0.25rem;
    padding-bottom: max(var(--vs-pad-y), env(safe-area-inset-bottom, 0px) + 1rem);
    padding-inline: max(var(--vs-pad-x), env(safe-area-inset-left, 0px)) max(var(--vs-pad-x), env(safe-area-inset-right, 0px));
  }

  .hero_booking_card[data-island-variant='shift'][data-island-mounted][data-shift-present='sheet']:is([data-shift='opening'], [data-shift='open'], [data-shift='closing']) .vs-shift__close.v-icon-btn {
    top: 1.25rem;
    inset-inline-end: max(1rem, env(safe-area-inset-right, 0px) + 0.5rem);
  }

  /* A field's search (ShiftIsland.vue, Starter 1.0.8): the phone's search SCREEN — the same host, opaque, on exactly
     the visible area: from its top (--vs-vt, iOS pans it to the focused field) for its height (--vs-vh, up to the
     keyboard), full width, no corners, no shadow. Nothing of the booking or the page shows around it, with the keyboard
     open or closed, and it never changes size while results come and go. */
  .hero_booking_card[data-island-variant='shift'][data-island-mounted][data-shift-present='sheet'][data-shift-search]:is([data-shift='opening'], [data-shift='open'], [data-shift='closing']) {
    inset: var(--vs-vt, 0px) 0 auto 0;
    width: auto;
    max-width: none;
    height: 100vh;
    height: var(--vs-vh, 100dvh);
    min-height: 0;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--v-surface-raised); /* the approved search's surface */
  }

  /* Tablets: a centred dialog, as tall as the form, centred in the visible area (above the keyboard when it is up). */
  .hero_booking_card[data-island-variant='shift'][data-island-mounted][data-shift-present='dialog']:is([data-shift='opening'], [data-shift='open'], [data-shift='closing']) {
    inset: 0 0 var(--vs-kb, 0px) 0;
    width: min(40rem, 100vw - 3rem);
    height: -webkit-fit-content;
    height: fit-content;
    max-height: calc(100vh - 4rem);
    max-height: calc(var(--vs-vh, 100dvh) - 4rem);
    margin: auto;
    border-radius: var(--v-radius-2xl, 1.75rem);
    box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.35);
  }

  .vs-shift-locked,
  .vs-shift-locked body {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  #vario-header-02 .hero_left-wrapper::after {
    transition: none !important;
  }
}