/* ─── Footer ─────────────────────────────────────────────── */
/*
  Footer uses the Switcher layout primitive: flex-wrap with a
  flex-basis breakpoint at 30rem. Below 30rem container width
  the columns stack; above they sit side by side.
*/

.footer {
  background: var(--color-accent);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-xl);
  color: var(--color-text-on-accent-fill);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l) var(--space-xl);
}

.footer__inner > * {
  flex-basis: calc((30rem - 100%) * 999);
  min-inline-size: 0;
}

/* 60/40 split above the breakpoint; flex-basis above still forces
   both to full width below it, so the ratio has no effect there. */
.footer__inner > *:first-child {
  flex-grow: 7;
}

.footer__inner > *:last-child {
  flex-grow: 3;
}

.footer__section-label {
  font-family: "Geist", system-ui, sans-serif;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-end: var(--space-s);
}

.footer__categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__categories a {
  text-decoration: none;
  font-size: var(--step-0);
  transition: text-decoration 0.15s ease;
}

.footer__categories a:hover {
  text-decoration: underline;
}

.footer__bottom {
  margin-block-start: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--gold-tint-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.footer__copy {
  font-size: var(--step--1);
}

.footer__social {
  display: flex;
  gap: var(--space-s);
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.footer__social a:hover {
  transform: translateY(-2px);
}

/* Below the same 30rem threshold footer__inner stacks at, footer__bottom
   wraps to 2 lines too — center each line instead of hugging the edges. */
@media (max-width: 30rem) {
  .footer__bottom {
    justify-content: center;
  }
}