/* The adventure spreads (components/adventure-spread.js): a native <dialog>
   over the dimmed homepage, one panel, and in it a track of every adventure
   side by side that swipes and snaps. A spread is its tile's photograph, the
   tile's name and line on it as on the tile (the same band and scrim), then
   the words: kicker, paragraph, hairline rows, the buttons. Square, hairline,
   the page's own colors in both themes; the controls are the lightbox's
   circles, on a glass of ink so they read on a photograph and on paper alike.

   Past 1100px the panel is a fixed box (--spread-w x --spread-h, at most
   72rem x 46rem, 84rem x 54rem on a big monitor) with the arrows out on the
   backdrop either side, and a spread is laid out by its photograph's shape:
   .spread-left and .spread-right (a portrait or square one, on its tile's
   side of the mosaic) put it 4:5 beside the words, .spread-top (a landscape one) a 5:2
   band across the top with the words in two columns under it. Tablets put
   every photograph on top at 16:9 in a panel that nearly fills the screen;
   phones fill it, 4:3. The frames match SIZES_SPREAD_SIDE / SIZES_SPREAD_TOP
   (components/responsive-image.js): change them together. */

.spread {
  --spread-w: min(72rem, calc(100vw - 12rem));
  --spread-h: min(46rem, calc(100dvh - 4rem), calc(var(--spread-w) * 0.62));
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  display: none;
  align-items: center;
  justify-content: center;
}
.spread[open] { display: flex; }
.spread::backdrop { background: color-mix(in srgb, var(--ink) 82%, transparent); }   /* deeper than --dim: the arrows sit on it */

/* The page holds still behind it, its scrollbar's room kept so nothing shifts */
html:has(.spread[open]) { overflow: hidden; scrollbar-gutter: stable; }

.spread-panel {
  position: relative;
  width: var(--spread-w);
  height: var(--spread-h);
  background: var(--bg);
  border: var(--hair);
}

/* The track: one spread a screen, snapping, the scrollbar hidden (the
   counter and the arrows say where you are) */
.spread-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.spread-track::-webkit-scrollbar { display: none; }

.spread-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* The photograph, the tile's words on it */
.spread-photo { position: relative; margin: 0; overflow: hidden; background: var(--ink); }
.spread-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spread-photo::after { content: ''; position: absolute; inset: 0; background: var(--band), var(--scrim); }
.spread-title { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--lg); }
.spread-title h2 { margin: 0 0 0.3rem; font-size: clamp(1.9rem, 3vw, 2.6rem); color: var(--white); }
.spread-title p { margin: 0; font-size: var(--small); color: var(--white); opacity: 0.9; }
.spread-title > * { width: fit-content; }   /* each box hugs its words, as on the tile, so the morph keeps them on the photograph */

/* The words */
.spread-words { padding: var(--lg); }
.spread-about { font-weight: var(--light); line-height: var(--relaxed); }
.spread-words .hairlines { margin-top: var(--md); }
.spread-words .hairlines li { grid-template-columns: 1fr 2.2fr; padding: 0.75rem 0; }
.spread-actions { margin-top: var(--md); }
.spread-actions .button.md { font-size: 0.8rem; padding: 0.85rem 1.4rem; }   /* the panel is a fixed box: its buttons hold their base size rather than grow with the screen, so the pair stays on one line */

/* The bar over the panel's top edge: previous, the count, next, and the X */
.spread-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--sm);
  pointer-events: none;   /* a swipe that starts beside the controls still moves the track */
}
.spread-bar > * { pointer-events: auto; }
.spread-close { margin-left: auto; }
.spread-bar button, .spread-count {
  border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(var(--glass-blur));
  color: var(--white);
}
.spread-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast);
}
.spread-bar button:hover { border-color: var(--white); }
.spread-bar button:focus-visible { outline: 2px solid var(--sea-light); outline-offset: 2px; }
.spread-count {
  padding: 0.5rem 0.85rem;
  font-family: var(--mono);
  font-size: var(--kicker);
  letter-spacing: var(--track-tight);
  white-space: nowrap;
}

/* A big monitor: a bigger panel, the same words */
@media (min-width: 1600px) and (min-height: 1000px) {
  .spread { --spread-w: min(84rem, calc(100vw - 12rem)); --spread-h: min(54rem, calc(100dvh - 4rem), calc(var(--spread-w) * 0.62)); }
}

/* Big screens: the arrows out on the backdrop, and the three arrangements */
@media (min-width: 1100px) {
  .spread-bar .spread-prev, .spread-bar .spread-next {
    position: absolute;
    top: calc(var(--spread-h) / 2 - 1.75rem);
    width: 3.5rem;
    height: 3.5rem;
    background: transparent;
    backdrop-filter: none;
  }
  .spread-prev { left: -5rem; }
  .spread-next { right: -5rem; }

  /* A portrait or square photograph: 4:5 beside the words, which center in their
     column and scroll there if a short screen needs it (auto margins, so the
     top is never cut off the way a centered overflow is) */
  .spread-left, .spread-right { display: grid; grid-template-columns: calc(var(--spread-h) * 0.8) minmax(0, 1fr); overflow: hidden; }
  .spread-right { grid-template-columns: minmax(0, 1fr) calc(var(--spread-h) * 0.8); }
  .spread-right .spread-photo { order: 2; }
  .spread-right .spread-title { text-align: right; }
  .spread-right .spread-title > * { margin-left: auto; }
  .spread-left .spread-words, .spread-right .spread-words { display: flex; flex-direction: column; overflow-y: auto; padding: 4.5rem var(--xl) var(--xl); }
  .spread-left .spread-copy, .spread-right .spread-copy { margin-top: auto; }
  .spread-left .spread-facts, .spread-right .spread-facts { margin-bottom: auto; }

  /* A landscape photograph: the 5:2 band across the top, the words in two
     columns under it. The words keep their whole height and the band gives
     way to them (never under 12rem), so nothing scrolls unless a very short
     screen leaves no other choice */
  .spread-top { display: flex; flex-direction: column; overflow-y: auto; }
  .spread-top .spread-photo { flex: 0 1 calc(var(--spread-w) / 2.5); min-height: 12rem; }
  .spread-top .spread-words { flex: 1 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--xl); align-content: start; padding: var(--lg) var(--xl); }
  .spread-top .spread-words .hairlines { margin-top: 0; }
}

/* Tablets: a panel that nearly fills the screen, every photograph on top */
@media (max-width: 1099px) {
  .spread { --spread-w: calc(100% - 2 * var(--page-inset)); --spread-h: calc(100% - 2 * var(--page-inset)); }
  .spread-photo { aspect-ratio: 16 / 9; }
}

/* Phones: the whole screen, the bar clear of the status bar, the words of
   the gesture bar */
@media (max-width: 700px) {
  .spread { --spread-w: 100%; --spread-h: 100%; }
  .spread-panel { border: 0; }
  .spread-photo { aspect-ratio: 4 / 3; }
  .spread-title { padding: var(--md) var(--page-inset); }
  .spread-title h2 { font-size: 1.9rem; }
  .spread-words { padding: var(--md) var(--page-inset) calc(var(--xl) + var(--safe-bottom)); }
  .spread-words .hairlines li { grid-template-columns: 1fr 2fr; }
  .spread-bar { padding: calc(var(--sm) + var(--safe-top)) var(--sm) var(--sm); }
  .spread-bar button { width: 2.4rem; height: 2.4rem; }
}

/* Where the browser cannot morph the tile into its spread, the panel fades
   in instead (the script adds .fade) */
.spread.fade[open] .spread-panel { animation: spread-in var(--normal) ease both; }
.spread.fade[open]::backdrop { animation: spread-fade var(--normal) ease both; }
@keyframes spread-in { from { opacity: 0; transform: scale(0.98); } }
@keyframes spread-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .spread.fade[open] .spread-panel, .spread.fade[open]::backdrop { animation: none; }
}

/* While a spread opens or closes (the view transition typed `adventure`), the
   header, its toggle, the account slot and the footer drop the names that
   hold them still across pages: named, they would paint over the dialog
   until it settled */
html:active-view-transition-type(adventure) :is(.site-header, .theme-toggle, .account, .site-footer) { view-transition-name: none; }