/* ===========================================
   OPERAÇÕES REALIZADAS - LAYOUT MOSAICO
   CSS otimizado para seguir exatamente o HTML original
   =========================================== */

/* Variáveis CSS (mesmas do seu HTML) */
:root {
    --color-gold: #D8CFAA;
    --color-dark: #1f2020;
    --color-black: #151515;
    --color-white: #ffffff;
    --color-secondary: #888888;
}

@font-face {
    font-family: 'Nexa XBold';
    src: url('./assets/fonts/Nexa-XBold.woff2') format('woff2'),
        url('./assets/fonts/Nexa-XBold.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nexa black';
    src: url('./assets/fonts/NexaBlack.woff2') format('woff2'),
        url('./assets/fonts/NexaBlack.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nexa Regular';
    src: url('./assets/fonts/Nexa-Regular.woff2') format('woff2'),
        url('./assets/fonts/Nexa-Regular.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

/* Mosaic Section - EXATAMENTE IGUAL AO SEU HTML */
.bg-lines {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: linear-gradient(45deg, var(--color-gold) 1px, transparent 1px);
    background-size: 100px 100px;
    pointer-events: none;
}
#operacoes {
    margin-top: 9rem !important; /* ← MARGIN-TOP ADICIONADO AQUI */
    position: relative;
}

.display-7 {
   font-family: 'Nexa black';
   color: #d8cfaa;
   font-weight: 900;
   line-height: 42px;
} 

.mosaic-item {
    transition: all 0.5s ease;
}

.grayscale {
    transition: all 0.8s ease;
}

.mosaic-item:hover .grayscale {
    transform: scale(1.05);
}

.border-gold-bottom-right {
    border-bottom: 8px solid #d8cfaa;
    border-right: 8px solid #d8cfaa;
}

.border-white-top-left {
    border-top: 8px solid rgba(255,255,255,0.1);
    border-left: 8px solid rgba(255,255,255,0.1);
}

.border-white-bottom-left {
    border-bottom: 8px solid rgba(255,255,255,0.1);
    border-left: 8px solid rgba(255,255,255,0.1);
}

.mosaic-content {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

/* Ajustes para garantir que as imagens fiquem exatamente como no HTML */

/* Container principal do mosaico */
.mosaic-grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* Garantir que os containers tenham altura fixa */
.mosaic-item.main-item {
    height: 600px !important; /* Altura fixa igual ao HTML */
}

.mosaic-item:not(.main-item) {
    height: 285px !important; /* Metade da altura do principal */
}

/* Imagens devem cobrir completamente */
.mosaic-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Isso é CRÍTICO */
    object-position: center center !important;
    display: block !important;
}

/* Remover qualquer padding/margin extra das imagens do WordPress */
.mosaic-item .attachment-large,
.mosaic-item .attachment-medium {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    height: auto !important; /* Será sobrescrito pelo height: 100% acima */
}

/* Placeholder para quando não há imagem */
.mosaic-item .mosaic-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
}

.mosaic-item .mosaic-placeholder i {
    font-size: 3rem;
    opacity: 0.5;
}

.mosaic-item:not(.main-item) .mosaic-placeholder i {
    font-size: 2rem;
}

/* Ajustes para os labels (igual ao HTML) */
.mosaic-label {
    backdrop-filter: blur(5px);
}

.mosaic-label.bg-dark {
    background: rgba(21, 21, 21, 0.9) !important;
}

.mosaic-label.bg-gold {
    background: rgba(216, 207, 170, 0.9) !important;
}

/* Responsive - EXATAMENTE IGUAL AO SEU HTML */
@media (max-width: 768px) {
    .mosaic-grid {
        height: auto !important;
    }
    
    .mosaic-item {
        height: 300px !important; /* Altura igual para todos no mobile */
    }
    
    .mosaic-item.main-item {
        height: 300px !important;
    }
}

/* Ajustes específicos para Bootstrap que não interferem */
.col-lg-7, .col-lg-5 {
    padding-right: 15px;
    padding-left: 15px;
}

.h-100 {
    height: 100% !important;
}

.w-100 {
    width: 100% !important;
}

/* Garantir que o overflow-hidden funcione */
.position-relative.overflow-hidden {
    overflow: hidden !important;
}

/* Ajuste fino para o efeito hover não quebrar */
.mosaic-item {
    position: relative;
    overflow: hidden;
}

.mosaic-item:hover {
    z-index: 10;
}

/* Corrigir qualquer estilo do WordPress que possa interferir */
.alignnone, .aligncenter, .alignleft, .alignright {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Remover estilos antigos da galeria */
.maxima-gallery-section,
.gallery-grid,
.gallery-item,
.gallery-pagination {
    display: none;
}