/* Grand Blade Media: page-channels.css
   Page-prefixed classes only. Tokens and components come from site.css; nothing here
   hard-codes a color. Animates nothing. */

/* ---------- Intro ---------- */
/* Same top spacing as the other inner page heads (7rem), so the H1 starts at the same y. */
.channels-intro{padding-top:clamp(3.5rem,8vw,7rem);padding-bottom:0}
.channels-intro .section__head{margin-bottom:0}
.channels-intro .section__head .h1{max-width:10em}
.channels-intro .owned-note{margin-top:var(--s-4)}
.channels-windows{max-width:46rem;margin-top:var(--s-2);padding-left:2.15rem}

/* ---------- Roster ---------- */
.channels-roster{padding-bottom:var(--s-5)}
.channels-list{display:flex;flex-direction:column;gap:var(--s-6)}
.channels-group{display:flex;flex-direction:column;gap:var(--s-5)}
.channels-group--tight{gap:var(--s-3)}
.channels-notice{max-width:46rem;padding-left:.25rem}

/* The dossier is a stack of blocks; keep the quartet tidy at every width. */
.dossier>header .channels-desc{max-width:40rem;margin-top:var(--s-2);font-size:var(--fs-body);line-height:1.6;color:var(--fg)}
.dossier .metrics{grid-template-columns:minmax(0,1fr)}
@media (min-width:36em){.dossier .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:72em){.dossier .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}

.channels-how{display:grid;gap:var(--s-2)}
.channels-how .eyebrow{margin:0}
.dossier>.callout{max-width:54rem}
.dossier .dossier__links{padding-top:var(--s-1)}

/* ---------- Video wall ---------- */
.channels-wall{display:flex;flex-direction:column;gap:var(--s-3)}
.channels-wall>.h3{max-width:none}
.channels-wall .cols{gap:var(--s-4) var(--s-3)}
.channels-wall__note,.channels-wall__disclosure{max-width:52rem}
/* From 56em the wall is one strip of six, so it stays a supporting row under the dossier instead of
   a 3 x 2 block of 570px-tall posters between 1024 and 1151. */
@media (min-width:56em){.channels-wall .cols{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--s-2)}}
@media (min-width:72em){.channels-wall .cols{column-gap:var(--s-3)}}
/* A Short that has been played takes its own full row (site.css). In a one-row strip, put that row
   first, so the player opens where the strip was and the other five follow below it instead of
   being split 2 / player / 3. */
@media (min-width:56em){.channels-wall .cols>.channels-tile:has(.is-playing){order:-1}}

/* One tile: poster, title, public views, publish date, then the plain link.
   .yt is flattened so its poster and fallback link can be ordered around the text. */
.channels-tile{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.channels-tile .yt{display:contents}
.channels-tile .yt__play,.channels-tile .yt__iframe{order:1}
.channels-tile__title{order:2;margin-top:.65rem;font-weight:500;font-size:.9375rem;line-height:1.35;color:var(--fg);text-wrap:balance;overflow-wrap:anywhere}
.channels-tile__stat{order:3;display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .45rem;margin-top:.35rem}
.channels-tile__stat .num{font-size:1.75rem;line-height:1;color:var(--fg)}
.channels-tile__label{font-size:var(--fs-small);line-height:1.4;color:var(--fg-2)}
.channels-tile__date{order:4;font-size:var(--fs-small);line-height:1.4;color:var(--fg-2)}
.channels-tile .yt__fallback{order:5;margin-top:.15rem}

/* Where subgrid exists, every tile in a row shares five row tracks (poster, title, views, date,
   link), so views and dates line up across tiles whatever the title length. Without subgrid the
   flex column above still reads correctly, only unaligned. */
@supports (grid-template-rows:subgrid){
  .channels-wall .cols{row-gap:0}
  .channels-tile{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:.35rem;padding-bottom:var(--s-4)}
  .channels-wall__note{margin-top:calc(var(--s-4) * -1)}
}

/* ---------- Closing ---------- */
.channels-next{padding-top:var(--s-5);padding-bottom:var(--s-3)}
.channels-next__body{display:grid;gap:var(--s-3);padding-top:var(--s-5);max-width:60rem}
.channels-next__body .h2{max-width:14em}
.channels-next__body .lede{max-width:46rem}
.channels-next__links{display:flex;flex-wrap:wrap;gap:.25rem var(--s-4);margin-top:var(--s-2)}