/* === FONT DEFINITIONS === */

@font-face {
  font-family: 'Pasajero';
  src: url('fonts/pasajero.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pasajero';
  src: url('fonts/pasajero.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   COLORI & RESET
   =============================== */
:root {
  --bg:#ffffff;
  --text:#111111;
  --muted:#555555;
  --border:#e5e5e5;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ===============================
   BASE TIPOGRAFICA
   - default: sans-serif di sistema
   =============================== */
body, p, li, span, small, label, input, button, textarea {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  color: var(--text);
}
body {
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titoli principali e elementi brand in Pasajero */
h1, h2, h3,
.topnav .brand,
.topnav .links a,
.subtitle {
  font-family: 'Pasajero', sans-serif;
}
h1, h2, h3 { font-weight: 800; letter-spacing: .4px; line-height: 1.2; }
.subtitle { font-weight: 600; }

/* Link generici */
a { color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===============================
   NAVBAR (brand a sinistra, menu centrato)
   =============================== */
.topnav{
  position: sticky; top: 0; z-index: 10;
  background: #fff; border-bottom: 1px solid var(--border);
  height: 80px;              /* un po’ più alta = più aria */
  padding: 0 2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;        /* centra verticalmente gli item della grid */
}

/* Logo a sinistra (niente padding-top per non “sbilanciare” i link) */
.topnav .brand{
  grid-column: 1; justify-self: start; align-self: center;
  font-family: 'Pasajero', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1; letter-spacing: 1px; color: var(--text); text-decoration: none;
}

/* Menu centrato (verticale e orizzontale) */
.topnav .links{
  grid-column: 1 / span 2; justify-self: center; align-self: center;
  display: flex; gap: 2rem; white-space: nowrap;
  margin: 0;                   /* azzera eventuali margini residui */
  line-height: 1;              /* evita che sembri più “basso” */
}

.topnav .links a{
  font-weight: 600; opacity: .9;
}
.topnav .links a:hover, .topnav .links a.active{ opacity: 1; text-decoration: underline; }

/* ===============================
   HERO (supporta immagine di sfondo)
   =============================== */
.hero{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height: 78vh;
  padding: 6rem 1.25rem;
  background: #f7f7f7;
  overflow:hidden;
  margin-bottom: 2rem; /* ✅ aggiunto: spazio tra più header */
}
/* Se vuoi lo sfondo: aggiungi .hero--with-image all’header
   e imposta inline: style="background-image:url('images/hero.jpg')" */
.hero.hero--with-image{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero.hero--with-image::before{
  content:""; position:absolute; inset:0;
  background: rgba(255,255,255,0.12); /* regola se serve più/meno contrasto */
}
.hero > *{ position: relative; z-index: 1; }

.hero h1{
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  margin-bottom: .5rem;
}
.subtitle{
  color: var(--muted);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin-bottom: 2rem;
}

/* ===============================
   CTA
   =============================== */
.cta{
  display:inline-block;
  background: var(--text);
  color: var(--bg);
  padding: .9rem 1.5rem;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s ease;
}
.cta:hover{ opacity:.85; }

/* ===============================
   SEZIONI & CONTENUTI
   =============================== */
/* Spazio verticale tra sezioni e header */
section, header.hero {margin-bottom: 4rem;}
.section{ padding: 4.5rem 1.25rem; border-top: 1px solid var(--border); }
.feature{
  display:grid; gap:2rem; grid-template-columns:1fr; align-items:center; text-align:center;
}
@media (min-width: 900px){
  .feature{
    grid-template-columns: 1fr 1fr;
    text-align:left;
    justify-items:center;     /* ✅ mantiene centrata ogni colonna */
  }
  .feature .copy{
    text-align:left;
    margin: 0 auto;
    max-width: 600px;         /* ✅ limita la larghezza del testo */
  }
}
.feature img{
  width:min(560px, 92%);
  border-radius: 20px;
  background:#f1f1f1;
  aspect-ratio: 4/3; object-fit: cover;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.feature .copy{ max-width: 720px; margin: 0 auto; }

/* Titoli blocchi sezione in Pasajero, testo descrittivo in sans */
.feature .copy h2,
.feature-block h3 { font-family: 'Pasajero', sans-serif; font-weight: 800; }
.feature .copy p,
.feature-block p,
.card p,
.content p,
.section p {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
  color: var(--muted);
  font-size: 1.06rem;
}

/* Griglie generiche */
.grid{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
.card{ border:1px solid var(--border); border-radius:16px; padding:1.25rem; background:#fff; }
.card h3{ font-family: 'Pasajero', sans-serif; font-weight:800; margin-bottom:.4rem; }

/* Responsive */
@media (min-width: 900px){
  .feature{ grid-template-columns: 1fr 1fr; text-align:left; }
  .feature .copy{ text-align:left; }
  .grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
}

/* ===============================
   FOOTER
   =============================== */
.footer{
  padding:3rem 1.25rem;
  text-align:center;
  color:var(--muted);
  border-top:1px solid var(--border);
  font-size:.95rem;
}
/* === ABOUT: hero compatta === */
.hero.hero--compact{
  min-height: 44vh;
  padding: 4rem 1.25rem;
}

/* === ABOUT: layout sezioni testo+immagine === */
/* (riuso .feature esistente; aggiungiamo variante che inverte l’ordine su desktop) */
@media (min-width: 900px){
  .feature--alt .copy{ order: 2; }
  .feature--alt img { order: 1; }
}

@media (max-width: 900px){
  /* Navbar più compatta */
  .topnav{
    height: 72px;
    padding: 0 1.25rem;
    grid-template-columns: auto 1fr;
  }
  .topnav .brand{
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    transform: translateY(4px); /* micro allineamento */
  }
  .topnav .links{
    gap: 1.2rem;
  }

  /* Hero un po’ meno alta su tablet */
  .hero{
    min-height: 60vh;
    padding: 4rem 1rem;
  }

  /* Feature su tablet: centratura migliore e larghezze controllate */
  .feature{
    justify-items: center;      /* centro gli elementi nelle celle */
  }
  .feature .copy{
    max-width: 640px;
  }
  .feature img{
    display: block;             /* elimina spazi inline */
    width: 100%;
    max-width: 520px;
    margin: 0 auto;             /* centrata anche fuori dalla grid */
    object-fit: cover;
  }
}

@media (max-width: 600px){
  /* Navbar su due righe: brand sopra, link sotto scrollabili orizzontalmente */
  .topnav{
    height: auto;
    padding: .75rem 1rem 0;   /* aria sopra, link “attaccati” sotto */
    grid-template-columns: 1fr;
    row-gap: .5rem;
  }
  .topnav .brand{
    justify-self: start;
    font-size: 1.6rem;
    transform: translateY(2px);
  }
  .topnav .links{
    grid-column: 1;
    justify-self: start;      /* allinea a sinistra */
    align-self: end;
    gap: 1rem;
    overflow-x: auto;         /* 👈 scorrimento orizzontale se non entra tutto */
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    margin-right: -1rem;      /* allinea fino al bordo */
  }
  .topnav .links a{
    font-weight: 600;
    font-size: .95rem;
    padding: .25rem 0;        /* area tattile minima */
    white-space: nowrap;
  }

  /* Hero più compatta e testo leggibile su mobile */
  .hero{
    min-height: 52vh;
    padding: 3rem 1rem;
    text-align: center;
    align-items: center;
  }
  .hero > *{
    max-width: 26ch;          /* evita righe troppo lunghe */
  }
  .cta{
    padding: .8rem 1.2rem;
    font-size: .95rem;
  }

  /* Cards e griglie */
  .grid.cols-3{ grid-template-columns: 1fr; }
  .grid.cols-2{ grid-template-columns: 1fr; }
  .card{ padding: 1rem; }

  /* Feature su iPhone: una colonna e centrata davvero */
  .feature{
    grid-template-columns: 1fr !important;   /* forza una sola colonna */
    text-align: left;                        /* testo più leggibile */
    justify-items: center;                   /* centro orizzontale */
    align-items: center;                     /* centro verticale */
    row-gap: 2rem;                           /* aria fra testo e immagine */
  }
  .feature .copy{
    max-width: 34rem;
    margin: 0 auto;
    text-align: left;
    padding: 0 1rem;                         /* evita bordi attaccati */
  }
  .feature img{
    display: block;                          /* elimina spazi inline */
    width: 100%;
    max-width: 480px;                        /* evita overflow */
    height: auto;
    margin: 0 auto;
    place-self: center;                      /* ulteriore centratura */
    object-fit: cover;
    border-radius: 20px;                     /* coerenza con desktop */
  }
}

/* Contenitori centrati e larghezza massima comune */
.section, .feature{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}