/* ============================================================
   HMC PODIUM — RESPONSIVE.CSS
   ============================================================ */

@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
}

@media (max-width: 1024px) {
  .navbar__menu              { display: none; }
  .hamburger                 { display: flex; }
}

@media (max-width: 768px) {
  .footer__grid              { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .footer__brand                { display: flex; flex-direction: column; align-items: center; }
  .footer__logo                 { justify-content: center; }
  .footer__tagline              { margin-left: auto; margin-right: auto; }
  .footer__col-single            { align-items: center; }
  .footer__col ul                { display: flex; flex-direction: column; align-items: center; }
  .footer__bottom            { flex-direction: column; gap: 12px; text-align: center; }
  .navbar__actions .btn-portal { display: none; }
  .section                   { padding: 72px 0; }
}

@media (max-width: 576px) {
  .container                 { width: 92%; }
  .btn                       { padding: 12px 24px; font-size: 0.88rem; }
  .section-header            { margin-bottom: 40px; }
}

@media (max-width: 380px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.6rem; }
}