/* =============================================================
   PILAR ONLINE | SLIDER MOBILE DA HOME
   Arquivo: /_css/home_mobile.css
   Carregado depois de home.css pelo includes/home_public.php.
   Apenas o slider principal é alterado; desktop permanece intacto.
   ============================================================= */

@media screen and (max-width: 767px) {
    /* Banner ocupa a largura efetiva da tela, inclusive nas bordas. */
    .po-home .po-home-section--slider {
        margin-inline: -20px;
        width: calc(100% + 40px);
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        min-width: 0;
    }

    .po-home .po-home-section--slider .po-home-section-head {
        margin: 0;
        padding: 10px 14px;
        background: #fff;
    }

    .po-home .po-home-section--slider .po-home-gallery {
        display: flex;
        align-items: flex-start;
        gap: 0;
        padding: 0;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .po-home .po-home-section--slider .po-home-gallery::-webkit-scrollbar {
        display: none;
    }

    /* Sem razão fixa (32/9) e sem altura artificial.
       A altura passa a ser a altura natural da imagem usada no celular. */
    .po-home .po-home-section--slider .po-home-gallery .po-home-banner {
        position: relative;
        display: block;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        border-radius: 0;
        scroll-snap-align: start;
        background: transparent;
    }

    /* O <picture> deixa de ser absoluto para definir a altura do banner. */
    .po-home .po-home-section--slider .po-home-banner picture {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
    }

    .po-home .po-home-section--slider .po-home-banner picture img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    /* Texto, caso exista, é sobreposto sem aumentar a altura. */
    .po-home .po-home-section--slider .po-home-banner-copy {
        position: absolute !important;
        inset: 0 !important;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        padding: 10px 14px;
        gap: 3px;
    }

    .po-home .po-home-section--slider .po-home-banner-copy strong {
        font-size: clamp(12px, 3.2vw, 19px);
        line-height: 1.2;
    }

    .po-home .po-home-section--slider .po-home-banner-copy small {
        font-size: clamp(9px, 2.4vw, 12px);
    }

    .po-home .po-home-section--slider .po-home-slider-actions {
        margin: 0;
        padding: 7px 12px;
        background: #fff;
    }
}

@media screen and (max-width: 600px) {
    /* O shell da Home usa 10px de margem lateral nessa faixa. */
    .po-home .po-home-section--slider {
        margin-inline: -10px;
        width: calc(100% + 20px);
    }
}