/* ==========================================================================
   The guided tour page.

   The constraint that shapes this file: on a phone, the chapter list has to be
   usable WHILE the film is playing. A list that pushes the video off the top
   of the screen is a list you have to scroll away from the thing it controls,
   which is the one thing it must never do. So the player sticks to the top of
   the viewport — under the masthead, which is itself sticky — and the chapters
   scroll underneath it. Tapping one seeks a player that is still on screen.

   On a 375px phone the video is 343px wide and about 193px tall, which leaves
   roughly two thirds of the screen for chapters. No layout switch is needed
   between the two cases: the same sticky player becomes a sticky column on
   wide screens, with the chapters beside it instead of below.
   ========================================================================== */

/* The player, its caption and the chapter list are all DIRECT children of this
   grid. That is deliberate rather than tidy: a sticky element sticks only
   within its own parent's box, so wrapping the player together with its
   caption would cap its travel at the height of that little wrapper and the
   film would slide off the top of a phone within one flick. As grid children,
   the player's parent is this grid, whose height is the whole chapter list. */
.tour {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "player"
    "meta"
    "chapters";
  gap: var(--space-4);
  align-items: start;
}

.tour__player { grid-area: player; }
.tour__meta { grid-area: meta; }
.tour__chapters { grid-area: chapters; }

@media (min-width: 900px) {
  .tour {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas:
      "player chapters"
      "meta   chapters";
    grid-template-rows: auto auto;
    column-gap: var(--space-7);
    row-gap: var(--space-3);
    align-content: start;
  }

  /* The chapter column is the tall one, so the row it occupies must not
     stretch the player to match it. */
  .tour__chapters { align-self: start; }
}

/* ---- The player ---------------------------------------------------------- */

/* --tour-top is written by js/tour.js from the masthead's measured height, so
   the video parks directly beneath it rather than under a number typed here
   that would drift the moment the header's contents change. The 0px fallback
   is deliberate: with no JavaScript the video still sticks, just to the very
   top, which is a worse offset and not a broken page. */
.tour__player {
  position: sticky;
  top: var(--tour-top, 0px);
  z-index: 5;
  background: var(--bg-ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(10, 15, 28, 0.18));
  line-height: 0;
}

.tour__video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-ink);
}

.tour__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  line-height: 1.4;
}

/* ---- Chapters ------------------------------------------------------------ */

.tour__chapters-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.tour__chapters-head h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.tour__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A button, not a link: it moves the playhead on this page rather than going
   anywhere, and a link that doesn't navigate is a lie to a screen reader. */
.tour__chapter {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
  border: 0;
  border-top: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: background var(--duration-fast) var(--ease-out);
}

.tour__list li:first-child .tour__chapter {
  border-top: 0;
}

.tour__chapter:hover {
  background: var(--bg-raised, rgba(10, 15, 28, 0.04));
}

.tour__chapter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tour__time {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--accent);
  padding-top: 0.1em;
}

.tour__label {
  display: block;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.tour__note {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

/* The chapter the playhead is inside. This is a readout as much as a control:
   while the film plays, the list says where you are in it. */
.tour__chapter[aria-current="true"] {
  background: var(--accent-soft);
}

.tour__chapter[aria-current="true"] .tour__label {
  color: var(--accent-strong, var(--teal-deep));
}

.tour__chapter[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

/* Playing-state marker on the current row, so the list distinguishes "this is
   where you are" from "this is where you last tapped". */
.tour__chapter[aria-current="true"][data-playing="true"] .tour__time::after {
  content: "▶";
  margin-left: 0.35em;
  font-size: 0.75em;
  vertical-align: 0.08em;
}

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