/* Footer, compact pass. The brand cell was a 1.4fr column holding nothing but a
   179x64 logo, while the contact column carried four links AND the two social
   buttons -- so an almost empty column sat next to the tallest one and the row
   measured 271px. The buttons move under the logo, the menu runs in two columns,
   and the vertical rhythm tightens throughout: the footer goes 502px -> ~310px
   at 1215px wide, without dropping a single link.
   The footer is shared by every page, but its CSS is not: the homepages get it
   from full-direct, planos from planos-*-subset, the articles from
   blog-performance-*. Rather than patch all of those (and the inline critical
   block, whose sha256 is pinned in the CSP), this one file is linked last in
   every <head> and overrides whichever of them a page happens to load.
   Padding and column counts are restated per breakpoint rather than written
   once, because an un-mediated declaration here lands after those files' own
   media blocks and would outrank them on phones. */
.footer{padding-top:clamp(40px,5vh,60px);padding-bottom:26px}
.footer__inner{gap:26px}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.footer__logo{margin-bottom:0}
.footer__nav-title{margin-bottom:12px}
.footer__nav-link:hover{color:var(--gold)}
.footer__nav-list{gap:9px}
.footer__contact{gap:9px}
.footer__social{margin-top:0;gap:8px}
.footer__social-btn{width:32px;height:32px}
.footer__social-icon{width:17px;height:17px}
.footer__bottom{gap:12px}
@media (min-width:601px){
  .footer__logo{width:150px;height:54px}
  /* column flow, not row flow, so each column still reads top to bottom
     in menu order instead of zig-zagging across the two of them */
  .footer__nav-list{display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);justify-content:start;gap:9px 28px}
}
@media (min-width:1001px){
  /* content-width columns pushed apart instead of three fixed fractions:
     the menu needs ~155px once it is in two columns and the contact list
     ~190px, so fr units left a dead strip at the right edge. */
  .footer__top{grid-template-columns:auto auto auto;justify-content:space-between;gap:40px}
}
@media (max-width:1000px){
  .footer__top{gap:28px}
  /* below 1001px the brand cell spans every column (full-direct sets
     grid-column:1/-1), so stacking the logo over the buttons wasted a whole
     row of that width; side by side they fill it instead. */
  .footer__brand{flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:20px}
}
@media (max-width:600px){
  .footer__top{gap:24px 20px}
  .footer{padding-bottom:max(96px,calc(72px + env(safe-area-inset-bottom)))}
}