/* ==========================================================================
   responsive.css — fine-grained breakpoint adjustments
   (component-level responsive rules live alongside components in style.css;
   this file handles page-level spacing/typography tuning)
   ========================================================================== */

@media (max-width:1200px){
  .container{ padding-inline:20px; }
}

@media (max-width:991px){
  section{ padding:80px 0; }
  .grid-3{ gap:22px; }
  .footer-grid{ gap:30px; }
}

@media (max-width:768px){
  .hero{ text-align:center; padding-top:140px; }
  .hero p.lead{ margin-inline:auto; }
  .hero-cta{ justify-content:center; }
  .stats-grid{ gap:34px 20px; }
  .page-header{ padding:150px 0 70px; }
  .region-tabs{ gap:8px; }
  .region-tab{ padding:10px 16px; font-size:.82rem; }
}

@media (max-width:560px){
  h1{ font-size:1.9rem !important; }
  .section-head h2{ font-size:1.6rem !important; }
  .card{ padding:26px 20px; }
  .brand-name{ font-size:.92rem; }
  #backToTop{ width:42px; height:42px; bottom:20px; inset-inline-end:20px; }
}

/* Print styles for CV-like pages */
@media print{
  .navbar, footer, #backToTop, #loading-screen{ display:none !important; }
  section{ padding:20px 0; }
}