/* =========================================================
   FIVE – La Lotta delle Cinquine 2025
   STYLE.CSS (mobile-first) • Red & Gold
   ========================================================= */

/* ---------- PALETTE & BASE ---------- */
:root{
  --red:#c1121f;
  --red-600:#9d0e19;
  --gold:#c9a227;
  --gold-100:#faf6e6;
  --gold-200:#f6edd0;
  --gold-300:#ecdca5;
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --ring:0 0 0 3px rgba(201,162,39,.35);
}

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden;}   /* ← evita banda bianca */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}

.gold{color:var(--gold);}

img{max-width:100%;height:auto;display:block}
a{color:var(--red)}
.container{width:min(1120px,92%);margin-inline:auto}

:focus-visible{outline:3px solid transparent;box-shadow:var(--ring)}
button,a,.btn,.nav-toggle-btn{min-height:44px;min-width:44px}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:0;top:0;background:var(--gold);color:#000;padding:.5rem .75rem;z-index:1000}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- HEADER & NAV (titolo centrato, hamburger a destra) ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:3px solid var(--gold);
}
.header-inner{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:.75rem 0;
}
.brand-mark{ font-size:1.4rem; position:absolute; left:0.75rem; top:50%; transform:translateY(-50%) }
.brand-title{ margin:0; text-align:center }
.brand-text{ text-decoration:none; color:var(--ink); font-weight:800; font-size:1.05rem }
.brand-text strong{ color:var(--red) }

.nav-toggle{ display:none } /* checkbox invisibile */

.nav-toggle-btn{
  position:absolute; right:0.75rem; top:50%; transform:translateY(-50%);
  width:42px; height:36px;
  border:2px solid var(--red); border-radius:.6rem; background:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:0 .5rem; cursor:pointer;
}
.nav-toggle-btn .bar{ height:2px; background:var(--red); display:block }

.nav-panel{
  overflow:hidden; max-height:0; transition:max-height .25s ease;
  border-bottom:1px solid var(--gold-300); background:#fff;
}
.nav-panel ul{ list-style:none; margin:0; padding:.5rem .75rem; display:grid; gap:.25rem }
.nav-panel a{
  display:block; padding:.7rem .75rem; border-radius:.65rem; text-decoration:none;
  color:var(--ink); font-weight:700; border:1px solid transparent;
}
.nav-panel a:hover{ background:var(--gold-100); color:var(--red) }

/* Apertura */
.nav-toggle:checked ~ .nav-panel{ max-height:420px }
.nav-toggle:checked ~ .nav-toggle-btn{ border-color:var(--red-600) }

/* Desktop */
@media (min-width: 860px){
  .nav-toggle-btn{ display:none }
  .brand-mark{ left:0 }
  .header-inner{ justify-content:center }
  .nav-panel{ max-height:none; overflow:visible; border-bottom:0 }
  .nav-panel ul{ display:flex; gap:.6rem; padding:10px; justify-content:center }
  .nav-panel a{ padding:.5rem .7rem }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;font-weight:800;border-radius:999px;padding:.8rem 1rem;
  border:2px solid transparent;text-decoration:none;touch-action:manipulation;
  transition:transform .08s ease, box-shadow .08s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:focus-visible{box-shadow:var(--ring)}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-600);border-color:var(--red-600);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--red);border-color:var(--red)}
.btn-outline:hover{background:var(--gold-200)}

/* ---------- TITOLI & SEZIONI ---------- */
h1{font-size:clamp(1.8rem, 5.5vw, 3rem);line-height:1.15;margin:.2rem 0 .6rem}
.section{padding:2rem 0}
.section-title{
  font-size:clamp(1.4rem, 3.5vw, 1.9rem);
  margin:0 0 1rem;border-left:8px solid var(--gold);padding-left:.55rem;
}

/* ---------- HERO ---------- */
.hero{
  background:linear-gradient(to right, rgba(201,162,39,.10), rgba(201,162,39,0));
  border-bottom:1px solid var(--gold-300);
}
.hero-inner{display:grid;gap:1.25rem;padding:1.8rem 0}
.lead{font-size:1.05rem}
.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.trust-note{color:var(--muted);font-size:.95rem;margin-top:.55rem}

.hero-badge{
  justify-self:center; width:min(340px,94%); aspect-ratio:1/1;
  border:4px solid var(--gold); border-radius:22px; position:relative;
  background: radial-gradient(70% 70% at 50% 50%, rgba(201,162,39,.12), transparent 60%), #fff;
  display:flex; align-items:center; justify-content:center;
}
.hero-logo{
  margin-top: 30px;
  max-width:72%; max-height:72%;
  object-fit:contain; display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}
.ribbon{
  position:absolute; left:50%; top:2%; transform:translateX(-50%) rotate(-3deg);
  background:linear-gradient(135deg,var(--red),var(--red-600)); color:#fff;
  padding:.5rem 1rem; border-radius:.5rem; border:2px solid #fff;
  box-shadow:0 6px 16px rgba(0,0,0,.08); font-weight:900; letter-spacing:.5px;
}

@media (min-width: 900px){
  .hero-inner{ grid-template-columns:1.2fr .8fr; align-items:center; padding:3rem 0 2.5rem }
  .hero-badge{ justify-self:end }
}

/* ---------- GRID & CARDS ---------- */
.grid{display:grid;gap:1rem}
.grid.two{grid-template-columns:1fr}
.grid.three{grid-template-columns:1fr}
@media (min-width:700px){ .grid.two{grid-template-columns:repeat(2,1fr)} }
@media (min-width:920px){ .grid.three{grid-template-columns:repeat(3,1fr)} }

.card{
  background:#fff;border:1px solid var(--gold-300);border-radius:16px;padding:1rem;
  box-shadow:0 6px 16px rgba(0,0,0,.04)
}
.card-title{margin:.15rem 0 .45rem;color:var(--red)}

/* ---------- CAROSELLO PREMI (scroll-snap + frecce/dots) ---------- */
.carousel{
  position:relative;
  overflow:hidden;                  /* ← impedisce sporgenze (frecce) */
}
.carousel-track{
  display:flex; gap:1rem; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:0 0 .5rem 0; scrollbar-width:thin;
  scroll-behavior:smooth;
  scroll-padding-inline:1rem;
}
.carousel-track::-webkit-scrollbar{height:8px}
.carousel-track::-webkit-scrollbar-thumb{background:var(--gold-300);border-radius:8px}
.carousel-track::-webkit-scrollbar-track{background:transparent}

.slide{
  flex:0 0 86%; scroll-snap-align:center;
  border:1px solid var(--gold-300); border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.05);
  scroll-margin-inline:1rem;
}
@media (min-width: 780px){ .slide{ flex:0 0 48% } }
@media (min-width:1100px){ .slide{ flex:0 0 32% } }

.slide .media{
  background:linear-gradient(180deg, rgba(201,162,39,.15), rgba(201,162,39,0));
  min-height:200px; display:flex; align-items:center; justify-content:center;
}
.slide .media.ph{
  background:repeating-linear-gradient(-45deg, rgba(201,162,39,.18) 0 12px, rgba(201,162,39,.1) 12px 24px), #fff;
  color:var(--muted);
}
.slide .prize-body{ padding:1rem }
.slide h3{ margin:.25rem 0 .35rem; color:var(--ink) }

/* Dots */
.carousel-dots{
  display:flex; gap:.25rem; justify-content:center; margin-top:.5rem;
  font-size:2rem; line-height:1;
}
.carousel-dots .dot{
  text-decoration:none; color:var(--gold);
  filter:grayscale(.2);
  transition:transform .1s ease, color .2s ease;
}
.carousel-dots .dot:hover{ transform:translateY(-2px); color:var(--red) }
.carousel-dots .dot.active{ color:var(--red); transform:translateY(-2px) }

/* FRECCE (bottoni) — dentro al carosello, niente valori negativi */
.carousel-controls .prev,
.carousel-controls .next{
  position:absolute; top:35%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:2px solid var(--red); background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  cursor:pointer; z-index:2;
}
.carousel-controls .prev{ left:8px }
.carousel-controls .next{ right:8px }

.carousel-controls .prev::before,
.carousel-controls .next::before{
  content:""; display:block; width:12px; height:12px; border:3px solid var(--red);
  border-top:0; border-right:0;
}
.carousel-controls .prev::before{ transform:rotate(45deg) }
.carousel-controls .next::before{ transform:rotate(-135deg) }

.carousel-controls .prev:focus-visible,
.carousel-controls .next:focus-visible{ box-shadow:var(--ring) }

/* ---------- TIMELINE ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative;border-left:4px solid var(--gold)}
.timeline li{padding:0 0 1.15rem 1.1rem;position:relative}
.timeline .t-dot{width:14px;height:14px;border-radius:50%;background:var(--red);border:2px solid #fff;box-shadow:0 0 0 3px var(--gold);position:absolute;left:-11px;top:.35rem}
.timeline h3{margin:0 0 .15rem;color:var(--red)}
.timeline time{display:inline-block;font-weight:800;color:var(--ink)}
.timeline p{margin:.25rem 0}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--gold-300);border-radius:12px;padding:.85rem 1rem;background:#fff;margin:.6rem 0}
.faq summary{cursor:pointer;font-weight:800;color:var(--ink);outline:none}
.faq details[open]{border-color:var(--gold)}
.faq details p{margin:.6rem 0 0}

/* ---------- CONTATTI ---------- */
.contact a{color:var(--red);font-weight:800;text-decoration:none}
.contact a:hover{text-decoration:underline}

/* ---------- FOOTER ---------- */
.site-footer{border-top:3px solid var(--gold);background:#fff}
.footer-inner{padding:1.25rem 0;text-align:center}
.footer-inner .gold{color:var(--gold);font-weight:900}
.tiny{color:var(--muted);font-size:.92rem}