@charset "utf-8";
/* Versão celular do site do Colégio (só abaixo de 760px; desktop não muda).
   Tudo prefixado com "body" pra ganhar do layout.css, que algumas páginas
   carregam de novo depois do head.php. !important só onde o HTML tem style inline. */

/* Textos corridos justificados (vale também no desktop): Direção/Equipe, Histórico, Cursos */
body .artigo .card-texto p,
body .curso .card.texto p,
body #conteudo_interno .curso .card.texto p { text-align: justify; }

@media (max-width: 760px) {

    body { -webkit-text-size-adjust: 100%; }
    /* rodapé encosta no fim da tela mesmo em página curta (sem faixa branca embaixo) */
    body #container { display: flex; flex-direction: column; min-height: 100vh; }
    body #container > #rodape { margin-top: auto; }
    body > blockquote { display: none; }
    body img { max-width: 100%; height: auto; }

    body #container,
    body .container,
    body .container_transp { width: 100%; }

    /* faixa FEV / Centro Universitário / ... (desktop, depende de hover) */
    body #barra_topo,
    body #topo_acompanha,
    body #topo_fixo { display: none; }

    /* topo: logo + redes na 1ª linha, Portal/Boleto na 2ª */
    body #sub_topo {
        height: auto; padding: 14px 16px 10px;
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    }
    body #quadrado_top1 { width: auto; padding: 0; float: none; }
    body #quadrado_top1 img { width: 190px !important; padding-top: 0 !important; display: block; }
    body #quadrado_top2 { width: auto; margin: 0; padding: 0; float: none; }
    body #quadrado_top3 { width: 100%; padding: 8px 0 0; float: none; }
    body #quadrado_top3 table { float: none; margin: 0; width: 100% !important; }
    body #quadrado_top3 tbody { display: flex; gap: 18px; }
    body #quadrado_top3 td { padding: 0 !important; text-align: left !important; }
    body #quadrado_top3 a,
    body #quadrado_top3 a span { font-size: 14px !important; }
    body #quadrado_top3 a:before { width: 18px; height: 18px; }

    /* menu principal: botão "Menu" abre a lista (ver tabs.php) */
    body #menu-colegio .menu-toggle { display: flex; }
    body #menu-colegio > ul { display: none; flex-direction: column; padding-bottom: 6px; }
    body #menu-colegio.aberto > ul { display: flex; }
    body #menu-colegio > ul > li { flex: 0 0 auto; }
    body #menu-colegio > ul > li.home { display: none; }
    body #menu-colegio > ul > li > a,
    body #menu-colegio > ul > li > span { justify-content: flex-start; height: 44px; padding: 0 16px; border-top: 1px solid rgba(255,255,255,.18); }
    body #menu-colegio > ul > li.ativo > a:after,
    body #menu-colegio > ul > li.ativo > span:after { left: 0; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto; border-radius: 0 3px 3px 0; }
    body #menu-colegio .seta { display: none; }
    body #menu-colegio ul ul {
        position: static; min-width: 0; margin: 0 12px 8px; padding: 4px 0;
        opacity: 1; visibility: visible; transform: none;
        border-top: 0; border-radius: 8px; box-shadow: none;
    }
    body #menu-colegio ul ul li a { white-space: normal; padding: 9px 14px; }

    /* home */
    body #atalhos { padding: 14px 16px 4px; gap: 10px; }
    body #atalhos .atalho { padding: 12px; gap: 10px; }
    body #atalhos .atalho .ico { width: 36px; height: 36px; }
    body #atalhos .atalho strong { font-size: 14px; }
    body #meio { padding: 10px 16px 22px; }
    /* empilhado, o flex: 1 1 0 da home zerava a altura dos cards */
    body .nt-grid .nt-card { flex: 0 0 auto; }
    body .nt-head { flex-wrap: wrap; gap: 6px; }

    /* páginas internas: menu lateral vai pra cima do conteúdo */
    body #menu { width: 100%; float: none; padding: 14px 16px 0; }
    body #menu ul { width: auto; }
    body #principal { width: auto; float: none; margin: 0; }
    body #conteudo_interno { padding: 0 16px; }
    body #barra_titulo { padding: 12px 16px 10px; }
    body .navbar { font-size: 21px; }
    body #principal table { max-width: 100%; }
    body #conteudo_interno.artigo,
    body #conteudo_interno.pessoas { padding: 14px 16px; }
    body .artigo .card-texto { padding: 20px 18px; }
    body .artigo .marcos { flex-direction: column; gap: 8px; }
    body .artigo .marco { flex: 0 0 auto; }
    /* Calendário: listas de série (1º Ano · 2º Ano...) quebram linha */
    body #cal { padding: 8px 0 30px; }
    body #cal li { flex-wrap: wrap; gap: 4px 16px; }
    body #cal li .opcoes { white-space: normal; }
    body #principal iframe { max-width: 100%; }

    /* rodapé empilhado */
    body #rodape { height: auto; padding: 18px 16px 16px; overflow: hidden; box-sizing: border-box; }
    body #rodape .quadrado_base { width: 100% !important; float: none; border-left: 0; padding: 0 !important; margin-bottom: 8px; }
    /* Ouvidoria / Trabalhe Conosco / Mapa têm 2 <li>&nbsp;</li> de enchimento */
    body #rodape #quad4 + #quad4 li + li,
    body #rodape #quad5 li + li,
    body #rodape #quad6 li + li { display: none; }
    body #rodape > p { display: none; }
    body #quadrado_bottom1,
    body #quadrado_bottom2 { width: 100%; float: none; padding: 6px 0 0; text-align: left; box-sizing: border-box; }
    body #quadrado_bottom2 { padding-top: 10px; }
}