/* =====================================================================
   SLIDE-OVER DETAIL SHEETS — ONE SIZING AND LAYOUT FOR ALL THREE PAGES

   Destinations and Experiences share .ddetail / .dgal (defined in
   destinations.css); Tour Packages has its own .pkdetail / .pkshot
   (defined in packages.css). The three are separate components that
   must behave as one, so the way the sheet is *sized and laid out* lives
   here and is loaded after those sheets on every page that has one.
   Colours, type and the inner furniture stay where they were.

   Three bands:
     under 1024px   full screen, slides in from the right
     1024px and up  a wide sheet (--sheet-width), two columns:
                    photographs pinned on the left, the words scrolling
                    on the right
   ===================================================================== */


/* ---- tablet and phone: the whole screen ---------------------------- *
   The old 620-660px right-hand panel was neither one thing nor the
   other on a tablet. Full width gives the sheet a single clear job,
   and the slide-in from the right is kept. The words are held to a
   comfortable measure and centred so a 900px-wide tablet does not set
   prose at 900px. */
@media (max-width: 1023px) {
  .ddetail__sheet,
  .pkdetail__sheet { width: 100%; }

  .ddetail__body,
  .ddetail__nav,
  .pkdetail__body,
  .pkdetail__nav {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
  }

  /* The photograph should not swallow a landscape tablet. */
  .dgal__slide img,
  .pkshot img { max-height: 56vh; }

  /* The close button is always the first thing a thumb looks for; on a
     full-screen sheet it gets a little more room around it. */
  .ddetail__close,
  .pkdetail__close {
    top: var(--space-sm);
    right: var(--space-sm);
    width: 48px;
    height: 48px;
  }
}


/* ---- desktop: wide, two columns ------------------------------------ */
@media (min-width: 1024px) {

  .ddetail__sheet,
  .pkdetail__sheet { width: var(--sheet-width); }

  /* The scroller becomes the grid. Photographs take the left column for
     the whole height of the sheet; the body and the previous/next bar
     stack in the right column, the bar always at the foot. */
  .ddetail__scroll,
  .pkdetail__scroll {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: 1fr auto;
    align-content: start;
  }

  .dgal,
  .pkshot {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
  }

  .ddetail__body,
  .pkdetail__body {
    grid-column: 2;
    grid-row: 1;
    /* The close button floats over the top of this column now, so the
       first line of content starts below it. */
    padding: var(--space-3xl) var(--space-xl) var(--space-xl);
  }

  .ddetail__nav,
  .pkdetail__nav {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
  .ddetail__nav { padding: 0 var(--space-xl) var(--space-xl); }

  /* ---- Destinations and Experiences gallery: one photograph, full
     height of the column, with the arrows and dots still on top. ---- */
  .dgal__track { height: 100%; }
  .dgal__slide { height: 100%; }
  .dgal__slide img {
    height: 100%;
    aspect-ratio: auto;
  }

  /* ---- Tour Packages: the strip turns on its side. Two photographs
     show at once with a sliver of the third, which is what tells you it
     scrolls; a native scroller, so wheel, touch and keys all work. ---- */
  .pkshot__track {
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    gap: 2px;
  }
  .pkshot__slide,
  .pkshot__slide:last-child {
    flex: 0 0 52%;
    scroll-snap-align: start;
  }
  .pkshot__slide:only-child { flex-basis: 100%; }
  .pkshot img {
    height: 100%;
    aspect-ratio: auto;
  }
  .pkshot__credit { padding-inline: var(--space-md); }

  /* The text column is wide enough now for a title with real presence;
     the packages title is already this size. */
  .ddetail__title { font-size: var(--text-3xl); }
}


/* ---- a big screen has room for a looser text column ---------------- */
@media (min-width: 1360px) {
  .ddetail__body,
  .pkdetail__body { padding-inline: var(--space-2xl); }
  .ddetail__nav { padding-inline: var(--space-2xl); }
}


/* ---- a short desktop window (a laptop with the dock up) ------------ *
   A full-height photograph on a 600px-tall window is a postage stamp
   turned on its side; let the grid scroll as one instead. */
@media (min-width: 1024px) and (max-height: 640px) {
  .dgal,
  .pkshot { height: 100%; min-height: 0; }
}