/* Home: the wall of posters. */

.today { padding-top: var(--s2); }
.today__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--s3); margin-bottom: var(--s4); }
.today__head h1 { font-size: 22px; }
.today__head p { font-size: 15px; }

.today__grid { display: grid; gap: var(--s5); }
.today__featured .poster { width: 100%; }
.today__side { display: grid; grid-auto-flow: column; grid-auto-columns: min(76%, 320px); gap: var(--s5);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) var(--s4); scroll-padding-inline: var(--gutter);
  list-style: none; scrollbar-width: thin; }
.today__side > li { scroll-snap-align: start; display: flex; }
.today__side .poster { width: 100%; }
.today__side .poster--wide { aspect-ratio: 4 / 5; }
.slot-label { font-weight: 700; }

@media (min-width: 720px) {
  .today__featured .poster { aspect-ratio: 5 / 4; }
  .today__side { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; margin: 0; padding: 0; }
  .today__side .poster--wide { aspect-ratio: 4 / 5; }
}
/* Desktop: featured about 60% width, two stacked landscape posters beside it.
   Height fits the first screen: header + heading + posters inside 800px. */
@media (min-width: 1024px) {
  .today__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    height: clamp(500px, calc(100svh - 150px), 680px);
    gap: var(--s6);
  }
  .today__featured .poster { aspect-ratio: auto; height: 100%; }
  .today__side { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: var(--s6); height: 100%; }
  .today__side .poster--wide { aspect-ratio: auto; height: 100%; }
  .today__side .poster--wide .poster__art svg { right: 0; }
}

/* Shelves */
.shelves { margin-top: var(--s2); }
.shelf + .shelf { margin-top: var(--s7); }
.shelf__head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); min-height: 44px; }
.shelf__head h2 { font-size: 22px; }
.shelf__count { font-size: 15px; }
.shelf__nav { margin-left: auto; display: flex; gap: var(--s2); }
.shelf__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(74%, 300px); gap: var(--s5);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) var(--s4); scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.shelf__row > li { scroll-snap-align: start; display: flex; }
.shelf__row .poster { width: 100%; }
.shelf__row:focus-visible { outline-offset: -3px; }
@media (min-width: 720px) {
  .shelf__row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; gap: var(--s5); }
  .shelf__nav { display: none; }
}
@media (min-width: 1024px) { .shelf__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); } }

/* Stats band on surface */
.stats-band { background: var(--surface); margin-top: var(--s7); padding-block: var(--s6); scroll-margin-top: var(--s4); }
.stats-band__grid { display: grid; gap: var(--s5); align-items: start; }
.stats-band h2 { font-size: 22px; }
.stats-band__intro p { margin-top: 4px; }
.stats-band__week h3 { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: var(--s2); }
.stats-band__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.stats-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.stats-empty p { font-size: 17px; max-width: 44ch; }
@media (min-width: 1024px) {
  .stats-band__grid { grid-template-columns: 220px minmax(0, 1fr) 330px; column-gap: var(--s6); }
  .stats-band__actions { grid-column: 2 / -1; }
}