/* Video page styles. Owned by the video page agent. Shared classes live in ../style.css (see INNER-PAGE KIT); do not redefine them here.
   Composition: the home Watch tiles (.tile > a > .tile-media.wipe + h3.cap + p.cap.sub) laid out as a staggered 12-column film wall.
   Strings run at ~72% of the width (grid columns 8.5 to 9.5): captions sit in columns 1-8 or from column 10; only images cross the lane. */

.page-hero .label { margin-bottom: clamp(14px, 2vw, 24px); }

/* ---------- the film wall ---------- */
.vtiles { counter-reset: film; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(56px, 8vw, 128px) clamp(12px, 2vw, 28px); max-width: 1560px; margin: clamp(32px, 5vw, 72px) auto 0; }
.vtiles .tile { counter-increment: film; }

/* outline numeral above each film: small tiles carry the big numbers (scale contrast) */
.vtiles .tile::before { content: counter(film, decimal-leading-zero); content: counter(film, decimal-leading-zero) / ""; display: block; position: relative; z-index: 10; margin-bottom: .14em; font: italic 300 clamp(2.6rem, 9vw, 4rem)/1 var(--serif); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.2px var(--cobalt); }

/* captions: composer upstanding, work + movements in italic cobalt (h3.cap em), then collaborator, then the link label */
.vtiles h3.cap { margin: 1rem 0 .35rem; }
.vtiles p.cap.by { margin: 0 0 .75rem; font: 400 clamp(.95rem, 1.25vw, 1.05rem)/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--deep); }
.vtiles p.cap.sub { display: inline-block; padding: .55rem 0; }

/* states: hover and keyboard focus underline the composer (style.css) and the link label; active presses the play disc and deepens the italic */
.play { transition: transform .4s var(--ease); }
.vtiles .tile a:hover .play, .vtiles .tile a:focus-visible .play { transform: scale(1.1); }
.vtiles .tile a:active .play { transform: scale(.95); }
.vtiles .tile a:hover p.cap.sub, .vtiles .tile a:focus-visible p.cap.sub { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .4em; }
.vtiles .tile a:focus-visible h3.cap span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.vtiles .tile a:active h3.cap em { color: var(--deep); }

/* phones and small tablets: one column, every second film indented so the list still staggers */
@media (max-width: 799px) {
  .vtiles .tile:nth-child(even) { margin-inline-start: clamp(0px, 9vw, 72px); }
}
@media (min-width: 640px) and (max-width: 799px) {
  .vtiles .tile .cap { max-width: 62%; }
  .vtiles .tile:nth-child(even) .cap { max-width: 56%; }
}

@media (min-width: 800px) {
  .vtiles .tile::before { font-size: clamp(2.8rem, 5vw, 5.5rem); }
  .vtiles h3.cap { margin-top: 1.2rem; }

  /* 01 feature: nine columns, image runs under the strings, caption clear of them */
  .f1 { grid-column: 1 / 10; grid-row: 1; }
  .f1 h3.cap { font-size: clamp(1.8rem, 3.6vw, 3.8rem); }
  .f1 .cap { max-width: 76%; }
  /* 02 small, right of the strings, bottom-aligned against the feature */
  .f2 { grid-column: 10 / 13; grid-row: 1; margin-inline-start: 28px; align-self: end; }
  /* 03 small, left, dropped below the top of its row */
  .f3 { grid-column: 1 / 4; grid-row: 2; align-self: start; margin-top: clamp(48px, 9vw, 150px); }
  /* 04 wide, starts in column 5; the strings cross the image only */
  .f4 { grid-column: 5 / 13; grid-row: 2; }
  .f4 .cap { max-width: 46%; }
  /* 05 mid, indented one column, ends before the strings */
  .f5 { grid-column: 2 / 8; grid-row: 3; }
  .f5 h3.cap { font-size: clamp(1.55rem, 2.8vw, 2.8rem); }
  /* 06 small, right of the strings, lower than its row-mate */
  .f6 { grid-column: 10 / 13; grid-row: 3; margin-inline-start: 28px; margin-top: clamp(64px, 12vw, 200px); }
  /* 07 small-mid, left */
  .f7 { grid-column: 1 / 5; grid-row: 4; align-self: end; }
  /* 08 closing wide tile, caption holds columns 6-8 */
  .f8 { grid-column: 6 / 13; grid-row: 4; }
  .f8 h3.cap { font-size: clamp(1.6rem, 2.9vw, 3rem); }
  .f8 .cap { max-width: 40%; }

  .f2 h3.cap, .f3 h3.cap, .f6 h3.cap, .f7 h3.cap { font-size: clamp(1.2rem, 1.9vw, 1.8rem); }
  .vtiles .f2::before, .vtiles .f3::before, .vtiles .f6::before, .vtiles .f7::before { font-size: clamp(5rem, 12vw, 13rem); }
}

/* hidden-initial states only with JS and motion allowed; the tile's own .in (data-reveal on .tile) triggers wipe, caption rise and numeral */
html.js:not(.static) .vtiles .tile::before { opacity: 0; transform: translateY(18px); }
html.js:not(.static) .vtiles .tile.in::before { opacity: 1; transform: none; transition: opacity .8s ease .1s, transform 1s var(--ease) .1s; }

/* ---------- next: closing link to the repertoire ---------- */
.next .big { margin-top: clamp(16px, 2.4vw, 32px); font-size: clamp(3rem, 9vw, 8.4rem); }
.next .big em { color: var(--orange); }
.next .arrow-link { margin-top: clamp(24px, 4vw, 56px); }
@media (min-width: 640px) { .next .big { max-width: 66%; } }