:root{
  --bg:#fbfbfc;
  --surface:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;

  --container:1180px;
  --sidebar:316px;
  --gap:24px;

  --header-h:36px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family:'Varela Round', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}
.com-content-article__body {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}
.custom-list {
    padding-left: 20px; /* riduce lo spazio */
    margin-left: 0;
}

.custom-list li {
    margin-left: 0;
}
.custom-box-title {
text-transform: uppercase;
}
/* =========================
   STAY BOX
   ========================= */

.stay-box {
    margin: 25px 0;
    padding: 25px;
    border: 1px solid #eee;
    border-radius: 16px;
    background: #f2f2f2;
}

.stay-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 25px;
}

.stay-item:last-child {
    margin-bottom: 0;
}

.stay-image {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
}

.stay-image img {
    width: 110px !important;
    height: 110px !important;
    object-fit: cover;
    border-radius: 5px !important;
}

.stay-content p {
    margin: 0 0 8px 0;
}

.stay-content a {
    color: #ff6600;
    font-weight: bold;
    text-decoration: none;
}

.stay-content a:hover {
    text-decoration: underline;
}
@media (max-width: 768px) {

    .stay-item {
        display: flex;
        flex-direction: row;
        gap: 14px;
        align-items: flex-start;
    }

    .stay-image {
        width: 80px;
        aspect-ratio: 1 / 1;   /* forza quadrato */
        flex-shrink: 0;
        overflow: hidden;      /* taglia eventuali sbordature */
    }

    .stay-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;     /* riempie senza deformare */
        border-radius: 5px;
        display: block;
    }

    .stay-content p {
        margin: 0 0 6px 0;
        font-size: 15px;
        line-height: 1.4;
    }

    .stay-content a {
        font-size: 14px;
    }
}

/* =========================
   CONTAINER
   ========================= */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 16px;
}
.container-fluid{
  width:100%;
  padding:0;
}
.ai-bc-title {
    text-transform: uppercase;
    font-weight: 600;
    padding: 0px 0px 0px 25px;
    font-size: 21px;
}
.ai-bc-title span {
  color: #ff6600;
}
.ai-bc-h3 {
    text-transform: none;
    font-weight: 400;
}
.ai-bc-badge {
display:none;
}
/* =========================
   HEADER sticky
   ========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:var(--header-h);
}

/* Menu base */
.site-header ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:18px;
  align-items:center;
}
.site-header a{
  color:var(--text);
  text-decoration:none;
  font-weight:400;
  transition: color .2s ease, font-weight .2s ease;
}
.site-header a:hover{ color:#ff6600; font-weight:700; }
.site-header .current > a,
.site-header a[aria-current="page"]{ color:#ff6600; font-weight:700; }

/* =========================
   SEZIONI
   ========================= */
.mass-top, .mass-content, .mass-bottom, .footer{
  width:100%;
}
.breadcrumbs{
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.7);
}

/* =====================================================
   NOTE: HERO
   =====================================================
   Il CSS dell'hero è nel modulo (mod_dynamic_hero).
   Qui NON definiamo .hero / .hero-block per evitare conflitti.
*/

/* =====================================================
   FIX: se l'hero è attivo (body.has-hero) nascondi
   titolo + intro image del component articolo
   ===================================================== */
body.option-com_content.view-article.has-hero .com-content-article.item-page .page-header,
body.option-com_content.view-article.has-hero .com-content-article.item-page figure.item-image,
body.option-com_content.view-article.has-hero .com-content-article.item-page .item-image{
  display:none !important;
}

/* =========================
   MAIN layout (grid)
   ========================= */
.main{ padding:24px 0; }

.layout{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--gap);
  align-items:start;
}

body.has-sidebar .layout{
  grid-template-columns: minmax(0,1fr) var(--sidebar);
}

.content{ min-width:0; }

.sidebar{
  position:sticky;
  top: calc(var(--header-h) + 16px);
  align-self:start;
}

/* =========================
   MEDIA dentro il contenuto
   ========================= */
.content img,
.content iframe,
.content video{
  max-width:100%;
  height:auto;
}
.content iframe{ width:100%; }

/* =====================================================
   Border-radius immagini SOLO nel corpo articolo
   (esclude hero e immagini fuori dal body)
   ===================================================== */
body.option-com_content.view-article .com-content-article__body img{
  border-radius:16px;
  display:block;
}

body.option-com_content.view-article .com-content-article__body figure{
  border-radius:16px;
  overflow:hidden;
}

body.option-com_content.view-article .com-content-article__body figure > img,
body.option-com_content.view-article .com-content-article__body p > img{
  border-radius:16px;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 980px){
  /* su mobile: 1 colonna anche se has-sidebar */
  body.has-sidebar .layout{
    grid-template-columns: 1fr !important;
  }

  .sidebar{
    position:static;
    top:auto;
  }

  .site-header ul{
    flex-wrap:wrap;
    gap:12px;
    justify-content:flex-end;
  }
}
.ai-cta {
background: #ececec !important;
}
.ai-highlights {
background: #f2f2f2 !important;
}
/* =========================
   HEADER OVERLAY (no banda bianca)
   ========================= */

/* l'header non occupa spazio: sta sopra l'immagine */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 9999;
  background: transparent !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;

  pointer-events: none; /* clic passa sotto, tranne sul logo */
}

/* contenitore: solo per centrare il logo */
.site-header .header-inner{
  min-height: 0 !important;
  padding: 0 !important;
  justify-content: center !important;
}

/* nascondi completamente area menu (tanto non lo usi) */
.site-header .header-right{
  display: none !important;
}

/* logo come “badge” piccolo sopra l’immagine */
.site-header .header-left{
  pointer-events: auto; /* clic solo sul logo */
  margin: 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.75);
  padding: 0px 20px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  height: 30px !important;
}

/* logo piccolo */
.site-header .header-left img{
  max-height: 20px;
  width: auto;
  display: block;
}

/* MOBILE: ancora più piccolo */
@media (max-width: 980px){
  .site-header .header-left{
    padding: 3px 8px;
    border-radius: 0 0 10px 10px;
    height: 30px !important;
  }
  .site-header .header-left img{
    max-height: 22px;
  }
}

.site-header{
  margin-bottom: -10px; /* si sovrappone ancora di più */
}
/* =========================
   MOD TITLE (stile coerente)
   ========================= */
/* Joomla può stampare il titolo con tag/class diverse: copriamo i casi comuni */
.moduletable > h3,
.moduletable > h2,
.module-title,
.mod-title,
h3.moduletitle{
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #111827;
}

/* linea sotto + accento arancio */
.moduletable > h3,
.moduletable > h2,
.module-title,
.mod-title,
h3.moduletitle{
  position: relative;
  padding-bottom: 10px;
  padding-left: 55px;
  font-size: 24px;
  /*text-transform: uppercase;*/
  font-weight: 800;
  padding-top: 25px;
}

.moduletable > h3:after,
.moduletable > h2:after,
.module-title:after,
.mod-title:after,
h3.moduletitle:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: #ff6600;
  border-radius: 99px;
  padding-left: 55px;
    margin-left: 55px;
}

/* se su mobile lo vuoi più “compatto” */
@media (max-width: 980px){
  .moduletable > h3,
  .moduletable > h2,
  .module-title,
  .mod-title,
  h3.moduletitle{
    font-size: 24px;
    margin-bottom: 12px;
    padding-top: 25px;
  }
  /* linea sotto + accento arancio */
.moduletable > h3,
.moduletable > h2,
.module-title,
.mod-title,
h3.moduletitle{
  position: relative;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-top: 25px;
}

.moduletable > h3:after,
.moduletable > h2:after,
.module-title:after,
.mod-title:after,
h3.moduletitle:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: #ff6600;
  border-radius: 99px;
  padding-left: 15px;
    margin-left: 15px;
}
}

/* =========================
   CARDS: no scrollbar (resta swipe)
   ========================= */
.ai-cards{
  overflow-x: auto;                 /* necessario per swipe */
  -webkit-overflow-scrolling: touch;/* inerzia iOS */
  scrollbar-width: none;            /* Firefox: nasconde barra */
}

/* Chrome/Safari/Edge: nasconde barra */
.ai-cards::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}
.ta-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:100000;
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
}

.ta-fab-img{
  height:25px;
  display:block;
  border-radius:50%;
  /**box-shadow:0 8px 20px rgba(0,0,0,.25);**/
  transition:transform .2s ease, box-shadow .2s ease;
}

.ta-fab:hover .ta-fab-img{
  transform:scale(1.05);
  /**box-shadow:0 10px 28px rgba(0,0,0,.35);**/
}
.hero-block > picture,
.hero-block picture {
  display:block;
  width:100%;
}

.hero-block picture > img,
.hero-block > img.hero-img{
  display:block;
  width:100%;
  height:auto;
}
.become-a-partner {
display:none;
}
/* =========================
   titolo h3
   ========================= */
.title-underline-orange {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.title-underline-orange::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;        /* lunghezza della linea */
    height: 3px;        /* spessore */
    background: #ff6600;
}
/* =========================
   pulsanti trasporti
   ========================= */
.btn-transport {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #ff7a1a, #ff6600);
    color: #ffffff !important;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 6px 14px rgba(255, 102, 0, 0.35);
    transition: all 0.2s ease;
    line-height: 1.2;
}

.btn-transport {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #ff7a1a, #ff6600);
    color: #ffffff !important;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 6px 14px rgba(255, 102, 0, 0.35);
    transition: all 0.2s ease;
    line-height: 1.2;
}

.btn-transport:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(255, 102, 0, 0.45);
}

/* BASE ICONA */
.btn-transport::before {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    background-color: white;

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.btn-flight::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M2.5 19l19-7-19-7v5l13 2-13 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M2.5 19l19-7-19-7v5l13 2-13 2z'/%3E%3C/svg%3E");
}

.btn-train::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2c-5 0-9 2-9 5v8c0 2 2 3 3 3l-2 2h2l2-2h6l2 2h2l-2-2c1 0 3-1 3-3V7c0-3-4-5-9-5zM5 9h14v6H5V9zm2 1v2h2v-2H7zm8 0v2h2v-2h-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2c-5 0-9 2-9 5v8c0 2 2 3 3 3l-2 2h2l2-2h6l2 2h2l-2-2c1 0 3-1 3-3V7c0-3-4-5-9-5zM5 9h14v6H5V9zm2 1v2h2v-2H7zm8 0v2h2v-2h-2z'/%3E%3C/svg%3E");
}
.btn-bus::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 16c0 2 2 3 3 3l-2 2h2l2-2h6l2 2h2l-2-2c1 0 3-1 3-3V6c0-3-4-4-8-4S4 3 4 6v10zM6 7h12v6H6V7zm0 7h12v1H6v-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 16c0 2 2 3 3 3l-2 2h2l2-2h6l2 2h2l-2-2c1 0 3-1 3-3V6c0-3-4-4-8-4S4 3 4 6v10zM6 7h12v6H6V7zm0 7h12v1H6v-1z'/%3E%3C/svg%3E");
}