/**
 * ==================================================================================
 * █  LEUK SINGLE PROJECT — v2026.28 (SPACING CONTROL)
 * ==================================================================================
 * @description  Hero Full Screen, Lightbox e agora controlo total de Margens do Corpo.
 * @version      2.8
 * @author       LEUK Solutions
 * ==================================================================================
 */

/* ============================================================
   🎛️ PAINEL DE CONTROLO (CONFIGURAÇÃO TOTAL)
   ============================================================ */
:root {
    /* --- 1. HERO (IMAGEM DESTAQUE) --- */
    --hero-h-desk:          92vh;       
    --hero-h-mob:           50vh;       
    --hero-min-h:           600px;      
    
    /* --- 2. BARRA DO TÍTULO --- */
    --title-bg:             rgba(255, 255, 255, 0.90); 
    --title-text-color:     #000000;
    --title-pad-desk:       40px 60px;  
    --title-pad-mob:        25px 20px;
    
    /* --- 3. ESPAÇAMENTO DO CORPO (CONTAINER "PROJECTO") --- */
    /* Define o espaço à volta de todo o conteúdo principal */
    --body-pad-top:         3px;       /* Espaço em Cima */
    --body-pad-bottom:      3px;       /* Espaço em Baixo */
    --body-pad-left:        0px;        /* Espaço à Esquerda (0 = Full Width) */
    --body-pad-right:       0px;        /* Espaço à Direita */
    
    /* --- 4. LAYOUT COLUNAS --- */
    --col-left-w:           35%;        
    --col-right-w:          65%;        
    --sticky-top:           120px;       

    /* --- 5. GALERIA (Grelha) --- */
    --gal-gap:              15px;       
    --gal-cols-desk:        2;          
    --gal-cols-mob:         1;          

    /* --- 6. LIGHTBOX (ÍCONES E FUNDO) --- */
    --lb-bg-color:          rgba(26, 28, 33, 0.95); 
    --lb-icon-color:        #ffffff;                
    --lb-icon-hover:        #ffffff;                

    /* --- 7. RODAPÉ (RELACIONADOS) --- */
    --rel-bg-color:         #ffffff;
    --rel-pad-y:            0px;
}

/* ============================================================
   A. SECÇÃO HERO (IMAGEM)
   ============================================================ */
.leuk-single-hero {
    width: 100vw !important; 
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    height: var(--hero-h-desk) !important;
    min-height: var(--hero-min-h);
    position: relative !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; 
    align-items: stretch !important;      
    z-index: 1;
}

/* ============================================================
   B. CAIXA DO TÍTULO (BARRA INFERIOR)
   ============================================================ */
.leuk-title-box {
    background-color: var(--title-bg) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--title-pad-desk) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 2;
}
.leuk-title-box .elementor-heading-title {
    color: var(--title-text-color) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
    font-weight: 300; 
}

/* ============================================================
   C. SECÇÃO DE CONTEÚDO (CONTAINER "PROJECTO")
   ============================================================ */
.leuk-single-body {
    /* Usa as novas variáveis de espaçamento individual */
    padding-top:    var(--body-pad-top) !important;
    padding-bottom: var(--body-pad-bottom) !important;
    padding-left:   var(--body-pad-left) !important;
    padding-right:  var(--body-pad-right) !important;
    
    align-items: flex-start !important; 
    width: 100% !important;
    max-width: 100% !important;
}

.leuk-col-info {
    width: var(--col-left-w) !important;
    padding-right: 40px !important;
    position: sticky;
    position: -webkit-sticky; 
    top: var(--sticky-top);
    z-index: 5;
}

.leuk-col-gallery {
    width: var(--col-right-w) !important;
    padding: 0 !important;
}

/* ============================================================
   D. GALERIA
   ============================================================ */
.leuk-col-gallery .elementor-image-gallery .gallery {
    display: grid;
    grid-template-columns: repeat(var(--gal-cols-desk), 1fr); 
    gap: var(--gal-gap);
}
.leuk-col-gallery .gallery-item {
    margin: 0 !important; width: 100% !important; max-width: 100% !important;
}
.leuk-col-gallery img {
    width: 100%; height: auto; display: block; object-fit: cover;
}

/* ============================================================
   E. RELACIONADOS
   ============================================================ */
.leuk-single-related {
    padding: var(--rel-pad-y) 0;
    background-color: var(--rel-bg-color);
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* ============================================================
   F. LIGHTBOX
   ============================================================ */
.elementor-lightbox {
    background-color: var(--lb-bg-color) !important;
}
.elementor-lightbox .elementor-lightbox-icon,
.elementor-lightbox .dialog-lightbox-close-button {
    color: var(--lb-icon-color) !important;
    background-color: transparent !important;
    transition: all 0.3s ease;
}
.elementor-lightbox .elementor-lightbox-icon:hover,
.elementor-lightbox .dialog-lightbox-close-button:hover {
    color: var(--lb-icon-hover) !important;
}

/* ============================================================
   G. MOBILE
   ============================================================ */
@media (max-width: 1024px) {
    .leuk-single-hero { height: var(--hero-h-mob) !important; width: 100% !important; margin: 0 !important; }
    .leuk-title-box { padding: var(--title-pad-mob) !important; text-align: center; }
    
    /* Reset Padding Corpo Mobile (Mais apertado nas laterais) */
    .leuk-single-body { 
        flex-direction: column !important; 
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .leuk-col-info, .leuk-col-gallery { width: 100% !important; padding: 0 20px !important; }
    .leuk-col-info { margin-bottom: 40px; position: relative; top: 0; }
    .leuk-col-gallery .elementor-image-gallery .gallery { grid-template-columns: repeat(var(--gal-cols-mob), 1fr); }
}