/* Ported from components/Footer/index.tsx. Trivial 4-col responsive
   grid — the only thing worth noting is it's hand-written instead of
   Tailwind, everything else maps 1:1. */

.p3-footer { background: #0a0a0a; border-top: 1px solid rgba(255,255,255,.06); padding: 80px 0; }
@media (min-width: 768px) { .p3-footer { padding: 112px 0; } }
.p3-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .p3-footer-inner { padding: 0 40px; } }

.p3-footer-grid { display: grid; grid-template-columns: 1fr; gap: 48px; margin-bottom: 64px; }
@media (min-width: 768px) { .p3-footer-grid { grid-template-columns: repeat(4, 1fr); } }

.p3-footer-brand { display: flex; flex-direction: column; gap: 20px; }
.p3-footer-brand img { height: 32px; width: auto; }
.p3-footer-tagline { color: rgba(255,255,255,.3); font-size: .8rem; line-height: 1.6; }
.p3-footer-social { display: flex; gap: 12px; }
.p3-footer-social a {
  width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.06); transition: all .2s;
}
.p3-footer-social a:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }

.p3-footer-col-title { font-size: .65rem; font-weight: 700; letter-spacing: .2em; color: rgba(255,255,255,.25); text-transform: uppercase; margin-bottom: 16px; }
.p3-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.p3-footer-col a { color: rgba(255,255,255,.4); font-size: .82rem; text-decoration: none; transition: color .2s; }
.p3-footer-col a:hover { color: #fff; }

.p3-footer-bottom {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 32px; border-top: 1px solid rgba(255,255,255,.05);
}
@media (min-width: 768px) { .p3-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.p3-footer-copy { color: rgba(255,255,255,.2); font-size: .72rem; }
.p3-footer-legal { display: flex; gap: 24px; }
.p3-footer-legal a { color: rgba(255,255,255,.2); font-size: .72rem; text-decoration: none; transition: color .2s; }
.p3-footer-legal a:hover { color: rgba(255,255,255,.5); }