/* ==========================================================================
   WFL — Kijk mee (watch.html) · brief §5.8
   Scoped under body.page-watch. Components come from components.css;
   this file arranges them and adds the REGIEKAMER monitor wall.
   ========================================================================== */

/* ---- featured film (page hero) --------------------------------------------- */
.page-watch { --wsub-h: 52px; }
.page-watch .wh { padding: var(--screen-inset) var(--screen-inset) 0; }
/* the screen + the sub-nav below it fill exactly one viewport (the sub-nav sits fully above the fold) */
.page-watch .wh__screen {
  height: calc(100svh - var(--header-h) - 2 * var(--screen-inset) - var(--wsub-h));
  min-height: 600px; max-height: 1080px;
}
.page-watch .wh__screen .screen__fx {
  background: linear-gradient(to top, rgba(7, 7, 10, .92) 0%, rgba(7, 7, 10, .62) 34%, rgba(7, 7, 10, 0) 66%), var(--vignet);
}
.page-watch .wh__screen .screen__overlay { justify-content: flex-end; }
.page-watch .wh__grid { display: grid; gap: var(--s-6); align-items: end; }
.page-watch .wh__copy { display: grid; gap: var(--s-4); justify-items: start; }
.page-watch .wh__title { font-size: clamp(4rem, 9vw, 10rem); line-height: .82; }
.page-watch .wh__film {
  display: grid; gap: var(--s-3); justify-items: start;
  padding-top: var(--s-4); border-top: 1px solid rgba(241, 238, 232, .22);
}
.page-watch .wh__filmtitle { color: var(--bot); }
.page-watch .wh__cta { margin-top: var(--s-2); }
@media (max-width: 767.98px) {
  .page-watch .wh__screen { min-height: 540px; }
  .page-watch .wh__film .d3 { font-size: 1.75rem; }
}
@media (min-width: 1024px) {
  .page-watch .wh__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: var(--s-8); }
  .page-watch .wh__filmtitle { font-size: clamp(2.25rem, 3vw, 3.25rem); }
  .page-watch .wh__film { padding: var(--s-5) 0 var(--s-1); }
}

/* ---- channel-guide sub-nav ------------------------------------------------------ */
.page-watch .wsub { margin-top: var(--screen-inset); }

/* ---- REGIEKAMER ------------------------------------------------------------------ */
/* outer wall height ≈ .578 × wall width + 17px; the wall fits the viewport under header + sub-nav */
.page-watch .rk-sec { --rk-w: max(720px, calc((100svh - var(--header-h) - var(--wsub-h) - 2 * var(--s-7) - 40px) / .578)); }
.page-watch .rk-head { display: grid; gap: var(--s-4); justify-items: start; margin-bottom: clamp(var(--s-6), 4vw, var(--s-7)); }
.page-watch .rk-head .section__head { margin-bottom: 0; }
.page-watch .rk { --bezel: 8px; position: relative;
  padding: clamp(8px, 1.2vw, 16px);
  border-radius: var(--r-screen);
  background: var(--zaal);
  box-shadow: inset 0 0 0 1px var(--touw), 0 40px 120px -40px rgba(0, 0, 0, .9);
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .page-watch .rk-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s-8); }
  .page-watch .rk-head .section__head { grid-row: span 3; }
  .page-watch .rk { max-width: var(--rk-w); }
}
/* ≥1280: the head becomes a left rail next to the wall, so title, wall, cams and controls share one screen */
@media (min-width: 1280px) {
  .page-watch .rk-sec { padding-block: var(--s-7) var(--s-8); }
  .page-watch .rk-layout { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, var(--rk-w)); column-gap: clamp(var(--s-6), 3.4vw, var(--s-8)); align-items: end; }
  .page-watch .rk-head { margin: 0; align-content: end; padding-bottom: 6px; }
}
/* faint corner light behind the wall: red from the left, blue from the right */
.page-watch .rk::before, .page-watch .rk::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen; opacity: .12;
}
.page-watch .rk::before { background: var(--licht-rood); }
.page-watch .rk::after { background: var(--licht-blauw); }
.page-watch .rk__wall { position: relative; z-index: 1; }

/* PROGRAM monitor */
.page-watch .rk__pgm {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; margin: 0;
  box-shadow: inset 0 0 0 1px rgba(241, 238, 232, .06);
}
.page-watch .rk__pgm-media { position: absolute; inset: 0; overflow: hidden; }
.page-watch .rk__pgm-media > picture, .page-watch .rk__pgm-media > video { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-watch .rk__pgm-media img, .page-watch .rk__pgm-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--cam-pos, 50% 50%);
  transform: scale(var(--cam-scale, 1)); filter: var(--cam-lift, contrast(1.06)) brightness(.94);
}
/* double-buffered PROGRAM: only the active buffer is visible (a hard swap, no fade) */
.page-watch .rk__pgm-vid { opacity: 0; }
.page-watch .rk__pgm-vid.is-on { opacity: 1; }
.page-watch .rk__black { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 2; }
.page-watch .rk__pgm.is-cut .rk__black { opacity: 1; }
.page-watch .rk__pgm-fx {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(7, 7, 10, .7) 0%, rgba(7, 7, 10, 0) 30%), linear-gradient(to bottom, rgba(7, 7, 10, .55) 0%, rgba(7, 7, 10, 0) 22%), var(--vignet);
}
.page-watch .rk__tag { position: absolute; z-index: 4; margin: 0; }
.page-watch .rk__tag { top: clamp(12px, 2vw, 24px); left: clamp(12px, 2vw, 24px); display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-chip); background: var(--rood); color: var(--wit); font-weight: 500; }
.page-watch .rk__tally { width: 7px; height: 7px; border-radius: 50%; background: var(--wit); }

/* camera tiles */
.page-watch .rk__cams { list-style: none; margin: 0; padding: 0; }
.page-watch .rk__cam {
  position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3;
  border-radius: 8px; overflow: hidden; background: #000; color: var(--bot); text-align: left;
  box-shadow: inset 0 0 0 1px rgba(241, 238, 232, .08);
}
.page-watch .rk__cam-media { position: absolute; inset: 0; }
.page-watch .rk__cam-media > picture, .page-watch .rk__cam-media > video { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-watch .rk__cam-media img, .page-watch .rk__cam-media video {
  width: 100%; height: 100%; object-fit: cover; transform: scale(var(--cam-scale, 1));
  filter: var(--cam-lift, contrast(1.06)) brightness(.8) saturate(.85); transition: filter var(--t-micro);
}
.page-watch .rk__cam-media video { opacity: 0; }
.page-watch .rk__cam.is-playing .rk__cam-media video { opacity: 1; }
.page-watch .rk__cam-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(7, 7, 10, .85) 0%, rgba(7, 7, 10, 0) 55%); }
.page-watch .rk__cam::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--t-micro);
}
.page-watch .rk__cam:hover::after { box-shadow: inset 0 0 0 1px rgba(241, 238, 232, .7); }
.page-watch .rk__cam:hover .rk__cam-media img, .page-watch .rk__cam:hover .rk__cam-media video,
.page-watch .rk__cam.is-live .rk__cam-media img, .page-watch .rk__cam.is-live .rk__cam-media video { filter: var(--cam-lift, contrast(1.06)) brightness(.98); }
.page-watch .rk__cam.is-live::after { box-shadow: inset 0 0 0 2px var(--rood); }
.page-watch .rk__cam:focus-visible { outline: 2px solid var(--blauw-signaal); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(0, 51, 255, .35); }
.page-watch .rk__cam-label { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 9px; display: grid; gap: 2px; font-size: var(--fs-mono-s); line-height: 1.25; }
.page-watch .rk__cam-name { color: var(--bot); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* pause (in the head column) */
/* pause toggle (WCAG 2.2.2), same as the screen's: no icon on the page for mouse and touch, it only appears
   (and takes space) when a keyboard user tabs to it. One pause glyph, paused = filled ring (44px hit area) */
.page-watch .rk__pause {
  position: relative; width: 44px; height: 44px; margin-left: -8px; display: grid; place-items: center;
  color: var(--bot); opacity: .75; transition: opacity var(--t-micro);
}
.page-watch .rk__pause:not(:focus-visible) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.page-watch .rk__pause::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(241, 238, 232, .45); transition: background-color var(--t-micro); }
.page-watch .rk__pause .icon { position: relative; width: 12px; height: 12px; }
.page-watch .rk__pause:hover, .page-watch .rk__pause:focus-visible, .page-watch .rk__pause[aria-pressed="true"] { opacity: 1; }
.page-watch .rk__pause[aria-pressed="true"]::before { background: var(--bot); }
.page-watch .rk__pause[aria-pressed="true"] { color: var(--nacht); }

/* desktop wall: PROGRAM 2×2 + two cams right + a row of three below */
@media (min-width: 1024px) {
  .page-watch .rk__wall {
    display: grid; gap: var(--bezel);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "pgm pgm c1" "pgm pgm c2" "c3 c4 c5";
  }
  .page-watch .rk__pgm { grid-area: pgm; }
  .page-watch .rk__cams { display: contents; }
  .page-watch .rk__slot { min-height: 0; }
  .page-watch .rk__slot--1 { grid-area: c1; }
  .page-watch .rk__slot--2 { grid-area: c2; }
  .page-watch .rk__slot--3 { grid-area: c3; }
  .page-watch .rk__slot--4 { grid-area: c4; }
  .page-watch .rk__slot--5 { grid-area: c5; }
  .page-watch .rk__slot--1 .rk__cam, .page-watch .rk__slot--2 .rk__cam { aspect-ratio: auto; }
  .page-watch .rk__cam { aspect-ratio: 16 / 10; }
  .page-watch .rk__cam-label { font-size: var(--fs-mono); left: 14px; bottom: 12px; }
}
/* mobile / tablet: PROGRAM + a horizontal cam strip; pause under the wall */
@media (max-width: 1023.98px) {
  .page-watch .rk-layout { display: flex; flex-direction: column; }
  .page-watch .rk-head { display: contents; }
  .page-watch .rk-head .section__head { order: 1; margin-bottom: var(--s-4); }
  .page-watch .rk { order: 3; }
  .page-watch .rk__pause { order: 5; margin-top: var(--s-4); align-self: flex-start; }
  .page-watch .rk__cams {
    display: flex; gap: var(--bezel); margin-top: var(--bezel); overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .page-watch .rk__cams::-webkit-scrollbar { display: none; }
  .page-watch .rk__slot { flex: 0 0 clamp(132px, 38vw, 220px); scroll-snap-align: start; }
  .page-watch .rk__tag { padding: 4px 8px; font-size: 10px; }
}

/* ---- series ------------------------------------------------------------------------ */
.page-watch .series { padding-top: var(--s-6); border-top: 1px solid var(--touw); }
.page-watch .series + .series { margin-top: clamp(var(--s-8), 6vw, var(--s-9)); }
.page-watch .series__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-5); align-items: end; margin-bottom: var(--s-5); }
.page-watch .series__titles { display: grid; gap: 8px; }
.page-watch .series__nav { display: none; gap: 8px; }
@media (min-width: 768px) {
  .page-watch .series__head { grid-template-columns: minmax(0, 1fr) auto; }
  .page-watch .series__nav { display: flex; }
}
.page-watch .series__nav .hscroll__btn[disabled] { opacity: .3; cursor: default; }
.page-watch .series .vtile__media img { filter: contrast(1.04) saturate(.92); }
/* 1–2 videos: a 2-up of large screens instead of a half-empty rail */
.page-watch .series__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--gutter); overflow: visible; margin-inline: 0; padding: 0; }
.page-watch .series__grid > li { max-width: none; }
@media (min-width: 768px) {
  .page-watch .series__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.page-watch .series--few .vtile__media { border-radius: var(--r-screen); }
.page-watch .series--few .vtile__title { font: 900 clamp(1.5rem, 2.4vw, 2.25rem) / .95 var(--font-display); text-transform: uppercase; }
.page-watch .series--few .vtile__media::after, .page-watch .sfeat .vtile__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--vignet); opacity: .8;
}
/* a single video: one wide feature screen with its own copy column */
.page-watch .sfeat { display: grid; gap: var(--s-5); }
.page-watch .sfeat .vtile__media { aspect-ratio: 16 / 9; border-radius: var(--r-screen); }
/* the feature picture is a pointer target only: its title + CTA live in the copy column */
.page-watch .sfeat__tile .vtile__body { display: none; }
.page-watch .sfeat__copy { display: grid; gap: var(--s-4); justify-items: start; align-content: center; }
.page-watch .sfeat__names { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; margin: 0; }
/* the names stay one step under the series heading (d3) */
.page-watch .sfeat__names .naamslot { --ns: clamp(2rem, 3vw, 2.75rem); }
.page-watch .sfeat__names .naamslot:first-child .naamslot__last { color: var(--rood-signaal); }
.page-watch .sfeat__names .naamslot:last-child .naamslot__last { color: var(--blauw-signaal); }
.page-watch .sfeat__vs { color: var(--rook); padding-bottom: .4em; }
@media (min-width: 1024px) {
  .page-watch .sfeat { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-8); align-items: center; }
  .page-watch .sfeat .vtile__media { aspect-ratio: 21 / 9; }
}
/* hover preview loop (desktop, L36/L37) */
.page-watch .vtile__hv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms var(--ease-out); filter: contrast(1.06) brightness(.8); }
.page-watch .vtile.is-hv .vtile__hv { opacity: 1; }
.page-watch .series-sec { padding-bottom: calc(var(--section-y) * .5); }
.page-watch .series-sec__foot { margin-top: clamp(var(--s-7), 6vw, var(--s-8)); }

/* ---- Foto's ---------------------------------------------------------------------------- */
.page-watch .gal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-5); }
.page-watch .gal-head__meta { color: var(--bot-80); margin: 0; }
.page-watch .gal-head .btn--text { margin-left: auto; }
.page-watch .gallery__lead { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) { .page-watch .gallery__lead { aspect-ratio: 21 / 9; } }
.page-watch .gallery__lead .gallery__tile, .page-watch .gallery__lead picture { height: 100%; }
.page-watch .gallery__grid { list-style: none; padding: 0; margin: 0; }
/* ≥768: a real grid instead of CSS columns, so rows close flush; ≥1024 a 4:5 select spans two 16:9 rows
   (the template picks the 4:5 positions so every row closes) */
@media (min-width: 768px) {
  .page-watch .gallery__grid { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--gutter); }
  .page-watch .gallery__grid > li { margin: 0; min-width: 0; position: relative; }
  .page-watch .gallery__grid .gallery__tile { aspect-ratio: 16 / 9; height: 100%; }
  .page-watch .gallery__grid .gallery__tile picture, .page-watch .gallery__grid .gallery__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .page-watch .gallery__grid > li:has(img[src*="_4x5"]) .gallery__tile img { object-position: 50% 30%; }
}
@media (min-width: 1024px) {
  .page-watch .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-watch .gallery__grid > li:has(img[src*="_4x5"]) { grid-row: span 2; }
  .page-watch .gallery__grid > li:has(img[src*="_4x5"]) .gallery__tile { aspect-ratio: auto; }
}

/* ---- Kijk live ------------------------------------------------------------------------- */
.page-watch .live-sec .pctv { position: relative; overflow: hidden; isolation: isolate; }
.page-watch .live-sec .pctv::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: .22;
  background: var(--licht-rood), var(--licht-blauw);
}
/* the season's nights close the panel, under one hairline; two columns on wide screens */
.page-watch .livelist { list-style: none; padding: var(--s-2) 0 0; margin: 0; border-top: 1px solid var(--touw); }
.page-watch .livelist li + li { border-top: 1px solid var(--touw); }
@media (min-width: 1024px) {
  .page-watch .livelist { columns: 2; column-gap: clamp(var(--s-7), 5vw, var(--s-9)); }
  .page-watch .livelist li { break-inside: avoid; border-bottom: 1px solid var(--touw); }
  .page-watch .livelist li + li { border-top: 0; }
}
.page-watch .livelist__row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "date city arrow" "date how arrow"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 12px 0; color: var(--bot); }
.page-watch .livelist__date { grid-area: date; font-size: 1.5rem; line-height: 1; }
.page-watch .livelist__city { grid-area: city; font: 800 1.125rem/1 var(--font-display); letter-spacing: .01em; }
.page-watch .livelist__how { grid-area: how; color: var(--bot-80); font-size: 13px; }
.page-watch .livelist__how.volgt { color: var(--rook); }
.page-watch .livelist__arrow { grid-area: arrow; color: var(--rook); transition: transform var(--t-micro), color var(--t-micro); }
.page-watch .livelist__row:hover .livelist__arrow { transform: translateX(4px); color: var(--bot); }
.page-watch .livelist__year { padding: 14px 0 4px; }
.page-watch .livelist__year .stencil { display: inline-block; padding: 3px 8px; border-radius: var(--r-chip); font-size: 1rem; line-height: 1; color: var(--zaal); background: var(--bot-80); }