/* ---------- HERO (aggiornata) ---------- */
.hero {
  position: relative;
  overflow: hidden;

  /* altezza “fotogenica” senza occupare tutta la pagina */
  height: clamp(550px, 70vh, 800px);
}


.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* sposta il fuoco verso il centro-sinistra */
  object-position: center 40%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.hero__content {
  position: absolute;
  /* porta il contenuto più in alto (circa 35% della sezione) */
  top: 35%;
  left: 50%;
  transform: translate(-50%, -35%);
  z-index: 1;

  width: 90%;
  max-width: 600px;
  text-align: center;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5vw + 1rem, 4.5rem);
  line-height: 1.15;
  letter-spacing: .5px;
  color: #ffffff;  /* bianco pieno */
  margin-bottom: .75rem;
}

.hero__subtitle {
  font-size: 1.125rem;
  color: #f8f8f8;  /* un po’ più tenue */
  margin-bottom: 2rem;
}

.btn--primary {
  padding: .75rem 2rem;
  min-width: 180px;
}
/* ---------- OUR SERVICES ---------- */
.services {
  background: #ffffff;
  color: var(--navy);
  padding: 4rem 1rem 5rem;
}

.services__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 4rem);
  max-width: 1100px;
  margin-inline: auto;
}

.service {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
}

.service__icon {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
}

.service__label {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.25;
  text-align: center;
  color: var(--navy);
}

.hero__wave{
  position: absolute;
  bottom: -1px;           /* per evitare gap */
  left: 0;
  width: 100%;
  height: 60px;
  fill: #ffffff;
  z-index: 1;
}


/* === Our Services – stato iniziale ======================= */
.service{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

/* quando l’elemento entra in viewport */
.service.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* cascata opzionale: tempi sfalsati */
.service:nth-child(2){ transition-delay: .1s }
.service:nth-child(3){ transition-delay: .2s }
.service:nth-child(4){ transition-delay: .3s }

/* rispetto ai visitatori “prefers-reduced-motion” */
@media (prefers-reduced-motion: reduce){
  .hero__wave{ animation: none; }
  .service{ opacity: 1 !important; transform:none !important; transition:none !important; }
}


/* ---------- Featured Tours & Transfers ---------- */
.featured {
  background:#f9fafc;
  padding: 4rem 1rem 5rem;
}

.featured__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(1.5rem,3vw,2.5rem);
  max-width:1100px;
  margin-inline:auto;
}

/* --- CARD --- */
.tour-card{
  width:280px;                      /* tutte uguali */
  display:flex;
  flex-direction:column;
  border:1px solid #e6e8ec;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  overflow:hidden;
  background:#fff;
}

.tour-card__img-wrapper{
  position:relative;
  height:160px;
  overflow:hidden;
}
.tour-card__img-wrapper img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.tour-card__tag{
  position:absolute;
  top:10px;
  left:10px;
  background:var(--accent, #d9b84e);
  color:#fff;
  font-size:.65rem;
  padding:.25rem .5rem;
  border-radius:3px;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.tour-card__body{
  padding:1.25rem;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.tour-card__rating{
  font-size:.85rem;
  color:var(--accent, #e7b516);
}
.tour-card__score{
  color:#666;
  margin-left:.4rem;
  font-size:.75rem;
}

.tour-card__title{
  font-size:1.25rem;
  line-height:1.25;
  font-family:var(--font-serif);
  color: var(--navy, #0e2d52);
}

.tour-card__info{
  font-size:.9rem;
  color:#444;
  display:flex;
  align-items:center;
  gap:.35rem;
}

.tour-card__price{
  font-size:1.35rem;
  font-weight:700;
  color: var(--navy, #0e2d52);
}

.tour-card__btn{
  margin-top:auto;                  /* sempre in fondo */
  width:100%;
  text-align:center;
  border-radius:4px;
  color: #edc648;

}

/* =======================================================
   INTERACTION: solleva la card e zooma la foto in hover
   ======================================================= */

/* 1️⃣  – transizioni dolci su card e immagine */
.tour-card{
  transition: box-shadow .35s ease, transform .35s ease;
  will-change: transform;              /* piccolo boost prestazioni */
}
.tour-card__img-wrapper img{
  transition: transform .35s ease;
  will-change: transform;
}

/* 2️⃣  – stato hover/focus (anche da tastiera) */
.tour-card:hover,
.tour-card:focus-within{               /* accessibilità tastiera */
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  transform: translateY(-4px);
}
.tour-card:hover .tour-card__img-wrapper img,
.tour-card:focus-within .tour-card__img-wrapper img{
  transform: scale(1.05);
}

/* ======================================================
   MOBILE SLIDER – card scroll orizzontale con snap
   ====================================================== */

@media (max-width: 767px){

  /* il contenitore diventa una “pista” orizzontale */
  .featured__grid{
    display: flex;                       /* da grid/row a flex-row */
    overflow-x: auto;                    /* abilita lo scroll */
    scroll-snap-type: x mandatory;       /* snap obbligatorio */
    gap: 1rem;                           /* distanzia le card */
    padding: 0 1rem 1rem;                /* aria ai lati+bottom */
    -webkit-overflow-scrolling: touch;   /* inerzia iOS */
  }

  /* ogni card è una slide larga ~80% */
  .tour-card{
    flex: 0 0 80%;                       /* larghezza fissa 80vw */
    scroll-snap-align: start;            /* “ancora” di snap */
    border-radius: .75rem;               /* un pizzico più soft su mobile */
  }

  /* opzionale: nascondi la scrollbar - solo estetico */
  .featured__grid::-webkit-scrollbar{ display:none; }
  .featured__grid{ scrollbar-width: none; }
}

/* =========================================================
   HERO – lieve oscillazione dell’onda di separazione
   ========================================================= */
/* HERO wave – lieve su-giù */
/* HERO wave – vero morph della cresta */
@keyframes waveMorph{
  0%,100%{
    d: path("M0,55 C360,80 1080,0 1440,40 L1440,60 L0,60 Z");
  }
  50%{
    d: path("M0,35 C360,70 1080,5 1440,35 L1440,60 L0,60 Z");
  }
}

.hero__wave path{
  animation: waveMorph 8s ease-in-out infinite;
}

/* =========================================================
   OUR SERVICES – reveal al 1° ingresso in viewport
   (le regole qui sotto si sommano a quelle che hai già)
   ========================================================= */

/* stato iniziale */
.service{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

/* quando IntersectionObserver aggiunge la classe */
.service.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* ritardo a cascata: 0 s / .1 s / .2 s / .3 s */
.service:nth-child(2){ transition-delay: .1s }
.service:nth-child(3){ transition-delay: .2s }
.service:nth-child(4){ transition-delay: .3s }

/* rispetto di “Prefer reduced motion” */
@media (prefers-reduced-motion: reduce){
  .hero__wave{ animation:none; }
  .service{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------------------------------------------
   OUR SERVICES – micro-animazioni on-hover
   --------------------------------------------- */

/* transizioni “preparate” */
.service{
  transition: transform .35s ease-out;
}
.service__icon{
  transition: transform .35s ease-out, filter .35s ease-out;
}

/* effetto hover / focus */
.service:hover,
.service:focus-visible{
  transform: translateY(-6px);          /* card si alza di 6 px */
}
.service:hover .service__icon,
.service:focus-visible .service__icon{
  transform: scale(1.12);               /* icona +12 % */
  filter: saturate(6)  /* diventa bianca */
}

/* se preferisci che resti nera ma più “gold”:
   sostituisci la riga filter con:  
   filter: sepia(1) saturate(6) hue-rotate(-10deg); */

   @keyframes pulseIcon{
  0%,100%{ transform: scale(1); }
  50%    { transform: scale(1.06); }   /* +6 % */
}
.service__icon{
  animation: pulseIcon 6s ease-in-out infinite;
}

/* rispetto chi attiva “riduci animazioni” */
@media (prefers-reduced-motion: reduce){
  .service__icon{ animation: none; }
}

.service__label{
  position: relative;
}
.service__label::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0;
  height:2px;
  background:var(--gold);
  transition: width .35s ease-out;
}
.service:hover .service__label::after,
.service:focus-visible .service__label::after{
  width:100%;
}

/* =========================================================
   TRUSTED DRIVERS – stile minimale
   ========================================================= */
.trusted{
  background:#fff;
  padding: 4rem 0 5rem;
}

.trusted__heading{
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.4vw + 1rem, 2.25rem);
  color: var(--navy);
  margin-bottom: 2rem;
}

/* icone + testo in colonna */
.trusted-item__icon{
  font-size: 1.7rem;
  color: var(--navy);
  flex-shrink: 0;
}

/* titoli + descrizioni */
.trusted-item__title{
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .15rem;
  color: var(--navy);
}
.trusted-item__desc{
  font-size: .9rem;
  color: #666;
}

/* micro-animazione: item si sposta di 4 px in hover */
.trusted-item{
  transition: transform .25s ease-out;
}
.trusted-item:hover{
  transform: translateX(4px);
}

/* ===== palette helper ===== */
.bg-cream  { background:#fffdf7; }
.text-navy { color: var(--navy); }
.text-gold { color: var(--gold); }

/* ===== HERO base ===== */
.hero{ position:relative; overflow:hidden; min-height:520px; }
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 20%; z-index:-2;
}
.hero__overlay{ position:absolute; inset:0;
  background:rgba(217,184,78,.35); z-index:-1;
}

/* ===== HERO – About variant ===== */
.hero--about .hero__panel{
  background:#fffdf7;
  border-left:4px solid var(--gold);
  max-width:540px;
}
.hero__chauffeur{
  width:100%; max-width:480px; height:auto; object-fit:cover;
}
.hero--about .hero__wave{ bottom:-1px; width:100%; }