/*
 * The news (news/*; tasks/redesign, D7). The homepage's market news is a
 * front page (.front-page, news/_front_page); a company's is a feed of days
 * (.news-feed). Both open on the impact links (.news-filter).
 *
 *   .news-filter       IMPACT SCORE, then each score as a link meaning "this
 *                      and above"; the current one in ink and bold
 *   .front-page        under a double rule, the heading and the filter, then
 *                      the newest day — the lead large on the left, two
 *                      narrower columns of stories beside it on hairlines —
 *                      then each day as a three-column list
 *   .news-story        a dateline in small caps, a serif headline, a summary
 *   .news-list         time and headline, one line each, on hairlines
 *   .news-feed         a company's feed: one block per day, its articles
 *                      flowing into newspaper columns (.news-item)
 */
@layer components {
  /* The filter */

  .news-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-md);
    font-size: var(--text-ui-sm);
  }

  .news-filter__label {
    margin-inline-end: var(--space-2xs);
  }

  .news-filter__option {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3xs);
    color: var(--color-ink-muted);
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      color: var(--color-ink);
      text-decoration: underline;
    }

    &[aria-current="true"] {
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
    }

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
      align-items: center;
    }
  }

  .news-filter__score {
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* The front page */

  .front-page {
    display: grid;
    gap: var(--space-lg);
    padding-block-start: calc(var(--rule-double-height) + var(--space-sm));
    background: var(--rule-double) top / 100% var(--rule-double-height) no-repeat;
  }

  .front-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-xl);
    padding-block-end: var(--space-xs);
    border-block-end: var(--rule-hairline);
  }

  .front-page__title {
    margin-block-end: 0;
  }

  .front-page__top {
    display: grid;
    gap: var(--space-lg);

    @media (width >= 768px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    @media (width >= 1024px) {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
      gap: 0;

      & > * {
        padding-inline: var(--space-lg);
      }

      & > :first-child {
        padding-inline-start: 0;
      }

      & > :last-child {
        padding-inline-end: 0;
      }

      & > * + * {
        border-inline-start: var(--rule-hairline);
      }
    }
  }

  .front-page__lead {
    display: grid;
    align-content: start;
    gap: var(--space-md);

    @media (width >= 768px) and (width < 1024px) {
      grid-column: 1 / -1;
    }
  }

  .front-page__column {
    display: grid;
    align-content: start;

    & > .news-story + .news-story {
      padding-block-start: var(--space-md);
      border-block-start: var(--rule-hairline);
    }

    & > .news-story {
      padding-block-end: var(--space-md);
    }
  }

  .front-page__day {
    display: grid;
    gap: var(--space-xs);
    padding-block-start: var(--space-xs);
    border-block-start: var(--rule-heavy);
  }

  .front-page__day-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-lg);

    & > .heading {
      margin-block-end: 0;
    }
  }

  .front-page__more {
    color: var(--color-link);
    font-size: var(--text-ui-sm);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  /* A story */

  .news-story {
    display: grid;
    gap: var(--space-2xs);
  }

  .news-story__meta {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-caps);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .news-story__headline {
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-h3);
    text-decoration: none;
    text-wrap: balance;

    &:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
    }
  }

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

  .news-story--lead {
    & .news-story__meta {
      color: var(--color-ink);
    }

    & .news-story__headline {
      font-size: var(--text-h1);
      font-weight: var(--weight-bold);
      line-height: var(--leading-h1);
      letter-spacing: var(--tracking-tight);
    }

    & .news-story__summary {
      color: var(--color-ink);
      font-size: var(--text-lead);
      line-height: var(--leading-lead);
    }
  }

  /* A list of time and headline */

  .news-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .news-list--columns {
    @media (width >= 768px) {
      columns: 3;
      column-gap: var(--space-xl);
      column-rule: var(--rule-hairline);
    }
  }

  .news-list__item {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: var(--space-xs);
    padding-block: var(--space-xs);
    border-block-end: var(--rule-hairline);
    break-inside: avoid-column;
  }

  .news-list__time {
    color: var(--color-ink-muted);
    font-size: var(--text-meta);
    line-height: var(--leading-prose-sm);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .news-list__headline {
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-prose-sm);
    line-height: var(--leading-prose-sm);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
    }
  }

  /* A company's feed */

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

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

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

  .news-day {
    padding-block-start: var(--space-xs);
    border-block-start: var(--rule-hairline);
  }

  .news-day__label {
    margin: 0 0 var(--space-2xs);
  }

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

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

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

  .news-item__time {
    color: var(--color-ink-muted);
    font-size: var(--text-caps);
    letter-spacing: var(--tracking-caps);
  }

  .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);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
    }
  }

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