#hero-viaggi {
    padding-top:var(--space-l); 
    padding-bottom: var(--space-m);
    background-image: linear-gradient(var(--bg-alt) 0%, var(--bg-alt) 80%, var(--light) 80%, var(--light) 100%);
}
#soggiorno #hero-viaggi {
    background-image: linear-gradient(var(--tertiary-l-4) 0%, var(--tertiary-l-4) 80%, var(--light) 80%, var(--light) 100%);
}
#terraferma #hero-viaggi {
    background-image: linear-gradient(var(--tf-verde-l-3) 0%, var(--tf-verde-l-3) 80%, var(--light) 80%, var(--light) 100%);
}

.carousel {
  width: 100%;
  height: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  flex-grow: 1;
  border-radius: var(--radius-s);
}

/* Make each carousel cell full width */
.carousel-cell {
  width: 100%; /* Full width for one slide at a time */
  height: 100%; /* Adjust height as needed */
  counter-increment: carousel-cell;
}

.carousel-cell img {  width: 100%;  height: 100%;  object-fit: cover;}
.carousel video-minimal-skin {position:absolute; bottom:0; left:0;}

.carousel-nav {
  width: 100%;
  max-height: 65vh;
  overflow-y: scroll;
}

.carousel-nav .carousel-cell {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--space-2xs) 0;
  cursor: pointer;
  border-radius: var(--radius-s);
  transition: var(--transition-global);
  overflow: hidden;
  background: var(--dark);
}
.carousel-nav .carousel-cell img {opacity: 0.5; transition: var(--transition-global);}

.carousel-nav .carousel-cell:hover img,
.carousel-nav .carousel-cell.is-nav-selected img {
  opacity: 1;
}
.carousel-nav .carousel-cell.carousel-cell--video {
  position: relative;
}
.carousel-nav .carousel-cell.carousel-cell--video:before {
  content: url('data:image/svg+xml,<svg width="37" height="38" viewBox="0 0 37 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.04675 37.5427C2.24376 37.5491 1.46831 37.259 0.897022 36.7322C0.325754 36.2075 0.00229057 35.4908 0 34.7442V2.80047C0 1.8065 0.566675 0.885042 1.49128 0.383771C2.41356 -0.11962 3.55608 -0.128149 4.48758 0.360308L35.1295 16.3322C36.0793 16.8271 36.6667 17.7613 36.6667 18.7724C36.6667 19.7834 36.0793 20.7177 35.1295 21.2125L4.52458 37.1844C4.07262 37.4212 3.56559 37.5428 3.0471 37.5428L3.04675 37.5427ZM3.04675 1.70837C2.83568 1.70837 2.63149 1.7617 2.45026 1.86195C2.07401 2.04539 1.83768 2.40586 1.83539 2.80049V34.7443C1.8331 35.1346 2.05564 35.4951 2.41583 35.6913C2.77603 35.8876 3.22341 35.8918 3.58819 35.6999L34.2301 19.728C34.5995 19.5339 34.8289 19.1713 34.8289 18.7767C34.8289 18.382 34.5995 18.0195 34.2301 17.8253L3.6252 1.84471C3.44854 1.75299 3.24894 1.70606 3.04704 1.7082L3.04675 1.70837Z" fill="%23E9ECEF"/></svg>');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 10;
}

.carousel-nav .carousel-cell:last-child {
  margin-bottom: 0;
}


.carousel-nav .carousel-cell.is-nav-selected {
  background: #ED2;
}


#breadcrumb {
  display: flex; flex-direction: row;
  gap: var(--space-2xs);
  font-size: var(--font-size-2xs);
}

#nome-viaggio {
  font-size: var(--text-2xl);
  font-family: var(--font-title);
  font-weight: 800;
  transition: var(--transition-global);
  transition-delay: 0;
  transform-origin: left top;
}


header#topnav {position:sticky;top:var(--header-h); padding-top: var(--space-xs);z-index:30;display:flex;align-items:center; background-color: var(--light);}
aside {position:sticky; top:calc(var(--header-h) + 160px);align-self:start;}

/* Top horizontal nav */
#nav-inner {
  width:100%; overflow:auto; white-space:nowrap; border-top:1px solid var(--primary-10); border-bottom: 1px solid var(--primary-10); 
  display:flex; flex-direction:row; gap:var(--space-m); padding:var(--space-2xs) 0; transition: var(--transition-global);
  text-transform: uppercase;  overflow-x: auto;  overflow-y: hidden;  white-space: nowrap;  scrollbar-width: thin; /* Per Firefox */  -webkit-overflow-scrolling: touch; /* Per iOS */
}
#nav-inner a {display:inline-block; color:var(--primary); text-decoration:none; position:relative; transition: var(--transition-global);}
#nav-inner a:hover{color: var(--primary); background:var(--bg-alt); }
#nav-inner a.active {color: var(--primary)}
#nav-inner a.active:after {content:''; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background: var(--primary-10);}
#soggiorno #nav-inner a.active:after {background: var(--tertiary-l-4);}
#terraferma #nav-inner a.active:after {background: var(--tf-marrone-l-4);}


#topnav.is-pinned #nome-viaggio {font-size: var(--text-xl); line-height: 1;}
#topnav.is-pinned > div {gap:var(--space-4xs)}
#topnav.is-pinned #nav-inner { padding: 0 0 var(--space-3xs) 0; border-top:1px solid transparent; border-bottom: 1px solid var(--primary-50); }
#topnav.is-pinned #nav-inner a { color: var(--primary-50); }
#topnav.is-pinned #nav-inner a.active { color: var(--primary); }
#topnav.is-pinned #nav-inner a:hover { color: var(--primary); }


/*#nav-inner {}*/

/* Nasconde la scrollbar ma mantiene la funzionalità */
#nav-inner::-webkit-scrollbar { height: 2px;}
#nav-inner::-webkit-scrollbar-track { background: transparent;}
#nav-inner::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 2px;}
#nav-inner::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3);}


/* Page layout */
#content {flex:1;overflow-y:auto;scroll-behavior:smooth;scroll-snap-type:y proximity; border-right:1px solid var(--primary-l-4)}
.content__section { 
  border-bottom:1px solid var(--primary-l-4);
  max-width:70em; width:100%; gap:var(--space-s); display: flex; flex-direction: column; 
  line-height: 1.8; padding-bottom: var(--space-xl); margin-bottom: var(--space-xl); font-size:var(--text-m);
  scroll-snap-align:start; scroll-margin-block-start: calc(var(--header-h) + 50px); padding-right:var(--space-m)}
.content__section:last-child {border-bottom:none; padding-bottom:0}
.content__section .content__section__title {margin-top:0; margin-bottom:var(--space-xs); font-size: var(--text-xl); font-weight:700; width:100%; border-bottom:4px solid var(--primary-10); padding-bottom:var(--space-2xs)}
.content__section .content__section__subtitle {margin-top:0; margin-bottom:var(--space-m); font-size: var(--text-m); font-weight:400;}

#soggiorno .content__section .content__section__title { border-bottom:4px solid var(--tertiary-l-4); }
#terraferma .content__section .content__section__title { border-bottom:4px solid var(--tf-marrone); }
#progettomare .content__section .content__section__title {border-bottom:4px solid var(--primary-10) } /* inutile perchè stesso colore del default di riga 135 */
#crociera .content__section .content__section__title {border-bottom:4px solid var(--primary-10) } /* inutile perchè stesso colore del default di riga 135 */

.content__section .accordion {
  background-color: var(--gray-light);
  color: var(--primary);
  cursor: pointer;
  padding: var(--space-s);
  font-family: var(--font-title);
  width: 100%;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--primary-5);
  text-align: left;
  outline: none;
  transition: 0.4s;
  font-size: var(--text-m);
}
.content__section .accordion:last-child {border-bottom:0}
.content__section .active, .content__section .accordion:hover {
  background-color: var(--primary-5);
}

.content__section .accordion:after {
  content: url('data:image/svg+xml, <svg width="16" height="7" viewBox="0 0 19 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L9.4995 9L18 1" stroke="%230e3a5a" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  color: var(--primary);
  float: right;
  margin-left: 5px;
  transform-origin: 0%;
  transition: var(--transition-global);
}

.content__section .active:after {transform: rotateX(180deg);}

.content__section .panel {
  padding: 0 var(--space-s);
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: var(--text-m);
  border-left: 1px solid var(--primary-5);
  border-left: 1px solid var(--primary-5);
  border-bottom: 1px solid var(--primary-5);
}
.content__section .active + .panel {padding: var(--space-s); }

.iframe-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 40%;
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:none
}
aside .card {box-shadow: none; border-radius: var(--radius-m);}
#crociera aside .card { background: var(--primary); color: var(--light);}
#soggiorno aside .card { background: var(--tertiary-l-4); color: var(--primary);}
#terraferma aside .card { background: var(--tf-verde-l-4); color: var(--primary);}
#progettomare aside .card { background: var(--primary); color: var(--light);}
#barca aside .card { background: var(--primary); color: var(--light);}



#crociera aside .card__header-titolo {color: var(--light); font-size: var(--text-l); font-weight: 400; margin-bottom:var(--space-xs); padding-bottom:var(--space-xs); border-bottom:1px solid var(--tertiary-l-1)}
#barca aside .card__header-titolo {color: var(--light); font-size: var(--text-l); font-weight: 400; margin-bottom:var(--space-xs); padding-bottom:var(--space-xs); border-bottom:1px solid var(--tertiary-l-1)}

aside .card__header-prezzo { font-size: var(--text-xl); font-weight: 700; }
aside .card__header-prezzo span { font-size: var(--text-s); font-weight: normal; align-self:center }
aside .card__header-prezzo span.disclaimer {align-self:self-start }
aside .card__header-sconto {display:flex;}
aside .card__header-sconto .badge-sconto {
  font-size: var(--text-s);
  font-weight: 800;
  padding: var(--space-4xs) var(--space-xs);  
  border-radius: var(--radius-full) var(--radius-full);
  background: var(--tertiary);
  backdrop-filter: blur(2px);
  color: var(--primary);
  position: relative;
  z-index: 10;
  margin:auto 0 auto auto
}
aside .badge-sconto__prezzo-scontato {color:var(--secondary-l-1); font-size: var(--text-s); font-weight: normal; text-decoration: line-through; margin-left: auto; align-self:center}

aside .btn.secondary.border-light {border:1px solid rgba(255,255,255,0.5); padding-left:0; padding-right: 0; }


#altri-viaggi {
  display: flex;
  flex-direction: column ;
  gap: var(--space-l);
}