/* ==========================================================================
   Site footer — brand + 3 link columns (Product, Support, Legal), copyright row
   ========================================================================== */

.footer { padding: 80px 0 32px; border-top: 1px solid var(--border-soft); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer__text { max-width: 300px; margin-top: 16px; font-size: 15px; color: var(--muted); }
.footer__title { margin-bottom: 16px; font-size: 14px; font-weight: 700; color: var(--ink); }
.footer__links { display: flex; flex-direction: column; gap: 12px; }
.footer__link { font-size: 15px; color: var(--muted); transition: color .2s; }
.footer__link:hover { color: var(--primary); }
.footer__link[aria-current="page"] { color: var(--ink); font-weight: 600; }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
  font-size: 14px;
  color: var(--subtle);
}

/* ---------- Social links ---------- */
.socials { display: flex; gap: 10px; margin-top: 24px; }
.social {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: color .2s, border-color .2s, background-color .2s;
}
.social svg { width: 17px; height: 17px; }
.social:hover { color: var(--primary); border-color: var(--primary-100); background: var(--primary-50); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
}

@media (max-width: 720px) {
  .footer { padding-top: 64px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer__links { gap: 2px; }
  .footer__link { display: inline-block; padding-block: 8px; }
  .social { width: 44px; height: 44px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}