/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 16 2026 | 17:47:07 */
/* --- 1. A PAREDE (A Grelha) --- */
.leuk-masonry-grid {
    display: grid !important;
    /* Desktop: 4 Colunas para permitir mais variação */
    grid-template-columns: repeat(4, 1fr);
    /* Altura base de cada "linha" (módulo) */
    grid-auto-rows: 100px; 
    /* O Segredo: Preenche os buracos vazios automaticamente */
    grid-auto-flow: dense; 
    gap: 20px;
    width: 100%;
}

/* --- 2. O CARD (A Gama) --- */
.leuk-card {
    position: relative;
    width: 100%;
    height: 100%; 
    overflow: hidden;
    cursor: pointer;
    margin: 0 !important; 
    border-radius: 0px; /* Estilo moderno quadrado */
    
    /* Imagem de Fundo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.leuk-card:hover {
    transform: scale(0.98); /* Ligeiro zoom out ao tocar */
    z-index: 10;
}

/* --- 3. TAMANHOS (O Lego) --- */

/* LARGURAS (Quantas colunas ocupa) */
.leuk-w-1 { grid-column: span 1; } /* 25% largura */
.leuk-w-2 { grid-column: span 2; } /* 50% largura */
.leuk-w-3 { grid-column: span 3; } /* 75% largura (raro, mas possível) */

/* ALTURAS (Quantas linhas de 100px ocupa) */
.leuk-h-1 { grid-row: span 3; } /* Baixo (~320px com gaps) */
.leuk-h-2 { grid-row: span 4; } /* Médio (~440px) */
.leuk-h-3 { grid-row: span 5; } /* Alto (~560px) */
.leuk-h-4 { grid-row: span 6; } /* Muito Alto (~680px) */

/* --- 4. OVERLAY & CORES (White Mode) --- */

/* Camada Escura Inicial (Para o texto branco ler-se) */
.leuk-card-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3); 
    transition: all 0.5s ease;
    pointer-events: none;
}

/* HOVER: Fica BRANCO */
.leuk-card:hover .leuk-card-overlay {
    background: rgba(255, 255, 255, 0.95);
}

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

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

/* FORÇAR TEXTO A PRETO NO HOVER (Override do Elementor) */
.leuk-card:hover h1, .leuk-card:hover h2, .leuk-card:hover h3, 
.leuk-card:hover p, .leuk-card:hover span, .leuk-card:hover div,
.leuk-card:hover .elementor-heading-title {
    color: #000000 !important;
}

/* Descrição (Escondida inicialmente) */
.leuk-desc {
    opacity: 0;
    max-height: 0;
    transition: all 0.5s ease;
    /* Importante: Cor inicial branca deve ser definida no Elementor */
}

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

/* Link Clickável na área toda */
.leuk-full-link {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 20;
}

/* --- RESPONSIVO --- */
@media (max-width: 1024px) {
    .leuk-masonry-grid { grid-template-columns: repeat(2, 1fr); }
    .leuk-w-2, .leuk-w-3 { grid-column: span 1; } /* Tudo vira largura normal */
}

@media (max-width: 600px) {
    .leuk-masonry-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .leuk-card { 
        min-height: 350px; 
        grid-column: span 1 !important; 
        grid-row: auto !important; 
    }
}

/* --- DEBUG TEMPORÁRIO --- */
.leuk-masonry-grid {
    border: 5px solid red !important; /* Mostra a caixa do Pai */
    min-height: 200px;
}

.leuk-card {
    border: 3px solid blue !important; /* Mostra os Cards */
    background-color: #ccc !important; /* Fundo cinza caso a imagem falhe */
}

.leuk-card-content {
    border: 1px solid yellow !important; /* Mostra onde está o texto */
}