/* ba.css: the films band on one screen, before and after.
   Before Opus 5.5: the three launch films, each with its month and how long it took.
   With Opus 5.5: twelve videos in six days, eight tiles in date order (the five interview cuts share one). */

#film.film-band { padding: 72px 0 80px; }
#film .shelf-head { margin-bottom: 28px; }
.ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; align-items: stretch; }
#film .shelf-head { grid-template-columns: minmax(0, 1fr); }
/* side by side, the week's tiles fill the column so both halves end on the same line */
@media (min-width: 861px) {
  .ba-after { display: flex; flex-direction: column; }
  .ba-grid { flex: 1; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .ba-grid li { display: flex; }
  .ba-grid .ba-tile { aspect-ratio: auto; height: 100%; min-height: 150px; }
}
#opus-week { scroll-margin-top: 150px; }

.ba-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--dark-line); font: 500 var(--t-label)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-soft); }
.ba-label b { font-weight: 500; color: var(--on-dark); white-space: nowrap; }
.ba-label .opus { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 15px; }
.ba-label > span { white-space: nowrap; }

/* before: the Stripe film leads, the two others share the row under it */
.ba-films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ba-films > .fcard { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 9; }
.ba-films > .fc-stripe { grid-column: 1 / -1; }
.ba-films > .fcard:not(.fc-stripe) .fc-title { font-size: 16px; }
.ba-films > .fcard:not(.fc-stripe) .fc-meta { font-size: 12.5px; }
.ba-films > .fcard:not(.fc-stripe) .fc-info { left: 14px; right: 14px; bottom: 12px; gap: 2px; }
.ba-films > .fcard:not(.fc-stripe) .fc-top { top: 10px; left: 10px; right: 10px; }
.ba-films .fc-meta b { font-weight: 650; color: var(--on-dark); }
.ba-films .fc-intro { --pos: 50% 50%; --vpos: 50% 50%; }

/* after: the number, then the week in tiles */
.ba-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 16px; }
.ba-stat b { font: 500 44px/1 var(--display); letter-spacing: -0.02em; color: var(--signal); }
.ba-stat span { font-size: var(--t-small); color: var(--on-dark-soft); }
.ba-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ba-grid li { min-width: 0; }
.ba-tile { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; margin: 0; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--dark-2); color: var(--on-dark); font: inherit; text-align: left; box-shadow: 0 0 0 1px oklch(1 0 0 / .08); transition: translate .2s, box-shadow .2s, scale .15s; }
button.ba-tile { cursor: pointer; }
.ba-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ba-tile::after { content: ""; position: absolute; inset: 48% 0 0; background: linear-gradient(180deg, oklch(0.17 0.01 70 / 0), oklch(0.17 0.01 70 / .9)); pointer-events: none; }
.ba-date { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 3px 7px; border-radius: var(--r-pill); background: oklch(0.17 0.01 70 / .74); font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); }
.ba-play { position: absolute; z-index: 2; right: 8px; bottom: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: oklch(0.17 0.01 70 / .74); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .2); color: var(--on-dark); transition: background-color .2s, color .2s; }
.ba-play svg { width: 10px; height: 10px; margin-left: 1px; fill: currentColor; }
.ba-cap { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 9px; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
button.ba-tile .ba-cap { right: 38px; }
.ba-short { display: none; }
@media (hover: hover) and (pointer: fine) {
  button.ba-tile:hover { translate: 0 -3px; box-shadow: 0 0 0 1.5px var(--signal), 0 24px 40px -20px oklch(0 0 0 / .9); }
  button.ba-tile:hover .ba-play { background: var(--card); color: var(--ink); }
}
button.ba-tile:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
button.ba-tile:focus-visible .ba-play { background: var(--card); color: var(--ink); }
button.ba-tile:active { scale: .97; }

@media (max-width: 1100px) {
  .ba { gap: 28px 28px; }
  .ba-stat b { font-size: 36px; }
  .ba-cap { font-size: 12.5px; }
}
@media (max-width: 980px) {
  /* the Stripe film keeps its letterbox here: the whole frame, then its title on the film's own black */
  .ba-films > .fc-stripe { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--dark); }
}
@media (max-width: 860px) {
  .ba { grid-template-columns: minmax(0, 1fr); }
  #opus-week { scroll-margin-top: 88px; }
}
@media (max-width: 620px) {
  #film.film-band { padding: 56px 0 64px; }
  .ba-stat b { font-size: 32px; }
  .ba-grid { gap: 8px; }
  .ba-date { top: 6px; left: 6px; padding: 2px 5px; font-size: 10px; }
  .ba-play { display: none; }
  .ba-cap, button.ba-tile .ba-cap { left: 7px; right: 7px; bottom: 7px; font-size: 12px; }
  /* the two smaller launch films become list rows: the picture on the left, the words beside it */
  .ba-films { gap: 10px; }
  .ba-films > .fcard:not(.fc-stripe) { grid-column: 1 / -1; aspect-ratio: auto; height: 72px; background: none; box-shadow: none; overflow: visible; }
  .ba-films > .fcard:not(.fc-stripe)::before, .ba-films > .fcard:not(.fc-stripe)::after { display: none; }
  .ba-films > .fcard:not(.fc-stripe) .fc-still, .ba-films > .fcard:not(.fc-stripe) video { inset: 0 auto auto 0; width: 128px; height: 72px; border-radius: 10px; }
  .ba-films > .fcard:not(.fc-stripe) .fc-top { display: none; }
  .ba-films > .fcard:not(.fc-stripe) .fc-info { left: 142px; right: 0; top: 50%; bottom: auto; translate: 0 -50%; }
  .ba-films > .fcard:not(.fc-stripe) .fc-title { font-size: 15px; }
  .ba-films > .fcard:not(.fc-stripe) .fc-meta { font-size: 13px; }
  .ba-long { display: none; }
  .ba-short { display: inline; }
}