/* JDLO v5 videos row: a second film band under the R8 photo roll (home #pearls), and the same band on
   Work > Videos. Same grammar as the photo strip in home4.css: the dark band with sprocket holes, frames
   that swipe natively, one per swipe on phones, nothing tied to page scroll.
   Each frame is a poster plus a muted preview loop that adaptive.js starts only near view (poster only on
   slow or Save-Data connections, under reduced motion and when autoplay is blocked). A tap plays the whole
   video in place, with sound and the browser's own controls (vband.js). Landscape films widen their frame
   to their own shape at the same height, so the page never jumps.
   One ink, Schibsted Grotesk, square corners, no shadow, no gradient fill. Tap targets in px. */

.vband { margin: 3.5rem calc(-1 * var(--pad)) 0; position: relative; scroll-margin-top: var(--header-h); }
.vband__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-inline: var(--pad); }
.vband__head { font-size: 1.1875rem; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; max-width: 30ch; }

/* Arrows: only where a pointer can't swipe sideways easily, and only while the band overflows. */
.vband__nav { display: none; gap: 8px; flex: none; }
.vband__nav button { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); cursor: pointer; padding: 0; }
.vband__nav button:disabled { opacity: .3; cursor: default; }
.vband__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.vband__nav button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .vband__nav { display: flex; visibility: hidden; }          /* space kept, so showing them never moves the band */
  .vband.is-scrollable .vband__nav { visibility: visible; }
  .vband__nav button:not(:disabled):hover { background: var(--ink); color: #fff; }
}

.vband__strip {
  --tw: 68vw;                               /* phones: the photo roll's frame width, the next frame peeks */
  --th: calc(var(--tw) * 1.25);             /* 4:5 frame height; a playing film keeps this height */
  --gap: .75rem;
  margin-top: 1rem;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  position: relative;
  background-color: #0a0a0a;
  background-image:
    repeating-linear-gradient(90deg, #ece6d6 0 10px, transparent 10px 26px),
    repeating-linear-gradient(90deg, #ece6d6 0 10px, transparent 10px 26px);
  background-size: 100% 7px, 100% 7px;
  background-position: 0 9px, 0 calc(100% - 9px);
  background-repeat: repeat-x;
  padding-block: 26px 24px;
}
.vband__strip::-webkit-scrollbar { display: none; }
.vband__strip:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.vband__list { list-style: none; margin: 0; padding: 0 var(--pad); display: flex; gap: var(--gap); width: max-content; align-items: start; }

.vtile { flex: 0 0 auto; width: var(--tw); scroll-snap-align: start; scroll-snap-stop: always; transition: width .45s var(--ease, ease); }
.vtile__frame { position: relative; height: var(--th); overflow: hidden; background: #000; }

/* The poster link: works with JS off (it opens the MP4). */
.vtile__open { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.vtile__open img, .vtile__open video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vtile__open video { opacity: 0; transition: opacity .4s; }
.vtile__open video.is-on { opacity: 1; }
.vtile__open:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Play mark and length: the v5 card's solid ink block, square, no scrim. */
.vtile__play { position: absolute; left: 0; bottom: 0; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 10px;
  background: #0a0a0a; color: #fff; font: 600 14px/1 var(--sans, "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vtile__play svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.vtile__play i { font-style: normal; font-weight: 500; color: #c7c2b6; }
@media (hover: hover) { .vtile__open:hover .vtile__play { background: #fff; color: #0a0a0a; } .vtile__open:hover .vtile__play i { color: #55524b; } }

/* Playing: the film fills the frame at its own shape (letterboxed in black, never stretched or cropped). */
.vtile.is-playing .vtile__open { display: none; }
.vtile__player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
/* Close sits under the frame's right edge, never over the browser's own video controls. */
.vtile { position: relative; }
.vtile__close { position: absolute; top: calc(var(--th) + .5rem); right: 0; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(236, 230, 214, .55); border-radius: 0; padding: 0; background: #0a0a0a; color: #fff; cursor: pointer; }
@media (hover: hover) { .vtile__close:hover { background: #fff; color: #0a0a0a; } }

.vtile__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.vtile__close:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Words under each frame, on the band like the photo roll's captions. */
.vtile__body { padding: .875rem 0 0; color: #ece6d6; max-width: var(--tw); }   /* fixed width: a widening film never reflows the words, so the band keeps its height */
.vtile__title { font-size: 1.125rem; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.vtile__text { margin-top: .375rem; color: #b8b3a8; font-size: .875rem; line-height: 1.4; }
.vtile__credit { margin-top: .5rem; color: #9a9488; font-size: .8125rem; line-height: 1.45; }
.vtile__text a, .vtile__credit a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; display: inline-flex; align-items: center; box-sizing: border-box; min-width: 44px; min-height: 44px; max-width: 100%; padding-block: .8rem; }
@media (hover: hover) { .vtile__text a:hover, .vtile__credit a:hover { color: #fff; } }
.vtile__text a:focus-visible, .vtile__credit a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Work > Videos: the band sits in a .wk / page section. */
.wk .vband, .sec .vband { margin-top: 2rem; }
.vband + .rows { margin-top: 2.5rem; }

@media (min-width: 1024px) {
  .vband { grid-column: 1 / -1; margin: 5rem calc(-1 * var(--pad)) 0; }
  .vband__strip { container-type: inline-size; --gap: 1.5rem; --tw: calc((100cqi - 2 * var(--pad) - 2 * var(--gap)) / 3); margin-top: 1.5rem; padding-block: 30px 28px; }
  .vtile__title { font-size: 1.375rem; }
  .vtile__text { font-size: .9375rem; }
  .vtile__credit { font-size: .875rem; }
  .wk .vband, .sec .vband { margin-top: 3rem; }
}
/* Browsers without container units: three across from the viewport instead. */
@supports not (width: 1cqi) {
  @media (min-width: 1024px) { .vband__strip { --tw: calc((100vw - 2 * var(--pad) - 2 * var(--gap) - 16px) / 3); } }
}

@media (prefers-reduced-motion: reduce) {
  .vtile { transition: none; }
  .vtile__open video { display: none; }   /* posters only; a tap still plays the film, the reader asked for it */
}

/* Home #pearls on desktop: with the reel cards moved into the band, the name sits left and the role points
   sit right; the photo roll and the videos band run full width under them. */
@media (min-width: 1024px) {
  .rel--film .rel__head { grid-column: 1; grid-row: 1 / span 2; }
  .rel--film .rel__points { grid-column: 2; grid-row: 1; margin-top: .75rem; }
  .rel--film .rel__more { grid-column: 2; grid-row: 2; }
}

/* H16: a film that plays in its own slot (desktop, whole band on screen) keeps the row as it is; its close
   button sits inside the frame's top corner, clear of the browser's controls along the bottom. */
.vtile.is-inset .vtile__close { top: .5rem; right: .5rem; }