/* --- Desvincula o Banner Superior do Carrossel do Anúncio --- */ 
.banner-superior-todo a.glightbox, .banner-superior a.glightbox { 
    /* Remove as setas de navegação deste item específico */ 
    pointer-events: auto !important; 
} 

/* Script que remove a ação do GLightbox apenas no bloco do Banner */ 
.banner-superior-todo [data-gallery="galeria-anuncio"], .banner-superior [data-gallery="galeria-anuncio"] { 
    /* Força o navegador a tratar o banner como link comum, isolando-o das fotos */ 
    data-gallery: "galeria-banner" !important; 
} 

/* --- 1. Alinhamento Base e Quebra de Linhas do Bloco Flexbox --- */ 
.galeria-grid-anuncio ul.solo-ul { 
    display: flex !important; 
    flex-wrap: wrap !important; /* Permite que as miniaturas quebrem para a linha de baixo */ 
    gap: 12px !important; /* Espaço idêntico entre os blocos */ 
    padding: 0 !important; 
    margin: 15px 0 0 0 !important; 
    list-style: none !important; 
    width: 100% !important; 
} 

/* --- 2. Primeiro Item (Destaque Grande no Topo Isolado) --- */ 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:first-child { 
    width: 100% !important; /* Ocupa 100% da largura da tela de forma isolada */ 
    flex: 0 0 100% !important; 
    aspect-ratio: 16 / 9 !important; /* Proporção widescreen perfeita */ 
    border-radius: 6px !important; /* Arredondamento sutil nos 4 cantos */ 
} 

/* Força os links e imagens internos do Destaque a herdarem os 6px */ 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:first-child img, 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:first-child a { 
    border-radius: 6px !important; 
} 

/* --- 3. Demais Itens (Miniaturas Quadradas Ajustadas para 8 por Linha) --- */ 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:not(:first-child) { 
    /* Calcula a largura dividindo o espaço em 8 colunas perfeitas considerando os 7 espaços de gap */ 
    width: calc((100% - (7 * 12px)) / 8) !important; 
    flex: 0 0 calc((100% - (7 * 12px)) / 8) !important; 
    aspect-ratio: 1 / 1 !important; /* Mantém o formato quadrado perfeito */ 
    border-radius: 4px !important; 
} 

/* Garante que os links e imagens internos das miniaturas herdem os 4px */ 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:not(:first-child) img, 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:not(:first-child) a { 
    border-radius: 4px !important; 
} 

/* --- 4. Caixa Geral dos Itens da Lista --- */ 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list { 
    position: relative !important; 
    overflow: hidden !important; 
    border: 1px solid #e2e8f0 !important; 
    background-color: #f8fafc !important; 
    padding: 0 !important; 
} 

/* --- 5. Preenchimento Total e Correção de Escala das Imagens/Links --- */ 
.galeria-grid-anuncio .media, 
.galeria-grid-anuncio .field, 
.galeria-grid-anuncio .field__item, 
.galeria-grid-anuncio a.glightbox, 
.galeria-grid-anuncio img.solo-image { 
    width: 100% !important; 
    height: 100% !important; 
    max-width: 100% !important; 
    max-height: 100% !important; 
    display: block !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    object-fit: cover !important; /* Preenche o quadrado/retângulo sem distorcer as fotos */ 
} 

/* --- Correção do Destaque Grande: Força o preenchimento total e elimina o fundo cinza --- */ 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:first-child .media, 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:first-child .field, 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:first-child .field__item, 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:first-child a, 
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:first-child img,
.galeria-grid-anuncio ul.solo-ul li.solo-li-list:first-child img.solo-image { 
    width: 100% !important; 
    height: 100% !important; 
    max-width: 100% !important; 
    max-height: 100% !important; 
    object-fit: cover !important; /* Estica a imagem preenchendo as bordas */ 
    object-position: center center !important; /* Mantém o cavalo perfeitamente centralizado */ 
    display: block !important; 
} 

/* --- 6. Limpeza de Legendas e Elementos Administrativos do Layout --- */ 
/* Oculta textos perdidos de descrição que tentam empurrar as caixas para baixo */ 
.galeria-grid-anuncio .glightbox-desc { 
    display: none !important; 
} 

/* Oculta botões de "Editar/Apagar" do Drupal que quebram o alinhamento visual */ 
.galeria-grid-anuncio .contextual, 
.galeria-grid-anuncio .contextual-links, 
.galeria-grid-anuncio button.trigger { 
    display: none !important; 
    visibility: hidden !important; 
    opacity: 0 !important; 
} 

/* --- Ajuste Exclusivo para Garantir o Botão X no Celular (Mobile) --- */ 
@media screen and (max-width: 767px) { 
    .gclose, .gclose.glightbox-close, .glightbox-container .gclose, button.gclose { 
        display: flex !important; 
        visibility: visible !important; 
        opacity: 1 !important; 
        position: fixed !important; 
        transform: translate(-40px, 49px) !important; 
        width: 44px !important; 
        height: 44px !important; 
        background-color: rgba(18, 15, 92, 0.95) !important; 
        border-radius: 50% !important; 
        z-index: 999999 !important; 
        justify-content: center !important; 
        align-items: center !important; 
        border: none !important; 
    } 
    .gclose svg, .glightbox-container .gclose svg { 
        width: 20px !important; 
        height: 20px !important; 
        display: block !important; 
    } 
    .gclose svg path, .glightbox-close svg path { 
        fill: #ffffff !important; 
        stroke: #ffffff !important; 
        stroke-width: 2.5px !important; 
    } 
} 

/* ========================================================================== 
Ajuste Geral e Definitivo para GLightbox no Mobile (Celular) 
========================================================================== */ 
@media screen and (max-width: 991px) { 
    /* 1. BOTÃO FECHAR (X): Posição calibrada e confortável para o toque */ 
    .gclose, .gclose.glightbox-close, .glightbox-container .gclose, button.gclose { 
        display: flex !important; 
        visibility: visible !important; 
        opacity: 1 !important; 
        position: fixed !important; 
        transform: translate(-40px, 47px) !important; 
        width: 44px !important; 
        height: 44px !important; 
        background-color: rgba(18, 15, 92, 0.95) !important; 
        border-radius: 50% !important; 
        z-index: 9999999 !important; 
        justify-content: center !important; 
        align-items: center !important; 
        border: none !important; 
    } 
    .gclose svg, .glightbox-container .gclose svg { 
        width: 20px !important; 
        height: 20px !important; 
        display: block !important; 
    } 
    .gclose svg path, .glightbox-close svg path { 
        fill: #ffffff !important; 
        stroke: #ffffff !important; 
        stroke-width: 2.5px !important; 
    } 
    /* 2. ESTRUTURA DO SLIDE: Força o contêiner a centralizar tudo via Flexbox */ 
    div#glightbox-body .gslide, div#glightbox-body .gslide-inner, div#glightbox-body .gslide-content, div#glightbox-body .gslide-media { 
        position: fixed !important; 
        top: 0 !important; 
        left: 0 !important; 
        right: 0 !important; 
        bottom: 0 !important; 
        width: 100vw !important; 
        height: 100vh !important; 
        max-width: 100vw !important; 
        max-height: 100vh !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        transform: none !important; 
        display: flex !important; 
        flex-direction: column !important; 
        justify-content: center !important; 
        align-items: center !important; 
    } 
    /* 3. IMAGEM: Encolhe proporcionalmente sem cortes na vertical ou horizontal */ 
    div#glightbox-body .gslide-media img, div#glightbox-body .gslide-image img, div#glightbox-body img[style] { 
        position: static !important; 
        display: block !important; 
        width: auto !important; 
        height: auto !important; 
        max-width: 85vw !important; 
        max-height: 55vh !important; 
        object-fit: contain !important; 
        transform: none !important; 
        margin: 0 auto !important; 
    } 
    /* 4. LEGENDA NATIVA: Ocultada para não sobrepor a foto de forma errática */ 
    div#glightbox-body .gslide-description { 
        display: none !important; 
        visibility: hidden !important; 
        opacity: 0 !important; 
    } 
}