/*
  Library Subpage layout.

  .card-masonry-top: CSS multi-column, so cards pack into as many columns as fit
  (3 → 2 → 1 by width) with no strict breakpoints and no grid row-stretching
  gaps. Reading order runs down each column, then across.

  .card-masonry-bottom: posts 2/3 + mailing list 1/3, stacking on mobile.
*/

/* ── Page wrapper ─────────────────────────────────────────────────────────── */


.library-subpage {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.library-subpage-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  padding: 0 var(--space-large) var(--space-xlarge) var(--space-large);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* The top gap belongs to the illustrated hero, which Figma sets 24px clear of
   the cards. An unillustrated hero ends flush, so it keeps the 0 top padding
   above — keyed on the art rather than on flagship status, since a flagship
   library without art gets the short hero too. */
body:has(.hero:not(.hero--no-image)) .library-subpage-container {
  padding: var(--space-xlarge) var(--space-large);
}

/* ── Top card masonry ────────────────────────────────────────────────────── */

/* --subpage-col-min is hand-picked: with the 1440px container and 16px gaps it
   yields 3 columns on desktop, 2 on tablet, 1 on mobile. */
.card-masonry-top {
  --subpage-col-min: 22rem;
  columns: var(--subpage-col-min);
  column-gap: var(--space-card);
}

.card-masonry-top > * {
  break-inside: avoid;
  margin-bottom: var(--space-card);
}

/* ── Bottom card row (desktop/tablet: posts 2/3, mailing 1/3) ────────────── */

.card-masonry-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "a a b";
  row-gap: var(--space-card);
  column-gap: var(--space-card);
}

.card-masonry-bottom .item-a { grid-area: a; }
.card-masonry-bottom .item-b { grid-area: b; }

.card-masonry-bottom:not(:has(> .item-a)) {
  grid-template-areas: "b . .";
}

/* ── Card max-width overrides ────────────────────────────────────────────── */

/* Cards should fill their wrapper, ignoring their own max-width. */
.card-masonry-top .card,
.card-masonry-top .basic-card,
.card-masonry-top .dependencies-card,
.card-masonry-top .code-block-card,
.card-masonry-top .contributors-list,
.card-masonry-top .markdown-card,
.card-masonry-top .quick-start-card,
.card-masonry-top .stats--benchmarks,
.card-masonry-bottom > div > .card,
.card-masonry-bottom > div > .basic-card,
.card-masonry-bottom > div > .card-group,
.card-masonry-bottom > div > .post-card,
.card-masonry-bottom > div > [data-ml-block] > .card,
.library-subpage__documentation > .markdown-card,
.library-subpage__freeform > .markdown-card,
.library-subpage__all-contributors > .contributors-list {
  max-width: 100%;
  width: 100%;
}

/* Override the component's fixed height so it sizes like the other cards. */
.card-masonry-top .stats--benchmarks {
  height: auto;
  max-height: none;
}

.library-subpage__documentation > .markdown-card {
  max-height: 572px;
  display: flex;
  flex-direction: column;
}

/* ── Card body scroll caps ───────────────────────────────────────────────── */

/* Each card caps its body — the region below the title — so one long card can't
   dominate a column. Titles, dividers and CTAs stay put. */
.card-masonry-top .item-a { --subpage-code-body-max: 450px; }  /* About */
.card-masonry-top .item-c { --subpage-code-body-max: 214px; }  /* Install */

.card-masonry-top .item-a .code-block-card__body,
.card-masonry-top .item-c .code-block-card__body {
  max-height: var(--subpage-code-body-max);
  overflow-y: auto;
}

/* Body is the only scroll region: let the code block grow to its full height
   instead of flexing down into its own nested scroller. */
.card-masonry-top .item-a .code-block,
.card-masonry-top .item-c .code-block {
  flex: 0 0 auto;
}

.card-masonry-top .item-a .code-block__scroll-container,
.card-masonry-top .item-c .code-block__scroll-container {
  max-height: none;
  overflow: visible;
}

/* Benchmarks */
.card-masonry-top .item-g .stats__body {
  max-height: 362px;
  overflow-y: auto;
}

/* Contributors: This Release */
.card-masonry-top .item-d .contributors-list__body {
  max-height: 408px;
}

/* Designed for */
.card-masonry-top .item-f .markdown-card__body {
  max-height: 245px;
}

/* Freeform */
.library-subpage__freeform > .markdown-card .markdown-card__body {
  max-height: 143px;
}

/* ── Mobile (< 768px): tighter padding, stack the bottom row ─────────────── */

@media (max-width: 767px) {
  .library-subpage-container {
    padding: 0 var(--space-default) var(--space-xlarge) var(--space-default);
    gap: var(--space-large);
  }

  body:has(.hero:not(.hero--no-image)) .library-subpage-container {
    padding: var(--space-large) var(--space-default);
  }

  /* Single column on mobile — use flex so `order` controls card sequence
     (multi-column children don't respond to `order`). */
  .card-masonry-top {
    display: flex;
    flex-direction: column;
  }

  .card-masonry-top .item-a { order: 1; }  /* About */
  .card-masonry-top .item-b { order: 2; }  /* Quick Start */
  .card-masonry-top .item-c { order: 3; }  /* Install */
  .card-masonry-top .item-g { order: 4; }  /* Benchmarks */
  .card-masonry-top .item-e { order: 5; }  /* Dependencies */
  .card-masonry-top .item-d { order: 6; }  /* Contributors: This Release */
  .card-masonry-top .item-f { order: 7; }  /* Designed for */
  .card-masonry-top .library-subpage__freeform { order: 8; }  /* Freeform */

  .card-masonry-bottom {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b";
  }

  .card-masonry-bottom:not(:has(> .item-a)) {
    grid-template-areas: "b";
  }
}