/* ============================================================
   RESPONSIVE SAFETY LAYER
   Compartilhado por todas as páginas públicas.
   Corrige overflow-x, garante fluidez de mídia, tap targets
   adequados no mobile e comportamento em telas ultrawide.
   ============================================================ */

/* 1. Trava anti-overflow global (mais robusto que só no body) */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* 2. Mídia sempre fluida */
img, video, iframe, svg, canvas, picture {
  max-width: 100%;
  height: auto;
}
iframe { display: block; }

/* 3. Impede que itens de flex/grid empurrem seus containers
      (causa comum de overflow horizontal invisível) */
main, section, article, header, footer, aside, .wrap, .grid, [class*="grid-"] {
  min-width: 0;
}

/* 4. Quebra de palavras longas (links, URLs, títulos gigantes) */
h1, h2, h3, h4, p, li, a, span, blockquote, td, th {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Restaura títulos com quebra natural em telas confortáveis */
@media (min-width: 640px) {
  h1, h2, h3, h4 { overflow-wrap: break-word; word-break: normal; }
}

/* 5. Tap targets mínimos em toque (WCAG 2.5.8) */
@media (hover: none) and (pointer: coarse) {
  .btn, button, a.btn, .btn-sm, .btn-lg,
  .subnav a, nav a.nav-link, .nm-links a, .fab, .to-top {
    min-height: 44px;
  }
  .btn, .btn-sm, .btn-lg { padding-block: max(10px, .7em); }
}

/* 6. Refinamentos mobile pequeno (≤380px) */
@media (max-width: 380px) {
  .btn-lg { padding: 12px 18px !important; font-size: .95rem !important; }
  .festa-home-highlights { grid-template-columns: repeat(2, 1fr) !important; }
  .novena-banner { padding: 22px 18px !important; gap: 16px !important; }
  .wa-channel-banner .wrap,
  .wa-channel-banner > * { flex-wrap: wrap !important; }
}

/* 7. Ultrawide (≥1600px) — evita conteúdo esticado demais e
      dá respiro em heros full-bleed */
@media (min-width: 1600px) {
  .wrap { max-width: 1320px; }
  #hero .hero-inner,
  .festa-hero .wrap,
  .page-hero .wrap { max-width: 1200px; }
}
@media (min-width: 1920px) {
  .wrap { max-width: 1440px; }
}

/* 8. Reduz motion pra quem pediu (respeito ao usuário) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}