/* =====================================================================
   pirlilim-custom.css — Ajustes de UI/UX (carregado por ultimo)
   Tema Escola Pirlilim. Nao editar css/style.css (BizPage); override aqui.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) FIM DO SCROLL HORIZONTAL
   Causa: .row do Bootstrap (margin: 0 -15px) usadas soltas dentro de
   <section> sem .container, + imagens/elementos width:100% absolutos.
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Neutraliza a margem negativa das rows coladas direto na section */
#main > section > .row,
section > .row.about-cols,
#intro .row {
    margin-left: 0;
    margin-right: 0;
}

/* Nenhuma imagem/video pode estourar a largura */
img, video, iframe { max-width: 100%; }

/* ---------------------------------------------------------------------
   2) BANNER (carrossel principal #intro)
   Antes: #intro e cada slide com height:100vh, fundo preto e imagem como
   background-size:contain -> tela cheia com faixas pretas.
   Agora: imagem real, largura total, altura automatica (responsivo).
--------------------------------------------------------------------- */
#intro {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    margin-top: 0;
}

#intro .intro-container,
#intro #introCarousel,
#intro .carousel,
#intro .carousel-inner {
    height: auto;
    width: 100%;
    overflow: hidden;
}

#intro .carousel-item {
    width: 100%;
    height: auto;
    background: none !important;   /* mata o background-image que o main.js tentaria setar */
    background-color: transparent !important;
}

#intro .carousel-item img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* remove o overlay ::before e os textos ocultos herdados do template */
#intro .carousel-item::before { content: none !important; display: none !important; }
#intro .carousel-container { display: none !important; }

/* desliga as "mascaras" brancas laterais (right/left:82%) so no banner */
#introCarousel .carousel-inner::before,
#introCarousel .carousel-inner::after { display: none !important; content: none !important; }

/* setas de navegacao do banner: visiveis e sem estourar largura */
#intro .carousel-control-prev,
#intro .carousel-control-next {
    width: 6%;
    opacity: .85;
    z-index: 5;
}
#intro .carousel-control-prev { justify-content: flex-start; }
#intro .carousel-control-next { justify-content: flex-end; }
#intro .carousel-control-prev-icon,
#intro .carousel-control-next-icon {
    background-color: rgba(0, 104, 65, .55);
    border-radius: 50%;
    padding: 14px;
    background-size: 45% 45%;
}

/* ---------------------------------------------------------------------
   3) BARRAS DE BOTOES (nav1 gradiente + nav2 branca)
   Deixa os botoes quebrarem linha com respiro no mobile e evita que o
   botao "Area administrativa" (absolute) sobreponha os demais.
--------------------------------------------------------------------- */
#header #nav1,
#header #nav2 {
    flex-wrap: wrap;
    align-items: center;
    row-gap: .35rem;
    padding: .5rem .75rem;
}

#header #nav1 .btn,
#header #nav2 .btn {
    margin-bottom: .4rem !important;
    white-space: nowrap;
}

#header #nav2 #imgTop { height: auto; }

/* ---------------------------------------------------------------------
   4) ESPACAMENTO / RITMO GERAL
--------------------------------------------------------------------- */
#main > section { padding-top: 24px; padding-bottom: 24px; }

.section-header { margin-bottom: 12px; }

/* container sempre com respiro lateral no mobile */
.container, .container-fluid { padding-left: 15px; padding-right: 15px; }

/* imagens decorativas de faixa (tri.png) nunca geram barra de rolagem */
img[src*="tri.png"], img[src*="line-bottom.png"], img[src*="line-top.png"] {
    max-width: 100%;
    left: 0;
}

/* ---------------------------------------------------------------------
   5) AJUSTES MOBILE
--------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    #header #btnArea {
        position: static !important;   /* sai do canto absoluto e entra no fluxo */
        right: auto !important;
        margin-left: auto;
    }
    #header #nav2 #imgTop { width: 80px !important; }
    #main > section { padding-top: 18px; padding-bottom: 18px; }
}

@media (max-width: 575.98px) {
    #header #nav1 .btn,
    #header #nav2 .btn { font-size: 10px; }
    .about-content { padding: 0 6px; }
    #about .col-lg-7 { max-height: none !important; overflow: visible !important; }
}

/* ---------------------------------------------------------------------
   6) MICRO-POLISH
--------------------------------------------------------------------- */
.back-to-top { z-index: 996; }
a.btn { transition: transform .15s ease, box-shadow .15s ease; }
a.btn:hover { transform: translateY(-1px); }