/* ============================================================
   COLÉGIO SABIRACEMA — Responsividade v2
   Breakpoints: 1100 / 1080(menu) / 980 / 768 / 560 / 430 / 360
   ============================================================ */

@media (min-width: 1600px) {
    :root { --container: 1320px; }
}

/* ---------- ≤1100px ---------- */
@media (max-width: 1100px) {
    .hf-w2 { font-size: clamp(2.6rem, 9vw, 5rem); }
    .footer-main { grid-template-columns: 1fr; gap: 3rem; }
    .footer-motto { max-width: none; }
}

/* ---------- ≤1080px — menu mobile ---------- */
@media (max-width: 1080px) {
    .site-nav, .header-cta { display: none; }
    .menu-toggle { display: flex; }
    .site-header.is-scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
    .site-header { background: transparent; }
    .site-header.is-solid {
        background: rgba(255, 255, 255, .95);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-bottom-color: var(--color-border);
    }
}

/* ---------- ≤980px ---------- */
@media (max-width: 980px) {
    .split-7-5, .split-4-8, .split-8-4 { grid-template-columns: 1fr; }

    /* HOME hero: foto vai para o fluxo, acima do texto */
    .hero-home { display: block; min-height: 0; }
    /* padding-top compensa o header fixo (~74px) para não sobrepor logo/nome */
    .hh-top { padding-top: clamp(5.5rem, 12vh, 7rem); }
    .hh-bottom { grid-template-columns: 1fr; padding-bottom: 2rem; }
    .hh-visual {
        position: static;
        order: -1;
        width: 100%;
        margin-bottom: clamp(1.4rem, 4vw, 2.2rem);
    }
    .hh-visual img { aspect-ratio: 16 / 10; height: auto; }
    .hh-visual::before { inset: 1.2rem auto 1.2rem -10px; }

    /* O COLÉGIO: hero em coluna */
    .hero-colegio { --hc-seam: 0%; }
    .hc-year {
        position: static;
        margin: 0 0 1.5rem;
        font-size: clamp(3.8rem, 13vw, 6.5rem);
    }
    /* foto em largura total, sem cortes (proporção natural da imagem) */
    .hc-photo img { aspect-ratio: auto; height: auto; }
    .hc-photo figcaption { padding-left: 0; }
    .hc-text { margin-left: 0; margin-top: clamp(1.8rem, 5vw, 2.6rem); }

    /* SEGMENTOS: visão geral + escada rolável */
    .stage-row { grid-template-columns: 1fr; gap: 1.2rem; }
    .stairs {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(108px, 1fr);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .stair { margin-top: 0 !important; scroll-snap-align: start; }

    /* EXPERIÊNCIA */
    .tour-layout { grid-template-columns: 1fr; }
    .tour-index { position: static; }
    .tour-index nav { display: flex; flex-wrap: wrap; gap: .5rem; }
    .tour-index a { border-left: 0; border: 1px solid var(--color-border); border-radius: 2px; padding: .55rem 1.1rem; }
    .tour-index a.is-active { border-color: var(--color-red); padding-left: 1.1rem; }
    .tour-progress { display: none; }

    /* VIDA: hero em coluna única */
    .vida-hero { min-height: 0; padding-top: clamp(6.5rem, 14vh, 8rem); padding-bottom: clamp(2.4rem, 6vw, 3.5rem); }
    .vh-inner { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
    .vh-photo img { height: clamp(420px, 55vw, 560px); }
    .vh-scroll { display: none; }

    /* VISITA: split vira pilha */
    .split-screen { grid-template-columns: 1fr; min-height: 0; }
    .ss-left { padding-top: clamp(6.5rem, 14vh, 8rem); }
    .ss-right { padding-top: clamp(3rem, 7vw, 4.5rem); }

    /* painéis de ano */
    .yp-highlights { grid-template-columns: 1fr; }
    .bncc-list { grid-template-columns: 1fr; }
    .yp-footer { grid-template-columns: 1fr; gap: 1.6rem; }

    .gallery { grid-template-columns: repeat(4, 1fr); }
    .g-w-3, .g-w-4 { grid-column: span 2; }
    .g-text { grid-column: span 2; }
}

/* ---------- ≤768px ---------- */
@media (max-width: 768px) {
    :root { --fs-body: 1rem; }
    .section { padding-block: calc(var(--space-section) * .8); }

    .hh-meta { flex-wrap: wrap; }

    .strip-1992 { grid-template-columns: 1fr; gap: 1.4rem; }
    .strip-1992 .cta-cell { grid-column: 1; }

    .words-row { grid-template-columns: repeat(2, 1fr); }
    .words-row .word-btn:nth-child(4n) { border-right: 1px solid var(--color-border); }
    .words-row .word-btn:nth-child(2n) { border-right: 0; }

    .vc-stage { min-height: 0; }

    .form-grid { grid-template-columns: 1fr; }

    .grid-3 { grid-template-columns: 1fr; }

    .tablist { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .8rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tablist::-webkit-scrollbar { display: none; }
    .tab { flex: none; padding: .8rem 1.3rem; }

    .yp-head { grid-template-columns: 1fr; gap: 1rem; }
    .yp-head .big-num { font-size: clamp(3.4rem, 14vw, 5rem); }

    .gallery { grid-template-columns: repeat(2, 1fr); }
    .g-w-2, .g-w-3, .g-w-4 { grid-column: span 1; }
    .g-item:nth-child(1), .g-item:nth-child(6) { grid-column: span 2; }
    .g-item:nth-child(1) img, .g-item:nth-child(6) img { aspect-ratio: 16 / 10; }
    .g-text { grid-column: 1 / -1; }

    .lb-prev { left: .6rem; }
    .lb-next { right: .6rem; }
    .lightbox-figure img { max-height: 72vh; }

    .stat-line { gap: 2rem 3rem; }

    .bridge { flex-direction: column; gap: .8rem; }
    .bridge .b-line { display: none; }

    /* EXPERIÊNCIA hero — palavras em escala mobile */
    .hf-w1 { top: 5.5rem; font-size: 1.7rem; }
    .hf-w2 { top: 38%; left: var(--gutter); right: auto; font-size: 2.7rem; }
    .hf-w3 { bottom: 8.5rem; font-size: 1.7rem; }
    .hf-lead { bottom: 1.8rem; font-size: .9rem; max-width: 34ch; }

    .mission-item { grid-template-columns: 1fr; gap: .4rem; }
    .mission-item .m-idx { font-size: 1.2rem; }

    .ss-step { grid-template-columns: 1fr; gap: .3rem; }
}

/* ---------- hover indisponível (touch) ---------- */
@media (hover: none) {
    .g-item .g-cap { opacity: 1; transform: none; }
}

/* ---------- ≤560px ---------- */
@media (max-width: 560px) {
    .hh-actions .btn,
    .closing .actions .btn { width: 100%; }

    .header-inner { padding-block: .85rem; gap: 1rem; }
    .brand-logo { height: 44px; }

    .words-row { grid-template-columns: 1fr; }
    .words-row .word-btn { border-right: 0 !important; }

    .hc-year { font-size: clamp(3.2rem, 16vw, 4.6rem); margin-bottom: 1.2rem; }
    .hc-text { margin-top: 1.7rem; }
    .hc-quote { font-size: clamp(1.55rem, 6vw, 2rem); }

    .tab { padding: .75rem 1.05rem; font-size: .84rem; }
    .tab .tab-word { display: none; }

    .lb-btn { width: 46px; height: 46px; }

    .footer-base { justify-content: center; text-align: center; }

    .vh-title { font-size: clamp(2.4rem, 9.5vw, 2.9rem); }
    .vh-photo img { height: clamp(380px, 65vw, 480px); }

    .tour-overlay { padding: 1.4rem; }
    .tour-overlay .h2 { font-size: 1.6rem; }
}

/* ---------- ≤430px ---------- */
@media (max-width: 430px) {
    .container { padding-inline: 1.15rem; }
    .gallery { grid-template-columns: 1fr; }
    .g-item, .g-item:nth-child(1), .g-item:nth-child(6) { grid-column: 1 / -1; }
    .g-item img, .g-item:nth-child(1) img, .g-item:nth-child(6) img { aspect-ratio: 4 / 3; }
    .hh-visual img { aspect-ratio: 4 / 3; }
    .hh-title { font-size: clamp(2.35rem, 11.5vw, 3rem); }
    .strip-1992 .year { font-size: 3.6rem; }
    .mm-link { flex-direction: column; align-items: flex-start; gap: .3rem; }
    .mm-link .mm-desc { text-align: left; max-width: none; }
    .ss-left, .ss-right { padding-inline: 1.15rem; }
}

/* ---------- telas muito pequenas ---------- */
@media (max-width: 360px) {
    :root { --gutter: 1rem; }
}