/* ============================================================================
   @fgl/vituno footer chrome (Story 1.2.1).
   Census: all three sites ship a footer; the framework ships the SHELL —
   wrapper, responsive link grid, column headings, legal bottom bar. The
   bands and columns are site-authored content slots (expeal's crisis/
   anti-impersonation bands, kitchenbridget's newsletter/social columns
   stay site-local; so do their colors and focus choices).
   TOKENS ONLY (structural markers audited by test/components.test.mjs).
   Breakpoint literals in @media are the framework constants (census).
   ============================================================================ */

.footer { background: var(--surface-primary); border-top: 1px solid var(--border-subtle); /* structural: hairline */ color: var(--ink-muted); }

/* Link grid — 2-up on small screens, 4-up from md (the donor's shape). */
.footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); padding-block: var(--space-7); }
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: repeat(4, 1fr); }
}

.footer__head { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-bold); text-transform: uppercase; color: var(--ink-body); margin-block: 0 var(--space-2); }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col a { display: inline-block; padding-block: var(--space-1); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-muted); text-decoration: none; }
.footer__col a:hover { color: var(--ink-body); }

/* Legal bottom bar. */
.footer__bottom { border-top: 1px solid var(--border-subtle); /* structural: hairline */ }
.footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-4); font-size: var(--fs-caption); line-height: var(--lh-caption); }