/* ==========================================================================
   1. CORE & GLOBAL STYLES
   ========================================================================== */
@charset "utf-8";

:root {
    --accent: var(--e-global-color-accent);
    --secondary: var(--e-global-color-secondary);
    --primary: var(--e-global-color-primary);
    --transition: all .3s ease-out;
}

.grecaptcha-badge {
    opacity: 0;
}

/* Font Awesome Fixes */
.fa,
.fas,
.far {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 600 !important;
}

.fab,
.fa-whatsapp {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}


/* Trasforma tutte le immagini del sito in bianco e nero */
img {
    filter: grayscale(100%);
    transition: filter 0.3s ease; /* Rende fluido il passaggio se decidi di usare l'effetto hover */
}

/* Forza il bianco e nero nei popup delle gallerie più comuni */
.elementor-lightbox img, 
.pswp__img, 
.fancybox-content img, 
.lightbox-content img,
.mfp-content img {
    filter: grayscale(100%) !important;
    transition: filter 0.3s ease;
}

/* Opzionale: torna a colori quando ci passi sopra con il mouse */
/*.elementor-lightbox img:hover, 
.pswp__img:hover, 
.fancybox-content img:hover, 
.lightbox-content img:hover,
.mfp-content img:hover {
    filter: grayscale(0%) !important;
}
*/


/* Trasforma in bianco e nero tutti i background di Elementor */
.elementor-bg {
    filter: grayscale(100%) !important;
    transition: filter 0.4s ease-in-out;
}

/* Opzionale: lo sfondo torna a colori quando si passa sopra con il mouse */
.elementor-element:hover > .elementor-bg {
    filter: grayscale(0%) !important;
}

/* Trasforma in bianco e nero i video di sfondo di Elementor */
.elementor-background-video-container video,
.elementor-background-video-container iframe,
.elementor-background-video-embed {
    filter: grayscale(100%) !important;
    transition: filter 0.4s ease-in-out;
}


/* ==========================================================================
   2. HEADER & NAVIGATION (Function: header_sito, aggiungi_classe_header_scrollata)
   ========================================================================== */
#glass-blurred-header {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.sezione-header {
    transition: var(--transition);
}

.sezione-header.elementor-sticky {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
}

.sffm-flymenu-trigger-block {
    display: none !important;
}

/* Logo & Scroll State */
.logo-sito img {
    transition: var(--transition);
    filter: brightness(0) invert(1) grayscale(100%);
}

.sezione-header-scrollata {
    background-color: #fff !important;
}

.sezione-header-scrollata .logo-sito img {
    filter: initial;
}

.sezione-header-scrollata .menu-desktop .menu-item>a,
.sezione-header-scrollata .hamb-panel a i::before {
    color: #000 !important;
}

.sezione-header-scrollata .menu-desktop .menu-item>a svg {
    fill: #000 !important;
}

/* Menu Typography */
/*
.menu-desktop .menu-item a {
    text-transform: none !important;
}


.menu-desktop .sub-menu .menu-item a,
.widget_nav_menu ul.menu li.menu-item-has-children>a {
    text-transform: capitalize !important;
}
*/

/* ==========================================================================
   3. MEGA MENU (Function: voci_box_megamenu_shortcode)
   ========================================================================== */
.voci-box-megamenu {
    padding: 15px;
    background-color: #fff;
}

.voci-box-megamenu .mega-menu-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.voci-box-megamenu .mega-menu-title a {
    text-decoration: none;
    color: #333;
}

.voci-box-megamenu .mega-menu-subpages {
    list-style: none;
    padding: 0;
    margin: 0;
}

.voci-box-megamenu a:hover {
    color: var(--secondary);
}

/* ==========================================================================
   4. SCACCHIERA & BLOCCHI TESTO (Function: testo_scacchiera, display_blocchi_testo)
   ========================================================================== */
.cont-rip-scacchiera {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin: 50px 0;
}

.riga-rip-scacchiera {
    display: flex;
    width: 100%;
    position: relative;
    opacity: 1;
    transition: 1s ease-out;
}

.riga-rip-scacchiera>div {
    width: 50%;
}

.riga-scacchiera-destra {
    flex-direction: row-reverse;
}

.col-txt-scacchiera {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5%;
    align-items: flex-start;
}

.col-img-scacchiera {
    min-height: 450px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

/* Typography inside Scacchiera */
.titolo-scacchiera::after {
    content: "";
    display: block;
    width: 40%;
    height: 1px;
    background-color: var(--secondary);
    margin: 20px 0;
}

/* Animations for scroll (initialize_slider script) */
.blocco_page_prodotti .item .left-column {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s, transform 1s;
}

.blocco_page_prodotti .item .left-column.show {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   5. CARDS & GRIDS (Function: pagine_figlie_vertical_cards, blocchi_box)
   ========================================================================== */
/* Vertical Cards (pf-card) */
.pf-cards-grid {
    display: grid;
    gap: 20px 20px;
    grid-template-columns: repeat(3, 1fr);
    /*padding: 20px 0;*/
}

.pf-card-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    text-align: center;
    padding-bottom: 35px;
    height: 100%;
}

.pf-card-img-wrapper {
    height: 220px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    position: relative;
}

.pf-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: .3s;
}

.pf-card-item:hover .pf-card-overlay {
    opacity: 1;
}

/* Floating Button on Cards */
.pf-card-btn-floating {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    background-color: #399685;
    color: #fff !important;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    z-index: 10;
    transition: .3s;
}

/* Service Grid (blocchi_box) */
.griglia-servizi {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);
}

.servizio-box.layout-orizzontale .servizio-box-inner {
    display: flex;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.servizio-img-container {
    flex: 0 0 45%;
    min-height: 220px;
}

/* ==========================================================================
   6. BOX ANIMATI (Function: box_animati_shortcode)
   ========================================================================== */
.container-box-animati {
    display: flex;
    width: 100%;
    height: 600px;
    gap: 15px;
    overflow: hidden;
}

.single-box-animato {
    position: relative;
    flex: 1;
    background-size: cover;
    background-position: center;
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    filter: grayscale(30%);
}

.single-box-animato:hover {
    flex: 4;
    filter: grayscale(0%);
}

.single-box-animato::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 5, 29, 0.85) 0%, transparent 100%);
    z-index: 1;
}

.content-box-animato {
    position: relative;
    z-index: 2;
    color: #fff;
}

.testo-box-nascosto {
    max-height: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: .5s ease;
    overflow: hidden;
}

.single-box-animato:hover .testo-box-nascosto {
    max-height: 400px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 20px;
}

/* ==========================================================================
   7. LISTINO & TARIFFARIO (Function: listino_prezzi, visualizza_tariffario)
   ========================================================================== */
.tariffario-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
}

.row-header-categoria {
    background-color: #f2f2f2;
}

.row-header-categoria th {
    padding: 15px;
    text-align: left;
    font-weight: 700;
}

.row-servizio:nth-child(even) {
    background-color: #fafafa;
}

.row-servizio td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

/* Menu Ristorante Layout */
.menu-category.with-image {
    display: flex;
    gap: 30px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
}

.menu-category .image-col {
    width: 46%;
}

.menu-category .content-col {
    width: 54%;
    padding: 2% 2% 2% 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 5px;
}

/* ==========================================================================
   8. MOBILE & CTA (Function: show_cta_mobile)
   ========================================================================== */
.cta-mobile-full {
    position: fixed;
    z-index: 100;
    bottom: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transition: var(--transition);
}

.container-cta-mobile .pulsante-mobili {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    margin-right: 10px;
}

.mobile-whatsapp {
    background-color: #5cb85c !important;
}

.mobile-whatsapp a {
    color: #fff !important;
}

.container-cta-preventivo-mobile {
    position: fixed;
    bottom: -5rem;
    width: 100%;
    transition: var(--transition);
    z-index: 100;
}

.container-cta-preventivo-mobile.mostra-preve-mobile {
    bottom: 0;
}

.mobile-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: #043f1c;
    color: #fff;
    padding: 15px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ==========================================================================
   9. RESPONSIVE QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
    .pf-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .servizio-box.layout-orizzontale .servizio-box-inner {
        flex-direction: column;
    }
}

/* ==========================================================================
   10. TIMELINE (Function: custom_timeline_shortcode)
   ========================================================================== */
.custom-timeline {
    position: relative;
    padding: 40px 0;
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;
}

/* La linea verticale centrale */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #333;
    transform: translateX(-50%);
    z-index: 1;
}

/* Box contenitore dell'evento */
.timeline-box {
    position: relative;
    width: 48%;
    margin-bottom: 0;
    z-index: 2;
}

/* Alternanza Destra/Sinistra */
.timeline-box.left {
    float: left;
    clear: right;
    text-align: right;
}

.timeline-box.right {
    float: right;
    clear: left;
    text-align: left;
}

/* Il rettangolo del contenuto */
.timeline-content {
    position: relative;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* La linea orizzontale che collega il box alla linea centrale */
.timeline-content::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 20px;
    height: 2px;
    background-color: #333;
    z-index: 1;
}

.timeline-box.left .timeline-content::after {
    right: -20px;
}

.timeline-box.right .timeline-content::after {
    left: -20px;
}

/* Tipografia Timeline */
.timeline-year {
    font-size: 1.8em;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--primary);
}

.timeline-titles {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-titles li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 1em;
    color: #555;
}

.timeline-titles li:last-child {
    border-bottom: none;
}

/* Rimuove il margine negativo per il primo box (gestito via PHP $classAdded) */
.timeline-box.first-box {
    margin-top: 0;
}

/* ==========================================================================
   TIMELINE RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .timeline-line {
        left: 20px;
        /* Sposta la linea a sinistra su mobile */
    }

    .timeline-box {
        width: calc(100% - 50px);
        float: right !important;
        text-align: left !important;
        margin-left: 50px;
    }

    .timeline-content::after {
        left: -30px !important;
        width: 30px !important;
    }

    .timeline-box.left .timeline-content::after {
        right: auto;
    }
}

@media (max-width: 768px) {

    .pf-cards-grid,
    .griglia-servizi,
    .container-pagine-figlie {
        grid-template-columns: 1fr;
    }

    .riga-rip-scacchiera {
        flex-direction: column !important;
    }

    .riga-rip-scacchiera>div {
        width: 100%;
    }

    .menu-category.with-image {
        flex-direction: column;
    }

    .menu-category .image-col,
    .menu-category .content-col {
        width: 100%;
        padding: 20px;
    }

    .menu-category .image-col img {
        display: none;
    }

    /* Come da tua funzione PHP mobile fallback */
    .container-box-animati {
        flex-direction: column;
        height: auto;
    }

    .single-box-animato {
        height: 300px;
    }
}

/* ==========================================================================
   BOTTONI
   ========================================================================== */

.btn-light,
.btn-dark {
    padding: 15px 30px 15px 30px !important;
}

.btn-dark {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

.btn-dark:hover {
    background-color: #fff !important;
    color: #222 !important;
    border: 1px solid #222 !important;
}

.btn-light {
    background-color: #fff !important;
    color: #222 !important;
    border: 1px solid #222 !important;
}

.btn-light:hover {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

.btn-light:hover,
.btn-dark:hover {
    /*background-color: #fff !important;
    color: var(--e-global-color-primary) !important;*/
    opacity: .8;
}


/*.btn-light, .btn-dark {
    border-width: 1px !important;
}*/





.blocco_page_prodotti {
    display: flex;
    flex-wrap: wrap;
}

.blocco_page_prodotti .item {
    display: flex;
    gap: 20px 20px;
    width: 100%;
    margin-top: 30px;
    align-items: center;
}


.blocco_page_prodotti .item h3 a {
    color: var(--e-global-color-primary);
}


.blocco_page_prodotti .item:last-child {
    margin-bottom: 30px;
}

.blocco_page_prodotti .item.odd {
    flex-direction: row-reverse;
}

.blocco_page_prodotti .item.odd.blocco-orizz {
    flex-direction: unset !important;
}


.blocco_page_prodotti .item .left-column {
    min-width: 50%;
    width: 50%;
    /*display: flex;*/
    flex-direction: column;
    align-items: center;
    padding: 10px;
    /*background-color: #fff;*/
}

#sezione-grid-prods-brand .blocco_page_prodotti .item .right-column {
    width: 40%;
    min-width: 40%;
    padding: 0;
}


.blocco_page_prodotti .item.odd .right-column {
    /*margin-right: -10%;*/
    margin-left: 0;
}


#sezione-grid-prods-brand .blocco_page_prodotti .item .left-column {
    width: 50%;
    padding: 0;
    background-color: transparent !important;
}


#sezione-grid-prods-brand .blocco_page_prodotti .item .right-column {
    padding-left: 50px;
    padding-right: 0px;
}

#sezione-grid-prods-brand .blocco_page_prodotti .item.odd .right-column {
    padding-left: 0px;
    padding-right: 50px;
}

.blocco_page_prodotti .item .left-column {
    opacity: 1;
    transform: translateY(20px);
    /* Sposta l'elemento verso il basso di 20px */
    transition: opacity 1s ease-out, transform 1s ease-out;
    /* Applica la transizione */
    min-height: 450px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    border-radius: 8px 8px 8px 8px
        /*border: 20px solid #fff;*/
}

.int-right-column {
    padding: 20px;
}

.int-right-column.no-space {
    padding: 0 !important;
}

.blocco_page_prodotti .item .left-column.show {
    opacity: 1;
    transform: translateY(0);
    /* Riporta l'elemento nella sua posizione originale */
}

/*
.int-right-column h2.product-title {
    font-size: 2em;
}

.int-right-column h2.product-title::after {
    content: "";
    display: block;
    width: 60px; 
    height: 3px;
    background-color: var(--e-global-color-primary); 
    margin: 20px 0;
}
*/

.product-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border: 20px solid #f7f9fb !important;

}

.left-column.bg-light img {
    object-fit: cover;
    width: 100%;
    height: 400px;
}



/*
 .left-column.bg-light {
    background-color: #f7f9fb !important;
 }
*/


.left-column.bg-light img {
    object-fit: cover;
    width: 100%;
    min-height: 560px;
}

.box-slide img {
    max-height: 350px;
    object-fit: cover;
    object-position: center;
}


.blocco_page_prodotti .item .right-column {
    min-width: 50%;
    width: 50%;
    /*display: flex;
  flex-direction: column;
  justify-content: center;*/
    padding: 0;
    /*margin-left: -10%;*/
    /*background-color: #fff;*/
    z-index: 1;
}

.blocco_page_prodotti .item .txt-pagine-figlie {
    margin-top: 10px;
}



/* ==========================================================================
   11. TIMELINE SLIDER (Variante Orizzontale)
   ========================================================================== */
/* Container principale */
.timeline-slider-wrapper {
    position: relative;
    padding-top: 80px;
    /* Aumentato spazio in alto per i pulsanti */
    padding-bottom: 20px;
}

.timeline-slider-container {
    position: relative;
    padding-top: 50px;
}

/* Linea orizzontale continua */
.timeline-slider-line {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #333;
    z-index: 1;
}

/* Punto (Dot) sopra il box */
.timeline-dot {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 50%;
    z-index: 5;
}

/* Box dei contenuti */
.timeline-slide-content {
    background: #fff;
    padding: 30px 20px;
    margin: 40px 10px 10px 10px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    min-height: 250px;
}

.timeline-slider-year {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #222;
}

.timeline-slider-titles {
    list-style: none;
    padding: 0;
    text-align: left;
}

.timeline-slider-titles li {
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #444;
}

/* --- POSIZIONAMENTO E STILE FRECCE (SPOSTATE IN ALTO) --- */
.timeline-slider-carousel .owl-nav {
    position: absolute;
    top: -100px;
    /* Spostate sopra la riga della timeline */
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    gap: 30px;
    z-index: 99;
}

.timeline-slider-carousel .owl-nav button.owl-prev,
.timeline-slider-carousel .owl-nav button.owl-next {
    width: 55px !important;
    height: 55px !important;
    background-color: #333 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 0 !important;
    padding: 0 !important;
}

/* Stile dell'icona */
.timeline-slider-carousel .owl-nav button span {
    color: #ffffff !important;
    font-size: 35px !important;
    line-height: 1;
    margin-top: -8px;
}

/* Effetto al passaggio del mouse */
.timeline-slider-carousel .owl-nav button:hover {
    background-color: #000 !important;
}

/* Fix se Owl Carousel nasconde le frecce di default */
.owl-carousel .owl-nav.disabled {
    display: flex !important;
}




/*custom form*/
.form-button.wpcf7-form-control.wpcf7-submit.has-spinner {
    background-color: transparent;
    border: 1px solid var(--e-global-color-accent);
    color: var(--e-global-color-accent);
    /*font-family:"Gilda Display";*/
    text-transform: uppercase;
    font-weight: 500;
}

#blocco-form label,
#blocco-form label textarea {
    margin-bottom: 0;
}

/*
#blocco-form label,
#blocco-form label a {
    width: 100%;
}
*/


#blocco-form label input,
#blocco-form label textarea {
    width: 100%;
    font-family: 'Roboto';
    font-size: 16px;
    border: 1px solid #F1F1F1;
    border-radius: 0;
    padding: 13px 15px 13px 15px;
    transition: all .3s;
    background-color: #F1F1F1;
}

#blocco-form label input:focus,
#blocco-form label textarea:focus {
    background-color: #fff;
}

#blocco-form label .wpcf7-form-control {
    width: 100%;
}


#blocco-form label input[type="checkbox"] {
    width: auto;
}


#blocco-form input[type="submit"]:hover {
    opacity: .8;
    font-weight: 600;
}

#blocco-form .wpcf7-not-valid-tip {
    /*color: #fff;**/
    font-size: .8em;
    font-weight: normal;
    display: block;
    text-transform: uppercase;
    padding-top: 5px;
}

.form-button.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
    background-color: var(--e-global-color-accent);
    border: 1px solid var(--e-global-color-accent);
    color: #fff;
}

input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
input[type=textarea],
select {
    /*font-family: "Gilda Display", sans-serif;*/
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type=textarea],
.wpcf7 input[type="tel"] {
    width: 100%;
    /*font-family: "Gilda Display", sans-serif;*/
}

.form-interno input[type=date],
.form-interno input[type=email],
.form-interno input[type=number],
.form-interno input[type=password],
.form-interno input[type=search],
.form-interno input[type=tel],
.form-interno input[type=text],
.form-interno input[type=url],
.form-interno input[type=textarea],
.form-interno select,
.form-interno textarea {
    background-color: transparent !important;
    border-width: 0 0 1px 0 !important;
    border-color: #211e1f !important;
}

.form-interno select {
    margin-bottom: 0 !important;
}

.form-interno span a {
    color: var(--e-global-color-primary) !important;
}


/*CSS PER FORM A DUE COLONNE*/

.form-row p {
    margin-bottom: 0
}

.column-half div {
    margin-bottom: 12px
}

.responsive-form {
    margin: 0 auto;
    width: 100%;
    padding: 0
}

.responsive-form br {
    display: none;
}

.responsive-form input {
    margin-bottom: 0 !important
}

.bgform-grigio {
    background-color: #f7f7f7
}

.form-row {
    width: 100%;
    clear: both;
}

.column-full,
.column-half {
    float: left;
    position: relative;
    padding: .45rem;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

/*.form-row .campo-accetta span.wpcf7-list-item-label {
    display: inline;
}*/

@media only screen and (min-width: 48em) {
    .column-half {
        width: 50%
    }
}

/******************************PAGINE ASSOCIATE (figlie)*****************************/

/* =========================================
   1. RESET ELENCHI PUNTATI E LINK
========================================= */
ul.container-pagine-figlie,
ul.container-pagine-figlie li.pagine-figlie-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.container-pagine-figlie li.pagine-figlie-item::before {
    display: none !important;
}

.pagine-figlie-link {
    display: block;
    text-decoration: none !important;
    height: 100%;
}

/* =========================================
   2. IMPOSTAZIONE DELLA GRIGLIA
========================================= */
ul.container-pagine-figlie {
    display: grid;
    gap: 30px;
}

/* Mobile: 1 colonna */
ul.container-pagine-figlie {
    grid-template-columns: 1fr;
}

/* Tablet: 2 colonne */
@media (min-width: 768px) {
    ul.container-pagine-figlie {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: gestito dal PHP */
@media (min-width: 1024px) {
    ul.container-pagine-figlie.grid-desktop-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    ul.container-pagine-figlie.grid-desktop-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    ul.container-pagine-figlie.grid-desktop-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =========================================
   3. CONTENITORE IMMAGINE (COMUNE A ENTRAMBI I LAYOUT)
========================================= */
.img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* FORZA IL QUADRATO PERFETTO */
    overflow: hidden;
    /* Nasconde l'immagine che si ingrandisce con lo zoom */
    background-color: #f5f5f5;
    /* Colore di fallback */
}

.img-wrapper img.zoom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Taglia l'immagine proporzionalmente per riempire il quadrato */
    display: block;
    transition: transform 0.8s ease-in-out;
    /* ZOOM LENTO E FLUIDO */
}

/* Effetto Hover: Zoom a 1.3 */
.pagine-figlie-link:hover .img-wrapper img.zoom-img {
    transform: scale(1.3);
}

/* =========================================
   4. STILI LAYOUT 2 (TESTO IN SOVRAPPOSIZIONE)
========================================= */
.img-wrapper.layout-overlay .overlay-gradient {
    position: absolute;
    inset: 0;
    /* Crea un'ombra in basso per far risaltare il testo bianco */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.img-wrapper.layout-overlay .txt-overlay {
    position: absolute;
    bottom: 25px;
    left: 25px;
    z-index: 2;
}

.img-wrapper.layout-overlay .titolo-overlay {
    color: #ffffff !important;
    margin: 0;
    font-size: 0.95rem;
    text-transform: uppercase;
    /* Scritta tutto maiuscolo tipo "MOODY PALETTE" */
    letter-spacing: 2px;
    /* Testo spaziato */
    font-weight: 500;
}

/* =========================================
   5. STILI LAYOUT 1 (TESTO SOTTO)
========================================= */
.txt-sotto {
    padding-top: 15px;
    text-align: left;
}

.txt-sotto .titolo-sotto {
    color: #111 !important;
    margin: 0 0 5px 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.txt-sotto .info-foto {
    color: #777 !important;
    margin: 0;
    font-size: 0.9rem;
}

/* Container principale */
.wrap-mostre-esibizioni {
    margin: 2rem 0;
}

/* Titolo "MOSTRE DEL [ANNO]" */
.titolo-anno-mostre {
    /*font-family: "Forum", "Times New Roman", Times, serif;*/
    /* Font Serif in stile con lo screenshot */
    font-size: 2.2rem;
    /*font-weight: 400;*/
    /*text-transform: uppercase;*/
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

/* Griglia delle mostre */
ul.griglia-mostre {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: 1 colonna */
    gap: 30px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 3rem 0 !important;
}

/* Desktop e Tablet: 2 colonne */
@media (min-width: 768px) {
    ul.griglia-mostre {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Card Singola */
li.card-mostra {
    border: 1px solid #e0e0e0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

li.card-mostra::before {
    display: none !important;
    /* Forza la rimozione di pallini se il tema fa override */
}

/* Immagine */
.card-mostra-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Mantieni le proporzioni dell'immagine fisse per tutte le card */
    overflow: hidden;
    background-color: #f5f5f5;
}

.card-mostra-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Contenuto Testuale */
.card-mostra-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

/* Campo Custom (es. [solo show]) */
.tipo-esibizione {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
    display: block;
}

/* Titolo Mostra */
.titolo-mostra {
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.3;
    color: #000;
}

/* Bottone Dettagli */
.btn-dettagli {
    background-color: #3b3231;
    /* Colore scuro fedele allo screenshot */
    color: #ffffff !important;
    padding: 8px 25px;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
    margin: 10px 0 0 0;
    /* Spinge il bottone sempre in fondo, allineandolo tra card diverse */
}

.btn-dettagli:hover {
    background-color: #000000;
}



/****************************************
DETTAGLIO MOSTRA
****************************************/
/* =========================================
   WRAPPER PRINCIPALE
========================================= */
.wrap-dettagli-esibizioni {
    margin: 2rem 0;
}

.blocco-singola-esibizione {
    margin-bottom: 2rem;
}

/* =========================================
   HEADER INFORMAZIONI (Layout 40/60)
========================================= */
.header-esibizione {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 30px;
    /* Rimuoviamo il gap per avere il controllo totale del 100% tramite le larghezze */
}

/* Colonna di sinistra al 40% */
.header-left {
    width: 65%;
    padding-right: 30px;
    /* Crea spazio verso la linea di separazione */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    /* Essenziale affinché il padding non ingrandisca il 40% */
}

.info-tipo {
    font-size: 1rem;
    color: #333;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.titolo-esibizione-inline {
    /*font-family: "Forum", "Times New Roman", Times, serif;*/
    font-size: 2rem;
    /*font-weight: 300;*/
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    color: #000;
    text-transform: uppercase;
}

/* La barra verticale spessa 6px */
.barra-spessa-6px {
    display: inline-block;
    width: 6px;
    height: 1em;
    background-color: #000;
    margin: 0 15px;
    flex-shrink: 0;
    /* Evita che la barra si restringa se il titolo è molto lungo */
}

.titolo-esibizione-inline strong {
    font-weight: 600;
}

/* Colonna di destra al 60% */
.header-right {
    width: 35%;
    border-left: 1px solid #111;
    padding-left: 30px;
    /* Spazio dalla riga di separazione al testo */
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem;
    color: #444;
    box-sizing: border-box;
    /* Essenziale affinché il padding non ingrandisca il 60% */
}

.header-right .meta-item {
    margin-bottom: 5px;
}

.header-right strong {
    color: #000;
    font-weight: 600;
}

/* Versione Mobile dell'Header (Torna a colonna unica al 100%) */
@media (max-width: 900px) {

    .header-left,
    .header-right {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .header-left {
        margin-bottom: 15px;
    }

    .header-right {
        border-left: none;
        border-top: 1px solid #ddd;
        padding-top: 15px;
    }

    .titolo-esibizione-inline {
        font-size: 1.4rem;
        flex-wrap: wrap;
    }
}

/* La barra verticale spessa 6px */
.barra-spessa-6px {
    display: inline-block;
    width: 3px;
    height: 1em;
    /* Si adatta all'altezza del testo */
    background-color: #000;
    margin: 0 15px;
    /* Spaziatura a destra e sinistra della barra */
}

/* Seconda parte del titolo in grassetto */
.titolo-esibizione-inline strong {
    font-weight: 600;
}

.header-right {
    flex: 0 1 auto;
    border-left: 1px solid #111;
    /* La riga sottile della tua immagine */
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem;
    color: #444;
    min-width: 300px;
}

.header-right .meta-item {
    margin-bottom: 5px;
}

.header-right strong {
    color: #000;
    font-weight: 600;
}

/* Versione Mobile dell'Header */
@media (max-width: 900px) {
    .header-esibizione {
        flex-direction: column;
        gap: 15px;
    }

    .header-right {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #ddd;
        padding-top: 15px;
        min-width: 100%;
    }

    .titolo-esibizione-inline {
        font-size: 1.4rem;
        flex-wrap: wrap;
        /* Permette al testo di andare a capo su mobile */
    }
}

/* =========================================
   GALLERIA GRIGLIA FISSA (Responsive)
========================================= */
.galleria-griglia-colonne {
    display: grid;
    gap: 15px;
    /* Partiamo dal Mobile: 2 colonne */
    grid-template-columns: repeat(2, 1fr);
}

/* Tablet: 3 colonne */
@media (min-width: 768px) {
    .galleria-griglia-colonne {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop: 4 colonne */
@media (min-width: 1024px) {
    .galleria-griglia-colonne {
        grid-template-columns: repeat(4, 1fr);
    }
}

.galleria-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #f5f5f5;
}

.galleria-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.galleria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.galleria-item:hover img {
    transform: scale(1.05);
}

hr.separatore-esibizione {
    border: none;
    border-top: 1px solid #eaeaea;
    margin: 3rem 0;
}

.blocco-singola-esibizione:last-of-type+hr.separatore-esibizione {
    display: none;
}


/* =========================================
   GRIGLIA VIDEOGALLERY
========================================= */
.wrap-videogallery {
    display: grid;
    gap: 40px;
    /* Spazio tra i video */
    margin: 2rem 0;

    /* Mobile: 1 colonna */
    grid-template-columns: 1fr;
}

/* Desktop e Tablet: 2 colonne */
@media (min-width: 768px) {
    .wrap-videogallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

.videogallery-item {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    background-color: #fff;
}

/* =========================================
   WRAPPER VIDEO RESPONSIVE (16:9)
========================================= */
.video-responsive-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Mantiene proporzione fissa cinematografica */
    background-color: #000;
    /* Sfondo nero durante il caricamento */
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 4px;
    /* Opzionale: angoli leggermente arrotondati */
}

/* Forza l'iframe generato da WordPress ad adattarsi al wrapper */
.video-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
}

/* =========================================
   TESTI VIDEO
========================================= */
.video-text-content {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.video-titolo {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #111;
    line-height: 1.3;
}

.video-descrizione {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
}

.video-descrizione p {
    margin: 0 0 10px 0;
}

.video-descrizione p:last-child {
    margin-bottom: 0;
}




/* Contenitore principale */
.lista-testi-moderna {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: inherit;
}

/* Singola riga */
.lista-testi-moderna .testo-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 4px;
    border-bottom: 1px solid #ebebeb;
    text-decoration: none;
    color: #666;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

/* Effetto Hover Accattivante */
.lista-testi-moderna .testo-item:hover {
    padding-left: 15px;
    /* Sposta leggermente il testo verso destra */
    background-color: #fafafa;
    color: #111;
    border-bottom-color: #111;
    /* Scurisce la linea sotto */
}

/* Pseudo-elemento per una riga laterale all'hover (opzionale ma molto elegante) */
.lista-testi-moderna .testo-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #111;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lista-testi-moderna .testo-item:hover::before {
    opacity: 1;
}

/* Stili tipografici */
.lista-testi-moderna .testo-meta-sinistra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.4;
}

.lista-testi-moderna .testo-autore {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
    font-size: 0.9em;
}

.lista-testi-moderna .testo-separatore {
    color: #d1d1d1;
    margin: 0 4px;
    font-weight: 300;
}

.lista-testi-moderna .testo-separatore-mobile {
    display: none;
    /* Nascosto su desktop */
}

.lista-testi-moderna .testo-titolo {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lista-testi-moderna .testo-meta-destra {
    flex-shrink: 0;
    padding-left: 15px;
}

.lista-testi-moderna .testo-anno {
    font-weight: 300;
    color: #888;
    font-size: 0.95em;
}

/* Adattamento per dispositivi mobili */
@media (max-width: 768px) {
    .lista-testi-moderna .testo-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .lista-testi-moderna .testo-meta-destra {
        padding-left: 0;
        display: flex;
        align-items: center;
    }

    .lista-testi-moderna .testo-separatore-mobile {
        display: inline-block;
        color: #d1d1d1;
        margin-right: 8px;
    }

    .lista-testi-moderna .testo-item:hover {
        padding-left: 10px;
        /* Riduce lo spostamento su schermi piccoli */
    }
}

/* Stile per i dettagli autore e anno del post corrente */
.dettagli-testo-singolo {
    font-family: inherit;
    padding: 10px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.dettagli-testo-singolo .testo-autore {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
    font-size: 0.9em;
}

.dettagli-testo-singolo .testo-separatore {
    color: #d1d1d1;
    margin: 0 8px;
    font-weight: 300;
}

.dettagli-testo-singolo .testo-anno {
    font-weight: 300;
    color: #888;
    font-size: 0.95em;
}





/* Struttura Generale */
.sezione-libri-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: inherit;
    padding: 0 15px;
}

.singolo-libro-block {
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eaeaea;
}

.singolo-libro-block:last-child {
    border-bottom: none;
    margin-bottom: 30px;
}

/* Griglia Desktop e Tablet (>768px) */
/* L'esclusione :not(.owl-loaded) evita conflitti quando JS attiva il carousel */
.libro-foto-grid:not(.owl-loaded) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 25px;
}

/* Stile dell'immagine condiviso */
.libro-foto-item {
    display: block;
    text-decoration: none;
    overflow: hidden;
    background-color: #fbfbfb;
    position: relative;
    aspect-ratio: 4 / 3;
    transition: all 0.4s ease;
}

.libro-foto-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.libro-foto-inner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px;
    transition: transform 0.6s ease;
}

/* Effetto Hover (Desktop) */
.libro-foto-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.icona-zoom {
    font-size: 24px;
    color: #111;
    transform: translateY(15px);
    transition: transform 0.4s ease;
}

.libro-foto-item:hover .libro-foto-inner img {
    transform: scale(1.03);
}

.libro-foto-item:hover .libro-foto-overlay {
    opacity: 1;
}

.libro-foto-item:hover .icona-zoom {
    transform: translateY(0);
}

/* Titolo Minimalista */
.libro-info {
    text-align: center;
    margin-top: 20px;
}

.libro-titolo {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
    margin: 0;
    font-weight: 400;
}

/* =======================================
   MOBILE (<768px)
   ======================================= */
@media (max-width: 767px) {

    /* 1. Fallback: Se JS è disattivato o Owl non è carico, mostra una singola colonna in grid */
    .libro-foto-grid:not(.owl-loaded) {
        display: grid;
        grid-template-columns: 1fr;
        /* Colonna Singola */
        gap: 20px;
        margin-bottom: 25px;
    }

    .libro-foto-item {
        aspect-ratio: 4 / 3;
        /* Proporzione adatta a tutto schermo */
    }

    /* Rimuovi overlay hover inutile su touch */
    .libro-foto-overlay {
        display: none !important;
    }

    /* 2. Customizzazione Stile Frecce e Dots di OwlCarousel */
    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.8) !important;
        border-radius: 50% !important;
        width: 40px;
        height: 40px;
        color: #333 !important;
        font-size: 20px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .owl-carousel .owl-nav button.owl-prev {
        left: 10px;
    }

    .owl-carousel .owl-nav button.owl-next {
        right: 10px;
    }

    .owl-theme .owl-dots .owl-dot span {
        background: #ccc;
    }

    .owl-theme .owl-dots .owl-dot.active span,
    .owl-theme .owl-dots .owl-dot:hover span {
        background: #333;
    }
}




/* Contenitore Principale */
.esposizioni-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    font-family: inherit;
    padding: 20px 15px;
}

/* Stile dell'Anno Separatore */
.esposizioni-anno {
    font-size: 2.5rem;
    font-weight: 300;
    color: #9b9b9b;
    margin: 60px 0 30px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
    letter-spacing: 2px;
}

.esposizioni-anno:first-child {
    margin-top: 0;
}

/* Contenitore del singolo articolo */
.esposizioni-item {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid #f2f2f2;
}

.esposizioni-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Colonna Immagine */
.esposizioni-immagine {
    flex: 0 0 40%;
    max-width: 40%;
}

.esposizioni-immagine img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.esposizioni-immagine a:hover img {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Colonna Testo */
.esposizioni-contenuto {
    flex: 0 0 60%;
    text-align: center;
    padding-right: 20px;
}

.esposizioni-titolo {
    margin: 0 0 20px 0;
}

.esposizioni-titolo a {
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #222;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.esposizioni-titolo a:hover {
    color: #666;
}

/* Descrizione */
.esposizioni-descrizione {
    font-size: 1.05rem;
    color: #3d3d3d;
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 30px;
}

/* Bottone */
.btn-esposizioni-scopri {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid #222;
    color: #fff !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #222;
}

.btn-esposizioni-scopri:hover {
    background: #fff;
    color: #222 !important;
}

/* =======================================
   RESPONSIVITÀ (Tablet e Mobile)
   ======================================= */
@media (max-width: 850px) {
    .esposizioni-item {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .esposizioni-item {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 50px;
    }

    .esposizioni-immagine {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .esposizioni-contenuto {
        flex: 0 0 100%;
        padding-right: 0;
        text-align: left;
    }

    .esposizioni-anno {
        font-size: 2rem;
        text-align: left;
    }

    .esposizioni-titolo a {
        font-size: 1.4rem;
    }
}