/* ==========================================================================
   01 · DOCUMENTARY — A Country of Tomorrows
   The film, its credits and its player, on the documentary's pinned map stage (the stage:
   css/journey.css → .stage--kyiv; its motion: js/journey-stage.js → "kyiv"). They come in beside
   the map, part by part, as the screen recomposes, and stay beside it while the map moves on.
   (The photographs that follow: css/explore.css.)
   ========================================================================== */

/* Wide screens: a column on the left, the map to its right. The player is as wide as the column
   allows while the whole column still fits the screen's height. */
.doc {
  --doc-w: min(46vw, 840px, calc((100svh - var(--header-h) - 300px) * 16 / 9));
  position: absolute;
  left: var(--gutter);
  top: var(--header-h);
  bottom: clamp(20px, 4svh, 48px);
  z-index: 3;
  width: max(var(--doc-w), 280px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}

.doc > [data-doc-part] { opacity: 0; will-change: opacity, transform; }

/* (only the player takes clicks, and only once it's there) */
.doc.is-active .doc__player { pointer-events: auto; }

/* DOCUMENTARY — UKRAINE — 2026 */
.doc__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
  max-width: none;
  font-size: clamp(0.75rem, 0.95vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fg);
}

.doc__facts span + span::before {
  content: "";
  display: inline-block;
  width: clamp(18px, 2.2vw, 38px);
  height: 1px;
  margin: 0 1.05em 0 0.75em;
  vertical-align: middle;
  background: var(--line-strong);
}

.doc__title {
  margin-top: clamp(14px, 2.4svh, 26px);
  font-size: clamp(2rem, min(4.3vw, 7.6svh), 5rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fg);
}

/* Second line set in, like a title card */
.doc__title-line { display: block; padding-left: 1.2em; }

/* The player: the film's cover (or its silent loop), clearly playable */
.doc__player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: clamp(18px, 3.2svh, 34px);
  overflow: hidden;
  background: var(--bg-frame);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.doc__player .frame__media,
.doc__loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doc__player .frame__media { transform: scale(1); }

/* (the loop shows only once it's actually playing; until then, or without it, the cover) */
.doc__loop { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.doc__loop.is-playing { opacity: 1; }

/* Shade along the bottom so the play control always reads over the bright sky */
.doc__player::after {
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(to top, rgba(18, 19, 21, 0.66), transparent);
  pointer-events: none;
}

.doc__player .film__play { left: clamp(16px, 2vw, 30px); bottom: clamp(14px, 2vw, 28px); }
.doc__player .film__play-icon { width: clamp(46px, 3.8vw, 64px); }

/* Directed · Filmed · Edited by / Nick Langley */
.doc__credit {
  display: grid;
  gap: 10px;
  max-width: none;
  margin-top: clamp(18px, 3svh, 30px);
}

.doc__roles {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.doc__roles i { margin-inline: 0.35em; font-style: normal; color: var(--fg-dim); }

.doc__name {
  font-size: clamp(1.6rem, min(2.5vw, 4.2svh), 2.6rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg);
}

/* ---------- The play control (the documentary's player, and the films on location) ---------- */

.film__play {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(24px, 4vw, 56px);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--fg);
}

.film__play-icon {
  position: relative;
  flex: none;
  width: clamp(56px, 5vw, 76px);
  aspect-ratio: 1;
  border: 1px solid rgba(235, 233, 228, 0.8);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

/* The triangle */
.film__play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.82em;
  border-color: transparent transparent transparent var(--fg);
  font-size: clamp(13px, 1.05vw, 16px);
  transform: translate(-36%, -50%);
  transition: border-color var(--dur) var(--ease-out);
}

.film__play-text { display: grid; gap: 6px; }

.film__play-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.film__play-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(235, 233, 228, 0.6);
}

@media (hover: hover) {
  .doc__player:hover .frame__media { transform: scale(1.025); }
  .doc__player:hover .film__play-icon { background: var(--fg); border-color: var(--fg); }
  .doc__player:hover .film__play-icon::after { border-left-color: var(--bg); }
}

.doc__player:focus-visible { outline-offset: -6px; }

/* ---------- Missing photo placeholder (any image wrapper; set by js/main.js) ---------- */

.is-missing {
  background:
    radial-gradient(90% 70% at 30% 25%, rgba(150, 146, 140, 0.22), transparent 62%),
    linear-gradient(165deg, #313235, #1d1e20);
}

.is-missing img,
.is-missing video { visibility: hidden; }

.is-missing::before {
  content: attr(data-file);
  position: absolute;
  left: clamp(14px, 1.8vw, 24px);
  right: clamp(14px, 1.8vw, 24px);
  bottom: clamp(12px, 1.6vw, 22px);
  z-index: 1;
  overflow-wrap: anywhere;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(235, 233, 228, 0.42);
}

/* ---------- Short, wide screens (a phone on its side): everything smaller, the title on one line ---------- */

@media (max-height: 540px) and (min-aspect-ratio: 5/4) {
  .doc {
    --doc-w: min(44vw, calc((100svh - var(--header-h) - 118px) * 16 / 9));
    top: calc(var(--header-h) + 2px);
    bottom: 8px;
  }
  /* (the map names the monument itself; there's no room for a caption as well) */
  .kyiv-place { display: none; }
  .doc__facts { font-size: 0.625rem; letter-spacing: 0.26em; }
  .doc__title { margin-top: 8px; font-size: clamp(1rem, 5.2svh, 1.6rem); }
  .doc__title-line { display: inline; padding-left: 0.25em; }
  .doc__player { margin-top: 10px; }
  .doc__player .film__play { gap: 12px; }
  .doc__player .film__play-icon { width: 38px; }
  .doc__credit { margin-top: 10px; gap: 4px; }
  .doc__roles { font-size: 0.5625rem; }
  .doc__name { font-size: 1.1rem; }
}

/* ---------- Phones (and tall portrait screens): the film across the top, the map below it ---------- */

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .doc {
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--header-h) + 2px);
    bottom: auto;
    width: auto;
    display: block;
  }
  .doc__facts { font-size: 0.6875rem; letter-spacing: 0.26em; }
  .doc__title { margin-top: 12px; font-size: clamp(1.75rem, 8.6vw, 2.8rem); }
  .doc__title-line { padding-left: 0.9em; }
  /* (the film edge to edge: as large as the screen allows) */
  .doc__player {
    width: auto;
    max-height: 36svh;
    margin: 16px calc(-1 * var(--gutter)) 0;
  }
  .doc__player .film__play { gap: 14px; }
  .doc__credit { margin-top: 14px; gap: 6px; }
  .doc__roles { font-size: 0.625rem; letter-spacing: 0.26em; }
  .doc__name { font-size: clamp(1.3rem, 6.4vw, 1.9rem); }
}