/*
 * The footer every page ends with (shared/_footer; tasks/redesign, D6): a
 * heavy rule on the page's column, the links in three small-caps groups —
 * stacked on a phone, in columns from 768px — and the copyright in muted
 * condensed under them.
 */
@layer components {
  .footer {
    padding: var(--space-lg) var(--gutter) var(--space-2xl);
  }

  .footer__groups {
    display: grid;
    gap: var(--space-lg);
    padding-block-start: var(--space-md);
    border-block-start: var(--rule-heavy);

    @media (width >= 768px) {
      grid-template-columns: repeat(3, minmax(0, 12rem));
      gap: var(--space-2xl);
    }
  }

  .footer__group {
    display: grid;
    align-content: start;
    font-size: var(--text-ui-sm);

    & a {
      display: inline-flex;
      align-items: center;
      min-block-size: 1.75rem;

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

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

  .footer__copyright {
    margin: var(--space-lg) 0 0;
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-hairline);
    color: var(--color-ink-muted);
    font-size: var(--text-meta);
  }
}