/* ==========================================================================
   768to991.css — tablet (768px a 991px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    /* Âncoras de seção escondidas abaixo de 992: a arte ainda não trouxe
       o menu de celular (sanduíche). Pendência em _docs/pendencias.md. */
    .sdi-menu {
        display: none;
    }

    :root {
        --sdi-secao-pad: 4rem;
    }

    .sdi-kv-marca {
        font-size: 9rem;
    }

    .sdi-palestrantes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* SEÇÕES DA ARTE (fase 2): no tablet as colunas do Bootstrap já empilham (col-lg-*),
       mas o carrossel é grade própria e a foto ao lado do texto ainda aperta os dois. */
    .sdi-carrossel-lamina {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        justify-items: center;
    }

    .sdi-sessao {
        grid-template-columns: 7rem minmax(0, 1fr) auto;
        gap: .5rem 1.5rem;
    }

    /* FOOTER — mesma correção do celular: no tablet a faixa com proporção fixa fica
       baixa demais e o texto invade o vídeo. Texto em fluxo, vídeo abaixo. */
    .sdi-footer-faixa {
        aspect-ratio: auto;
        display: flex;
        /* reverse porque no markup o <video> vem ANTES do bloco de texto:
           assim o texto fica em cima e o vídeo embaixo, como no Figma */
        flex-direction: column-reverse;
    }

    .sdi-footer-topo {
        position: static;
        padding-block-start: 3rem;
    }

    /* mesmo recorte do celular: tira o preto que o arquivo tem em cima e embaixo */
    .sdi-footer-kv {
        position: static;
        width: 109.67%;
        height: auto;
        aspect-ratio: 2.8;
        object-fit: cover;
        margin-inline-start: -3.955%;
        margin-block-start: 2rem;
    }

}