/* Vrouwveiliger – production responsive hardening 2026-08-10
   Loaded last so older page-specific desktop rules cannot override mobile layouts. */
html, body { max-width: 100%; overflow-x: clip; }
img, picture, video, svg { max-width: 100%; }
main > *, main .site-container > *,
.why-section__grid > *, .app-section__grid > *,
.residents-hero__grid > *, .residents-section__grid > *, .residents-steps-layout > *,
.municipalities-grid > *, .municipalities-method-grid > *,
.method-hero__grid > *, .method-phase__grid > *,
.about-hero__grid > *, .contact-hero__inner > *, .contact-layout > *,
.legal-hero__inner > *, .campaign-message__grid > *, .campaign-photo-grid > * { min-width: 0; }

@media (max-width: 980px) {
  /* All editorial two-column compositions become one column before they get cramped. */
  .why-section__grid,
  .app-section__grid,
  .residents-hero__grid,
  .residents-section__grid,
  .residents-steps-layout,
  .municipalities-grid,
  .municipalities-method-grid,
  .method-hero__grid,
  .method-phase__grid,
  .contact-hero__inner,
  .contact-layout,
  .legal-hero__inner,
  .campaign-message__grid--with-image,
  .campaign-photo-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .why-section__image,
  .app-section__image,
  .residents-hero__image,
  .residents-section__grid .app-section__image,
  .residents-steps-intro__image,
  .municipalities-photo,
  .municipalities-method-image,
  .method-hero__visual img,
  .method-phase__visual img,
  .campaign-message__image,
  .campaign-real-photo {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .residents-steps-intro__image { margin-inline: 0; }
}

@media (max-width: 767px) {
  body { overflow-wrap: normal; word-break: normal; }
  .site-container { width: min(calc(100% - 40px), var(--content-width)); }

  h1, h2, h3, h4, p, li { max-width: 100%; overflow-wrap: break-word; word-break: normal; }

  /* Keep content comfortably readable on phones. */
  .why-section__grid,
  .app-section__grid,
  .residents-hero__grid,
  .residents-section__grid,
  .residents-steps-layout,
  .municipalities-grid,
  .municipalities-method-grid,
  .method-hero__grid,
  .method-phase__grid,
  .about-hero__grid,
  .contact-hero__inner,
  .contact-layout,
  .legal-hero__inner,
  .campaign-message__grid,
  .campaign-photo-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
  }

  .about-hero__content,
  .why-section__copy,
  .app-section__copy,
  .residents-hero__copy,
  .residents-steps-layout__content,
  .campaign-message__body,
  .campaign-photo-copy { width: 100%; max-width: none; }

  .why-section__image,
  .app-section__image,
  .residents-hero__image,
  .residents-section__grid .app-section__image,
  .residents-steps-intro__image,
  .municipalities-photo,
  .municipalities-method-image,
  .about-hero__image,
  .campaign-message__image,
  .campaign-real-photo {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .municipalities-output-grid,
  .municipalities-steps,
  .privacy-grid,
  .method-grid,
  .result-grid,
  .field-grid { grid-template-columns: minmax(0, 1fr) !important; }

  .editorial-images { grid-template-columns: minmax(0, 1fr) !important; }
  .editorial-images img:first-child { grid-column: auto !important; }

  .section-heading--row,
  .final-cta__inner,
  .residents-cta__inner,
  .municipalities-cta__inner,
  .method-cta__inner { align-items: stretch !important; flex-direction: column !important; }

  .final-cta__inner > div,
  .residents-cta__actions,
  .municipalities-cta__actions,
  .method-cta__actions { width: 100%; }

  .final-cta .button,
  .residents-cta .button,
  .municipalities-cta .button,
  .method-cta .button { max-width: 100%; }

  /* Emergency bar must wrap without pushing the page wider than the viewport. */
  .emergency-bar__inner { gap: 10px; }
  .emergency-bar p { min-width: 0; font-size: 14px; }
  .emergency-link { white-space: nowrap; }

  /* Header controls stay inside narrow iPhone widths. */
  .site-header__inner { gap: 14px; }
  .site-logo { min-width: 0; }
  .site-logo img { max-width: min(190px, 58vw); height: auto; }
  .menu-toggle { flex: 0 0 46px; }

  .compact-sticky-nav__inner { gap: 10px; }
  .compact-sticky-nav__logo { min-width: 0; }
  .compact-sticky-nav__logo img { max-width: min(132px, 38vw); height: auto; }
  .compact-sticky-nav__action { min-width: 0; white-space: nowrap; }
}

@media (max-width: 390px) {
  .site-container { width: min(calc(100% - 32px), var(--content-width)); }
  .emergency-bar p { font-size: 13px; line-height: 1.3; }
  .emergency-link { padding-inline: 9px; }
  .compact-sticky-nav__action { padding-inline: 12px; font-size: 15px; }
}