/* =========================
   Base
   ========================= */

:root {
  --font-title: "futura-pt", "Futura PT", "Futura", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "proxima-nova", "Proxima Nova", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --header-h: 12vh;
  --container-pad: clamp(1rem, 2vw, 2rem);
}
html { scroll-behavior: smooth;}
body {
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul  {list-style: circle;	list-style-position: inside;}
ol  {list-style: decimal;	list-style-position: inside;}

h1,h2,h3,h4,h5,h6,.text-title {
  font-family: var(--font-title);
  color: var(--text-title);
}
.kicker { font-size: var(--text-l); font-weight: 700; color: var(--primary-l-2);  margin-bottom: 6px; font-family: var(--font-body);}
.kicker--on-dark { color: var(--primary-l-4)}
.section-title {font-size:var(--text-3xl); font-weight: 700; letter-spacing:-0.02em; line-height: 1.2; font-family: var(--font-title);}
.section-title--on-dark {color:var(--light)}

.container {  width: 100%;  max-width: var(--max-screen-width); /* 1400px da core */
  margin-inline: auto; padding-inline: var(--container-pad);
}

.header-spacer {
  height: var(--header-h);
}

input, label, .label, select {cursor: pointer;}

.iframe-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 40%;
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:none
}


/* =========================
   1) Header
   ========================= */
.logo-primary { fill: var(--primary); }
.logo-secondary { fill: var(--secondary); }
.logo-tertiary { fill: var(--tertiary); }

.header {
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-primary);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl); /* come screenshot */
  z-index: 1000;
  position:fixed;
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
.header-left {
  display: flex;
  align-items: center;
  min-width: 200px;
}
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}
.header .nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.header .nav a {
  text-decoration: none;
  color: var(--text-title);
  font-size: var(--nav-link-size);
  font-weight: 400;
  transition: opacity 0.15s ease-in-out;
  transition: var(--transition-global);
}
.header .nav a:hover {
  color: var(--primary-d-2);
}
.h-icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}




/* =========================
   2) Hero (title + search card)
   ========================= */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--light);
  min-height:90vh;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: url(../images/hero-bg.jpg), radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.1), transparent 45% ), linear-gradient(180deg, rgba(14, 58, 90, 1), rgba(14, 58, 90, 0.96));
  background-size: cover;
  background-position: center;
}
.hero-inner {
  position: relative;
  z-index: 1;
  height:100%;
  text-align: center;
}
.hero-title {
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(3.4rem, 5.5vw, 5.2rem);
  line-height: 1.02;
  margin: 0 0 var(--space-m);
}
.search-card {
  width: min(960px, 100%);
  margin-inline: auto;
  padding: 0;
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-xl);
}
.search-grid {
  display: grid;
  grid-template-columns: 4fr 4fr 120px;
}
.search-grid__cell {
  padding: var(--space-m);
  display: grid;
  gap: 0.5rem;
  text-align: left;
  align-content: start ;
}
.search-grid__cell:first-child:after { 
  content:''; 
  position:absolute; 
  right:0%; top:20%; width:1px; height:60%; 
  background:var(--primary-10) 
}
.search-grid__label {
  color: var(--text-title);
  font-weight: 700;
  font-size: var(--text-l);
  letter-spacing: -0.01em;
}
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  margin-top:var(--space-4xs)
}
.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4xs);
  color: var(--text-body);
  font-size: var(--text-m);
  font-weight: 400;
}
.select-data {
  appearance: none;
  background-image: url("data:image/svg+xml, %3Csvg width='25' height='25' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.9087 0H4.09125C3.00659 0.00132316 1.96673 0.432789 1.19976 1.19976C0.432789 1.96673 0.00132316 3.00659 0 4.09125V25.9087C0.00132316 26.9934 0.432789 28.0333 1.19976 28.8002C1.96673 29.5672 3.00659 29.9987 4.09125 30H25.9087C26.9933 29.9983 28.033 29.5668 28.7999 28.7999C29.5668 28.033 29.9983 26.9933 30 25.9087V4.09125C29.9987 3.00659 29.5672 1.96673 28.8002 1.19976C28.0333 0.432789 26.9934 0.00132316 25.9087 0ZM28.6362 25.9087C28.6339 26.6314 28.3458 27.3238 27.8348 27.8348C27.3238 28.3458 26.6314 28.6339 25.9087 28.6362H4.09125C3.36858 28.6339 2.67617 28.3458 2.16517 27.8348C1.65416 27.3238 1.36606 26.6314 1.36375 25.9087V4.09125C1.36606 3.36858 1.65416 2.67617 2.16517 2.16517C2.67617 1.65416 3.36858 1.36606 4.09125 1.36375H25.9087C26.6314 1.36606 27.3238 1.65416 27.8348 2.16517C28.3458 2.67617 28.6339 3.36858 28.6362 4.09125V25.9087Z' fill='%230E3A5A'/%3E%3Cpath d='M8.47875 6.185C9.1981 6.185 9.78125 5.60185 9.78125 4.8825C9.78125 4.16315 9.1981 3.58 8.47875 3.58C7.7594 3.58 7.17625 4.16315 7.17625 4.8825C7.17625 5.60185 7.7594 6.185 8.47875 6.185Z' fill='%230E3A5A'/%3E%3Cpath d='M15 6.185C15.7194 6.185 16.3025 5.60185 16.3025 4.8825C16.3025 4.16315 15.7194 3.58 15 3.58C14.2806 3.58 13.6975 4.16315 13.6975 4.8825C13.6975 5.60185 14.2806 6.185 15 6.185Z' fill='%230E3A5A'/%3E%3Cpath d='M21.5225 6.185C22.2419 6.185 22.825 5.60185 22.825 4.8825C22.825 4.16315 22.2419 3.58 21.5225 3.58C20.8032 3.58 20.22 4.16315 20.22 4.8825C20.22 5.60185 20.8032 6.185 21.5225 6.185Z' fill='%230E3A5A'/%3E%3Cpath d='M9.9175 11.5212H14.6175V15.7025H9.9175V11.5212Z' fill='%230E3A5A'/%3E%3Cpath d='M15.3837 11.5212H20.0837V15.7025H15.3837V11.5212Z' fill='%230E3A5A'/%3E%3Cpath d='M20.8463 11.5212H25.5462V15.7025H20.8463V11.5212Z' fill='%230E3A5A'/%3E%3Cpath d='M4.45375 16.395H9.15375V20.5737H4.45375V16.395Z' fill='%230E3A5A'/%3E%3Cpath d='M9.9175 16.395H14.6175V20.5737H9.9175V16.395Z' fill='%230E3A5A'/%3E%3Cpath d='M15.3837 16.395H20.0837V20.5737H15.3837V16.395Z' fill='%230E3A5A'/%3E%3Cpath d='M20.8463 16.395H25.5462V20.5737H20.8463V16.395Z' fill='%230E3A5A'/%3E%3Cpath d='M4.45375 21.2687H9.15375V25.4475H4.45375V21.2687Z' fill='%230E3A5A'/%3E%3Cpath d='M9.9175 21.2687H14.6175V25.4475H9.9175V21.2687Z' fill='%230E3A5A'/%3E%3Cpath d='M15.3837 21.2687H20.0837V25.4475H15.3837V21.2687Z' fill='%230E3A5A'/%3E%3Cpath d='M20.8463 21.2687H25.5462V25.4475H20.8463V21.2687Z' fill='%230E3A5A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 98% 50%;
}
.select-user {
  appearance: none;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%230E3A5A" d="M12 4a4 4 0 1 1 0 8a4 4 0 0 1 0-8m0 16s8 0 8-2c0-2.4-3.9-5-8-5s-8 2.6-8 5c0 2 8 2 8 2"/></svg>');
  background-repeat: no-repeat;
  background-position: 98% 50%;
}
.date-and-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-s);
  align-items: center;
}
.search-btn {
  width: 70px;
  height: 70px;
  padding: 0;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-xl);
}
.search-btn.btn:hover {
  transform: none;
}
/* Ricerca avanzata fuori dalla card */
#advanced {
  font-size: var(--text-s);
  width: min(880px, 100%);
  margin: var(--space-xs) auto 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  bottom: calc(-1 * var(--space-xl));
  position:absolute;
  z-index: 100;
  color:#ffffff;
  padding: var(--space-m);
}
#advanced.open svg {transform: rotate(180deg);}
#advanced-search-card {
  transform: translateY(-100%);
}
#advanced-search-card.open {
  transform: translateY(0%);
  border-top-left-radius:0; border-top-right-radius:0 ;}
#search-card.open {border-bottom-left-radius: 0  !important; border-bottom-right-radius: 0;}

/* Ricerca Rubriche */
.campo-ricerca-wrapper:after {  
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    right: 4px;
    top: 4px;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z' stroke='%230e3a5a' stroke-width='2'/%3E%3Cpath d='M16.2 16.2 21 21' stroke='%230e3a5a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    z-index: 1000;
  }


/* =========================
   RUBRICHE
   ========================= */
#rubriche {
  padding:0;
  display: flex;
  flex-direction: column ;
  gap: var(--space-l);
}
.rubriche-card {
  padding: 0;
  width: clamp(210px, 22vw, 260px);
  position: relative;
  margin-right: var(--space-m);
  margin-bottom: var(--space-m);
  border-radius: var(--radius-l);
}
.rubriche-card__media {
  aspect-ratio: 3 / 4;
  z-index: 10;
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
}
.rubriche-card__media img { 
  width:100%; height:100%; object-fit: cover;
}
.rubriche-card:after { 
  content:'';
  position:absolute; width:100%; height:100%;
  background:var(--tertiary);
  z-index: 5;
  transition: var(--transition-global);
  border-radius: var(--radius-l);
}
.rubriche-card:hover:after {transform: translateX(5px) translateY(5px);}
.rubriche-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);
  opacity: 1;
  border-radius: var(--radius-l);
  overflow: hidden;
}
.rubriche-card__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-m);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  color: #fff;
  font-family: var(--font-title);
  font-size: var(--text-l);
  font-weight: 400;
  text-align: center ;
  text-transform: uppercase;
  z-index: 100;
  border-radius: var(--radius-l);
  overflow: hidden;
}
.rubriche-card:hover .rubriche-card__media:after {opacity: 0;}
.rubriche__carousel .flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: transparent;
  border: 2px solid var(--primary);
}
.rubriche__carousel .flickity-page-dots .dot.is-selected {
  background: var(--primary);
}




/* =========================
   VIAGGI CARD !
   ========================= */
.viaggio-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  transition: var(--transition-global);
  aspect-ratio: 1/1;
}
.viaggio-card__media {
  position: absolute;
  inset: 0;
  transform: scale(1.01);
  transition: var(--transition-global);
  background-size:cover;
}
.viaggio-card__media img { 
  width:100%; height:100%; object-fit: cover;
  background-size: cover; background-position:50% 50% 
}
.viaggio-card__overlay {
  position: absolute;
  inset: 0;
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-global);
}
.viaggio-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.4), rgba(0, 0, 0, 0.65));
  transition: var(--transition-global);
  opacity: 0.75;
}
.viaggio-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  z-index: 100;
}
.viaggio-card__top-left {
  display:flex;
  flex-direction:row;
  position:relative
}
.viaggio-card__top-left .badge-prezzo {
  font-size: var(--text-s);
  font-weight: 800;
  padding: var(--space-4xs) var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--light);
  backdrop-filter: blur(2px);
  color: var(--primary);
  position: relative;
  z-index: 5;
}
.viaggio-card__top-left .badge-sconto {
  font-size: var(--text-s);
  font-weight: 800;
  padding: var(--space-4xs) var(--space-xs);  
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: var(--tertiary-90);
  backdrop-filter: blur(2px);
  color: var(--primary);
  position: relative;
  z-index: 1;
}
.viaggio-card__top-left .badge-sconto::before {
  content: '';
  position: absolute;
  height:100%;
  width:100%;
  background: var(--tertiary-90);
  z-index: 0;
  left:-100%
}
.viaggio-card__top .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);
}
.viaggio-card__top .badge-partenza svg {
  opacity: 0.95;
}
.viaggio-card__bottom {position: relative; z-index: 100;}
.viaggio-card__titolo {
  display:flex; 
  flex-direction:column; 
  gap: var(--space-2xs);
  z-index: 100;
}
.viaggio-card__titolo-tipo {
  font-size: var(--text-m);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--light);
  line-height: 1.02;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
.viaggio-card__titolo-nome {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--light);
  line-height: 1.02;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
.viaggio-card__titolo-luogo {
  font-size: var(--text-s);
  text-transform: uppercase;
  color: var(--light);
  line-height: 1.02;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
.viaggio-card__bottom .round-arrow {
  position:absolute;
  bottom: 0;
  right: 0;
  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);
}
.viaggio-card:hover { box-shadow:#f3c531 5px 5px 0px 0px;}
.viaggio-card:hover .last-minute-card__media { transform: scale(1.1);}
.viaggio-card:hover .viaggio-card__overlay:after  {opacity:0.65}
.viaggio-card:hover .round-arrow { opacity:1}

/* =========================
   PAGINATION - sia per viaggi che per rubriche 
   ========================= */
.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0px;
}

.pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: var(--space-s);
  text-decoration: none;
  border: 1px solid var(--gray-dark);
  color: var(--primary-l-1);  
  margin: 0 4px;
  border-radius: var(--radius-full);
  line-height: 1;
  width: var(--space-l);
  height: var(--space-l);
  transition: var(--transition-global);
}

.pagination li a.active {
  background-color: var(--primary);
  color: var(--light);
  border-color: var(--primary);
}
.pagination a:hover:not(.active) {
  border-color: var(--primary);
  color: var(--primary);
}
.pagination li[disabled] a {
  border-color: var(--primary-l-4);
  color: var(--primary-l-4);
  pointer-events: none;
}


/* =========================
   Proposte (sezione blu + cards 3x2)
   ========================= */
#proposte {
  padding: var(--space-2xl) 0;
  display: flex;
  flex-direction: column ;
  gap: var(--space-l);
  position:relative
}
.prop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}

/* card proposta */
.prop-card {
  border-radius: var(--radius-l);
  overflow: hidden;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-rows: 80% auto;
  aspect-ratio: 3/2;
  transition: var(--transition-global);
}
.prop-card__media {
  transition: var(--transition-global);
  z-index:5;
  background-size:cover
}
.prop-card__media img { 
  width:100%; height:100%; object-fit: cover;
  background-size: cover; background-position:50% 50% 
}
.prop-card__footer {
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s);
  overflow: hidden;
  z-index: 10;
}
.prop-card__label {
  font-family: var(--font-title);
  letter-spacing: -0.02em;
  font-weight: 800;
  color: rgba(11, 58, 89, 0.98);
  line-height: 1;
  font-size: var(--text-l);
  position:relative;
  display: flex;
  height: 100%;
  align-items: center;
  overflow: hidden;
}
.prop-card__label:after {
  content: '';
  position: absolute;
  width: 100%;
  height:4px;
  background:var(--tertiary);
  bottom:-4px;
  left:0;
  transform: translateY(100%);
  transition: var(--transition-global);
  z-index: -1;
}
.prop-card:hover .prop-card__label:after {
  transform: translateY(-5px);
}
.prop-card__price {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: rgba(11, 58, 89, 0.98);
  font-size:var(--text-l);
  font-weight:700
}
.prop-card__from {
  font-size:var(--text-s);
  font-weight: 400;
  color: var(--primary-l-2);
}
.prop-card:hover { box-shadow:var(--tertiary) 5px 5px 0px 0px;}
.prop-card:hover .prop-card__media { transform: scale(1.1);}



#prossimi-viaggi {
  display: flex;
  flex-direction: column ;
  gap: var(--space-l);
  position: relative;
}
#prossimi-viaggi:before {  
  content: '';
  position: absolute;
  top: 0; left:0; right: 0; bottom:0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  background: linear-gradient(140deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.05));
}
#prossimi-viaggi .container {
   position:relative;
   z-index: 10;
}


/* =========================
   FOOTER
   ========================= */
#footer {
  z-index: 100;
  position: relative;
}

.footer-link {
  font-size:var(--text-m);
  color: var(--light-80);
  font-weight:lighter;
  transition: var(--transition-global);
  line-height: 1.2;
}

.footer-link:hover {
  color: var(--tertiary-l-1);
}

.footer-column-title {
  font-family: var(--font-title);
  font-size: var(--text-l);
  font-weight: 700;
  color: var(--light);
}

.footer-link__divider {
  background: var(--light-70); width: 1px; height: 100%
}

.footer-contact .footer-link {font-size:var(--text-m)}
.footer-copyright {font-size:var(--text-s); color: var(--primary-l-1); font-weight: 400; text-align: center;}
.footer-legal .footer-link  {font-size: var(--text-s); color:var(--primary-l-4);}