/* ============================================================
   responsive.css, breakpoints 1200 / 1024 / 768 / 576
   ============================================================ */

@media (max-width: 1200px) {
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  .utility-bar__links { gap: var(--space-sm); }
}

/* Tablet / mobile-nav threshold */
@media (max-width: 1024px) {
  .nav { position: fixed; top: 0; right: -100%; width: min(360px, 86vw); height: 100vh; background: #FFFFFF; box-shadow: var(--shadow-lg); flex-direction: column; padding: 88px 24px 24px; overflow-y: auto; transition: right 0.3s ease; z-index: 1050; }
  .nav--open { right: 0; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__item { border-bottom: 1px solid var(--border); }
  .nav__link { padding: 16px 8px; font-size: 16px; }
  .nav__item--active > .nav__link { box-shadow: none; color: var(--brand-blue); }
  .mega, .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; width: auto; padding: 0 0 12px 12px; }
  .mega__grid { grid-template-columns: 1fr; gap: 0; }
  .mega__foot { display: none; }
  .nav-toggle { display: flex; }
  .nav-toggle--open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle--open span:nth-child(2) { opacity: 0; }
  .nav-toggle--open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  /* z-index 990 sits BELOW the sticky header (1000) so the nav drawer, which is
     trapped inside the header's stacking context, paints above the backdrop. */
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: var(--transition); z-index: 990; }
  .nav-backdrop--visible { opacity: 1; visibility: visible; }
  .header__cta .btn { display: none; }
  .tabs { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  .section { padding: 56px 20px; }
  .hero { padding: 64px 20px; }
  .page-hero { padding: 100px 20px 48px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stepper { grid-template-columns: 1fr; }
  .blocks { grid-template-columns: 1fr; }
  .utility-bar__links span { display: none; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .prevnext { flex-direction: column; }
  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .hero__actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 576px) {
  .helper { padding: var(--space-md); }
  .back-to-top { bottom: 16px; right: 16px; }
}

@media (max-width: 480px) {
  .lang-grid { grid-template-columns: 1fr; }
}