/* ==== SLOT:WP1 hero+what-is-iip ==== */
/* Hero (typing title, descriptors), "Hvad er IIP?" and the scroll-to-expand film. Prefix hx-. */
/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  /* Web-prepared from Photos/Hero/ — see photos/SOURCES.txt. Replaces
     Pictures/himalaya-1.jpg, which the spec flags as appearing to be an
     Andean valley rather than the Himalaya.
     The source is 4:3, so `cover` crops it vertically on a wide viewport.
     Sitting at 58% keeps the walking figure and the foot of the mural in
     frame instead of cropping to bare wall. */
  background-image: url('../photos/hero-jodhpur-mural.jpg');
  background-size: cover;
  background-position: center 58%;
}

/* Phones in landscape: one screen tall, so the title shows without scrolling. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 0; }
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.08) 45%, transparent 70%);
}

/* Glued to the hero's bottom-left corner at the page-edge gutter (not the
   centred .wrap column — Martin's choice for the hero and "Hvad er IIP?"
   only). Same offset from the left and the bottom, live on resize. */
.hero-content {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(var(--space-3), var(--gutter));
  z-index: 2;
}

.hero-h1 {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 1.0;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.hero-descriptors {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-descriptors > span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.hero-descriptors > span + span::before {
  content: '·';
  margin-right: 24px;
  color: rgba(255,255,255,0.35);
}

/* "India Immersion Programme" is what IIP stands for, so it carries full
   white while the other two descriptors stay dimmed. */
.hero-descriptors > span.hx-iip { color: var(--white); }

/* Typing headline: a caret rides the typing position, then the period
   blinks. Both are loops, so both are off under reduced motion. */
.hx-blink-dot { animation: hx-blink 1.1s step-end infinite; }
.hx-caret {
  display: inline-block; width: 0.055em; height: 0.82em;
  margin-left: 0.03em; background: currentColor; vertical-align: -0.06em;
  animation: hx-blink 1s step-end infinite;
}
@keyframes hx-blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

/* ============================================================
   HVAD ER IIP? — display title + one paragraph
============================================================ */
/* A full title, a step below the display size of "Klar til Indien" (Martin, 2026-10-04), in Learn+ blue. */
.hx-what-label {
  display: block; margin-bottom: var(--space-4);
  font-size: clamp(2.3rem, 4.8vw, 4.2rem); font-weight: 900; line-height: 1.0; letter-spacing: -0.03em; color: var(--navy);
}
.hx-what-text {
  max-width: 34em;
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.5; letter-spacing: -0.005em;
  color: var(--navy);
}

/* Side by side inside the film's sticky stage, at the page-edge gutter:
   paragraph glued left, film card glued right. The card here is only a
   placeholder (.hx-film-slot) — JS measures it and draws the film's
   clip window over it, so the card can grow from exactly that spot. */
.hx-film-layout {
  position: absolute; inset: var(--nav-h) 0 0 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center; gap: var(--space-6); padding: 0 var(--gutter);
}
.hx-film-slot {
  position: relative; justify-self: end; width: 100%;
  max-width: calc((100vh - var(--nav-h)) * 0.7 * 16 / 9);
  aspect-ratio: 16 / 9; border-radius: var(--radius-media);
}
@media (max-width: 900px) {
  .hx-film-layout { grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--space-4); }
}

/* ============================================================
   SCROLL-TO-EXPAND FILM
   A sticky stage holds the film as a rounded card. Scroll drives it 1:1:
   grow to full-bleed, hold, then shrink back to a card before it scrolls
   away (never on video end). The frame covers the viewport below the nav
   and is shown through a clip-path window; the video inside is a 16:9 box
   scaled (transform only), so each frame repaints without layout. As a
   card it covers the window, and it grows with it until it reaches its
   "contain" size, then holds — fully open, the whole picture shows (the
   burned-in subtitles sit near its bottom) on the frame's black, above a
   band reserved for the controls so they never cover the subtitles
   (issue #21). JS sets the clip-path, the
   video's size/position/scale and the --hx-l/--hx-r/--hx-b insets
   (window edges) that place the controls. The window rests on the
   .hx-film-slot placeholder and grows to the centred full size. The window's full size is the whole area when its
   aspect is between 4:3 and 2.1:1 (cover crops at most ~15–25%); beyond
   that (ultra-wide, portrait phone) it stops at that aspect and stays a
   rounded frame on the white page. JS also pulls the section up/down with
   negative margins so the resting content sits a normal section gap from
   the hero above and the pillars below; the stage is transparent and
   click-through outside its content for that.
   Band: 100vh stage + 70vh grow + 50vh hold + 50vh shrink = 270vh.
============================================================ */
.hx-film { position: relative; height: 270vh; }
.hx-film-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden; pointer-events: none;
  --hx-l: 0px; --hx-r: 0px; --hx-b: 0px; --hx-t: 0px;
}
.hx-film-layout > * { pointer-events: auto; }
/* The frame starts below the fixed nav, so the nav never covers the picture.
   It sits above the paragraph (the grown film covers it) but lets clicks
   through to the text. */
.hx-film-frame {
  position: absolute; inset: var(--nav-h) 0 0 0; overflow: hidden; background: #000;
  pointer-events: none; will-change: clip-path; clip-path: inset(100%);
}
/* Portrait phones: the band reserved under the picture for the controls is
   black only while they show; otherwise it blends into the page, so no
   empty black strip (Martin, 2026-10-21). .has-band is set by the WP1 script. */
.hx-film.has-band .hx-film-frame { background: transparent; transition: background-color 400ms var(--ease); }
.hx-film.has-band.is-open:not(.is-idle) .hx-film-frame { background: #000; }
.hx-film-frame video {
  position: absolute; left: 50%; top: 50%; display: block;
  width: 100%; height: 100%; object-fit: cover; background: #000;
  transform: translate(-50%, -50%); will-change: transform;
}
/* Native fullscreen (browser menu, iOS): the whole picture, none of the
   scroll geometry. !important beats the inline styles the WP1 script sets. */
.hx-film-frame video:fullscreen {
  object-fit: contain !important; transform: none !important;
  width: 100% !important; height: 100% !important;
}

.hx-film-ui {
  position: absolute; z-index: 2;
  left: calc(var(--hx-l) + var(--space-3)); right: calc(var(--hx-r) + var(--space-3));
  bottom: calc(var(--hx-b) + var(--space-3));
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.hx-film.is-open .hx-film-ui { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease); }
/* Once open, a click on the picture plays/pauses (clip-path keeps the hidden part click-through). */
.hx-film.is-open .hx-film-frame, .hx-film.is-static .hx-film-frame { pointer-events: auto; cursor: pointer; }

.hx-film-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255,255,255,0.55); background: rgba(0,0,0,0.35); color: var(--white);
  cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hx-film-ui > *, .hx-film-play { pointer-events: auto; }
/* Idle while playing: the controls fade out (all but "Slå lyd til") and the
   cursor hides over the picture; any mouse move, scroll, touch or key
   brings them back. .is-idle is set by the WP1 script. */
.hx-film-ui > * { transition: opacity 400ms var(--ease); }
.hx-film.is-idle .hx-film-ui > :not(.hx-film-sound) { opacity: 0; pointer-events: none; }
.hx-film.is-idle .hx-film-frame { cursor: none; }
.hx-film-btn:hover { background: rgba(0,0,0,0.6); border-color: var(--white); }
.hx-film-btn:focus-visible, .hx-film-sound:focus-visible, .hx-film-play:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.hx-film-btn svg { width: 18px; height: 18px; fill: currentColor; }

.hx-film-sound { margin-left: auto; display: none; }
/* "Slå lyd til" sits top centre, just inside the film's top edge (Martin,
   2026-10-05). Its own .hx-film-ui bar, so it fades in, idles out and comes
   back exactly like the timeline. */
.hx-film-ui--top {
  top: calc(var(--nav-h) + var(--hx-t) + var(--space-2)); bottom: auto;
  justify-content: center;
}
.hx-film-ui--top .hx-film-sound { margin-left: 0; display: inline-flex; }   /* stays while sound is on, as "Slå lyd fra" */
.hx-film-ui--top .hx-if-sound { display: contents; }   /* icon and label stay the pill's own flex items */
.hx-film.is-idle .hx-film-ui--top > * { opacity: 0; pointer-events: none; }
.hx-film.is-playing.is-muted .hx-film-sound { display: inline-flex; }

/* Timeline (YouTube-style): full-width bar above the buttons; buffered in
   light grey, played in red with a knob. Click or drag seeks; it is a
   slider, so arrow keys seek too. The tall hit area keeps it easy to grab. */
.hx-film-timeline {
  flex: 0 0 100%; position: relative; height: 18px; cursor: pointer; touch-action: none;
}
.hx-film-timeline:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.hx-film-track, .hx-film-buffered, .hx-film-played {
  position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px;
  transition: height var(--dur) var(--ease), margin-top var(--dur) var(--ease);
}
.hx-film-track { right: 0; background: rgba(255,255,255,0.28); }
.hx-film-buffered { width: 0; background: rgba(255,255,255,0.45); }
.hx-film-played { width: 0; background: var(--red); }
.hx-film-knob {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--red); transform: scale(0);
  transition: transform var(--dur) var(--ease);
}
.hx-film-timeline:hover .hx-film-track, .hx-film-timeline:hover .hx-film-buffered, .hx-film-timeline:hover .hx-film-played,
.hx-film-timeline.is-dragging .hx-film-track, .hx-film-timeline.is-dragging .hx-film-buffered, .hx-film-timeline.is-dragging .hx-film-played,
.hx-film-timeline:focus-visible .hx-film-track, .hx-film-timeline:focus-visible .hx-film-played { height: 6px; margin-top: -3px; }
.hx-film-timeline:hover .hx-film-knob, .hx-film-timeline.is-dragging .hx-film-knob,
.hx-film-timeline:focus-visible .hx-film-knob { transform: scale(1); }
.hx-film-time { color: var(--white); font-size: var(--fs-small); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* Each button carries both states; the frame's state classes pick one. */
.hx-film .hx-if-playing { display: none; }
.hx-film.is-playing .hx-if-playing { display: contents; }
.hx-film.is-playing .hx-if-paused { display: none; }
.hx-film .hx-if-muted { display: none; }
.hx-film.is-muted .hx-if-muted { display: contents; }
.hx-film.is-muted .hx-if-sound { display: none; }

.hx-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Volume slider (Martin, 2026-10-05), shared by the IIP film, the SRHU
   video and the Om os clips. A native range input styled like the
   timeline: white track, red level, red knob. --level is set by
   iipBindVolume (WP1 script). Dragging to 0 mutes; unmuting brings the
   last level back. */
.iip-volume { display: inline-flex; align-items: center; height: 44px; }
.iip-volume input {
  -webkit-appearance: none; appearance: none; width: 84px; height: 18px; margin: 0;
  background: transparent; cursor: pointer;
}
.iip-volume input::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(var(--red), var(--red)) 0 0 / var(--level, 100%) 100% no-repeat, rgba(255,255,255,0.28);
}
.iip-volume input::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(var(--red), var(--red)) 0 0 / var(--level, 100%) 100% no-repeat, rgba(255,255,255,0.28);
}
.iip-volume input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--red);
}
.iip-volume input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--red); }
.iip-volume input:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 4px; }
/* iOS ignores video.volume (the hardware buttons own it), so touch devices
   keep only the mute buttons. */
@media (hover: none) and (pointer: coarse) { .iip-volume { display: none !important; } }

/* Static fallback (reduced motion, or JS without the effect): an ordinary
   rounded media card in the page flow with a play button. */
.hx-film-play { display: none; }
/* JS moves the frame, play button and controls into .hx-film-slot. */
.hx-film.is-static { height: auto; padding: var(--section-y) 0; }
.hx-film.is-static .hx-film-stage { position: relative; height: auto; overflow: visible; }
.hx-film.is-static .hx-film-layout { position: relative; inset: auto; }
.hx-film.is-static .hx-film-slot { overflow: hidden; pointer-events: auto; }
.hx-film.is-static .hx-film-frame { inset: 0; clip-path: none; will-change: auto; pointer-events: auto; }
.hx-film.is-static .hx-film-frame video { width: 100%; height: 100%; transform: translate(-50%, -50%); will-change: auto; }
.hx-film.is-static:not(.is-started) .hx-film-play {
  display: inline-flex; position: absolute; z-index: 3; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 76px; height: 76px;
}
.hx-film.is-static:not(.is-started) .hx-film-play svg { width: 26px; height: 26px; margin-left: 4px; }
.hx-film.is-static.is-started .hx-film-ui { opacity: 1; visibility: visible; }
.hx-film.is-static .hx-film-ui--top { top: var(--space-2); }

/* Phones (Martin, 2026-10-22): the static card above, the picture itself
   doesn't play or pause, and a fullscreen button ends the control row. The
   slot goes fullscreen with the controls in it, so the same button exits;
   the whole picture shows in portrait and landscape alike. iPhone uses
   Apple's own player instead (see the WP1 script). */
.hx-film-fullscreen { display: none; }
.hx-film.is-phone .hx-film-fullscreen { display: inline-flex; margin-left: auto; }
.hx-film .hx-if-fullscreen { display: none; }
.hx-film.is-fullscreen .hx-if-fullscreen { display: contents; }
.hx-film.is-fullscreen .hx-if-windowed { display: none; }
.hx-film.is-phone .hx-film-frame { cursor: default; }
.hx-film-slot:fullscreen { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; background: #000; }
.hx-film-slot:-webkit-full-screen { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; background: #000; }
.hx-film-slot:fullscreen .hx-film-frame video { object-fit: contain; }
.hx-film-slot:-webkit-full-screen .hx-film-frame video { object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .hx-blink-dot { animation: none; }
  .hx-caret { display: none; }
  .hx-film-ui, .hx-film-btn { transition: none; }
}

/* Narrow: stack the descriptors, no separators (a wrapped row would start
   its second line with a stray "·"). */
@media (max-width: 640px) {
  .hero-descriptors { flex-direction: column; gap: 6px; }
  .hero-descriptors > span + span::before { content: none; }
}
/* ==== /SLOT:WP1 ==== */