/* ============================================
   Melhorias de layout mobile
   Colégio Madre Cecilia Cros
   ============================================ */

/* ---------- HEADER TOP — organizado em 2 linhas no mobile ---------- */
@media (max-width: 767px) {
    .header-top { padding: 10px 12px 12px; }
    .header-top-left { display: none; } /* telefone/email duplicados some no mobile (estão no footer) */

    .header-top .header-top-right {
        width: 100% !important;
        padding: 0 !important;
    }
    .header-top .header-top-right ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        margin: 0;
        padding: 0;
        align-items: center;
    }
    .header-top .header-top-right ul li {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    /* Linha 1: Facebook + Instagram ocupam metade cada, span 1 col cada, e Professores na 3ª */
    /* Como são 5 itens, usamos linhas: 2 primeiros (redes) + 3 botões */
    .header-top .header-top-right ul {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
    }
    /* Redes sociais — linha 1, colunas 1 e 2 (ícones lado a lado, centralizados) */
    .header-top .header-top-right ul li:nth-child(1),
    .header-top .header-top-right ul li:nth-child(2) {
        grid-row: 1;
    }
    .header-top .header-top-right ul li:nth-child(1) { justify-content: flex-end; padding-right: 8px !important; }
    .header-top .header-top-right ul li:nth-child(2) { justify-content: flex-start; padding-left: 8px !important; }

    /* Botões — linha 2, 3 colunas distribuídas igualmente */
    .header-top .header-top-right ul li:nth-child(3),
    .header-top .header-top-right ul li:nth-child(4),
    .header-top .header-top-right ul li:nth-child(5) {
        grid-row: 2;
    }
    .header-top .header-top-right ul li:nth-child(3) { grid-column: 1 / 2; }
    .header-top .header-top-right ul li:nth-child(4) { grid-column: 2 / 3; }
    .header-top .header-top-right ul li:nth-child(5) {
        grid-column: 1 / 3;     /* Acesso Restrito ocupa a largura toda na 3ª linha */
        grid-row: 3;
        margin-top: 4px !important;
    }

    /* Ícones redondos das redes */
    .header-top .header-top-right .face,
    .header-top .header-top-right .insta {
        width: 38px; height: 38px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 1.5px solid #fff;
        border-radius: 50%;
        font-size: 16px !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    /* Botões padronizados */
    .header-top .header-top-right .acessoRestrito {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 9px 8px !important;
        font-size: 13px !important;
        border-radius: 24px !important;
        border: 1.5px solid #fff !important;
        white-space: nowrap;
    }
    .header-top .header-top-right .acessoRestrito i { margin-right: 4px; }
}

/* ---------- NAV MOBILE — hamburger melhor ---------- */
@media (max-width: 991px) {
    .navbar-toggle {
        background: #1e3a8a !important;
        border-color: #1e3a8a !important;
        padding: 10px 12px !important;
        border-radius: 6px !important;
        margin: 8px 15px 8px 0 !important;
    }
    .navbar-toggle .icon-bar {
        background: #fff !important;
        height: 3px !important;
        width: 26px !important;
    }
    .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 90px;
        padding: 0 10px;
        width: 100%;
    }
    .navbar-header .navbar-brand,
    .edu-navbar .navbar-brand {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center;
    }
    /* Sobrescreve o inline .logo { height:140; padding:22; margin:-36 0 } */
    .navbar-header .navbar-brand img.logo,
    .navbar-header img.logo,
    .edu-navbar .logo,
    header .logo,
    img.logo {
        height: 85px !important;
        max-height: 85px !important;
        width: auto !important;
        max-width: none !important;
        padding: 6px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: block !important;
    }
    /* Header do navbar precisa ter espaço suficiente para a logo */
    header .header-body .edu-navbar.boxImgCuida {
        height: auto !important;
        min-height: 95px !important;
        padding: 6px 0 !important;
    }

    /* Menu aberto: off-canvas */
    .navbar-collapse.in,
    .navbar-collapse.collapsing {
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,.15);
        border-top: 2px solid #1e3a8a;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }
    .nav.navbar-nav { margin: 0 !important; }
    .nav.navbar-nav > li {
        border-bottom: 1px solid #e5e7eb;
        float: none !important;
    }
    .nav.navbar-nav > li > a {
        padding: 14px 20px !important;
        font-size: 15px !important;
        color: #1f2937 !important;
        display: block;
    }
    .nav.navbar-nav > li > a:hover,
    .nav.navbar-nav > li.active > a {
        background: #f3f4f6 !important;
        color: #1e3a8a !important;
    }
    .nav.navbar-nav .dropdown.list-unstyled {
        display: none;
        background: #f9fafb;
        padding: 0 !important;
        margin: 0;
    }
    .nav.navbar-nav > li.open .dropdown.list-unstyled { display: block; }
    .nav.navbar-nav .dropdown.list-unstyled li a {
        padding: 10px 36px !important;
        font-size: 14px !important;
        color: #4b5563;
        display: block;
        border-top: 1px solid #e5e7eb;
    }
    .nav.navbar-nav .dropdown.list-unstyled li a:hover {
        background: #e5e7eb;
        color: #1e3a8a;
    }
    /* Seta indicadora de submenu */
    .nav.navbar-nav > li:has(.dropdown) > a::after {
        content: " ▾";
        float: right;
        opacity: .5;
    }
}

/* ---------- CARROSSEL DE BANNERS — altura e ajustes mobile ---------- */
@media (max-width: 767px) {
    .carousel { margin-top: 0 !important; }
    .carousel-inner .item img {
        max-height: 260px;
        object-fit: cover;
        width: 100% !important;
    }
    .carousel-control {
        width: 14% !important;
        opacity: .9;
    }
    .carousel-caption { display: none !important; } /* legenda atrapalha no mobile */
    .carousel-indicators { bottom: 6px !important; margin-bottom: 0; }
    .carousel-indicators li {
        width: 8px !important;
        height: 8px !important;
        margin: 0 4px !important;
    }
}

/* ---------- INTELIGÊNCIAS MÚLTIPLAS — carrossel só no mobile ---------- */
@media (max-width: 767px) {
    .slider-content-bottom h3 {
        font-size: 20px;
        text-align: center;
        margin-bottom: 20px;
    }
    .slider-btm-box.btm-item_03 {
        padding: 20px 10px !important;
    }

    /* Container vira carrossel horizontal scrollable */
    ul.inteligencias {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 10px 30px !important;
        margin: 0 -20px !important;
        list-style: none;
        scrollbar-width: none;
    }
    ul.inteligencias::-webkit-scrollbar { display: none; }
    ul.inteligencias > a {
        flex: 0 0 auto;
        scroll-snap-align: center;
        display: inline-block;
    }
    ul.inteligencias > a li {
        width: 80px !important;
        height: 80px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: #fbbf24;
        margin: 0 !important;
    }
    ul.inteligencias > a li span {
        font-size: 32px !important;
        color: #fff !important;
    }
    /* Dica visual: gradient fade nas pontas */
    .slider-btm-box.btm-item_03 {
        position: relative;
        background: linear-gradient(to right, #1e3a8a, #1e3a8a) !important;
    }
    /* Bolinhas indicadoras abaixo (puramente visuais) */
    .inteligencias-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 14px;
    }
    .inteligencias-dots span {
        width: 7px; height: 7px;
        background: rgba(255,255,255,.5);
        border-radius: 50%;
        transition: all .2s;
    }
    .inteligencias-dots span.active {
        background: #fbbf24;
        transform: scale(1.3);
    }
}
/* Desktop: esconde o elemento dos dots (já tem layout próprio) */
@media (min-width: 768px) {
    .inteligencias-dots { display: none; }
}

/* ---------- FOOTER mobile ---------- */
@media (max-width: 767px) {
    footer .col-sm-3, footer .col-sm-2, footer .col-sm-4, footer .col-sm-6 {
        width: 100% !important;
        text-align: center;
        margin-bottom: 18px;
    }
    footer .list-unstyled li { font-size: 13px; }
    .footer-bottom p { font-size: 12px; padding: 10px; }
}

/* ---------- BOTÃO WHATSAPP flutuante ---------- */
@media (max-width: 767px) {
    body > a[href*="whatsapp"] {
        bottom: 20px !important;
        right: 15px !important;
    }
    body > a[href*="whatsapp"] svg {
        width: 46px !important;
        height: 46px !important;
    }
}