/*
 * Pie de página: marca, lema y los canales de contacto.
 * Las redes se enlazan con su nombre y su usuario; no se usan logotipos de terceros.
 */
@layer components {
  .site-footer {
    padding-block: var(--space-xl) var(--space-l);
  }

  .site-footer__inner {
    display: grid;
    gap: var(--space-xl);
  }

  .site-footer__tagline {
    margin-block-start: var(--space-2xs);
    color: var(--color-ink-soft);
  }

  .channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0 var(--space-l);
  }

  .channel {
    display: grid;
    gap: var(--space-3xs);
    padding-block: var(--space-s);
    border-block-start: 1px solid var(--color-line);
    color: var(--color-ink);
    text-decoration-line: none;
  }

  .channel__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-stretch: var(--width-display);
    font-weight: var(--weight-strong);
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .channel__handle {
    color: var(--color-ink-soft);
    font-size: var(--step--1);
    overflow-wrap: anywhere;
  }

  .channel:hover .channel__name {
    text-decoration-line: underline;
    text-decoration-color: var(--color-accent-text);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 0.18em;
  }

  /* Última fila: aviso legal a un lado y selector de tema al otro. */
  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-l);
  }

  .site-footer__legal {
    color: var(--color-ink-soft);
    font-size: var(--step--1);
  }

  @media (min-width: 62rem) {
    .site-footer__inner {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .site-footer__brand,
    .site-footer__channels,
    .site-footer__bottom {
      grid-column: 1 / -1;
    }
  }
}