/*
 Theme Name:   Child - Medialike
 Description:  Tema child - Fix Menu Verticale & Popup
 Author:       Medialike
 Template:     Divi
 Version:      1.2.0
*/

/* ==========================================================================
   1. STRUTTURA MENU (FIX PER SOTTOMENU ESPLOSI)
   ========================================================================== 
*/

.menu-verticale-wrapper {
    width: 100%;
    display: block;
}

/* REGOLA CRUCIALE MODIFICATA:
   Usiamo "> ul" e "> div > ul" per colpire SOLO il menu principale.
   In questo modo NON forziamo i sottomenu ad aprirsi. */
.menu-verticale-wrapper > ul,
.menu-verticale-wrapper > div > ul {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

.menu-verticale-wrapper ul li {
    margin-bottom: 1.2em;
    width: 100%;
}

/* ==========================================================================
   2. SOTTOMENU (Default CHIUSO)
   ========================================================================== 
*/
.menu-verticale-wrapper .menu-item-has-children > a {
    pointer-events: auto !important;
    z-index: 10 !important;
}

.menu-verticale-wrapper ul.sub-menu {
    pointer-events: auto !important;
    z-index: 10 !important;
}

/* Sottomenu DEFAULT NASCOSTO - Si apre con classe 'open' */
.menu-verticale-wrapper ul.sub-menu {
    display: none; 
    list-style: none !important;
    padding-top: 15px !important;
    padding-left: 0 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    animation: slideDown 0.3s ease-out;
}

/* SOTTOMENU APERTO - Mostra con display: block */
.menu-verticale-wrapper .menu-item-has-children.open > .sub-menu {
    display: block !important;
}

/* Animazione di apertura */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* VOCI SOTTOMENU */
.menu-verticale-wrapper ul.sub-menu li a {
    font-size: 14px !important;
    font-weight: 300 !important; /* Light */
    color: #ffffff !important;
    opacity: 0.8;
    text-decoration: none;
    margin-bottom: 0.5em;
}

/* ==========================================================================
   3. VOCI PRINCIPALI (TIPOGRAFIA)
   ========================================================================== 
*/
.menu-verticale-wrapper > ul > li > a,
.menu-verticale-wrapper > div > ul > li > a {
    display: block;
    text-decoration: none;
    color: #ffffff !important;
    font-family: Montserrat !important; 
    font-size: 18px !important; 
    font-weight: 300 !important; /* Light */
    letter-spacing: 1px;
}

/* ==========================================================================
   4. ICONA "L"
   ========================================================================== 
*/
.menu-item-has-children > a {
    position: relative;
    display: inline-block !important;
    padding-right: 30px;
}

.menu-item-has-children > a {
    cursor: pointer;
}

.menu-item-has-children > a::after {
    content: '';
    position: absolute;
    right: 0; 
    bottom: 8px; 
    width: 10px; 
    height: 10px;
    border-bottom: 1px solid #fff; 
    border-right: 1px solid #fff;
    transition: transform 0.3s ease;
    pointer-events: none;
}

.menu-item-has-children.open > a::after {
    transform: rotate(-45deg);
    bottom: 4px;
}

/*shortcode icona per il testo
/* Freccetta a L migliorata */
.freccia-l {
    display: inline-block !important;
    width: 11px !important;
    height: 11px !important;
    border-bottom: 1px solid #000; /* L'ho messa ROSSA e più SPESSA per testarla */
    border-right: 1px solid #000;
    transform: rotate(0deg);
    margin: 0 5px 2px 5px;
    vertical-align: middle;
    content: ""; /* Forza il rendering */
}

/* ==========================================================================
   5. POPUP FULL SCREEN & NO FLASH
   ========================================================================== 
*/

/* LOGICA ANTI-FLASH:
   Nascondiamo l'elemento verde specificamente (#main-menu-pop)
   finché il body non ha la classe 'da-overlay-visible'. */

#main-menu-pop {
    visibility: hidden !important; 
    opacity: 0 !important;
    transition: opacity 0.5s ease-out, visibility 0.3s ease-out !important;
    
    /* Stili Grafici */
    width: 100% !important;
    height: 100% !important;
    background-color: #2B4343 !important; /* TUO VERDE */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Quando aperto: Mostra il verde */
body.da-overlay-visible #main-menu-pop {
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease-in !important;
}

/* Contenitore Esterno Plugin */
div[data-da-area="main-menu-pop"] {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    z-index: 2147483647 !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important;
    transform: none !important;
    pointer-events: none; /* Passante se chiuso */
}

body.da-overlay-visible div[data-da-area="main-menu-pop"] {
    pointer-events: auto !important;
}

/* Pulizia */
.da-overlay, .evr_fb_popup_modal, .da-close-wrap {
    display: none !important;
}

/* ==========================================================================
   6. SLIDER AUTOMATICO PORTFOLIO LAVORI FATTI
   ========================================================================== 
*/

/* --- CONTAINER CON PROPORZIONI BLOCCATE --- */
.swiper.swiperProporzionale {
    width: 100% !important;
    /* Questa è la regola chiave: mantiene sempre il rapporto 950x560 */
    aspect-ratio: 950 / 560 !important; 
    position: relative;
    overflow: hidden;
}

/* --- Slide e Immagine --- */
.swiper-slide {
    width: 100%;
    height: 100%;
}

.ratio-slide-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.ratio-slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;     /* Copre tutto lo spazio */
    background-position: center; /* Centra l'immagine */
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
}

/* Zoom Hover (opzionale) */
.swiper-slide:hover .ratio-slide-bg {
    transform: scale(1.03);
}

/* --- Overlay Sfumato e Testo --- */
.ratio-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Sfumatura che parte dal basso per far leggere il testo */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    padding: 30px 50px; /* Spazio interno */
    box-sizing: border-box;
    z-index: 2;
}

.ratio-slide-title {
    color: #fff !important;
    font-size: 28px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 300;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* --- Frecce Bianche --- */
.swiper-button-next, .swiper-button-prev {
    color: #ffffff !important;
    width: 44px;
    height: 44px;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 24px !important;
    font-weight: bold;
}

/* --- Pallini Bianchi --- */
.swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 0.6;
    width: 10px;
    height: 10px;
    margin: 0 6px !important;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #ffffff !important;
}

/* --- Adattamenti Mobile --- */
@media (max-width: 767px) {
    /* Manteniamo le proporzioni, riduciamo solo il testo */
    .ratio-slide-title {
        font-size: 18px;
    }
    .ratio-slide-content {
        padding: 20px 20px;
    }
}

/* ============================================================
   RIGA LOGHI - VERSIONE DEFINITIVA
   ============================================================ */

/* 1. SETUP RIGA + FIX ALTEZZA (Solo Padding) */
.riga-loghi-custom {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* RIMUOVO IL PADDING DI DEFAULT DI DIVI (che è 50px+) */
    padding-top: 0px !important;    
    padding-bottom: 0px !important; 
}

/* 2. GESTIONE COLONNE DESKTOP (Invariato) */
@media (min-width: 981px) {
    /* Colonna 1: Più larga */
    .riga-loghi-custom .et_pb_column:first-child {
        width: 24% !important; 
        margin-right: 2% !important;
    }
    
    /* Altre colonne */
    .riga-loghi-custom .et_pb_column:not(:first-child) {
        width: 13.5% !important; 
        margin-right: 1.5% !important;
    }
    
    .riga-loghi-custom .et_pb_column:last-child {
        margin-right: 0 !important;
    }
}

/* 3. GESTIONE MOBILE (Invariato) */
@media (max-width: 980px) {
    .riga-loghi-custom .et_pb_column {
        width: 48% !important;
        margin-right: 4% !important;
        margin-bottom: 30px !important;
    }
    
    .riga-loghi-custom .et_pb_column:nth-child(2n) {
        margin-right: 0 !important;
    }
}

/* 4. STILE IMMAGINI STANDARD (Ripristinato a 80px) */
.riga-loghi-custom .et_pb_module {
    margin-bottom: 0 !important;
    text-align: center;
}

.riga-loghi-custom img {
    filter: grayscale(100%) opacity(0.6);
    max-height: 80px; /* RIPRISTINATO: Era 80px, va bene così */
    width: auto !important;
    margin: 0 auto;
    transition: all 0.3s ease;
}

/* 5. FIX LOGO COLONNA 1 (Ripristinato adattamento larghezza) */
.riga-loghi-custom .et_pb_column:first-child img {
    max-height: none !important; /* SBLOCCATO: Così non viene tagliato */
    width: 100% !important;      /* RIPRISTINATO: Si adatta alla larghezza della colonna */
    max-width: 100% !important;
    object-fit: contain;
}

/* Effetto Hover */
.riga-loghi-custom:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

/* ==========================================================================
   GRIGLIA FILTRABILE - VERSIONE FIX (NO PALLINI / NO A CAPO)
   ========================================================================== */

/* --- CONTAINER GENERALE --- */
.lavori-filter-wrapper {
    width: 100%;
    /* Rimuovo margini qui per gestire la distanza precisa nella barra */
    margin-bottom: 0; 
}

/* --- BARRA DEI FILTRI --- */
.lavori-filter-bar {
    font-family: Montserrat !important;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 100;
    
    /* DISTANZA RICHIESTA: 20px esatti tra filtro e lavori */
    margin-bottom: 20px !important; 
}

.filter-label {
    margin-right: 8px;
    color: #333;
    font-weight: 600;
}

.filter-dropdown {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

/* Voce Attiva (es. "Tutti") */
.current-filter {
    border-bottom: none !important;
    font-weight: 400;
    color: #000;
    padding: 5px 0;
}
.current-filter:hover { opacity: 0.7; }

/* --- LISTA A TENDINA (FIX PALLINI E LAYOUT) --- */
ul.filter-list {
    position: absolute;
    top: 100%;
    left: -15px;
    min-width: 240px; /* Allargato per evitare a capo */
    background: #ffffff;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    
    /* RESET TOTALE DIVI (Rimuove pallini e rientri) */
    list-style: none !important;
    list-style-type: none !important;
    padding: 10px 0 !important; /* Solo padding sopra/sotto al blocco */
    margin: 5px 0 0 0 !important;
    line-height: normal !important;
    
    /* Animazione */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease-in-out;
}

.filter-list.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* VOCI DELLA LISTA */
ul.filter-list li {
    /* RESET TOTALE DIVI (Sicurezza extra sui pallini) */
    list-style: none !important;
    margin: 0 !important;
    
    /* COMPATTAZIONI RIGHE */
    padding: 6px 20px !important; /* Ridotto spazio verticale tra le righe */
    
    cursor: pointer;
    color: #666;
    font-size: 13px;
    
    /* EVITA A CAPO */
    white-space: nowrap !important; /* Forza il testo su una riga */
    
    transition: all 0.2s;
}

ul.filter-list li:hover {
    background-color: #f9f9f9;
    color: #000;
}

ul.filter-list li.active {
    color: #000;
    font-weight: 600;
}

/* --- GRIGLIA LAVORI --- */
.lavori-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 80px; 
    width: 100%;
}

/* ==========================================================================
   PARTE DA SOSTITUIRE NEL CSS PRECEDENTE
   (Tutto ciò che riguarda le Card Lavoro)
   ========================================================================== */

/* --- CARD LAVORO (Contenitore Principale) --- */
.lavoro-card {
    position: relative;
    width: 100%;
    /* Rimosso aspect-ratio e overflow hidden da qui perché ora il titolo è fuori */
    transition: opacity 0.3s ease;
    margin-bottom: 30px; /* Un po' di spazio sotto ogni blocco lavoro */
}

.lavoro-card-link {
    display: block;
    width: 100%;
    text-decoration: none !important;
}

/* --- IMMAGINE (Contenitore con proporzioni) --- */
.lavoro-card-bg {
    width: 100%;
    /* Spostiamo qui le proporzioni (es. 4/3 o 950/560) */
    aspect-ratio: 16 / 9; 
    background-size: cover;
    background-position: center;
    overflow: hidden; /* Serve per l'effetto zoom */
}

/* L'immagine vera e propria per lo zoom */
.lavoro-card-bg::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: inherit; /* Erredita l'url dal div genitore */
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

/* Zoom Hover solo sull'immagine */
.lavoro-card:hover .lavoro-card-bg::before {
    transform: scale(1.04);
}

/* --- CONTENITORE TITOLO (Ex Overlay) --- */
/* Ora questo div non è più sopra l'immagine, ma sotto */
.lavoro-card-overlay {
    position: relative; /* Non più absolute */
    background: none; /* Via la sfumatura */
    padding: 15px 0 0 0; /* Spazio verticale tra foto e titolo */
    display: flex;
    justify-content: center; /* Centra orizzontalmente il blocco titolo */
    width: 100%;
}

/* --- TITOLO (Nuovo Stile) --- */
.lavoro-card-title {
    /* Colore scuro (visto che lo sfondo è bianco) */
    color: #333 !important; 
    margin: 0;
    font-family: Montserrat !important;
    
    /* Dimensione più piccola (era 22px) */
    font-size: 16px; 
    
    font-weight: 300 !important; /* Light */
    text-transform: uppercase; /* Caps Lock */
    letter-spacing: 1px;
    line-height: 1.2;
    text-align: center;
    
    /* Necessario per la linea personalizzata */
    position: relative; 
    display: inline-block; /* Fa sì che il blocco sia largo quanto il testo */
    padding-bottom: 5px; /* Spazio per ospitare la linea sotto */
}

/* --- SOTTOLINEATURA PERSONALIZZATA (1px spessore, 3px distanza) --- */
.lavoro-card-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0; /* Posizione base */
    
    width: 100%; /* Larga quanto il testo */
    height: 1px; /* Spessore: 1px */
    background-color: currentColor; /* Usa lo stesso colore del testo (#333) */
    
    /* ALZIAMO LA LINEA DI 3PX per creare la distanza richiesta */
    transform: translateY(-3px); 
}

/* --- MOBILE (Adattamenti) --- */
@media (max-width: 767px) {
    .lavori-grid {
        grid-template-columns: 1fr;
    }
    /* Su mobile magari riduciamo ancora un pelo il titolo se serve */
    .lavoro-card-title {
        font-size: 15px;
    }
    .lavori-filter-bar {
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   SHORTCODE PUBBLICAZIONI - LAYOUT A 3 COLONNE
   ========================================================================== */

.pubblicazioni-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 80px; 
}

/* GRIGLIA DESKTOP: 3 Colonne (8% Anno - Spazio fluido - 20% Immagine) */
.pub-item {
    display: grid;
    grid-template-columns: 8% 1fr 20%; 
    gap: 50px; 
    align-items: start; 
}

/* --- COLONNA 1: ANNO --- */
.pub-col-anno {
    text-align: left !important;
}

.pub-anno-text {
    font-weight: bold !important; 
    margin: 0 !important; 
    padding: 0 !important;
}

/* --- COLONNA 2: CONTENUTO --- */
.pub-col-content {
    text-align: left !important; /* FORZA L'ALLINEAMENTO A SINISTRA DA DESKTOP */
}

.pub-title-link {
    text-decoration: none !important;
    display: inline-block;
    margin-bottom: 15px;
}

.pub-title {
    font-weight: bold !important; 
    margin: 0 !important; 
    padding: 0 !important;
}

.pub-arrow-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    margin-left: 8px;
    vertical-align: baseline; /* Allinea alla base del testo */
    transform: translateY(1px); /* Abbassata al bordo inferiore */
}

/* Riduce di 4px la dimensione ereditata dal tema */
.pub-descrizione {
    font-size: 13px !important; 
    margin-bottom: 0 !important; 
	margin-top: -10px; 
}

/* --- COLONNA 3: IMMAGINE --- */
.pub-img-link {
    display: block;
    width: 100%;
    overflow: hidden;
}

.pub-img-tag {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.pub-img-link:hover .pub-img-tag {
    transform: scale(1.03); 
}

/* ==========================================================================
   MOBILE (MAX 768px) - Allineamento a sinistra e layout impilato
   ========================================================================== */
@media (max-width: 768px) {
    .pub-item {
        display: flex; 
        flex-direction: column;
        gap: 15px; 
        text-align: left !important; 
    }

    .pub-col-anno, 
    .pub-col-content {
        width: 100%;
        text-align: left !important;
    }

    .pub-anno-text {
        margin-bottom: 5px !important;
    }

    .pub-col-image {
        width: 100%; 
        margin-top: 10px;
    }
}

/* --- FIX IMMAGINI CROPPATE (SOLO MOBILE) --- */
@media (max-width: 767px) {
    /* Spegniamo lo pseudo-elemento su mobile: l'hover non serve e causa bug col lazy loading */
    .lavoro-card-bg::before {
        display: none !important; 
    }
    
    /* Assicuriamoci che il contenitore principale mostri lo sfondo in modo perfetto */
    .lavoro-card-bg {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}