/* ============================================================
   PARKSIDE — EXPLORE / 360° TOUR
   Loads AFTER style.css and only on tour.html. The embed brings its
   own interface, so everything here is frame and surround: nothing is
   drawn over the panorama.
   ============================================================ */

/* ---------- title band ----------
   Same construction as the news intro: --deep for the darker ground,
   --dark because that is the class main.js's nav ScrollTrigger watches,
   plus top padding to clear the fixed header. */
.tourhead {
  padding-top: clamp(132px, 20vh, 230px);
  padding-bottom: clamp(56px, 9vh, 104px);
  overflow: hidden;
}
/* three authored lines of display type — wider than the 20ch default */
.tourhead .disp { max-width: 26ch; }
.tourhead .lead { max-width: 60ch; }
.tourhead::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(62% 54% at 88% -8%, rgba(122, 139, 120, .22), transparent 62%);
}

/* ---------- stage ----------
   The panorama runs EDGE TO EDGE: the section drops its side padding and
   the frame spans the full width, so the model gets the whole screen. The
   controls below keep the page's padding, so they still line up with the
   type above. */
.tour {
  padding-top: clamp(46px, 7vh, 88px);
  padding-left: 0; padding-right: 0;
}

.tour__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  /* full bleed at 16/9 stands 1440px tall on a 2560px monitor, taller than
     the window — so the WIDTH is capped (not the height, which would change
     the aspect) and the frame pulls in from the sides on a very wide or
     very short window. 92vh, not 100: the frame should never quite fill the
     window, or the page stops reading as a page. */
  max-width: calc(92vh * 16 / 9);
  margin: 0 auto;
  background: var(--forest-3);
  /* no side border or radius — both read as mistakes against the screen
     edge; the hairlines above and below still seat it on the paper */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* the tour's own panels are laid out for a landscape stage; below the
   two-column breakpoint a tall box serves it better than 16/9 */
@media (max-width: 900px) {
  .tour__frame { aspect-ratio: auto; height: min(72vh, 620px); max-width: none; }
}

/* THE 56px IS NOT PADDING — IT IS A CROP, AND IT MUST STAY.
   The viewer reserves a fixed strip (~46px, its thin scrub bar) at the
   bottom of its own layout and paints NO background there, so the frame
   showed through it as a dead band under the model — the "green space".
   It is fixed pixels, so no aspect ratio removes it; what removes it is
   running the embed past the bottom edge and letting overflow:hidden on
   the frame take the strip. The model is sized off the leftover height,
   so it grows by the same amount and fills the frame exactly.
   If a future build of the tour changes that strip, this is the number
   to re-measure. */
.tour__embed {
  position: absolute; top: -6px; left: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 68px);        /* 6px top crop + the 56px bottom strip + 6px */
  border: 0; display: block;
}
/* full screen is taken on the FRAME, not the iframe, so the veil and the
   1px border travel with it */
.tour__frame:fullscreen { aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; }

/* ---------- loading veil ----------
   Reuses .boot__mark / boot-sweep from style.css, so the wait reads like
   the site's own boot rather than a spinner. */
.tour__veil {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; align-content: center; gap: 18px;
  background: radial-gradient(120% 100% at 50% 45%, #24382f 0%, #16241d 62%, #0d1712 100%);
  transition: opacity .8s ease;
}
.tour__veil.is-off { opacity: 0; pointer-events: none; }

.tour__veiltext {
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(245, 241, 234, .72);
}
/* only offered once the embed has kept us waiting — see js/tour.js */
.tour__veillink {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(182, 154, 106, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.tour__veil.is-slow .tour__veillink { opacity: 1; visibility: visible; }
.tour__veillink:hover { color: var(--paper); border-bottom-color: var(--paper); }

/* ---------- controls under the frame ----------
   Right-aligned so they finish on the same line the frame does, and
   re-padded because the section around them is now full bleed. */
.tour__foot {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 16px 28px;
  margin-top: clamp(14px, 1.8vw, 22px);
  padding: 0 var(--pad);
}
.tour__acts { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.tour__act {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 0;                     /* 44px tall target, no box drawn */
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-ink);
  border-bottom: 1px solid rgba(115, 93, 56, .35);
  transition: color .4s ease, border-color .4s ease;
}
.tour__act svg { width: 13px; height: 13px; flex: none; }
.tour__act:hover { color: var(--ink); border-bottom-color: var(--ink); }
.tour__act:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
/* the button is gone while the frame is already full screen */
body.tour-full .tour__foot { visibility: hidden; }

@media (max-width: 620px) {
  .tour__foot { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .tour__veil, .tour__veillink { transition: none; }
}