/*
 * The content pages' own pieces: the link columns of the indicator index and
 * the summary archive, and the affiliate hub's blurbs and logo grids.
 */
@layer pages {
  .link-columns {
    columns: 1;
    column-gap: var(--space-xl);
    font-size: var(--text-ui);

    & > :is(a, li) {
      display: block;
      padding-block: var(--space-3xs);
      break-inside: avoid;
    }

    @media (width >= 768px) {
      columns: 3;
    }
  }

  /* A ready-to-use blurb, set apart as something to copy. */
  .blurb {
    margin-block-end: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-inline-start: 3px solid var(--color-accent-line);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background-color: var(--color-surface-raised);
  }

  /* One row of logo variants; the count arrives as --columns. The light
     variants are white on transparent, so they sit on a dark tile. */
  .logo-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
    gap: var(--space-lg);
    margin-block-end: var(--space-lg);
  }

  .logo-grid__tile {
    padding: var(--space-sm);
    border-radius: var(--radius-md);
  }

  .logo-grid__tile--dark {
    background-color: var(--color-ink-muted);
  }
}