/**
 * ==================================================================================
 * █  LEUK WEBSITE 2026 - COMPONENTE DE SISTEMA
 * ==================================================================================
 * * @project     Novo Site LEUK
 * @module      Homepage Gamas Block (Design System)
 * @description Estilização EXCLUSIVA para o bloco de Gamas.
 * v1.13: Adicionado suporte nativo para Cards como Links (<a> tags).
 * * @version     1.13.0 (Link Container Support)
 * @date        2026-01-27
 * @author      LEUK
 * * ==================================================================================
 */

/* ============================================================
   ⚙️ PAINEL DE CONTROLO (MASTER CONFIGURATION)
   ============================================================ */
:root {

    /* ========================================================
       1. 🌍 CONFIGURAÇÕES GLOBAIS
       ======================================================== */
    --leuk-gap-x: 3px;        /* Espaço Horizontal */
    --leuk-gap-y: 3px;        /* Espaço Vertical */
    
    /* Fundo de Segurança (Masking) */
    --leuk-wrapper-bg: #ffffff; 

    /* --- Efeito Overlay (Capa sobre a imagem) --- */
    --leuk-overlay-rgb:     0, 0, 0;       /* Preto */
    --leuk-overlay-opacity: 0.20;          /* Repouso */
    --leuk-overlay-hover:   0.70;          /* Hover */
    --leuk-overlay-speed:   0.4s;          

    /* --- Sombras & Camadas --- */
    --leuk-shadow-hover: 0 10px 30px rgba(0,0,0,0.15); 
    --leuk-z-normal: 1;
    --leuk-z-hover:  10;


    /* ========================================================
       2. 🏷️ CONFIG: CAIXA DO TÍTULO (LABEL)
       Controla apenas a "Caixa". A tipografia vem do Elementor.
       ======================================================== */
    
    /* Fundo da etiqueta (Ex: Preto com 70% opacidade) */
    --leuk-label-bg:          rgba(0, 0, 0, 0); 
    
    /* Espaçamento Interno (Topo/Baixo  Esq/Dir) */
    /* --leuk-label-padding:     10px 20px; */
	--leuk-label-padding:     0px 0px;
    
    /* Arredondamento (0px = Quadrado, 50px = Redondo) */
    --leuk-label-radius:      0px;
    
    /* Cor do Texto (Override Opcional para garantir leitura) */
    /* Se quiser que o Elementor decida a cor, coloque 'inherit' */
    --leuk-label-color:       #ffffff; 
    
    /* Comportamento da Largura */
    /* 'fit-content' = A caixa adapta-se ao tamanho do texto */
    /* '100%' = A caixa ocupa a largura toda do cartão */
    --leuk-label-width:       fit-content; 
    
    /* Margem em baixo (distância até à descrição) */
    --leuk-label-margin-bot:  10px;


    /* ========================================================
       3. 🧩 CONFIG: MODO MOSAICO (Alturas)
       ======================================================== */
    --leuk-mosaic-h-desk: 400px;  
    --leuk-mosaic-h-tab:  350px;  
    --leuk-mosaic-h-mob:  380px;  


    /* ========================================================
       4. ⏹️ CONFIG: MODO GRID (Alturas)
       ======================================================== */
    --leuk-grid-h-desk:   450px;  
    --leuk-grid-h-mob:    350px;  


    /* ========================================================
       5. 🧱 CONFIG: MODO BENTO & MASONRY
       ======================================================== */
    --leuk-bento-base:    200px;  
    --leuk-mas-h-sm:      400px;
    --leuk-mas-h-md:      500px;
    --leuk-mas-h-lg:      600px;

}

/* ============================================================
   ⛔ LÓGICA DO SISTEMA (ISOLADA)
   Todas as regras começam por .leuk-gamas-wrapper para não vazar.
   ============================================================ */

/* 1. ESTRUTURA BASE */
.leuk-gamas-wrapper {
    width: 100%; box-sizing: border-box; position: relative; isolation: isolate;
    background-color: var(--leuk-wrapper-bg); overflow: hidden; 
}
:root { --leuk-cols-desk: 4; --leuk-cols-tab: 2; --leuk-cols-mob: 1; }

/* 2. LAYOUTS */
.leuk-gamas-wrapper.leuk-mode-mosaic {
    display: flex !important; flex-wrap: wrap !important;
    gap: var(--leuk-gap-y) var(--leuk-gap-x); padding: 0 !important; justify-content: space-between;
}
@media (min-width: 1025px) {
    .leuk-gamas-wrapper.leuk-mode-mosaic .leuk-card { height: var(--leuk-mosaic-h-desk) !important; margin-bottom: 0 !important; }
    .leuk-gamas-wrapper.leuk-mode-mosaic:not(.leuk-mosaic-flip) .leuk-card:nth-child(-n+2) { width: calc(50% - (var(--leuk-gap-x) / 2)) !important; flex-grow: 1; }
    .leuk-gamas-wrapper.leuk-mode-mosaic:not(.leuk-mosaic-flip) .leuk-card:nth-child(n+3) { width: calc(33.333% - (var(--leuk-gap-x) * 2 / 3)) !important; flex-grow: 1; }
    .leuk-gamas-wrapper.leuk-mode-mosaic.leuk-mosaic-flip .leuk-card:nth-child(-n+3) { width: calc(33.333% - (var(--leuk-gap-x) * 2 / 3)) !important; flex-grow: 1; }
    .leuk-gamas-wrapper.leuk-mode-mosaic.leuk-mosaic-flip .leuk-card:nth-child(n+4) { width: calc(50% - (var(--leuk-gap-x) / 2)) !important; flex-grow: 1; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .leuk-gamas-wrapper.leuk-mode-mosaic .leuk-card { height: var(--leuk-mosaic-h-tab) !important; margin-bottom: 0 !important; width: calc(50% - (var(--leuk-gap-x) / 2)) !important; flex-grow: 1; }
    .leuk-gamas-wrapper.leuk-mode-mosaic.leuk-tab-p1 .leuk-card:nth-child(5) { width: 100% !important; }
    .leuk-gamas-wrapper.leuk-mode-mosaic.leuk-tab-p2 .leuk-card:nth-child(3) { width: 100% !important; }
    .leuk-gamas-wrapper.leuk-mode-mosaic.leuk-tab-p3 .leuk-card:nth-child(1) { width: 100% !important; }
}
@media (max-width: 767px) {
    .leuk-gamas-wrapper.leuk-mode-mosaic .leuk-card { width: 100% !important; height: var(--leuk-mosaic-h-mob) !important; margin-bottom: 0 !important; }
}

.leuk-gamas-wrapper.leuk-mode-grid { display: grid !important; grid-template-columns: repeat(var(--leuk-cols-desk), 1fr); grid-auto-rows: auto; gap: var(--leuk-gap-y) var(--leuk-gap-x); padding: 0 !important; }
.leuk-gamas-wrapper.leuk-mode-bento { display: grid !important; grid-template-columns: repeat(var(--leuk-cols-desk), 1fr); grid-auto-rows: var(--leuk-bento-base); grid-auto-flow: dense; gap: var(--leuk-gap-y) var(--leuk-gap-x); padding: 0 !important; }
.leuk-gamas-wrapper.leuk-mode-masonry { display: block !important; column-count: var(--leuk-cols-desk); column-width: auto !important; column-gap: var(--leuk-gap-x); font-size: 0 !important; line-height: 0 !important; perspective: 1px; }

/* 3. CARTÃO (CARD) - Scope .leuk-gamas-wrapper */
.leuk-gamas-wrapper .leuk-card {
    position: relative; width: 100%; height: 100%; cursor: pointer; overflow: hidden; padding: 0 !important; margin: 0 !important;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transition: box-shadow 0.3s ease; z-index: var(--leuk-z-normal);
    backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0) scale(1); outline: 1px solid transparent; 
    
    /* FIX CRÍTICO: Suporte para quando a tag é <a> (Link) */
    display: flex !important;      /* Garante que o cartão tem volume (o <a> é inline por defeito) */
    flex-direction: column;        /* Mantém a estrutura vertical */
    text-decoration: none !important; /* Remove sublinhado de link */
    color: inherit !important;     /* Remove a cor azul de link */
}

/* Garante que o conteúdo interno do link também herda a cor correta */
.leuk-gamas-wrapper .leuk-card * {
    text-decoration: none !important;
}

.leuk-gamas-wrapper .leuk-card:hover { z-index: var(--leuk-z-hover); box-shadow: var(--leuk-shadow-hover); }

/* Resets Altura */
.leuk-gamas-wrapper.leuk-mode-masonry .leuk-card { display: inline-block !important; width: 100%; height: auto !important; break-inside: avoid; margin-bottom: var(--leuk-gap-y) !important; }
.leuk-gamas-wrapper.leuk-mode-bento .leuk-card, .leuk-gamas-wrapper.leuk-mode-grid .leuk-card { display: block !important; margin-bottom: 0 !important; }
.leuk-gamas-wrapper.leuk-mode-grid .leuk-card { height: var(--leuk-grid-h-desk) !important; }

/* Helpers */
.leuk-w-1 { grid-column: span 1; } .leuk-w-2 { grid-column: span 2; }
.leuk-h-1 { grid-row: span 2; } .leuk-h-2 { grid-row: span 3; } .leuk-h-3 { grid-row: span 4; } .leuk-h-4 { grid-row: span 5; } .leuk-h-5 { grid-row: span 6; }
.leuk-mas-pequeno { min-height: var(--leuk-mas-h-sm) !important; } .leuk-mas-medio { min-height: var(--leuk-mas-h-md) !important; } .leuk-mas-grande { min-height: var(--leuk-mas-h-lg) !important; }

/* 4. DESIGN & INTERATIVIDADE */
.leuk-gamas-wrapper .leuk-card::before {
    content: ''; position: absolute; inset: 0; 
    background-color: rgba(var(--leuk-overlay-rgb), var(--leuk-overlay-opacity)); 
    transition: background-color var(--leuk-overlay-speed) ease;
    pointer-events: none; z-index: 2;
}
.leuk-gamas-wrapper .leuk-card:hover::before { background-color: rgba(var(--leuk-overlay-rgb), var(--leuk-overlay-hover)); }

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

.leuk-gamas-wrapper .leuk-card .e-con, 
.leuk-gamas-wrapper .leuk-card .elementor-container, 
.leuk-gamas-wrapper .leuk-card .elementor-widget-wrap {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px;
    z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    transform: translateY(20px); transition: transform 0.5s ease;
    /* Tipografia de corpo herdada do Elementor */
}
.leuk-gamas-wrapper .leuk-card:hover .e-con, 
.leuk-gamas-wrapper .leuk-card:hover .elementor-container, 
.leuk-gamas-wrapper .leuk-card:hover .elementor-widget-wrap { transform: translateY(0); }

/* --- 🏷️ ESTILO DO TÍTULO (ISOLADO & CONTROLADO) --- */
/* Apenas afeta headings dentro de .leuk-gamas-wrapper */
.leuk-gamas-wrapper .leuk-card h1, 
.leuk-gamas-wrapper .leuk-card h2, 
.leuk-gamas-wrapper .leuk-card h3, 
.leuk-gamas-wrapper .leuk-card .elementor-heading-title {
    
    /* Configurações da CAIXA (Box Model) */
    background-color: var(--leuk-label-bg);
    padding: var(--leuk-label-padding);
    width: var(--leuk-label-width);
    border-radius: var(--leuk-label-radius);
    
    /* Layout */
    margin-bottom: var(--leuk-label-margin-bot) !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    display: inline-block; 
    
    /* Cor (Override opcional para garantir contraste) */
    color: var(--leuk-label-color) !important;
    
    /* Animação */
    transition: all 0.4s ease;
    
    /* NOTA: Font-family, size, weight vêm do Elementor */
}

/* Descrição e Outros Textos */
.leuk-gamas-wrapper .leuk-card p, 
.leuk-gamas-wrapper .leuk-card span, 
.leuk-gamas-wrapper .leuk-card i {
    transition: color 0.4s ease; 
}
.leuk-gamas-wrapper .leuk-card:hover p, 
.leuk-gamas-wrapper .leuk-card:hover span, 
.leuk-gamas-wrapper .leuk-card:hover i {
    color: #ffffff !important; 
}

/* Descrição (Oculta/Revela) */
.leuk-desc { opacity: 0; max-height: 0; overflow: hidden; transition: all 0.5s ease; }
.leuk-gamas-wrapper .leuk-card:hover .leuk-desc { opacity: 1; max-height: 250px; margin-top: 15px; }

/* 5. RESPONSIVO */
@media (max-width: 1440px) { :root { --leuk-bento-base: 85px; --leuk-grid-h-desk: 380px; } }
@media (max-width: 1024px) { :root { --leuk-cols-desk: var(--leuk-cols-tab); } .leuk-w-2 { grid-column: span 1; } }
@media (max-width: 767px) { .leuk-gamas-wrapper { display: flex !important; flex-direction: column; gap: var(--leuk-gap-y); } .leuk-gamas-wrapper.leuk-mode-grid .leuk-card { height: var(--leuk-grid-h-mob) !important; } }