/* ==========================================================================
   responsive.css — ajustes por breakpoint
   Base é mobile-first (style.css); aqui entram tablet, notebook e desktop.
   ========================================================================== */

/* ---------- Menu mobile (abaixo de 960px) ---------- */
@media (max-width: 959.98px) {
  .navbar__nav {
    position: fixed;
    inset: 74px 0 0 0;
    height: calc(100dvh - 74px);
    background: var(--cor-marinho);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--espaco-lg) var(--espaco-md);
    gap: var(--espaco-md);
    font-size: 1.1rem;
    transform: translateX(100%);
    transition: transform var(--transicao);
    z-index: 400;
    overflow-y: auto;
  }
  .navbar__nav.is-open { transform: translateX(0); }
  .navbar__nav a:not(.btn) { color: #fff; padding: 0.4rem 0; }
  .navbar__nav a:not(.btn)::after { background: var(--cor-vermelho); }
  .navbar__nav .btn { margin-top: var(--espaco-sm); align-self: flex-start; }
  .navbar__toggle { display: flex; }
}

/* ---------- Momentos: no celular vira "filmstrip" deslizável ---------- */
@media (max-width: 639.98px) {
  .momentos__mural {
    display: flex;
    gap: var(--espaco-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    padding: 0.5rem 0 1.25rem;
    -webkit-overflow-scrolling: touch;
  }
  .polaroid {
    flex: 0 0 auto;
    width: min(76%, 290px);
    scroll-snap-align: center;
  }
  .polaroid__foto { min-width: 0; }
  .polaroid:hover,
  .polaroid:focus-within { transform: rotate(0deg); }
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .momentos__pontos { display: none; }
}

/* ---------- Tablet (≥ 640px) ---------- */
@media (min-width: 640px) {
  .pilares-grid { grid-template-columns: repeat(3, 1fr); }
  .pilar-item--linha { border-left: 1px solid rgba(15,35,64,0.12); padding-left: var(--espaco-lg); }

  .hero__inner { flex-direction: row; align-items: center; }
  .hero__conteudo { flex: 1; }
  .hero__foto-wrap { flex: 1; max-width: 360px; }

  .contato__acoes { flex-wrap: nowrap; }

  .site-footer__grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .site-footer__col { text-align: left; }
  .site-footer__brand { align-items: flex-start; }
  .site-footer__tagline { text-align: center; }
  .site-footer__credito { text-align: right; }
  .site-footer__irmao a { justify-content: flex-end; }

  .site-footer__bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ---------- Notebook / desktop (≥ 960px) ---------- */
@media (min-width: 960px) {
  .navbar__toggle { display: none; }
  .navbar__nav {
    position: static;
    height: auto;
    background: transparent;
    flex-direction: row;
    padding: 0;
    transform: none;
    overflow: visible;
  }

  .hero__inner { padding-top: var(--espaco-md); }
  .hero__conteudo { text-align: left; }

  .quem-e__grid { grid-template-columns: 0.85fr 1.15fr; align-items: center; }

  .historias__grid { grid-template-columns: 1fr 1fr 1fr; align-items: center; }

  .trupe__grid { grid-template-columns: 1.1fr 1fr; }

  .contato__grid { grid-template-columns: 0.6fr 1fr; }
  .contato__foto { max-width: 100%; margin: 0; }

  .secao { padding: calc(var(--espaco-xl) * 1.1) 0; }
}

/* ---------- Telas grandes (≥ 1280px) ---------- */
@media (min-width: 1280px) {
  .hero__nome { font-size: 4rem; }
  .container { padding: 0 var(--espaco-lg); }
}

/* ---------- Telas muito pequenas (≤ 380px) ---------- */
@media (max-width: 380px) {
  :root { --espaco-lg: 2.25rem; --espaco-xl: 3.25rem; }
  .btn--pill-outline { width: 100%; }
  .contato__acoes { flex-direction: column; }
}

/* ---------- Respeita usuários que preferem menos animação ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Impressão ---------- */
@media print {
  .navbar, .back-to-top, .hero__onda { display: none; }
}