/* ==========================================================================
   Responsive & mobile-navigation behavior
   Mobile-first base in main.css. The off-canvas drawer is scoped to html.js
   so that WITHOUT JavaScript the navigation degrades to a plain stacked list
   and the (non-functional) hamburger button is hidden. Progressive enhancement.
   ========================================================================== */

/* No-JS baseline: toggle/close/backdrop are JS-only affordances. */
.nav-toggle, .nav-close, .nav-backdrop { display: none; }

/* No-JS mobile: show the nav inline, stacked, below the brand. */
.primary-nav .nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }

/* --- Mobile navigation drawer (JS enabled, < 900px) -------------------- */
@media (max-width: 899.98px) {
  .js .nav-toggle { display: inline-flex; }

  .js .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(84vw, 360px);
    background: #fff;
    box-shadow: var(--shadow-lg);
    padding: max(calc(var(--header-h) + var(--space-4)), env(safe-area-inset-top)) var(--space-5) var(--space-6);
    transform: translateX(100%);
    transition: transform 220ms ease;
    z-index: 200;
    overflow-y: auto;
  }
  .js .primary-nav.is-open { transform: translateX(0); }
  .js .primary-nav .nav-list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-1); }
  .js .primary-nav .nav-link { min-height: 48px; width: 100%; font-size: var(--fs-500); }
  .js .nav-cta-item { margin-top: var(--space-4); }
  .js .nav-cta-item .btn { width: 100%; }

  .js .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 44px;
    height: 44px;
    font-size: 2rem;
    line-height: 1;
    color: var(--color-navy);
    border-radius: var(--radius-sm);
  }

  .js .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(18, 48, 74, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
    z-index: 150;
  }
  .js .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

/* Mobile hero: full-width text over the photo needs a stronger vertical scrim,
   a lighter-weight image, and a focal shift toward the family on the right. */
@media (max-width: 767px) {
  .hero {
    background-position: 72% center;
    background-image:
      linear-gradient(180deg, rgba(4,20,40,0.82) 0%, rgba(4,20,40,0.55) 42%, rgba(4,20,40,0.78) 100%),
      url("/assets/img/graphics/hero-community-960.jpg");
    background-image:
      linear-gradient(180deg, rgba(4,20,40,0.82) 0%, rgba(4,20,40,0.55) 42%, rgba(4,20,40,0.78) 100%),
      image-set(url("/assets/img/graphics/hero-community-960.webp") type("image/webp"), url("/assets/img/graphics/hero-community-960.jpg") type("image/jpeg"));
  }
  .hero-inner { min-height: clamp(420px, 78vh, 560px); }
}

/* Base grids single-column */
.card-grid { grid-template-columns: 1fr; }
.feature-row { grid-template-columns: 1fr; }
.tile-grid { grid-template-columns: 1fr 1fr; }

/* --- Small phones (>= 480px) ------------------------------------------- */
@media (min-width: 480px) {
  .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .hero-actions .btn { min-width: 12rem; }
}

/* --- Tablets (>= 768px) ------------------------------------------------- */
@media (min-width: 768px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1.4fr 1fr; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .feature-row { grid-template-columns: 1.1fr 1fr; }
  .feature-row.reverse .feature-media { order: -1; }
}

/* --- Desktop nav (>= 900px) -------------------------------------------- */
@media (min-width: 900px) {
  .nav-toggle, .nav-close, .js .nav-toggle, .js .nav-close { display: none; }
  .primary-nav, .js .primary-nav {
    position: static; width: auto; transform: none; box-shadow: none;
    padding: 0; background: transparent; overflow: visible;
  }
  .primary-nav .nav-list, .js .primary-nav .nav-list { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--space-1); }
  .primary-nav .nav-link, .js .primary-nav .nav-link { min-height: 44px; width: auto; font-size: var(--fs-200); }
  .nav-cta-item, .js .nav-cta-item { margin-top: 0; margin-left: var(--space-3); }
  .nav-cta-item .btn, .js .nav-cta-item .btn { width: auto; }
  .nav-backdrop, .js .nav-backdrop { display: none; }
}

/* --- Laptops (>= 1024px) ----------------------------------------------- */
@media (min-width: 1024px) {
  .hero-inner { padding-block: var(--space-9); }
  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .js .primary-nav, .js .nav-backdrop, .card, .btn { transition: none; }
}

@media print {
  .site-header, .site-footer, .hero-actions, .nav-toggle { display: none; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}