/* =========================================================
   RIENE MENDES — Responsividade
   Mobile-first breakpoints: 1024 / 768 / 430 / 375
   ========================================================= */

@media (max-width: 1024px) {
    .meeting-cta__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .meeting-cta__figure img { max-height: 320px; }
    .meeting-cta h2 { max-width: 100%; margin-left: auto; margin-right: auto; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .contact-featured { grid-template-columns: minmax(0, 1fr); }
    .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .galeria-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* Menu do header: até 1100px usa hambúrguer (não tenta espremer os 9 itens
   em telas médias — "Pesquisas" como 9º link não cabe com presença visual
   real abaixo disso). De 1101px pra cima é o header desktop "grande" (ver
   style.css: logo 76px, links 1.05rem, botão do Instagram com destaque). */
@media (max-width: 1100px) {
    :root { --header-h: 88px; }
    .navbar__logo { width: 102px; height: 56px; max-width: none; }
    .navbar__brand { padding: 8px 16px; border-radius: 16px; }

    .navbar__nav {
        position: fixed;
        top: var(--header-h); left: 0;
        width: 100%;
        /* "bottom: 0" (auto-height) media o painel contra o container de
           overflow mais próximo em vez do viewport em páginas internas
           (body.page-inner + overflow:clip no html/body) — o painel abria
           com ~60px de altura, cortando quase todos os links. Altura
           explícita via calc() não depende desse cálculo e funciona igual
           em qualquer página. */
        height: calc(100vh - var(--header-h));
        height: calc(100dvh - var(--header-h));
        background: var(--riene-roxo-escuro);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 30px 24px;
        gap: 26px;
        transform: translateX(100%);
        transition: transform .35s ease;
        overflow-y: auto;
    }
    .navbar__nav.is-open { transform: translateX(0); }
    .navbar__nav ul { flex-direction: column; gap: 22px; }
    .navbar__nav ul a { font-size: 1.1rem; display: block; }
    .navbar__nav .navbar__cta { align-self: flex-start; }
    .navbar__toggle { display: flex; }
    .navbar__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .navbar__toggle.is-active span:nth-child(2) { opacity: 0; }
    .navbar__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    body.nav-open { overflow: hidden; }
}

@media (max-width: 860px) {
    /* Hero e "Conheça Riene"/foto da Sobre empilham só a partir daqui —
       entre 861 e 1024px cabe confortavelmente lado a lado (2 colunas),
       então mantemos o layout de desktop nessa faixa em vez de empilhar
       cedo demais e alongar a primeira tela sem necessidade. */
    .hero { min-height: auto; padding-bottom: 50px; }
    .hero__scroll { display: none; }
    .hero__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .hero__content { padding: 20px 0 0; order: 2; }
    .hero__badge, .hero__actions, .hero__urna { justify-content: center; }
    .hero__figure { order: 1; height: auto; }
    .hero__figure img { max-height: 56vh; }
    .hero__selo { top: 2%; left: 4%; padding: 9px 15px; }
    .hero__selo-numero { font-size: 1.1rem; }
    .about-preview { grid-template-columns: minmax(0, 1fr); }
    .about-preview__figure { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 768px) {
    :root { --header-h: 80px; }
    .section { padding: 64px 0; }
    .section--tight { padding: 44px 0; }
    .grid-3 { grid-template-columns: minmax(0, 1fr); }
    .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .faq__categoria { padding: 22px; }
    .como-votar__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .contador-card, .urna-card { padding: 26px 22px; }
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); text-align: left; gap: 32px; }
    .site-footer__bottom { flex-direction: column; text-align: center; }
    .about-preview__badge { position: static; margin-top: 16px; display: inline-flex; }
    .about-preview__figure::before { display: none; }
    .galeria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .page-header { padding: 56px 0 60px; }
    .feed-viewport { padding: 0 44px; }
    /* % do próprio .feed-track (não vw): "vw" ignora o padding do container
       e deixava o card ~8px mais largo que o espaço disponível, cortando-o. */
    .feed-card { flex-basis: 84%; max-width: 320px; }
    .stories-viewer__inner { width: 100vw; height: 100vh; }
    .navbar__logo { width: 94px; height: 52px; max-width: none; }
    .navbar__brand { padding: 6px 14px; border-radius: 14px; }
    .site-footer__brand img { max-height: 76px; }
}

@media (max-width: 430px) {
    .container { padding: 0 16px; }
    .hero__name { font-size: 2.3rem; }
    .hero__slogan { font-size: 1.35rem; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; }
    .btn { padding: 14px 22px; font-size: .92rem; }
    .bandeira-card { padding: 30px 20px; }
    .contact-featured__card { padding: 28px 24px; }
    .whatsapp-float { width: 54px; height: 54px; bottom: 18px; right: 16px; }
    /* Keep contact-card CTA buttons clear of the floating WhatsApp button's corner */
    .contact-card .btn { max-width: 190px; white-space: normal; text-align: center; }
    .galeria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .urna-sim__digito { width: 30px; height: 38px; font-size: 1.1rem; }
    .contador { gap: 7px; }
    .contador__item { padding: 10px 2px; }
    .galeria-item__tag { font-size: .58rem; padding: 4px 9px; top: 10px; left: 10px; letter-spacing: .03em; }
    .galeria-item__zoom { width: 36px; height: 36px; }
    .lightbox__prev { left: 10px; }
    .lightbox__next { right: 10px; }
    .lightbox__close { top: 14px; right: 14px; width: 42px; height: 42px; }
    .social-block__insta { flex-direction: column; text-align: center; }
    .meeting-modal__dialog { padding: 32px 22px 26px; }
    .meeting-modal__dialog h3 { font-size: 1.18rem; }
    .feed-viewport { padding: 0 38px; }
    .feed-card { flex-basis: 86%; }
    .feed-nav { width: 34px; height: 34px; font-size: .85rem; }
    .story-avatar { width: 68px; }
    .story-avatar__ring { width: 60px; height: 60px; }
    :root { --header-h: 74px; }
    .navbar__logo { width: 83px; height: 46px; max-width: none; }
    .navbar__brand { padding: 6px 13px; border-radius: 13px; }
    .site-footer__brand img { max-height: 70px; }
}

@media (max-width: 375px) {
    .hero__name { font-size: 2rem; }
    :root { --header-h: 70px; }
    .navbar__logo { width: 76px; height: 42px; max-width: none; }
    .navbar__brand { padding: 5px 12px; border-radius: 12px; }
}

/* Landscape phones — keep hero from overflowing viewport height */
@media (max-height: 480px) and (orientation: landscape) {
    .hero { min-height: auto; padding: calc(var(--header-h) + 20px) 0 40px; }
    .hero__figure img { max-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}