/*
 * footer -- der Inhalt des Fußes von Gast und Teilnehmer (layouts/main.php), sitzt im
 * layout__footer. Dunkles Oliv im Farbton des Dunkelgrüns (trail-style.md). Weiß darauf
 * 13:1, die gedämpfte Schrift über 7:1; der Fokusrahmen hellgrün, in der Hausfarbe wäre
 * er hier nicht zu sehen. Jeder Verweis ist eine ganze Zeile mit 44px Höhe.
 *
 * __brand Name der Anwendung, __column eine Spalte Verweise mit __title. Am Handy
 * stehen die Spalten zu zweit, bei 300px untereinander, am Desktop alle in einer Reihe.
 * Keine Zustände.
 */

.layout__footer.footer {
  --color-focus: var(--color-brand-light);
  padding-block: var(--space-7) var(--space-6);
  border-block-start: 0;
  background-color: oklch(33% 0.05 var(--accent-hue));
  color: var(--color-on-brand-dark-muted);
}

@media (prefers-color-scheme: dark) {
  .layout__footer.footer {
    background-color: oklch(26% 0.04 var(--accent-hue));
  }
}

.footer__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}

.footer__brand {
  grid-column: 1 / -1;
  color: var(--color-on-brand-dark);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-heavy);
}

.footer__column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.footer__title {
  margin-block-end: var(--space-1);
  color: var(--color-on-brand-dark);
  font-weight: var(--font-weight-bold);
}

.footer a {
  display: flex;
  align-items: center;
  min-block-size: var(--tap-target);
  color: var(--color-on-brand-dark-muted);
  text-decoration: none;
}

.footer a:hover {
  color: var(--color-on-brand-dark);
  text-decoration: underline;
}

@media (max-width: 22rem) {
  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 64rem) {
  .footer__inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .footer__brand {
    grid-column: auto;
  }
}