/* ============================================================================
   COLLECTION PAGE — the shell shared by Videos / Communities / Programs /
   Organizations.

   Built from `s/videos`, FE Client file, node 22585:413352 → its body is
   `Body / Videos / Page` (23304:960021). The frame's local styles were NOT
   copied; every colour, space, radius and type step below resolves through
   DESIGN.md. Mapping:

   | Figma                              | Token                            |
   |------------------------------------|----------------------------------|
   | Body gap 16, pb 16                 | `space/md`                       |
   | Title Wrapper py 16                | `space/md`                       |
   | H1  Roboto Bold 30/38  #262626     | `.txt-heading-xl` → heading/xl +
   |                                    | `content/headline`               |
   | Content Wrapper  #FFFFFF, radius 8 | `surface/raised`,
   |                                    | `shape/radius/card`              |
   | Filter Bar  pt 16 / px 16 / pb 24  | `space/md`, `space/lg`           |
   | Filter Bar gap 16                  | `space/md`                       |
   | b/card/content  px 16 / pb 16      | `space/md`                       |
   | Cards grid gap 24 row / 16 column  | `space/lg` / `space/md`          |

   GEOMETRY, verified against the frame: the body is the 1016 measure
   (`data-body-width="wide"` — layout.css), so the grid's inner width is
   1016 − 16 − 16 = 984, and 4 × 234 + 3 × 16 = 984 exactly. That is where the
   card's 234 cap in content-card.css comes from; the four-up row is a
   consequence of the numbers, not a hard-coded column count.

   TODO(tokens): every bare px length in this file is a SIZE or a BREAKPOINT.
   DESIGN.md §12.4 records both as not built. No colour, radius, spacing,
   border-width or font-size literal appears anywhere in this file.
   ========================================================================== */

.collection {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-block-end: var(--space-md);
}

/* --- Body / Header ------------------------------------------------------- */
.collection__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Title Wrapper — the 16px band above and below the H1. */
.collection__title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

.collection__title {
  margin: 0;
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* --- Content Wrapper — the single card the whole listing sits on ---------- */
.collection__panel {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border-radius: var(--shape-radius-card);
}

/* --- Filter Bar ----------------------------------------------------------
   `items-end` in the frame: the three Input / Default sets have labels of the
   same height here, but aligning on the END edge is what keeps the controls on
   one line if any label ever wraps. */
.collection__filters {
  display: flex;
  align-items: end;
  gap: var(--space-md);
  padding-inline: var(--space-md);
  padding-block-start: var(--space-md);
  padding-block-end: var(--space-lg);
}

/* Three equal columns. `flex-basis: 0` — not `auto` — so the select's option
   text cannot make one column wider than the others. */
.collection__filters .field {
  flex: 1 1 0;
  min-inline-size: 0;
}

/* One control per row once thirds stop being usable. The frame has no narrow
   variant for this page; the threshold is the point at which a 40px control
   with a caret stops fitting a legible value, not a DS breakpoint.
   TODO(tokens): breakpoints not built — DESIGN.md §12.4. */
@media (max-width: 639px) {
  .collection__filters {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- b/card/content — the grid's own padding box ------------------------- */
.collection__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-inline: var(--space-md);
  padding-block-end: var(--space-md);
}

/* --- Channels / Cards / All ----------------------------------------------
   Flex-wrap, not grid, because that is what the frame does and it is also the
   more honest behaviour: cards grow to share a row and stop at their own cap
   (content-card.css), so a short last row stays card-width instead of being
   stretched across the panel the way `1fr` grid tracks would. */
.collection__grid {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: var(--space-lg) var(--space-md);
}

/* The grid's card measure. `.ccard` carries no width of its own — see the note
   in content-card.css — so the 234 cap and the 200 wrap threshold live here,
   where the 984 arithmetic above explains them. */
.collection__grid > .ccard {
  flex: 1 0 0;
  min-inline-size: 200px;
  max-inline-size: 234px;
}

/* --- Zero results --------------------------------------------------------
   Not in the frame. Modelled on Dropdown / Content / Item — Empty State
   (§6.2): a plain sentence, centred, on the surface it belongs to. */
.collection__empty {
  margin: 0;
  padding-block: var(--space-2xl);
  text-align: center;
  color: var(--color-content-secondary);
}

/* ============================================================================
   THE ZERO-LIBRARY STATE — `Videos` before the first purchase

   Board: `Functionality Ideation | BigHeart`, `High-level screen flow`
   (zMvmFpUrJiMG1ONIAmNY3q, 6476:56307) — the video route ends "…and is added
   to Videos page", which means the page starts with nothing on it.

   `.collection__empty` above is the FILTER-matched-nothing sentence and stays
   as it is. This is the other nothing: an empty library, which is not a
   problem the reader caused and not one a filter change fixes. So it gets a
   mark, a sentence and a way out — see the note in collections.js.

   The DS draws no empty state for this page. `Dropdown / Content / Item —
   Empty State` (§6.2) is the nearest precedent the system has and it is a
   plain sentence in `content/secondary`; this keeps that tone and adds the
   one control the sentence promises.
   ========================================================================== */

.collection__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-4xl);
  padding-inline: var(--space-lg);
  text-align: center;
}

.collection__empty-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  /* TODO(tokens): size not built — DESIGN.md §12.4. 48 is the largest avatar
     step, the nearest disc the system specifies. */
  inline-size: 48px;
  block-size: 48px;
  /* Non-negotiable 7 — the circle in this system is `shape-radius-avatar`. */
  border-radius: var(--shape-radius-avatar);
  background: var(--color-soft-brand-default);
  /* §4.4's pairing contract — the `on-*` partner, never `content/primary`. */
  color: var(--color-on-soft-brand);
}

.collection__empty-title {
  margin: 0;
  color: var(--color-content-headline);
  font-family: var(--font-family-text);
  font-size: var(--font-heading-xs-size);
  line-height: var(--font-heading-xs-line-height);
  font-weight: var(--font-weight-bold);
}

.collection__empty-body {
  margin: 0;
  /* TODO(tokens): size not built. A measure, not a box — 48ch is the range
     centred prose stays readable in. */
  max-inline-size: 48ch;
  color: var(--color-content-secondary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
}

/* The control sits a step below the sentence it answers. */
.collection__empty-state .btn {
  margin-block-start: var(--space-xs);
}

/* Same trap as `.ccard[hidden]` above: `display: flex` on the class outranks
   the UA's `[hidden] { display: none }`, and this state is hidden whenever the
   library has anything in it. */
.collection__empty-state[hidden] {
  display: none;
}