/**
 * @description Engine unificado de Catálogo (Estilos). Controlo independente para Gamas e Produtos com suporte a matrizes de mosaico.
 * @version 1.1.2
 * @author LEUK
 * @date 2026-07-03
 */

/* ============================================================
   ⚙️ PAINEL DE CONTROLO MESTRE (CATÁLOGO)
   ============================================================ */
:root {
    /* --------------------------------------------------------
       ▶ MÓDULO 1: GAMAS (Overlay Dinâmico)
       -------------------------------------------------------- */
    --leuk-gap-x:             3px;
    --leuk-gap-y:             3px;
    --leuk-wrapper-bg:        #ffffff; 

    --leuk-overlay-rgb:       0, 0, 0;
    --leuk-overlay-opacity:   0.20;
    --leuk-overlay-hover:     0.70;
    --leuk-overlay-speed:     0.4s;

    --leuk-shadow-hover:      0 10px 30px rgba(0,0,0,0.15);
    --leuk-z-normal:          1;
    --leuk-z-hover:           10;

    --leuk-label-bg:          rgba(0, 0, 0, 0);
    --leuk-label-padding:     0px 0px;
    --leuk-label-radius:      0px;
    --leuk-label-color:       #ffffff;
    --leuk-label-width:       fit-content;
    --leuk-label-margin-bot:  10px;

    --leuk-mosaic-h-desk:     400px;
    --leuk-mosaic-h-tab:      350px;
    --leuk-mosaic-h-mob:      380px;

    --leuk-grid-h-desk:       450px;
    --leuk-grid-h-mob:        350px;

    --leuk-bento-base:        200px;
    --leuk-mas-h-sm:          400px;
    --leuk-mas-h-md:          500px;
    --leuk-mas-h-lg:          600px;

    --leuk-cols-desk:         4; 
    --leuk-cols-tab:          2; 
    --leuk-cols-mob:          1;

    /* --------------------------------------------------------
       ▶ MÓDULO 2: PRODUTOS (Classic Cards)
       -------------------------------------------------------- */
    --pro-cols-desk:          3;       
    --pro-cols-laptop:        3;       
    --pro-cols-tablet:        2;       
    --pro-cols-mobile:        1;       
    
    --pro-gap-x:              15px;    
    --pro-gap-y:              15px;    
    
    --pro-img-height:         450px;   
    --pro-card-min-height:    400px;   
    --pro-grow-last:          1;

    --pro-bg-card:            #ffffff; 
    --pro-border-width:       1px;     
    --pro-border-color:       #EAEAEA; 
    --pro-border-radius:      0px;     
    
    --pro-shadow-idle:        0 5px 15px rgba(0,0,0,0.03); 
    --pro-shadow-hover:       none; 
    
    --pro-border-hover:       #e3e3e3; 
    --pro-hover-lift:         -3px;    

    --pro-text-padding:       25px 25px 35px 25px; 
    --pro-title-color:        #1a1a1a; 
    --pro-desc-color:         #666666; 
}

/* ============================================================
   [SISTEMA CORE] PERFURAÇÃO DE DIVS DO ELEMENTOR
   Garante que as propriedades flex chegam aos cartões reais
   ============================================================ */
body .elementor-element.leuk-pro-wrapper,
body .elementor-element.leuk-pro-wrapper > .e-con-inner,
body .elementor-element.leuk-pro-wrapper > .elementor-container {
    --gap: var(--pro-gap-y) var(--pro-gap-x) !important;
    --row-gap: var(--pro-gap-y) !important; 
    --column-gap: var(--pro-gap-x) !important;
    gap: var(--pro-gap-y) var(--pro-gap-x) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    width: 100% !important;
}

body .elementor-element.leuk-gamas-wrapper,
body .elementor-element.leuk-wrapper,
body .elementor-element.leuk-gamas-wrapper > .e-con-inner,
body .elementor-element.leuk-wrapper > .e-con-inner,
body .elementor-element.leuk-gamas-wrapper > .elementor-container,
body .elementor-element.leuk-wrapper > .elementor-container {
    --gap: var(--leuk-gap-y) var(--leuk-gap-x) !important;
    --row-gap: var(--leuk-gap-y) !important; 
    --column-gap: var(--leuk-gap-x) !important;
    gap: var(--leuk-gap-y) var(--leuk-gap-x) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    width: 100% !important;
}


/* ============================================================
   [MÓDULO 1] GAMAS (ESTRUTURA E OVERLAYS)
   ============================================================ */
.leuk-gamas-wrapper {
    box-sizing: border-box; position: relative; isolation: isolate;
    background-color: var(--leuk-wrapper-bg); overflow: hidden; 
}

.leuk-gamas-wrapper.leuk-mode-grid { display: grid !important; grid-template-columns: repeat(var(--leuk-cols-desk), 1fr); 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-gap: var(--leuk-gap-x); }

.leuk-gamas-wrapper .leuk-card {
    position: relative; width: 100%; height: 100%; cursor: pointer; overflow: hidden;
    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);
    display: flex !important; flex-direction: column; text-decoration: none !important; color: inherit !important; 
}

.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); }

.leuk-gamas-wrapper.leuk-mode-masonry .leuk-card { display: inline-block !important; height: auto !important; margin-bottom: var(--leuk-gap-y) !important; }
.leuk-gamas-wrapper.leuk-mode-grid .leuk-card { height: var(--leuk-grid-h-desk) !important; display: block !important; }

.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-mas-pequeno { min-height: var(--leuk-mas-h-sm) !important; }

.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-gamas-wrapper .leuk-card .e-con, .leuk-gamas-wrapper .leuk-card .elementor-container {
    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;
}
.leuk-gamas-wrapper .leuk-card:hover .e-con, .leuk-gamas-wrapper .leuk-card:hover .elementor-container { transform: translateY(0); }

.leuk-gamas-wrapper .leuk-card h1, .leuk-gamas-wrapper .leuk-card h2, .leuk-gamas-wrapper .leuk-card h3 {
    background-color: var(--leuk-label-bg); padding: var(--leuk-label-padding); width: var(--leuk-label-width);
    border-radius: var(--leuk-label-radius); margin-bottom: var(--leuk-label-margin-bot) !important;
    box-decoration-break: clone; -webkit-box-decoration-break: clone; display: inline-block; 
    color: var(--leuk-label-color) !important; transition: all 0.4s ease;
}

.leuk-gamas-wrapper .leuk-card p, .leuk-gamas-wrapper .leuk-card span { transition: color 0.4s ease; }
.leuk-gamas-wrapper .leuk-card:hover p, .leuk-gamas-wrapper .leuk-card:hover span { color: #ffffff !important; }

.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; }


/* ============================================================
   [MÓDULO 2] PRODUTOS (ESTRUTURA BASE FLEXBOX)
   ============================================================ */

/* Base Flex-basis APENAS se o Mosaico NÃO estiver ativo */
body .elementor-element.leuk-pro-wrapper:not(.leuk-mode-mosaic) .leuk-pro-card {
    --gap-count: calc(var(--pro-cols-desk) - 1);
    --gap-total: calc(var(--gap-count) * var(--pro-gap-x));
    --w-base: calc( ( (100% - var(--gap-total)) / var(--pro-cols-desk) ) - 1px );
    
    flex-basis: var(--w-base) !important;
    width: var(--w-base) !important;
    max-width: var(--w-base) !important;
}

body .elementor-element.leuk-pro-wrapper .leuk-pro-card {
    flex-grow: var(--pro-grow-last) !important; 
    flex-shrink: 0 !important;
    height: auto !important; 
    min-height: var(--pro-card-min-height) !important; 
    background-color: var(--pro-bg-card);
    border: var(--pro-border-width) solid var(--pro-border-color);
    border-radius: var(--pro-border-radius);
    box-shadow: var(--pro-shadow-idle);
    background-size: cover; background-position: center top; background-repeat: no-repeat;
    margin: 0 !important; padding: 0 !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    display: flex !important; flex-direction: column !important;
}

body .elementor-element.leuk-pro-wrapper .leuk-pro-card:hover {
    transform: translateY(var(--pro-hover-lift)); 
    box-shadow: var(--pro-shadow-hover);
    border-color: var(--pro-border-hover); 
    z-index: 10;
}

@media (max-width: 1366px) {
    body .elementor-element.leuk-pro-wrapper:not(.leuk-mode-mosaic) .leuk-pro-card {
        --gap-count: calc(var(--pro-cols-laptop) - 1);
        --gap-total: calc(var(--gap-count) * var(--pro-gap-x));
        --w-base: calc( ( (100% - var(--gap-total)) / var(--pro-cols-laptop) ) - 1px );
        flex-basis: var(--w-base) !important; width: var(--w-base) !important; max-width: var(--w-base) !important;
    }
}
@media (max-width: 1024px) {
    body .elementor-element.leuk-pro-wrapper:not(.leuk-mode-mosaic) .leuk-pro-card {
        --gap-count: calc(var(--pro-cols-tablet) - 1);
        --gap-total: calc(var(--gap-count) * var(--pro-gap-x));
        --w-base: calc( ( (100% - var(--gap-total)) / var(--pro-cols-tablet) ) - 1px );
        flex-basis: var(--w-base) !important; width: var(--w-base) !important; max-width: var(--w-base) !important;
    }
}
@media (max-width: 767px) {
    body .elementor-element.leuk-pro-wrapper { 
        gap: 30px !important; 
        --gap: 30px !important; --row-gap: 30px !important; --column-gap: 30px !important;
    }
    body .elementor-element.leuk-pro-wrapper:not(.leuk-mode-mosaic) .leuk-pro-card {
        flex-basis: 100% !important; width: 100% !important; max-width: 100% !important;
        flex-grow: 1 !important; min-height: auto !important;
    }
}

/* Estrutura Interna da Caixa Branca */
body .elementor-element.leuk-pro-wrapper .leuk-pro-card > .e-con, 
body .elementor-element.leuk-pro-wrapper .leuk-pro-card > .elementor-container, 
body .elementor-element.leuk-pro-wrapper .leuk-pro-card > .elementor-widget-wrap {
    margin-top: var(--pro-img-height) !important;
    background-color: var(--pro-bg-card) !important;
    padding: var(--pro-text-padding) !important;
    width: 100% !important; flex-grow: 1; 
    position: relative; z-index: 10;
    display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important;
    border: none !important; outline: none !important; box-shadow: none !important;
    transform: none !important; transition: none !important; border-top: 1px solid transparent !important; 
}

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

body .elementor-element.leuk-pro-wrapper .leuk-pro-card h3, 
body .elementor-element.leuk-pro-wrapper .leuk-pro-card .elementor-heading-title {
    color: var(--pro-title-color) !important; margin-bottom: 12px !important; background: none !important; display: block;
}

body .elementor-element.leuk-pro-wrapper .leuk-pro-card .elementor-widget-text-editor,
body .elementor-element.leuk-pro-wrapper .leuk-pro-card p, .leuk-pro-desc {
    opacity: 1 !important; visibility: visible !important; display: block !important; max-height: none !important; 
    overflow: visible !important; margin-top: 0 !important; color: var(--pro-desc-color) !important;
}

body .elementor-element.leuk-pro-wrapper .leuk-pro-card::before { display: none !important; }


/* ============================================================
   [MÓDULO 3] MATRIZ MOSAICO (PATTERN PARSER)
   Atua sobre Gamas e Produtos de forma independente (Via JS)
   ============================================================ */
.leuk-gamas-wrapper, .leuk-wrapper { --current-gap-x: var(--leuk-gap-x); }
.leuk-pro-wrapper { --current-gap-x: var(--pro-gap-x); }

.leuk-gamas-wrapper.leuk-mode-mosaic,
.leuk-wrapper.leuk-mode-mosaic,
.leuk-pro-wrapper.leuk-mode-mosaic {
    display: flex !important; flex-wrap: wrap !important; justify-content: space-between;
}

/* Fórmulas Matemáticas Exatas */
.leuk-mode-mosaic {
    --w-33: calc(33.333% - (var(--current-gap-x) * 2 / 3));
    --w-50: calc(50% - (var(--current-gap-x) / 2));
    --w-66: calc(66.666% - (var(--current-gap-x) * 1 / 3));
    --w-100: 100%;
}

/* --- PADRÕES DE COMPUTADOR (> 1024px) --- */
@media (min-width: 1025px) {
    .leuk-gamas-wrapper.leuk-mode-mosaic .leuk-card,
    .leuk-wrapper.leuk-mode-mosaic .leuk-card,
    .leuk-pro-wrapper.leuk-mode-mosaic .leuk-pro-card { 
        height: var(--leuk-mosaic-h-desk) !important; margin-bottom: 0 !important; 
    }
    
    /* Classes Dinâmicas injetadas pelo JavaScript */
    .leuk-mode-mosaic .leuk-d-33 { width: var(--w-33) !important; max-width: var(--w-33) !important; flex-basis: var(--w-33) !important; flex-grow: 1; }
    .leuk-mode-mosaic .leuk-d-50 { width: var(--w-50) !important; max-width: var(--w-50) !important; flex-basis: var(--w-50) !important; flex-grow: 1; }
    .leuk-mode-mosaic .leuk-d-66 { width: var(--w-66) !important; max-width: var(--w-66) !important; flex-basis: var(--w-66) !important; flex-grow: 1; }
    .leuk-mode-mosaic .leuk-d-100 { width: var(--w-100) !important; max-width: var(--w-100) !important; flex-basis: var(--w-100) !important; flex-grow: 1; }
}

/* --- PADRÕES DE TABLET (768px - 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .leuk-gamas-wrapper.leuk-mode-mosaic .leuk-card,
    .leuk-wrapper.leuk-mode-mosaic .leuk-card,
    .leuk-pro-wrapper.leuk-mode-mosaic .leuk-pro-card { 
        height: var(--leuk-mosaic-h-tab) !important; margin-bottom: 0 !important; 
    }
    
    .leuk-mode-mosaic .leuk-t-33 { width: var(--w-33) !important; max-width: var(--w-33) !important; flex-basis: var(--w-33) !important; flex-grow: 1; }
    .leuk-mode-mosaic .leuk-t-50 { width: var(--w-50) !important; max-width: var(--w-50) !important; flex-basis: var(--w-50) !important; flex-grow: 1; }
    .leuk-mode-mosaic .leuk-t-66 { width: var(--w-66) !important; max-width: var(--w-66) !important; flex-basis: var(--w-66) !important; flex-grow: 1; }
    .leuk-mode-mosaic .leuk-t-100 { width: var(--w-100) !important; max-width: var(--w-100) !important; flex-basis: var(--w-100) !important; flex-grow: 1; }
}

/* --- LÓGICA MOBILE --- */
@media (max-width: 767px) {
    .leuk-gamas-wrapper.leuk-mode-mosaic .leuk-card,
    .leuk-wrapper.leuk-mode-mosaic .leuk-card,
    .leuk-pro-wrapper.leuk-mode-mosaic .leuk-pro-card { 
        width: 100% !important; max-width: 100% !important; flex-basis: auto !important; height: var(--leuk-mosaic-h-mob) !important; 
    }
}