/* ============================================================
   layout/footer.css — site footer (3-col on desktop) + bottom bar
   ============================================================ */
.site-footer { border-top: 1px solid hsl(var(--border)); padding-block: 4rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}
.footer-col .brand { display: inline-block; margin-bottom: 1rem; }
.footer-col p { color: hsl(var(--muted-foreground)); font-size: 0.95rem; line-height: 1.7; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col ul a { color: hsl(var(--foreground) / 0.8); font-size: 0.95rem; transition: color var(--transition-base); }
.footer-col ul a:hover { color: hsl(var(--primary)); }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
}