/* =========================================================
   MELIOR – CSS BASE + NAV CAROUSEL (tablet/mobile)
   ========================================================= */

@import "normalize.css";

/* ------------------------------
   1) Variabili & reset minimi
   ------------------------------ */
   :root{
    --bg: #F6F5F2;
    --ink: #1A1A1A;
    --muted: #868680;
    --gold: #C2AB5F;
    --forest: #073C2C;
    --charcoal: #2C2D2E;
    --hair: #D6D4CD;
  
    /* Layout */
    --grid: 1280px;
    --pad: 24px;
    --radius: 16px;
  }
  
  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
  }
  img{ max-width:100%; height:auto; display:block; }
  a{ color: inherit; text-decoration: none; }
  :focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
  
  /* ------------------------------
     2) Contenitori & griglia
     ------------------------------ */
  .wrap{
    max-width: var(--grid);
    margin: 0 auto;
    padding: 72px var(--pad);
  }
  section{ position: relative; }
  .grid{ display: grid; gap: 28px; }
  @media (min-width: 960px){
    .grid--2{ grid-template-columns: 1.05fr .95fr; }
  }
  
  /* Bande full width / temi di sezione */
  .band{ background: var(--bg); }
  .band--charcoal{ background:#111; color:#e8e8e3; }
  .band--forest{ background: var(--forest); color:#e8f0eb; }
  
  /* (solo nel caso servisse: link chiari su banda scura) */
  .band--charcoal .nav__link{ color:#f2f2f2; }
  
  /* ------------------------------
     3) Header & navigazione
     ------------------------------ */
  .header{
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  
  .nav{
    max-width: var(--grid);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px var(--pad);
  }
  
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand__logo{ height:48px; width:auto; }
  .nav__spacer{ flex:1; }
  
  /* Link di navigazione (desktop & base) */
  .nav__link{
    padding: 8px 10px;
    border-radius: 10px;
    color: #222;
  }
  .nav__link:hover,
  .nav__link--active{ background: rgba(194,171,95,.14); }
  
  /* Switch lingua (pill mini) */
  .lang{
    display:flex; gap:6px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:10px;
    padding:4px;
    flex:0 0 auto;
  }
  .lang a{ padding:6px 10px; border-radius:8px; }
  .lang a.active,
  .lang a:hover{ background: rgba(194,171,95,.14); }
  
  /* ---------------------------------------------
     3.a) NAV CAROUSEL (tablet/mobile)
     - Desktop: menu normale
     - ≤1024px: carosello orizzontale con frecce
     - ≤600px: 1 voce per volta (snap a pagina)
     --------------------------------------------- */
  
  /* Contenitore frecce + traccia (ancora le frecce) */
  .nav__carousel{
    position: relative;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0; /* consente overflow interno */
  }
  
  /* Traccia orizzontale con snapping */
  .nav__track{
    display:flex;
    gap:8px;
    min-width:0;
    flex:1 1 auto;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 0 42px; /* spazio per le frecce sovrapposte */
  }
  .nav__track::-webkit-scrollbar{ display:none; }
  .nav__track{ scrollbar-width: none; }
  
  /* Ogni voce è una “pillola” scorrevole */
  .nav__track > a.nav__link{
    display:inline-flex;
    align-items:center;
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: center;
  }
  
  /* Frecce – look “glass” elegante; visibili solo quando serve (via JS) */
  .nav__btn{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:2;
    width:34px; height:34px;
    border-radius:999px;
    border:1px solid rgba(26,26,26,.12);
    background: rgba(255,255,255,.85);
    color:#1a1a1a;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    backdrop-filter: blur(6px);
    display:none; /* mostrate solo con .is-visible */
    align-items:center; justify-content:center;
    cursor:pointer; user-select:none; line-height:1; font-size:18px;
  }
  .nav__btn:hover{ background: rgba(255,255,255,.95); }
  .nav__btn--prev{ left:4px; }
  .nav__btn--next{ right:4px; }
  .nav__btn.is-visible{ display:flex; }
  .nav__btn.is-disabled{ opacity:.35; pointer-events:none; }
  
  /* Fade ai bordi quando c’è overflow */
  .nav__carousel::before,
  .nav__carousel::after{
    content:"";
    position:absolute; top:0; bottom:0; width:24px; z-index:1;
    pointer-events:none; display:none;
  }
  .nav__carousel.has-overflow::before{ display:block; left:0;
    background:linear-gradient(to right, var(--bg), transparent); }
  .nav__carousel.has-overflow::after{ display:block; right:0;
    background:linear-gradient(to left, var(--bg), transparent); }
  
  /* Tablet */
  @media (max-width: 1024px){
    .brand__logo{ height:40px; }
    .nav{ gap:12px; }
    .nav__carousel{ flex: 1 1 auto; }
    .nav__link{ padding:8px 12px; font-size:14px; }
  }
  
  /* Mobile stretto: UNA VOCE ALLA VOLTA + lingua sempre visibile */
  @media (max-width: 600px){
    .brand__logo{ 
      width: 150px;
      height: 20px;
    }              /* recupero spazio */
    .nav{ gap:8px; }
    .nav__track{ scroll-snap-type: x mandatory; } /* snap forte */
    .nav__track > a.nav__link{
      /* 1 voce per volta: la pillola occupa l’intera larghezza visibile
         (100% del contenitore .nav__track) */
      flex: 0 0 100%;
      justify-content: center;
      text-align: center;
      font-size: 15px;
      padding: 10px 12px;
    }
    .lang{ display:flex; }                    /* resta visibile */
  }
  
  /* ------------------------------
     4) Tipografia
     ------------------------------ */
  h1,h2,h3{
    font-family: 'Playfair Display', serif;
    color:#111;
    line-height:1.15;
    margin:0 0 .5em;
  }
  h1{ font-size: clamp(36px, 5vw, 64px); letter-spacing:.01em; }
  h2{ font-size: clamp(26px, 3.2vw, 40px); }
  h3{ font-size: clamp(18px, 2vw, 22px); color:#111; }
  p{ margin:.6em 0; color:#3a3a38; }
  .eyebrow{
    font-size:12px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--muted); font-weight:600;
  }
  .accent{ color: var(--gold); }
  
  /* ------------------------------
     5) Bottoni
     ------------------------------ */
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 18px;
    border-radius:12px;
    border:1px solid var(--gold);
    cursor:pointer;
    transition: all .2s ease;
  }
  .btn--gold{
    background: var(--gold); color:#14110a; border-color: transparent;
    font-weight: 600;
  }
  .btn--ghost{ background: transparent; color:#222; }
  .btn--ghost:hover{ background: rgba(194,171,95,.12); }
  
  /* ------------------------------
     6) Segnaposto immagini/video
     ------------------------------ */
  .ph{
    width:100%;
    display:grid; place-items:center;
    color:#8a8a86;
    border:none;
    background:#f9f8f5;
    border-radius: var(--radius);
  }
  .ph--16x9{ aspect-ratio:16/9; }
  .ph--3x4{ aspect-ratio:3/4; }
  .ph--video::after{
    content:'▶'; font-size:28px; opacity:.6;
  }
  
  /* ------------------------------
     7) Card & liste
     ------------------------------ */
  .card{
    border:1px solid var(--hair);
    border-radius: var(--radius);
    padding:22px;
    background:#fff;
  }
  .card--dark{ background:#1a1a1a; border-color:#333; }
  
  /* Cards a griglia (sezione servizi) */
  .cards{ display:grid; gap:18px; }
  @media (min-width: 960px){
    .cards{ grid-template-columns: repeat(3, 1fr); }
  }
  .card h3{ margin:.2em 0 .4em; }
  
  /* News list */
  .news{ display:grid; gap:14px; }
  .news__item{
    display:grid;
    grid-template-columns: 1fr auto auto;
    gap:16px; align-items:center;
    padding:14px 0;
    border-bottom:1px solid var(--hair);
  }
  .news__item a{ font-weight:600; }
  .news__meta{ color: var(--muted); font-size:14px; }
  
  /* ------------------------------
     8) Footer
     ------------------------------ */
  footer{
    background: rgba(11,11,11,.8);
    color:#cfcfcf;
  }
  .footer__top{ display:grid; gap:28px; }
  @media (min-width: 960px){
    .footer__top{ grid-template-columns: 1.2fr .8fr 1fr 1fr; }
  }
  .foot__logo{ height:24px; }
  .foot__col a{ display:block; color:#cfcfcf; margin:6px 0; }
  .copyright{
    border-top:1px solid #1f1f1f;
    color:#a6a6a6;
  }
  
  /* ------------------------------
     9) Effetti di reveal on scroll
     ------------------------------ */
  .reveal{
    opacity:0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal.is-visible{
    opacity:1;
    transform:none;
  }
  
  /* ------------------------------
     10) Accessibilità & motion
     ------------------------------ */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    .reveal{ transition: none; }
  }