/* ==========================================================
   Responsive overrides — fixes para mobile (iPhone 14 etc)
   ========================================================== */

/* Stats grid (cobertura · MT) — 4 cols desktop -> 2 cols mobile */
.map-stats.mt-stats-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.mt-stats-4 .map-stat {
  padding: 22px 24px;
  border-right: 1px solid var(--rule);
}
.mt-stats-4 .map-stat:last-child {
  border-right: 0;
}

@media (max-width: 720px) {
  .map-stats.mt-stats-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .mt-stats-4 .map-stat {
    padding: 18px 14px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .mt-stats-4 .map-stat:nth-child(2n) {
    border-right: 0;
  }
  .mt-stats-4 .map-stat:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .mt-stats-4 .map-stat .num {
    font-size: 28px;
  }
  .mt-stats-4 .map-stat .lbl {
    font-size: 9.5px;
  }
}

/* Map-svg-wrap — reduz padding e melhora SVG em mobile */
@media (max-width: 720px) {
  .map-svg-wrap {
    padding: 22px 14px 26px;
  }
  .map-svg-wrap::before,
  .map-svg-wrap::after {
    font-size: 9.5px;
    letter-spacing: 0.14em;
  }
  .map-svg-wrap::before { left: 14px; top: 10px; }
  .map-svg-wrap::after { right: 14px; bottom: 10px; }
}

/* Map text H2 — escala mais agressiva em mobile */
@media (max-width: 720px) {
  .map-text h2 {
    font-size: clamp(26px, 8vw, 36px);
    line-height: 1.05;
  }
  .map-text p {
    font-size: 14.5px;
  }
}

/* Map-grid: reduz gap quando empilhado */
@media (max-width: 900px) {
  .map-grid {
    gap: 28px !important;
  }
}

/* ==========================================================
   Mobile nav drawer (≤1000px)
   ========================================================== */
@media (max-width: 1000px) {
  .nav-toggle {
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms;
  }
  .nav-toggle[aria-expanded="true"] {
    background: var(--safety);
    color: var(--concrete-950);
    border-color: var(--safety);
  }

  /* Drawer = quando .nav-open: o nav-inner cresce em coluna */
  .site-nav.nav-open .nav-inner {
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 76px;
    padding-bottom: 14px;
    row-gap: 0;
  }
  /* Linha 1: brand + toggle (sempre juntos) */
  .site-nav.nav-open .brand     { order: 1; }
  .site-nav.nav-open .nav-toggle{ order: 2; align-self: center; }
  /* Linhas seguintes: links + cta */
  .site-nav.nav-open .nav-links { order: 3; }
  .site-nav.nav-open .nav-cta   { order: 4; }

  .site-nav.nav-open .nav-links {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--on-dark-rule);
    animation: navSlide 200ms ease;
  }
  .site-nav.nav-open .nav-links a {
    display: block;
    padding: 16px 4px;
    border-bottom: 1px solid var(--on-dark-rule);
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--on-dark);
  }
  .site-nav.nav-open .nav-links a:last-child {
    border-bottom: 0;
  }
  .site-nav.nav-open .nav-links a:active,
  .site-nav.nav-open .nav-links a:hover {
    color: var(--safety);
  }

  .site-nav.nav-open .nav-cta {
    display: inline-flex;
    flex-basis: 100%;
    justify-content: center;
    margin-top: 10px;
    padding: 14px 18px;
    animation: navSlide 220ms ease;
  }
}

@keyframes navSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}