/* ==========================================================================
   to767.css — celular (até 767px)
   O frontend.css é a base desktop; aqui ficam as correções do celular.
   A maioria do público acessa por aqui: esperar este arquivo robusto.
   ========================================================================== */

@media (max-width: 767px) {

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

    .sdi-secao-titulo {
        font-size: 1.875rem;
        margin-bottom: 1.5rem;
    }

    /* SEÇÕES DA ARTE (fase 2) — o que o `col-lg-*` do Bootstrap não resolve sozinho.
       A arte não tem frames de celular (pendência com o Design): estas quebras são
       decisão nossa, feitas para o conteúdo caber sem apertar. */

    /* HERO: no desktop os dois vídeos ficam ATRÁS do texto, mas a composição "SDI 26" é
       larga (2,8:1) e não cabe num hero estreito — o "26" sairia da tela. Aqui a faixa
       de vídeo desce para BAIXO do texto (o `column-reverse` inverte a ordem do markup)
       e guarda a proporção do desenho, 35,7% da largura. Assim as duas palavras aparecem
       inteiras, só que menores. Decisão nossa: a arte não trouxe frame de celular. */
    .dHero-video {
        display: flex;
        flex-direction: column-reverse;
        min-height: 0;
    }

    .sdi-hero-kvs {
        position: relative;
        inset: auto;
        height: 35.7vw;
        margin-block-start: 2.5rem;
    }

    /* carrossel: foto em cima, texto embaixo — lado a lado sobra pouco para os dois */
    .sdi-carrossel-lamina {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        justify-items: center;
    }

    /* setas mais perto da borda: no celular a lâmina precisa da largura */
    .sdi-carrossel {
        padding-inline: 2.25rem;
    }

    .sdi-carrossel-seta.carousel-control-prev,
    .sdi-carrossel-seta.carousel-control-next {
        width: 2.25rem;
    }

    /* três números em coluna: "24 países" quebrava no meio da palavra */
    .sdi-numeros {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    /* a marca do meio da coluna esquerda não precisa do respiro de 5rem aqui */
    .dAbout .sdi-sd-marca {
        margin-block-start: 2.5rem;
    }

    .sdi-servico {
        margin-block-start: 2.5rem;
    }

    /* Â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;
    }

    /* HEADER (barra fixa — controles/UC_TOPO.ascx) */
    .dHeadPage {
        padding-block: .875rem;
    }

    .sdi-topo {
        gap: 1rem;
    }

    .sdi-logo {
        width: 40px;
        height: 40px;
    }

    .sdi-bt-inscrever {
        padding: .6rem 1.1rem;
        font-size: .8125rem;
    }

    /* SAVE THE DATE */
    .sdi-sd-marca,
    .sdi-sd-data {
        font-size: 1.125rem;
    }

    .sdi-manifesto-acao {
        margin-block-start: 3rem;
    }

    /* ----- O VÍDEO DO MANIFESTO NO CELULAR (2026-09-23, fecha o SD-014) -----
       No desktop marca, data e botão de som ficam POR CIMA do vídeo (frontend.css, 5c).
       Aqui não dá: a 402px o vídeo tem 304 de altura, os 11,16% da marca caem DENTRO da
       barra fixa e o texto passaria por cima da onda. Então a sobreposição se desfaz e os
       três viram pilha — marca e data em cima, vídeo no meio, botão de som embaixo.
       É a mesma decisão que o hero de duas colunas nunca teve, e por isso não empilhava.
       O Design nunca mandou frames de celular: esta ordem é nossa. */
    .sdi-savedate .dHero-manifesto {
        padding-block-start: calc(var(--sdi-topo-altura, 88px) + var(--sdi-secao-pad));
    }

    .sdi-sd-palco {
        display: flex;
        flex-direction: column;
        aspect-ratio: auto;
        max-block-size: none;
    }

    .sdi-sd-sobre {
        position: static;
        order: 1;
        pointer-events: auto;
    }

    .sdi-sd-sobre .sdi-sd-marca,
    .sdi-sd-sobre .sdi-sd-data {
        position: static;
    }

    .sdi-sd-sobre .sdi-sd-data {
        margin-block-start: 1.75rem;
    }

    .sdi-sd-quadro {
        position: static;
        order: 2;
        aspect-ratio: 1536 / 1162;
        margin-block-start: 2.5rem;
    }

    /* embaixo do vídeo, e não por cima: a legenda queimada ocupa a metade de baixo do
       quadro, que é justamente onde um botão sobreposto cairia. */
    .sdi-sd-som {
        position: static;
        order: 3;
        margin-block-start: 1rem;
    }

    .sdi-sd-acao {
        margin-block-start: 3rem;
    }

    /* NO FIM DO VÍDEO, no celular, não há encolhimento nem margem negativa: a caixa do
       vídeo já é baixa (304px a 402 de tela), então o buraco que a seção 5d resolve não
       existe aqui. Fica só a troca de imagem — e marca e data continuam empilhadas, sem o
       halo, porque no celular elas não estão por cima das listras. */
    .sdi-sd-fim .sdi-sd-sobre .sdi-sd-marca,
    .sdi-sd-fim .sdi-sd-sobre .sdi-sd-data {
        inset-block-start: auto;
        box-shadow: none;
        background-color: transparent;
    }

    .sdi-bt-grande {
        padding: 1.1rem 2rem;
        font-size: 1.0625rem;
    }

    .sdi-kv-marca {
        font-size: 6rem;
        margin-bottom: 1.75rem;
    }

    .sdi-kv-tema {
        font-size: 1.5rem;
    }

    .sdi-kv-data {
        font-size: 1.125rem;
    }

    /* INFORMAÇÕES GERAIS */
    .sdi-lead {
        font-size: 1.125rem;
    }

    .dPanels {
        padding: 1.5rem;
    }

    /* PALESTRANTES */
    .sdi-palestrantes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1rem;
    }

    /* AGENDA: abas em cima; trilha e busca embaixo, na largura toda */
    .nav-pills.sdi-dias {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .sdi-agenda-controles {
        flex-wrap: wrap;
    }

    .sdi-agenda-filtros {
        flex: 1 1 100%;
        flex-direction: column;
    }

    .sdi-filtro-trilha,
    .sdi-busca {
        flex: none;
    }

    /* trilha e busca com a mesma altura (alvo de toque de 44px) */
    .sdi-filtro-btn,
    .sdi-busca .form-control {
        min-height: 2.75rem;
    }

    .sdi-filtro-btn {
        width: 100%;
        max-width: none;
    }

    .sdi-filtro-trilha .dropdown-menu {
        width: 100%;
    }

    .sdi-busca {
        width: 100%;
    }

    /* AGENDA: horário em cima; conteúdo e "+" na linha de baixo */

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

    .sdi-sessao-hora,
    .sdi-sessao-desc {
        grid-column: 1 / -1;
    }

    .sdi-sessao-hora small {
        display: inline;
        margin-left: .35rem;
    }

    .sdi-sessao-titulo {
        font-size: 1.125rem;
    }

    .sdi-sessao-pal .sdi-pal-foto {
        width: 56px;
    }

    /* AGENDAR: botão só com o ícone (o texto fica para leitor de tela); o balão abre LOGO ABAIXO
       DA SESSÃO, na largura dela — preso ao botão ele saía da tela (o "+" fica à direita) */
    .sdi-sessao {
        position: relative;
    }

    .sdi-agendar {
        position: static;
    }

    .sdi-agendar-btn {
        width: 2.75rem;
        padding: 0;
        justify-content: center;
    }

    .sdi-agendar-btn .sdi-agendar-rotulo {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
    }

    .sdi-agendar-pop {
        top: calc(100% - .75rem);
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }

    .sdi-agendar-pop::before {
        display: none;
    }

    /* CARREIRAS + DIVERSIDADE */
    .sdi-hr {
        margin-block: 3rem 2.5rem;
    }

    .sdi-bloco + .sdi-bloco {
        margin-top: 2.5rem;
    }

    .sdi-bloco-titulo {
        font-size: 1.5rem;
    }

    /* FOOTER — os 4 blocos empilham, então a faixa não cabe com proporção fixa:
       o texto vem em fluxo e o vídeo entra abaixo dele.
       O vídeo fica SEM altura fixa (altura fixa com largura de 109,67% o esmaga);
       o deslocamento lateral vira margem negativa, para manter o mesmo enquadramento. */
    .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;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding-block-start: 2.5rem;
    }

    /* O arquivo tem preto sobrando em cima e embaixo (as letras ficam entre 22,6% e
       77,4% da altura). Mostrar o quadro inteiro deixa um vazio enorme, então aqui
       a proporção é forçada e o cover corta essa borda — como a faixa faz no desktop. */
    .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;
    }

    /* FORMULÁRIO (modal_inscricao.css) */
    #ModalInscricao .modal-body {
        padding: 1rem 1rem 0;
    }

    /* Voltar / Continuar dividem a largura no celular */
    .sdi-etapa-nav .bt_padrao {
        flex: 1 1 0;
        justify-content: center;
        padding-inline: .75rem;
    }
}