/* COLORE TRASPARENZA MENU */

#sp-header.header-sticky {
    top: 0px;
    background-color: #bd985e;
  /*   background-color: #00000069;*/
}

/*--------------------------------*/


/* === Animated underline for SP Page Builder Heading === */
.sppb-addon-heading.fade-line {
  position: relative;
  display: inline-block;
  overflow: visible;
}

/* linea iniziale invisibile */
.sppb-addon-heading.fade-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px; /* distanza sotto il testo */
  height: 3px;
  width: 0%;
  background-color: #c7c7c7;
  opacity: 0;
  transform: translateX(-50%);
  transition:
    opacity 0.6s ease,
    width 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}

/* quando visibile / animata */
.sppb-addon-heading.fade-line.animate::after {
  opacity: 1;
  width: 40%;
}

/* effetto di ingresso (puoi usarlo con scroll reveal o on load) */
@keyframes fadeLine {
  0% {
    opacity: 0;
    width: 100%;
  }
  100% {
    opacity: 1;
    width: 40%;
  }
}

.sppb-addon-heading.fade-line.in-view::after {
  animation: fadeLine 1.6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* === Animated underline for SP Page Builder Heading === */
/* Versione base */
.sppb-addon-heading.fade-line,
.sppb-addon-heading.hover-line {
  position: relative;
  display: inline-block;
  overflow: visible;
}

/* Linea invisibile iniziale */
.sppb-addon-heading.fade-line::after,
.sppb-addon-heading.hover-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  height: 3px;
  width: 0%;
  background-color: #c7c7c7;
  opacity: 0;
  transform: translateX(-50%);
  transition:
    opacity 0.6s ease,
    width 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}

/*--------------------------------*/

/* ===== VERSIONE ON LOAD / ANIMATA ===== */
.sppb-addon-heading.fade-line.in-view::after {
  animation: fadeLine 1.6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Keyframes */
@keyframes fadeLine {
  0% {
    opacity: 0;
    width: 100%;
  }
  100% {
    opacity: 1;
    width: 40%;
  }
}

/* ===== VERSIONE HOVER ONLY ===== */
/* wrapper heading con effetto hover */
.sppb-addon-header.hover-line .sppb-addon-title {
    position: relative;
    display: inline-block; /* così la linea prende solo la larghezza del testo */
    vertical-align: bottom;
    line-height: 1.2;
}

/* la linea iniziale: nascosta, larghezza 0 */
.sppb-addon-header.hover-line .sppb-addon-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px; /* distanza sotto al testo, regola a gusto */
    height: 3px;
    width: 0%;
    background-color: #68908c;
    opacity: 0;
    transform: translateX(-50%);
    transition:
        opacity 0.4s ease,
        width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    pointer-events: none;
}

/* al passaggio del mouse sul blocco heading */
.sppb-addon-header.hover-line:hover .sppb-addon-title::after {
    opacity: 1;
    width: 40%;
}


/* CAROSELLO IMMAGINI SERVIZI */
/* Ogni elemento del carosello è un contenitore posizionato */
.sppb-carousel-extended-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* L'immagine riempie l'elemento */
.sppb-carousel-extended-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   FASCIA IN BASSO (overlay dorato + testo)
   ========================================= */

/* Questa è la barra dorata semitrasparente ancorata in basso */
.sppb-carousel-extended-item .sppb-carousel-extended-content-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    /* altezza base della fascia: 25% dell'immagine */
    height: 25%;
    min-height: 60px; /* non meno di 60px su desktop per leggibilità */

    background-color: rgba(189, 152, 94, 0.7); /* #bd985e al 70% */

    /* layout interno per allineare testo in basso */
    display: flex;
    align-items: flex-end;
    padding: 0.75rem 1rem;
    box-sizing: border-box;

    z-index: 10;
    overflow: hidden;
}

/* Maschera per effetto wipe su hover:
   - Ha lo stesso colore della fascia
   - All'inizio copre tutta la fascia (scaleX(1))
   - In hover si ritira verso destra (scaleX(0))
   Risultato visivo: la fascia dorata "scompare" da sinistra verso destra
*/
.sppb-carousel-extended-item .sppb-carousel-extended-content-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(189, 152, 94, 0.7);

    transform-origin: left center;
    transform: scaleX(1);
    transition: transform 0.6s ease;

    z-index: 1; /* sotto il testo, sopra il background */
}

/* =========================================
   TITOLO
   ========================================= */

/* Stile testo normale sopra la fascia */
.sppb-carousel-extended-item .sppb-carousel-extended-heading {
    position: relative;
    z-index: 2; /* sopra la maschera ::after */
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 0;
    max-width: 100%;

    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Limitiamo altezza testo desktop a 2 righe,
       così non esce troppo dalla fascia base */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    transition: color 0.4s ease;
}

/* =========================================
   HOVER (desktop / pointer)
   ========================================= */

.sppb-carousel-extended-item:hover .sppb-carousel-extended-heading {
    color: #bd985e; /* testo diventa dorato */
}

.sppb-carousel-extended-item:hover .sppb-carousel-extended-content-wrap::after {
    transform: scaleX(0); /* wipe da sinistra verso destra */
}

/* =========================================
   RESPONSIVE
   ========================================= */

/* Tablet: un po' più spazio fascia, font un filo più piccolo */
@media (max-width: 768px) {

    .sppb-carousel-extended-item .sppb-carousel-extended-content-wrap {
        height: 30%;
        min-height: 56px;
        padding: 0.6rem 0.75rem;
    }

    .sppb-carousel-extended-item .sppb-carousel-extended-heading {
        font-size: 0.9rem;
        line-height: 1.3;
        -webkit-line-clamp: 2; /* ancora 2 righe qui */
    }
}

/* Mobile stretto:
   - la fascia diventa più alta (35%)
   - togliamo il line clamp (così il testo NON sparisce mai)
   - font più piccolo per stare dentro
*/
@media (max-width: 480px) {

    .sppb-carousel-extended-item .sppb-carousel-extended-content-wrap {
        height: 35%;
        min-height: 70px;
        padding: 0.6rem 0.75rem;
    }

    .sppb-carousel-extended-item .sppb-carousel-extended-heading {
        font-size: 0.8rem;
        line-height: 1.25;
        display: block;            /* rimuove il -webkit-box */
        -webkit-line-clamp: unset; /* niente clamp su mobile */
        -webkit-box-orient: unset;
        text-overflow: clip;
        white-space: normal;       /* permettiamo andare a capo */
        max-height: none;          /* niente taglio verticale */
    }
}

/* In caso SP Page Builder metta altri overlay con z-index alto,
   ci assicuriamo che testo / fascia stiano sopra l'immagine */
.lexyort-image-carousel .sppb-carousel-extended-item {
    z-index: 0;
}
.lexyort-image-carousel .sppb-carousel-extended-item img {
    z-index: 0;
    position: relative;
}
.lexyort-image-carousel .sppb-carousel-extended-item .sppb-carousel-extended-content-wrap {
    z-index: 10;
}
.lexyort-image-carousel .sppb-carousel-extended-item .sppb-carousel-extended-heading {
    z-index: 11;
}


/* ========= Brush stroke hover effect =========
   Applicare la classe .brush-stroke-hover al contenitore che racchiude l'immagine
   Personalizzazioni rapide via CSS variables
*/
.brush-stroke-hover {
  /* Variabili personalizzabili */
  --brush-trail-color: 255,255,255;         /* RGB senza alpha */
  --brush-trail-alpha: 0.25;                /* 0–1 scia tenue */
  --brush-tip-color: 255,255,255;           /* RGB senza alpha */
  --brush-tip-alpha: 0.80;                  /* 0–1 punta pennello */
  --trail-thickness: 5px;                   /* spessore scia */
  --tip-size: 24px;                         /* diametro punta */
  --path-rotate: 20deg;                     /* inclinazione arco */
  --path-scale: 2.5;                        /* scala del path */
  --path-offset: 15px;                      /* margine top/left */
  --anim-duration: 0.7s;                    /* durata animazione */
  --anim-ease: ease-out;                    /* easing animazione */

  position: relative;
  overflow: hidden;
  display: block;
}

/* Scia della pennellata */
.brush-stroke-hover::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  border-top: var(--trail-thickness) solid rgba(var(--brush-trail-color), var(--brush-trail-alpha));
  border-right: var(--trail-thickness) solid rgba(var(--brush-trail-color), var(--brush-trail-alpha));
  border-bottom: 0;
  border-left: 0;
  border-top-right-radius: 100%;

  top: var(--path-offset);
  left: var(--path-offset);

  transform: rotate(var(--path-rotate));
  transform-origin: top left;

  opacity: 0;
  transition: opacity 0.15s ease-out;
  pointer-events: none;
  z-index: 4;
}

/* Punta del pennello */
.brush-stroke-hover::after {
  content: "";
  position: absolute;
  width: var(--tip-size);
  height: var(--tip-size);
  border-radius: 50%;
  background-color: rgba(var(--brush-tip-color), var(--brush-tip-alpha));
  box-shadow:
    0 0 20px rgba(var(--brush-tip-color), 0.45),
    0 0 6px  rgba(var(--brush-tip-color), 0.8);

  /* Traiettoria: Bezier diagonale alto-sx -> basso-dx */
  offset-path: path("M 0 0 C 30 10, 60 50, 100 100");
  offset-distance: 0%;
  offset-rotate: 0deg;

  opacity: 0;
  pointer-events: none;
  z-index: 5;

  transform: translate(var(--path-offset), var(--path-offset)) scale(var(--path-scale));
  transform-origin: top left;

  transition: opacity 0.15s ease-out;
}

/* Hover: mostra scia e anima la punta */
.brush-stroke-hover:hover::before {
  opacity: 1;
}

.brush-stroke-hover:hover::after {
  opacity: 1;
  animation: draw-brush-stroke var(--anim-duration) var(--anim-ease) forwards;
}

/* Animazione della punta lungo il path */
@keyframes draw-brush-stroke {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* Accessibilità: riduci animazioni se preferito */
@media (prefers-reduced-motion: reduce) {
  .brush-stroke-hover::after,
  .brush-stroke-hover:hover::after {
    animation: none !important;
    offset-distance: 100%;
  }
}

/* Fallback di base quando*


/* Stato normale: sfondo al 100% */
.aurum-zoom {
  background-size: 100% !important;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 0.6s ease;
}


/* Mouse sopra la colonna: zoom al 120% */
.aurum-zoom:hover {
  background-size: 120% !important;
}

/* =====================================
   MENU PRINCIPALE – spazio ORIZZONTALE
   ===================================== */

.sp-megamenu-parent > li > a {
    padding-left: 8px;   /* default ~24px */
    padding-right: 8px;
}


ground-size: 100% !important;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 0.6s ease;
}


/* Mouse sopra la colonna: zoom al 120% */
.aurum-zoom:hover {
  background-size: 120% !important;
}

/* colore sfondo Menu offcanvas  */
.offcanvas-menu {
    background-color: #bd985e; !important;
}


/* === IMMAGINI ARROTONDATE Arrotondamento universale per qualsiasi container immagine === */

/* Tutti i link che contengono solo un'immagine (caso tipicissimo Joomla), escluso il logo */
a:has(> img):not(.logo a),
a:has(> picture):not(.logo a) {
    display: inline-block;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative;
}

/* Container generici di immagini - cattura qualsiasi classe contenga "image", "img", "thumb", "media", "photo" */
[class*="image"]:not(svg):not(.image-overlay):not(.logo-image),
[class*="img-"]:not(svg):not(.logo-image),
[class*="thumb"],
[class*="media-"],
[class*="photo"],
[class*="gallery"],
figure,
picture {
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Pseudo-elementi overlay su qualsiasi container immagine */
[class*="image"]:not(.logo-image)::before,
[class*="image"]:not(.logo-image)::after,
[class*="img-"]:not(.logo-image)::before,
[class*="img-"]:not(.logo-image)::after,
[class*="thumb"]::before,
[class*="thumb"]::after,
[class*="hover"]::before,
[class*="hover"]::after,
[class*="overlay"]::before,
[class*="overlay"]::after,
a:has(> img):not(.logo a)::before,
a:has(> img):not(.logo a)::after,
figure::before,
figure::after {
    border-radius: 16px !important;
}

/* Overlay come elementi separati */
[class*="overlay"],
[class*="hover-effect"],
[class*="hover-mask"],
[class*="image-mask"] {
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* === Arrotondamento angoli per video e iframe === */

/* Video HTML5 nativi */
video {
    border-radius: 16px;
    overflow: hidden;
}

/* Iframe (YouTube, Vimeo, embed vari) */
iframe {
    border-radius: 16px;
}

/* Container video di Joomla / SP Page Builder / Bootstrap */
.sppb-video-container,
.sppb-addon-video,
.sppb-addon-video-popup,
.sppb-video-wrapper,
.video-wrapper,
.video-container,
.video-responsive,
.embed-responsive,
.ratio,                   /* Bootstrap 5 - usato in Joomla 5 */
.plyr,                    /* Player Plyr */
.plyr__video-wrapper,
.jw-wrapper,              /* JW Player */
.video-js,                /* Video.js */
.vjs-poster,
.youtube-player,
.vimeo-wrapper {
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Poster/thumbnail dei video con play button overlay */
.sppb-video-popup-content,
.sppb-video-image,
.video-poster,
.video-thumbnail,
.play-button-wrapper {
    border-radius: 16px;
    overflow: hidden;
}

/* Video di sfondo (se usi background video in sezioni Page Builder) */
.sppb-section-video-bg,
.sppb-bg-video,
.section-video-bg {
    border-radius: 16px;
    overflow: hidden;
}

/* === Eccezione logo: deve rimanere invariato === */
.logo,
.logo a,
.logo img,
.logo .logo-image,
.logo a::before,
.logo a::after,
.logo img::before,
.logo img::after {
    border-radius: 0 !important;
    overflow: visible !important;
    filter: none !important;
}

/* Mantiene il comportamento normale del link del logo */
.logo a {
    display: inline-block;
    position: static !important;
}

/* Sicurezza aggiuntiva: nessuna modifica grafica sull'immagine logo */
.logo img,
.logo .logo-image {
    border-radius: 0 !important;
    overflow: visible !important;
    filter: none !important;
    clip-path: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}



/* === Nasconde titolo e featured image nei dettagli articolo === */

body.view-article .item-page > .page-header,
body.view-article .item-page .page-header h1,
body.view-article .item-page .page-header h2,
body.view-article .item-page > .item-image,
body.view-article .item-page > figure.item-image,
body.view-article .item-page .article-intro-image,
body.view-article .item-page .article-full-image {
    display: none !important;
}


#sp-bottom {
    padding: 80px 0 10px !important; 
    font-size: 14px;
    line-height: 1.6;
}

/* BOX OFFERTE E LIFESTYLE HOME PAGE */
/* ==========================================================
   Offerte & Experience
   Sezione: #section-id-1622231428355

   Card con:
   - solo titolo in overlay sulla foto
   - tag nascosti
   - box oro per Offerte
   - box verde per Lifestyle
   - hover solo sullo sfondo del box
   - nessuna sottolineatura sui link
   ========================================================== */


/* ==========================================================
   Struttura card
   ========================================================== */

#section-id-1622231428355 .sppb-addon-article {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    z-index: 1;
}

/* Link immagine */
#section-id-1622231428355 .sppb-article-img-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    z-index: 1;
}

/* Immagine */
#section-id-1622231428355 .sppb-article-img-wrap img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;

    transition: none !important;
    transform: none !important;
    filter: none !important;
}

/* Elimina eventuali hover sull'immagine */
#section-id-1622231428355 .sppb-addon-article:hover img,
#section-id-1622231428355 .sppb-article-img-wrap:hover img,
#section-id-1622231428355 .sppb-addon-article:hover .sppb-article-img-wrap img {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}


/* ==========================================================
   Nasconde tag/categorie visibili
   SPA, Offerte, Lifestyle, Experiences, Bike, ecc.
   Restano nel DOM e vengono usati per colorare il box
   ========================================================== */

#section-id-1622231428355 .sppb-article-meta,
#section-id-1622231428355 .sppb-article-meta ul.tags,
#section-id-1622231428355 .sppb-article-meta ul.tags li,
#section-id-1622231428355 .sppb-article-meta ul.tags li a {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* ==========================================================
   Box titolo sopra la foto
   ========================================================== */

#section-id-1622231428355 .sppb-article-info-wrap {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    top: auto !important;
    z-index: 5;

    width: auto;
    max-width: calc(100% - 32px);
    margin: 0 !important;
    padding: 13px 16px;

    /* Default: oro Boffenigo */
    background: rgba(189, 152, 94, 0.84) !important;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border-radius: 0;
    box-shadow: none;

    transform: none !important;
    transition: background 0.25s ease, background-color 0.25s ease !important;
}

/* Titolo articolo */
#section-id-1622231428355 .sppb-article-info-wrap h3 {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 0.035em;
    text-transform: none;

    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;

    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Link titolo: stato normale e hover */
#section-id-1622231428355 .sppb-article-info-wrap h3 a,
#section-id-1622231428355 .sppb-article-info-wrap h3 a:link,
#section-id-1622231428355 .sppb-article-info-wrap h3 a:visited,
#section-id-1622231428355 .sppb-article-info-wrap h3 a:hover,
#section-id-1622231428355 .sppb-article-info-wrap h3 a:focus,
#section-id-1622231428355 .sppb-article-info-wrap h3 a:active,
#section-id-1622231428355 .sppb-addon-article:hover .sppb-article-info-wrap h3 a,
#section-id-1622231428355 .sppb-article-info-wrap:hover h3 a {
    color: #ffffff !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    outline: none !important;
}

/* Elimina pseudo-elementi decorativi del tema sul titolo/link */
#section-id-1622231428355 .sppb-article-info-wrap h3::before,
#section-id-1622231428355 .sppb-article-info-wrap h3::after,
#section-id-1622231428355 .sppb-article-info-wrap h3 a::before,
#section-id-1622231428355 .sppb-article-info-wrap h3 a::after,
#section-id-1622231428355 .sppb-addon-article:hover .sppb-article-info-wrap h3::before,
#section-id-1622231428355 .sppb-addon-article:hover .sppb-article-info-wrap h3::after,
#section-id-1622231428355 .sppb-addon-article:hover .sppb-article-info-wrap h3 a::before,
#section-id-1622231428355 .sppb-addon-article:hover .sppb-article-info-wrap h3 a::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    border: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   Colori box per tipologia
   Include:
   - catid=9 e catid=20 per Offerte
   - catid=10 e catid=26 per Lifestyle
   - tag-10 e tag-11 come fallback
   ========================================================== */


/* OFFERTA / OFFERTE - normale */
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=9"]) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=20"]) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(.tag-10) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/offerte"]) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/offerta"]) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/offers"]) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/offer"]) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/angebote"]) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/angebot"]) .sppb-article-info-wrap {
    background: rgba(189, 152, 94, 0.84) !important;
}

/* OFFERTA / OFFERTE - hover più chiaro */
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=9"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=20"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(.tag-10):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/offerte"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/offerta"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/offers"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/offer"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/angebote"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/angebot"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=9"]) .sppb-article-info-wrap:hover,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=20"]) .sppb-article-info-wrap:hover,
#section-id-1622231428355 .sppb-addon-article:has(.tag-10) .sppb-article-info-wrap:hover {
    background: rgba(210, 178, 125, 0.94) !important;
}


/* LIFESTYLE - normale */
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=10"]) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=26"]) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=27"]) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=28"]) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(.tag-11) .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/lifestyle"]) .sppb-article-info-wrap {
    background: rgba(113, 144, 134, 0.86) !important;
}

/* LIFESTYLE - hover più chiaro */
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=10"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=26"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=27"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=28"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(.tag-11):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="/tag/lifestyle"]):hover .sppb-article-info-wrap,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=10"]) .sppb-article-info-wrap:hover,
#section-id-1622231428355 .sppb-addon-article:has(a[href*="catid=26"]) .sppb-article-info-wrap:hover,
#section-id-1622231428355 .sppb-addon-article:has(.tag-11) .sppb-article-info-wrap:hover {
    background: rgba(137, 170, 159, 0.94) !important;
}


/* ==========================================================
   Anti-sottolineatura drastico solo dentro questa sezione
   Serve se il tema applica effetti globali ai link
   ========================================================== */

#section-id-1622231428355 a,
#section-id-1622231428355 a:hover,
#section-id-1622231428355 a:focus,
#section-id-1622231428355 a:active,
#section-id-1622231428355 .sppb-addon-article:hover a {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

#section-id-1622231428355 a::before,
#section-id-1622231428355 a::after,
#section-id-1622231428355 a:hover::before,
#section-id-1622231428355 a:hover::after,
#section-id-1622231428355 .sppb-addon-article:hover a::before,
#section-id-1622231428355 .sppb-addon-article:hover a::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


/* ==========================================================
   Spaziature e immagine grande laterale
   ========================================================== */

#section-id-1622231428355 .sppb-addon-article-layout {
    margin-bottom: 34px;
}

/* Immagine grande laterale */
#section-id-1622231428355 .sppb-addon-single-image,
#section-id-1622231428355 .sppb-addon-single-image-container {
    position: relative;
    z-index: 1;
}

#section-id-1622231428355 .sppb-addon-single-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}


/* ==========================================================
   Responsive tablet
   ========================================================== */

@media (max-width: 991px) {
    #section-id-1622231428355 .sppb-article-info-wrap {
        left: 14px;
        right: 14px;
        bottom: 14px;
        max-width: calc(100% - 28px);
        padding: 12px 14px;
    }

    #section-id-1622231428355 .sppb-article-info-wrap h3 {
        font-size: 14px;
        line-height: 1.22;
        letter-spacing: 0.03em;
        max-width: 100%;
    }
}

/* Tablet stretto */
@media (min-width: 768px) and (max-width: 991px) {
    #section-id-1622231428355 .sppb-article-info-wrap {
        left: 18px;
        right: 18px;
        bottom: 16px;
        max-width: calc(100% - 36px);
        padding: 12px 15px;
    }

    #section-id-1622231428355 .sppb-article-info-wrap h3 {
        font-size: 13px;
        line-height: 1.22;
    }
}


/* ==========================================================
   Responsive mobile
   ========================================================== */

@media (max-width: 767px) {
    /* Evita sovrapposizioni tra colonne/addon su mobile */
    #section-id-1622231428355 .sppb-row,
    #section-id-1622231428355 .sppb-column,
    #section-id-1622231428355 .sppb-column-addons,
    #section-id-1622231428355 .sppb-addon-wrapper,
    #section-id-1622231428355 .sppb-addon {
        position: relative;
        z-index: auto;
    }

    /* Una card per riga su mobile */
    #section-id-1622231428355 .sppb-addon-article-layout {
        width: 100%;
        margin-bottom: 34px;
    }

    #section-id-1622231428355 .sppb-addon-article {
        margin-bottom: 0;
        overflow: hidden;
        z-index: 2;
    }

    /* Immagine grande: la teniamo nel flusso e senza sovrapporsi */
    #section-id-1622231428355 .sppb-addon-single-image,
    #section-id-1622231428355 .sppb-addon-single-image-container {
        position: relative;
        z-index: 1;
        margin-top: 24px;
        margin-bottom: 34px;
    }

    #section-id-1622231428355 .sppb-addon-single-image img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 14px;
    }

    /* Box titolo mobile */
    #section-id-1622231428355 .sppb-article-info-wrap {
        left: 18px;
        right: 18px;
        bottom: 18px;
        max-width: calc(100% - 36px);
        padding: 12px 16px;
    }

    #section-id-1622231428355 .sppb-article-info-wrap h3 {
        font-size: 14px;
        line-height: 1.25;
        letter-spacing: 0.03em;
    }
}


/* ==========================================================
   Mobile molto stretto
   ========================================================== */

@media (max-width: 480px) {
    #section-id-1622231428355 .sppb-article-info-wrap {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: calc(100% - 32px);
        padding: 11px 14px;
    }

    #section-id-1622231428355 .sppb-article-info-wrap h3 {
        font-size: 13px;
        line-height: 1.25;
        letter-spacing: 0.025em;
    }

    #section-id-1622231428355 .sppb-addon-article-layout {
        margin-bottom: 30px;
    }
}