header {transition:var(--transition-global)}
header:not(.fixed) {background:transparent; border:1px solid transparent; backdrop-filter: unset;}
header:not(.fixed) #logo svg path {fill:var(--light)}
header:not(.fixed) .header-right .nav a {color:var(--light)}
header:not(.fixed) .header-right .nav a:hover {color:var(--primary-l-4)}


/* Taglio curvo in basso a destra */
.hero-cut {
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  z-index: 2;
  pointer-events: none;
}
.hero-cut svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* =========================
   Last Minute
   ========================= */

#last-minute {
  padding: var(--space-2xl) 0;
  display: flex;
  flex-direction: column ;
  gap: var(--space-l);
}

/* pallini decorativi (come screenshot) */
.last-minute::after {
  content: "";
  position: absolute;
  right: clamp(10px, 4vw, 64px);
  top: 48px;
  width: 20%;
  height: 100%;
  opacity: 0.5;
  background-image: radial-gradient(var(--bg-alt) 20px, transparent 20px);  
  background-size: 75px 75px;
  pointer-events: none;
  z-index: 0;
}

/* carousel */
.last-minute__carousel .flickity-page-dots {
  bottom: 0px;
}
.last-minute__carousel .flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: transparent;
  border: 2px solid var(--primary);
}
.last-minute__carousel .flickity-page-dots .dot.is-selected {
  background: var(--primary);
}
.last-minute__carousel .flickity-button:disabled {
  display: none;
}
/* grid mosaico: colonne + altezze rifinite */
.last-minute__grid {
  --row: 232px;
  display: grid;
  gap: var(--space-m);
  /* 4 colonne: piccola | grande | piccola | piccola */
  grid-template-columns:
    minmax(240px, 0.95fr)
    minmax(380px, 1.35fr)
    minmax(240px, 1fr)
    minmax(240px, 1fr);
  grid-template-rows: var(--row) var(--row);
  grid-template-areas:
    "a b c c"
    "d b e f";
}
/* last minute card*/
.last-minute-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  transition: var(--transition-global);
}
.last-minute-card__media {
  position: absolute;
  inset: 0;
  transform: scale(1.01);
  transition: var(--transition-global);
  background-size:cover
}
.last-minute-card__media img { 
  width:100%; height:100%; object-fit: cover;
  background-size: cover; background-position:50% 50% 
}
.last-minute-card__overlay {
  position: absolute;
  inset: 0;
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-global);
}
.last-minute-card__overlay:after {
  content: "";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  width:100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.58));
  transition: var(--transition-global);
  opacity: 0,75;
}
.last-minute-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  z-index: 100;
}
.badge-sconto {
  font-size: var(--text-s);
  font-weight: 800;
  padding: var(--space-4xs) var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--tertiary-90);
  backdrop-filter: blur(2px);
  color: var(--primary);
}
.badge-partenza {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  gap: var(--space-2xs);
  font-size: var(--text-s);
  font-weight: 400;
  padding: var(--space-4xs) var(--space-xs);
  border-radius: var(--radius-full);
  color: #fff;
  background: var(--primary-70);
  backdrop-filter: blur(2px);
}
.badge-partenza svg {
  fill: currentColor;
  opacity: 0.95;
}
.last-minute-card__viaggio {
  display:flex; 
  flex-direction:column; 
  gap: var(--space-4xs);
  z-index: 100;
}
.last-minute-card__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 28px);
  color: #fff;
  line-height: 1.02;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
.last-minute-card__sub {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.last-minute-card__bottom--arrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s);
}
.round-arrow {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(11, 58, 89, 0.95);
  box-shadow: var(--shadow-m);
  opacity:0;
  transition: var(--transition-global);
}
.round-arrow svg {
  fill: currentColor;
}

.last-minute-card:hover { box-shadow:#f3c531 5px 5px 0px 0px;}
.last-minute-card:hover .last-minute-card__media { transform: scale(1.1);}
.last-minute-card:hover .last-minute-card__overlay:after  {opacity:0.65}
.last-minute-card:hover .round-arrow { opacity:1}

.last-minute-card.a {
  grid-area: a;
}
.last-minute-card.b {
  grid-area: b;
}
.last-minute-card.c {
  grid-area: c;
}
.last-minute-card.d {
  grid-area: d;
}
.last-minute-card.e {
  grid-area: e;
}
.last-minute-card.f {
  grid-area: f;
}



/* =========================
   WWF band
   ========================= */
#wwf {  
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--space-l);
  min-height:80vh;
  padding-top: var(--space-2xl);
  position: relative;
  overflow: hidden;
}
#wwf:before {  
  content: '';
  position: absolute;
  top: 0; left:0; right: 0; bottom:0;
  width: 100%;
  height: 100%;
  border-bottom-left-radius: calc(var(--radius-l) * 3);
  border-bottom-right-radius: calc(var(--radius-l) * 3);
  background-image: url(../images/sample_1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
#wwfcard { 
    border-radius: calc(var(--radius-xl) * 2);
    width: min(1400px, 100%);
    margin-inline: auto;
    position:relative;
    overflow: hidden;
    align-self: center; 
    z-index: 10;
}
#wwfcard:before {/* Ellipse 5 */
    content: '';
    position: absolute;
    width: 1000px;
    height: 750px;
    left: -25%;
    top: -80%;
    border-radius: var(--radius-full);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 1) 100%);
    opacity: 0.75;
    transform: rotate(-25deg);
}
#wwfcard:after { /* BG Ellisse */
    content: '';
    position: absolute;
    width: 1000px;
    height: 750px;
    right: -25%;
    top: 0;
    border-radius: var(--radius-full);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 1) 100%);
    opacity: 0.75;
    transform: rotate(54.65deg);
}
#wwfcard__inner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    position: relative;
}
#wwfcard__inner img {margin-left:auto;}
.wwfcard__wrap-button {display:flex}
.wwfcard__wrap-button .btn {margin-left:auto; margin-top: auto;}



/* =========================
   IMBARCAZIONI
   ========================= */
#imbarcazioni {
  padding: var(--space-2xl) 0;
  display: flex;
  flex-direction: column ;
  gap: var(--space-l);
}
.imbarcazioni-card {
  padding: 0;
  width: 33%;
  position: relative;
  overflow: hidden;
  margin-right:var(--space-m)
}
.imbarcazioni-card img { 
  width:100%; height:100%; object-fit: cover;
  background-size: cover; background-position:50% 50% 
}
.imbarcazioni-card__media {
  aspect-ratio: 16 / 10;
  position:relative;
}
.imbarcazioni-card__media:after {
  content:'';
  background:linear-gradient(135deg,rgba(255, 255, 255, 0.16),rgba(0, 0, 0, 0.3));
  width: 100%;
  height:100%;
  top: 0; left:0;
  position:absolute;
  z-index: 50;
  transition: var(--transition-global);
}
.imbarcazioni-card__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-m);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  color: #fff;
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.imbarcazioni-card__title {
  font-family: var(--font-title);
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  font-size: var(--text-l);
  position: relative;
  margin-right: var(--space-m);
  padding-right: var(--space-m);
}
.imbarcazioni-card__title:after {
  content: '';
  position: absolute;
  right: 0;
  top: -10%;
  height: 120%;
  width: 1px;
  background: var(--light)
}
.imbarcazioni-card__location {
  font-size: var(--text-m);
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
}
.imbarcazioni-card:hover .imbarcazioni-card__media:after{opacity: 0;}