/* ==========================================================================
   PGIS — responsive.css
   Breakpoint overrides only (320 / 375 / 425 / 768 / 1024 / 1280 / 1440px+).
   Base styles elsewhere are mobile-first; this file scales UP via
   min-width media queries. Populated as each phase's components land.
   ========================================================================== */

/* Desktop nav switch-over: below this, hamburger + mobile menu own
   navigation; at/above it, the full nav bar with dropdowns takes over
   and the hamburger/mobile menu are hidden entirely. */
@media (min-width: 1024px) {
  .primary-nav,
  .primary-nav__cta {
    display: block;
  }

  .primary-nav__cta {
    display: inline-flex;
  }

  .hamburger,
  .mobile-menu,
  .mobile-menu-backdrop {
    display: none;
  }
}

/* Homepage sections: read top-to-bottom on mobile, open up at tablet+
   (UIUX-Plan §8 — hero stacks vertically on mobile, journey reads
   vertically on mobile and can go horizontal on desktop). */
@media (min-width: 768px) {
  .principal-message__inner {
    grid-template-columns: 240px 1fr;
  }

  .cta-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 900px) {
  .journey {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
  }
}