/* =========================================================================
   THE FILM PANEL — three boxes, not one.

   The panel used to be a single frame with the caption and the chapter button
   floating on top of the video. Between the player's own controls along the
   bottom and the close button top-right, there was nowhere left to put them,
   and they ended up over the picture.

   So: the film on the left, what it is on the top right, where it goes on the
   bottom right. Three separate rounded boxes with air between them, and on a
   phone they stack in that order — 1, 2, 3.

   This file loads after site.css and deliberately overrides the older
   absolutely-positioned layout that is still in there.
   ========================================================================= */

.reelopen .reelopen__panel,
.reelopen.is-film .reelopen__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(15rem, 0.9fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.75rem;
  width: min(78rem, 94vw);
  max-height: 90vh;
  height: auto;
  aspect-ratio: auto;
  padding: 0.75rem;
  background: #0c0c10;
  border-radius: 28px;
  overflow: hidden;
}

/* ---- box 1 · the film ---- */
.reelopen .rbox--media {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  align-self: center;
}
.reelopen .rbox--media img,
.reelopen .rbox--media .reelopen__video { position: absolute; inset: 0; }
.reelopen .rbox--media img { width: 100%; height: 100%; object-fit: cover; }
.reelopen .rbox--media .reelopen__video video { object-fit: contain; }

/* ---- boxes 2 and 3 · the words, and the way out ---- */
.reelopen .rbox--info,
.reelopen .rbox--go {
  border-radius: 20px;
  background: #17171c;
  color: var(--white);
  padding: clamp(1rem, 2vw, 1.5rem);
}
.reelopen .rbox--info {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; justify-content: center;
  overflow-y: auto;
}
.reelopen .rbox--go {
  grid-column: 2; grid-row: 2;
  display: grid; place-items: center;
}
.reelopen .rbox--go[hidden] { display: none; }

.reelopen .rbox--info .reelopen__kind {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8ec5ff; margin-bottom: 0.5rem;
}
.reelopen .rbox--info .reelopen__kind[hidden] { display: none; }
.reelopen .rbox--info h2 {
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em;
  margin: 0;
}
.reelopen .rbox__desc {
  font-size: 0.88rem; line-height: 1.55; color: #a8a8b0; margin-top: 0.7rem;
}
.reelopen .rbox__desc[hidden] { display: none; }

/* the chapter button is a button now, filling its own box */
.reelopen .rbox--go .reelopen__go,
.reelopen.is-film .rbox--go .reelopen__go {
  position: static; display: block; width: 100%; text-align: center;
  padding: 0.85rem 1.2rem; border-radius: 14px; border: 0;
  background: var(--blue); color: var(--white);
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  box-shadow: 0 10px 24px -10px var(--blue);
  transition: transform 0.18s ease, background 0.18s ease;
  inset: auto; backdrop-filter: none; pointer-events: auto;
}
.reelopen .rbox--go .reelopen__go:hover,
.reelopen.is-film .rbox--go .reelopen__go:hover {
  background: #0a67d6; transform: translateY(-2px);
}
.reelopen .rbox--go .reelopen__go[hidden] { display: none; }

/* The close sits over the top-right corner, which is box 2's corner — so box 2
   keeps its head down and never puts a word under it. */
.reelopen .reelopen__close { z-index: 6; }
.reelopen .rbox--info { padding-top: 3.2rem; }

/* ---- a phone: box 1, then box 2, then box 3 ---- */
@media (max-width: 820px) {
  .reelopen .reelopen__panel,
  .reelopen.is-film .reelopen__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    width: min(30rem, 94vw);
    overflow-y: auto;
  }
  .reelopen .rbox--media { grid-column: 1; grid-row: 1; }
  .reelopen .rbox--info  { grid-column: 1; grid-row: 2; }
  .reelopen .rbox--go    { grid-column: 1; grid-row: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .reelopen .rbox--go .reelopen__go { transition: none; }
}