/*
 * The news feed (news/*), shared by the homepage's market feed and a
 * company's own: the filter, then one block per day of articles flowing into
 * newspaper columns.
 *
 * An article is a quiet meta line — impact score, coverage flag, source and
 * time — then the headline a step up in the serif, then the summary. Spacing
 * comes from margins, not <br>.
 */
@layer components {
  .news-feed {
    display: grid;
    gap: var(--space-lg);
  }

  .news-feed__days {
    display: grid;
    gap: var(--space-lg);
  }

  .news-feed__empty {
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  /* The filter: the impact scores, then the fine-tune switches — side by side
     from 768px, stacked on a phone where each half would be a few words
     wide. */
  .news-filter {
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-md);
    border-block: var(--rule-width) solid var(--color-rule);
  }

  .news-filter__groups {
    display: grid;
    gap: var(--space-xs);

    @media (width >= 768px) {
      grid-template-columns: 5fr 2fr;
    }
  }

  .news-filter__group {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-raised);

    & > .heading {
      color: var(--color-ink-muted);
      font-size: var(--text-table-head);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
    }
  }

  .news-filter__options {
    display: grid;
    column-gap: var(--space-md);
  }

  .news-filter__options--scores {
    @media (width >= 768px) {
      grid-template-columns: repeat(5, auto);
      justify-content: start;
    }
  }

  .news-filter__options--tune {
    @media (width >= 768px) {
      grid-template-columns: repeat(2, auto);
      justify-content: start;
    }
  }

  .news-day {
    padding-block-end: var(--space-lg);
    border-block-end: var(--rule-width) solid var(--color-rule);
  }

  .news-day__articles {
    columns: 20rem;
    column-gap: var(--space-xl);
  }

  /* One article. It asks not to be split across a column break. */
  .news-item {
    break-inside: avoid-column;
    padding-block: var(--space-sm) var(--space-md);
  }

  .news-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-block-end: var(--space-xs);
  }

  .news-item__source {
    color: var(--color-ink-subtle);
    font-size: var(--text-meta);
  }

  .news-item__headline {
    display: block;
    margin-block-end: var(--space-2xs);
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-h3);
  }

  .news-item__summary {
    color: var(--color-ink-soft);
    font-family: var(--font-prose);
    font-size: var(--text-prose-sm);
    line-height: var(--leading-prose-sm);
  }
}