/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 16 2026 | 17:09:16 */
/* --- CONFIGURAÇÕES GERAIS --- */
:root {
    /* Quantas colunas queres no Desktop? */
    --grid-cols: 4; 
    
    /* Espaço entre os cards */
    --grid-gap: 0px; 
}

/* --- 1. A ESTRUTURA (Parede) --- */
.leuk-masonry-grid {
    display: block !important; /* Força comportamento de bloco (Masonry) */
    
    column-count: var(--grid-cols); /* Usa a variável definida acima */
    column-gap: var(--grid-gap);
    width: 100%;
}

/* --- 2. O CARD (Tijolo) --- */
.leuk-card {
    position: relative;
    display: inline-block !important; /* Essencial */
    width: 100%;
    
    /* Margem em baixo igual ao gap para manter consistência */
    margin-bottom: var(--grid-gap); 
    
    border-radius: 0px; /* Removi o arredondado para um look mais moderno/brutalista? Ou põe 12px se preferires */
    overflow: hidden;
    cursor: pointer;
    break-inside: avoid;
    
    /* Imagem de Fundo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Sombra subtil */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.leuk-card:hover {
    transform: translateY(-8px); /* Levita mais */
    z-index: 10; /* Garante que fica por cima ao levitar */
}

/* --- 3. ALTURAS (O "Caos") --- */
/* Exagerei nas diferenças para ficar menos "arrumado" */
.leuk-h-pequeno { min-height: 300px !important; }
.leuk-h-medio   { min-height: 500px !important; }
.leuk-h-grande  { min-height: 700px !important; }


/* --- 4. OVERLAY BRANCO (White Mode) --- */
.leuk-card-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* Estado Normal: Um filtro escuro muito leve apenas para a imagem não "estourar" */
    background: rgba(0,0,0,0.1); 
    opacity: 1;
    
    transition: all 0.5s ease;
    pointer-events: none;
}

/* HOVER: Fica BRANCO quase opaco */
.leuk-card:hover .leuk-card-overlay {
    background: rgba(255, 255, 255, 0.92); /* Branco 92% opaco */
}

/* --- 5. CONTEÚDO E CORES --- */
.leuk-card-content {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 30px;
    box-sizing: border-box;
    z-index: 5;
    
    /* Movimento */
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

.leuk-card:hover .leuk-card-content {
    transform: translateY(0);
}

/* FORÇAR TEXTO A PRETO NO HOVER */
/* Isto sobrepõe as cores do Elementor quando passas o rato */
.leuk-card:hover h1, 
.leuk-card:hover h2, 
.leuk-card:hover h3, 
.leuk-card:hover h4, 
.leuk-card:hover h5, 
.leuk-card:hover h6,
.leuk-card:hover p,
.leuk-card:hover span,
.leuk-card:hover div {
    color: #000000 !important;
}

/* --- 6. DESCRIÇÃO (Esconder/Mostrar) --- */
.leuk-desc {
    opacity: 0;
    max-height: 0;
    transition: all 0.5s ease;
    overflow: hidden;
    color: #333; /* Cinza escuro para contraste no branco */
}

.leuk-card:hover .leuk-desc {
    opacity: 1;
    max-height: 300px;
    margin-top: 15px;
}

/* Link Full Area */
.leuk-full-link {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 20;
}

/* --- RESPONSIVO --- */
@media (max-width: 1024px) {
    :root { --grid-cols: 2; } /* Muda automaticamente para 2 colunas */
}

@media (max-width: 600px) {
    :root { --grid-cols: 1; } /* Muda para 1 coluna */
    .leuk-h-pequeno, .leuk-h-medio, .leuk-h-grande { min-height: 380px !important; }
}