/**
 * ==================================================================================
 * █  LEUK SINGLE NEWS — v2026.13 (GRID ENGINE)
 * ==================================================================================
 * @description  Motor CSS Grid Nativo. Resolve o bug das colunas flutuantes.
 * @fix          Força o número exato de colunas ignorando larguras do Elementor.
 * @author       LEUK Solutions
 * ==================================================================================
 */

/* ==========================================================================
   🎛️ PAINEL DE CONTROLO MESTRE
   ========================================================================== */
:root {
    /* --- 1. HERO & TÍTULO --- */
    --news-title-bg:        rgba(255, 255, 255, 0.90);
    --news-title-color:     #000000;
    --hero-h-desk:          92vh;
    --hero-h-lap:           80vh;
    --hero-h-tab:           60vh;
    --hero-h-mob:           50vh;
    --title-pad-desk:       40px 60px; 
    --title-pad-mob:        25px 20px; 

    /* --- 2. LAYOUT DO CORPO --- */
    --body-pad-y-desk:      80px;   
    --body-pad-y-mob:       40px;   
    --col-left-w:           33%;    /* Sidebar (Esq) */
    --col-right-w:          66%;    /* Conteúdo (Dir) */
    --col-gap:              50px;   /* Espaço entre colunas */

    /* --- 3. COMPORTAMENTO STICKY --- */
    --sticky-offset:        120px;
    --sticky-state-desk:    sticky;     /* Desktop: sticky ou relative */
    --sticky-state-lap:     sticky;     
    --sticky-state-tab:     relative;   
    --sticky-state-mob:     relative;   

    /* --- 4. GALERIA DE IMAGENS (GRID CONFIG) --- */
    /* Define quantas colunas queres EXATAMENTE */
    
    /* DESKTOP (> 1366px) */
    --gal-cols-desk:        3;      /* Força 3 colunas */
    --gal-gap-desk:         3px;   
    --gal-h-desk:           400px;  
    
    /* LAPTOP (1025px - 1366px) */
    --gal-cols-lap:         3;      
    --gal-gap-lap:          3px;
    --gal-h-lap:            250px;

    /* TABLET (768px - 1024px) */
    --gal-cols-tab:         2;      
    --gal-gap-tab:          3px;
    --gal-h-tab:            250px;

    /* MOBILE (< 768px) */
    --gal-cols-mob:         1;      
    --gal-gap-mob:          3px;
    --gal-h-mob:            250px;
    
    /* --- 5. TIPOGRAFIA --- */
    --txt-color:            #333333;
    --txt-size:             18px;
    --txt-line-height:      1.5;
    
    --h2-size: 28px; --h2-transform: uppercase; --h2-weight: 400; --h2-margin: 40px 0 20px 0;
    --h3-size: 22px; --h3-transform: uppercase; --h3-weight: 300; --h3-margin: 30px 0 15px 0;
}

/* ==========================================================================
   A. SECÇÃO HERO
   ========================================================================== */
.leuk-news-hero {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    position: relative !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    height: var(--hero-h-desk) !important;
}

.leuk-news-title-box {
    background-color: var(--news-title-bg) !important;
    width: 100% !important;
    padding: var(--title-pad-desk) !important;
    z-index: 2;
}

.leuk-news-title-box .elementor-heading-title {
    color: var(--news-title-color) !important;
    margin: 0 !important;
    text-transform: uppercase;
    font-weight: 300;
}

/* ==========================================================================
   B. ESTRUTURA DO CORPO
   ========================================================================== */
.leuk-news-body {
    padding-top: var(--body-pad-y-desk) !important;
    padding-bottom: var(--body-pad-y-desk) !important;
    align-items: flex-start !important; 
    width: 100% !important;
}

.leuk-news-sidebar {
    width: var(--col-left-w) !important;
    padding-right: var(--col-gap) !important;
    position: var(--sticky-state-desk) !important; 
    top: var(--sticky-offset) !important;
    z-index: 5;
    border-right: 0px solid rgba(0,0,0,0.05); 
}
.leuk-news-sidebar .elementor-icon-list-text {
    font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #666;
}

.leuk-news-content {
    width: var(--col-right-w) !important;
    padding-left: var(--col-gap) !important;
}

/* ==========================================================================
   C. GALERIA INTELIGENTE (MOTOR CSS GRID)
   ========================================================================== */

/* 1. O Contentor da Galeria */
.leuk-smart-gallery .elementor-widget-gallery .elementor-gallery__container,
.leuk-smart-gallery .elementor-widget-gallery .elementor-image-gallery .gallery {
    /* Ativa o motor Grid */
    display: grid !important;
    
    /* A MÁGICA: Define colunas exatas via variável */
    grid-template-columns: repeat(var(--gal-cols-desk), 1fr) !important;
    
    /* Espaçamento */
    gap: var(--gal-gap-desk) !important;
    
    /* Resets */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important; 
}

/* 2. Itens Individuais */
.leuk-smart-gallery .elementor-widget-gallery .e-gallery-item,
.leuk-smart-gallery .elementor-widget-gallery .elementor-gallery-item {
    /* O item ocupa 100% da célula da grelha */
    width: 100% !important; 
    max-width: 100% !important;
    margin: 0 !important; 
    padding: 0 !important;
    border: none !important;
    
    /* Reset total de posicionamento */
    position: relative !important;
    transform: none !important;
    top: auto !important; left: auto !important;

    /* Altura Fixa */
    height: var(--gal-h-desk) !important;
    overflow: hidden;
}

/* 3. A Imagem */
.leuk-smart-gallery .e-gallery-image,
.leuk-smart-gallery .elementor-gallery-item__image {
    width: 100% !important; 
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.6s ease;
}

.leuk-smart-gallery .e-gallery-item:hover .e-gallery-image { 
    transform: scale(1.03); 
}

.leuk-smart-gallery:empty { display: none !important; }


/* ==========================================================================
   D. TIPOGRAFIA
   ========================================================================== */
.leuk-news-content .elementor-widget-theme-post-content {
    color: var(--txt-color); font-size: var(--txt-size); line-height: var(--txt-line-height); font-weight: 300;
}
.leuk-news-content .elementor-widget-theme-post-content p { margin-bottom: 25px !important; }
.leuk-news-content .elementor-widget-theme-post-content h2 {
    font-size: var(--h2-size); font-weight: var(--h2-weight); text-transform: var(--h2-transform); margin: var(--h2-margin);
}
.leuk-news-content .elementor-widget-theme-post-content h3 {
    font-size: var(--h3-size); font-weight: var(--h3-weight); text-transform: var(--h3-transform); margin: var(--h3-margin);
}
.leuk-news-content blockquote {
    border-left: 3px solid #000; padding-left: 20px; font-style: italic; color: #555; margin: 40px 0; background: transparent !important;
}


/* ==========================================================================
   E. RESPONSIVIDADE (MEDIA QUERIES)
   ========================================================================== */

@media (min-width: 1367px) {
  .leuk-smart-gallery .elementor-element-8aff99e .elementor-gallery__container{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--gal-gap-desk) !important;
  }
}

/* --- LAPTOP (1025px - 1366px) --- */
@media (max-width: 1366px) {
    .leuk-news-hero { height: var(--hero-h-lap) !important; }
    .leuk-news-sidebar { position: var(--sticky-state-lap) !important; }

    /* Galeria Laptop */
    .leuk-smart-gallery .elementor-widget-gallery .elementor-gallery__container { 
        gap: var(--gal-gap-lap) !important;
        grid-template-columns: repeat(var(--gal-cols-lap), 1fr) !important;
    }
    .leuk-smart-gallery .elementor-widget-gallery .e-gallery-item {
        height: var(--gal-h-lap) !important;
    }
}

/* --- TABLET (768px - 1024px) --- */
@media (max-width: 1024px) {
    .leuk-news-hero { height: var(--hero-h-tab) !important; }
    .leuk-news-sidebar { position: var(--sticky-state-tab) !important; }

    /* Galeria Tablet */
    .leuk-smart-gallery .elementor-widget-gallery .elementor-gallery__container { 
        gap: var(--gal-gap-tab) !important; 
        grid-template-columns: repeat(var(--gal-cols-tab), 1fr) !important;
    }
    .leuk-smart-gallery .elementor-widget-gallery .e-gallery-item {
        height: var(--gal-h-tab) !important;
    }
}

/* --- MOBILE (< 768px) --- */
@media (max-width: 767px) {
    .leuk-news-hero { height: var(--hero-h-mob) !important; margin: 0 !important; width: 100% !important; }
    .leuk-news-title-box { padding: var(--title-pad-mob) !important; text-align: center; }
    
    .leuk-news-body { flex-direction: column !important; padding-top: var(--body-pad-y-mob) !important; }
    .leuk-news-sidebar, .leuk-news-content { width: 100% !important; padding: 0 20px !important; border: none !important; }
    .leuk-news-sidebar { position: var(--sticky-state-mob) !important; margin-bottom: 30px; }

    /* Galeria Mobile */
    .leuk-smart-gallery .elementor-widget-gallery .elementor-gallery__container { 
        gap: var(--gal-gap-mob) !important; 
        grid-template-columns: repeat(var(--gal-cols-mob), 1fr) !important;
    }
    .leuk-smart-gallery .elementor-widget-gallery .e-gallery-item {
        height: var(--gal-h-mob) !important;
    }
}