/* ═══════════════════════════════════════════════════════════
   PATHURA — layout/footer.css
   Moved verbatim from base.css during Phase 6 CSS split.
   No selectors, values, or comments changed.
═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   14. FOOTER
─────────────────────────────────────────────────────────── */
footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 3.5rem var(--space-page-x) 2.5rem;

  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  max-width: 100%;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-inverse);
  margin-bottom: 0.9rem;
}
.footer-logo span { color: var(--primary); }
.footer-tagline { font-size: 13px; color: var(--footer-text); max-width: 260px; line-height: 1.6; }
.footer-col h4 {
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--footer-heading);
  font-weight: 600;
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  color: var(--footer-text);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 7px;
  transition: color var(--transition-fast) ease;
}
.footer-col a:hover { color: var(--text-inverse); }
.footer-bottom {
  background: var(--footer-bg);
  padding: 1.1rem var(--space-page-x);
  text-align: center;
  font-size: 12px;
  color: var(--footer-text);
}




/* ─── Responsive ───────────────────────────────
   Extracted from the consolidated Phase 5 "18. RESPONSIVE"
   block — same breakpoints and declarations, unchanged. */
@media (max-width: 900px) {
  footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  footer { grid-template-columns: 1fr; }
}