/*
 * 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);
      }
    }
  }

  /* "Cookie settings" opens something rather than going anywhere, so it is a
     button, set to read as the links around it. */
  .footer__button {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-link);
    font: inherit;
    text-align: start;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }

    @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);
  }
}