/* Home grid — the phase cards use the width when there is room; one column
 * on phones, as before. Cards keep their natural height.
 *   .home-cards        : a grid (pre-festival sections, cards of even height)
 *   .home-cards--flow  : columns that pack cards of any height, read down each
 *                        column in priority order (during / after the festival)
 *   .home-card--wide   : spans the width (heroes, map, stats)
 *   main > 46rem: two columns · main > 72rem: three
 */

@layer components {
  .home-page {
    max-width: 44rem;
    margin-inline: auto;

    @container main (width > 46rem) {
      max-width: 76rem;
    }
  }

  .home-card--ticker:not(:has(.home-hype-ticker)) {
    display: none;
  }

  .home-hype-ticker:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }

  @container main (width > 46rem) {
    .home-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-flow: row dense;
      align-items: start;
      gap: 0.875rem;
    }

    .home-card--wide {
      grid-column: 1 / -1;
      min-width: 0;
    }

    /* Nothing beside readiness: let it take the row. */
    .home-cards--lead:not(:has(.home-card--next-move)) .home-card--readiness {
      grid-column: 1 / -1;
    }

    .home-cards--flow {
      display: block;
      columns: 2;
      column-gap: 0.875rem;

      & > .home-card {
        break-inside: avoid;
        margin-block-end: 0.875rem;
      }

      & > .home-card--wide {
        column-span: all;
      }
    }
  }

  @container main (width > 72rem) {
    .home-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-card--wide {
      grid-column: span 2;
    }

    .home-cards--lead .home-card--ticker {
      grid-column: 1 / -1;
    }

    .home-cards--flow {
      columns: 3;
    }
  }
}