/* sections/cookies.css
 *
 * /cookies legal page — Figma node 197:814.
 *
 * Shared legal-page primitives (container, block, block-title with
 * CSS counter, bullets, table, links) now live in
 * `sections/legal.css`. This file only keeps rules that are unique to
 * /cookies:
 *   - Tighter container gap (32px vs the shared 48px) because
 *     /cookies has fewer, denser blocks.
 *   - `table-layout: fixed` so the 3 columns share width equally on
 *     desktop + tablet; mobile reverts to `auto` so narrow cells like
 *     "N/A" can collapse and the prose column breathes.
 *   - First-column cells stack the cookie name (`<strong>` in body
 *     color) and provider (secondary color, smaller type) so the
 *     name reads as the row anchor.
 *
 * Applied via class composition: the markup carries
 * `class="ays-legal-table ays-cookies-table"` on the <table> element,
 * so the shared rules apply and these overrides layer on top.
 *
 * Load order in Layout.astro: after legal.css and referral.css.
 */

/* Container gap override — Figma 197:583 reads tighter than /referral
 * because /cookies has 5 numbered blocks vs /referral's 9, and the
 * table inside section 2 already eats vertical space. 32px constant
 * across breakpoints (vs /referral's 48 → 40 → 32 cascade). */
.ays-cookies-legal-container {
  gap: 32px;
}
@media (max-width: 1024px) {
  .ays-cookies-legal-container {
    gap: 32px;
  }
}

/* Cookie-type table — class composition: `.ays-legal-table` covers
 * the shared shape (borders, header, internal grid). This override
 * pins three columns to equal width on desktop + tablet via
 * `table-layout: fixed`. Mobile reverts to `auto`. */
.ays-cookies-table {
  table-layout: fixed;
}

/* First-column cells (now `<th scope="row">`) stack the cookie name +
 * provider. Figma renders the provider line in `--ays-text-secondary`
 * with regular weight so the eye anchors on the name first and reads
 * the source as a sub-label.
 *
 * Provider's `font-weight: var(--fw-p-regular)` is required because
 * the parent `<th>` is bold by default (both browser default and the
 * `tbody th` rule in legal.css set `--fw-h3`). Without this override,
 * the provider span would inherit the bold weight and lose its
 * sub-label hierarchy. */
.ays-light .ays-cookies-table-name {
  display: block;
  font-weight: var(--fw-h3);
  color: var(--ays-text-primary);
}
.ays-light .ays-cookies-table-provider {
  display: block;
  margin-top: 4px;
  color: var(--ays-text-secondary);
  font-size: var(--fs-p3);
  font-weight: var(--fw-p-regular);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  /* Drop the equal-column constraint so narrow cells (e.g. "N/A") can
   * collapse and the prose column can breathe. */
  .ays-cookies-table {
    table-layout: auto;
  }
  .ays-light .ays-cookies-table-provider {
    font-size: var(--fs-p4);
  }
}