/* =======================================
   RESET
======================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: default;
}

/* =======================================
   VARIABILI
======================================= */

:root {

  /* Colori */
  --rosso: #A52716;
  --rosso-scuro: #801E11;
  --marrone: #997A5E;
  --marrone-2: #837062;
  --marrone-3: #CDB8A5;
  --giallino: #F1F1E8;
  --grigio: #F9F9F9;
  --bianco: #FFFFFF;
  --nero: #3A2006;

  /* Tipografia */
  --ff-inter: "Inter", sans-serif;

  --fs-XL: 13vw; /* numeri giganti (colophon) */
  --fs-h1: 5.5vw; /* numeri principali */
  --fs-h2: 48px; /* titoli overlay menu */
  --fs-h3: 32px; /* titoli card stampa */
  --fs-p: 1.5vw; /* corpo testo */
  --lh-p: 140%;

  /* Spaziature */
  --padding-slide: 6vw 3vw; /* padding standard slide desktop */
  --padding-slide-mobile: 8vw; /* padding standard slide mobile */
  --padding-overlay: 3vw; /* padding overlay desktop */
  --padding-overlay-mobile: 16vw 8vw 8vw 8vw; /* padding overlay mobile */
  --gap-figure: 6em; /* margine inferiore tra figure */
  --radius-btn: 1.2em; /* border-radius bottoni */
  --radius-slide: 6vh 6vh 0 0; /* border-radius slide arrotondata */

  /* — Transizioni — */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.4s ease;
}

/* — Breakpoint mobile — */
@media (max-width: 768px) {
  :root {
    --fs-h1: 32px;
    --fs-p: 18px;
    --fs-XL: 22vw;
    --fs-h3: 28px;
  }
}


/* =======================================
   BASE
======================================= */

html {
  scroll-behavior: smooth;
  font-family: var(--ff-inter);
  line-height: 1em;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--nero);
}

body {
  background-color: var(--bianco);
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}


/* =======================================
   TIPOGRAFIA
======================================= */

.XL {
  font-size: var(--fs-XL) !important;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.04em;
  color: var(--rosso);
}

.h1 {
  font-size: var(--fs-h1) !important;
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.04em;
}

h2 {
  font-size: var(--fs-h2);
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.1em;
}

p {
  font-size: var(--fs-p);
  line-height: 1.3em;
  font-weight: 400;
}

strong {
  font-weight: 700;
}

/* — Utilità colore — */
.marrone-3 {
  color: var(--marrone-3);
}

/* — A capo: visibili ovunque tranne mobile — */
@media (max-width: 768px) {
  br {
    display: none;
  }

  /* eccezioni: sezioni dove il <br> serve */
  .hero br,
  .slide-giallina br,
  .overlay-content br,
  #intro br {
    display: inline;
  }
}

/* =======================================
   GRIGLIA e LAYOUT
======================================= */

/* — Larghezze — */
.half { width: 45%; }
.w55  { width: 55%; }
.w45  { width: 45%; }
.w40  { width: 40%; }
.w25  { width: 25%; }

/* — Video — */
.w40 video {
  width: 100%;
  height: auto;
  display: block;
}

/* — Allineamento orizzontale figure — */
.img-dx { margin-left: auto; }
.img-sx { margin-right: auto; }

/* — Offset posizionamento figure — */
.left-6  { left: 6em; }
.left-12 { left: 12em; }
.right-6 { right: 6em; }
.right-12 { right: 12em; }

/* — Responsive/mobile: tutto full width — */
@media (max-width: 768px) {
  .half,
  .w55, .w45, .w40, .w25 {
    width: 100%;
  }
 
  .left-6, .left-12,
  .right-6, .right-12 {
    left: 0;
    right: 0;
  }
}

@media (max-width: 600px) {
  .half { width: 100%; }
}

/* — Visibilità desktop/mobile — */
.mobile-only { display: none; }

@media (max-width: 768px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}


/* =======================================
   FIGURE E IMMAGINI
======================================= */

figure img {
  width: 100%;
  height: auto;
  display: block;
}

figcaption {
  background-color: var(--giallino);
  padding: 1em;
}

/* — Titolo gioco (usato in figcaption e overlay stampa) — */
.titolo-gioco {
  color: var(--rosso);
  font-weight: 700;
}

.titolo-gioco::before {
  content: "•";
  color: var(--rosso);
  margin-right: .3em;
}


/* =======================================
   NAVBAR /HEADER
======================================= */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2vw 3vw;
  display: flex;
  justify-content: flex-end;
  gap: 1.2em;
  z-index: 1000;
}

/* — Bottone generico — */
header .btn {
  background-color: var(--rosso);
  color: var(--bianco);
  border-radius: var(--radius-btn);
  padding: .7em 1.4em;
  font-weight: 600;
  line-height: 1em;
  text-decoration: none;
  transition: background-color var(--transition-normal)
}

header .btn:hover {
  background-color: var(--rosso-scuro);
}

/* — Bottone burger (solo icona) — */
header .btn.btn-menu {
  padding: .67em;
}

header .btn img {
  height: 1em;
  display: block;
}

/* — Le immagini dentro bottoni non intercettano il mouse
     (altrimenti il cursore custom sparisce) — */
.overlay img {
  pointer-events: none;
}

@media (max-width: 768px) {
  header {
    padding: 4vw 8vw;
    gap: .6em;
  }
}


/* =======================================
   SLIDE
======================================= */

/* Badge numero capitolo */
.numero-capitolo {
  display: inline-block;
  position: relative;
  background-color: var(--rosso);
  color: var(--bianco);
  font-size: .4em;
  line-height: 1em;
  padding: .4em 1em;
  border-radius: 1em;
  letter-spacing: 0.04em;
  transform: translateY(-.5em);
  margin-right: .5em;
}

/* Slide immagine */
.hero,
.slide-immagine {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
  background-color: var(--rosso);
  color: var(--bianco);
}

.hero figure img,
.slide-immagine img, 
.slide-immagine video {
  width: 100%;
  height: 100dvh;
  object-fit: cover;
}

/* — Gradiente sulla hero — */
.hero figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 85%);
}

/* — Testo sovrapposto all'hero — */
.hero-text {
  position: absolute;
  bottom: 3vw;
  left: 3vw;
  color: var(--bianco);
  z-index: 100;
}

.hero-text h1 {
  margin-bottom: 2em;
}

.hero-text img {
  width: auto;
  height: 60dvh;
}

/* — Mobile: slide immagine — */
@media (max-width: 768px) {
  .slide-immagine {
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: auto;
  } 
  
  .slide-immagine img, 
  .slide-immagine video {
    width: 100%;
    height: 100dvh;
    object-fit: cover;
    object-position: center;
  }
  .hero-text {
    bottom: 6vw;
    left: 8vw;
    right: 8vw;
  }
  .hero-text h1 {
  margin-bottom: 1em;
  }
  .hero-text img {
    width: 100%;
    height: auto;
  }
}


/* =======================================
   SLIDE MARRONE
======================================= */

.slide-marrone {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: var(--padding-slide);
  background-color: var(--marrone-2);
  color: var(--marrone-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Arrotondamento angoli superiori */
.round {
  border-radius: var(--radius-slide);
}

/* la slide #intro non è sticky */
#intro {
  position: relative;
}


/* =======================================
   SLIDE BIANCA
======================================= */
.slide-bianca {
  position: relative;
  width: 100%;
  background-color: var(--bianco);
  padding: var(--padding-slide);
}

/* Variante trasparente */
.no-bg {
  background-color: transparent;
}

/* Colonna testi: sticky mentre le immagini scorrono */
.slide-bianca .testi {
  position: sticky;
  top: 6vw;
  width: 58%;
}

.slide-bianca .testi .h1 {
  position: relative;
  color: var(--rosso);
  margin-bottom: 1.2em;
}

.slide-bianca .testi p {
  width: 60%;
}

/* Colonna immagini */
.slide-bianca .immagini {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slide-bianca .immagini figure {
  position: relative;
  margin-bottom: var(--gap-figure);
}


/* =======================================
   SLIDE GIALLINA
======================================= */

.slide-giallina {
  position: relative;
  width: 100%;
  background-color: var(--giallino);
  padding: var(--padding-slide);
}

/* — Colonna testi: sticky — */
.slide-giallina .testi {
  position: sticky;
  top: 6vw;
}

.slide-giallina .testi p {
  width: 85%;
  margin-bottom: 1em;
}

.slide-giallina figure {
  margin-bottom: var(--gap-figure);
}


/* — Mobile: tutto in colonna, niente sticky — */

@media (max-width: 768px) {
  .slide-giallina,
  .slide-bianca {
    padding: var(--padding-slide-mobile);
  }
  .slide-marrone {
    padding: 14vw 8vw;
  }
  .slide-marrone,
  .slide-bianca {
    position: relative;
    gap: 2.5em;
    height: auto;
  }
  .no-bg {
  background-color: var(--marrone-2);
  }
  .slide-bianca .testi,
  .slide-giallina .testi {
    position: relative;
    top: 2em;
    width: 100%;
    height: auto;
    margin-bottom: 6em;
  }
  .slide-bianca .testi .h1,
  .slide-marrone .h1 {
    letter-spacing: -0.02em;
  }
  .slide-bianca .testi p,
  .slide-giallina .testi p {
    width: 100%;
  }
  .slide-bianca .immagini figure, 
  .slide-giallina figure {
    margin-bottom: 0;
    margin-top: 1em;
  }
}


/* =======================================
   OVERLAY — BASE COMUNE
======================================= */

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  z-index: 2000;
  padding: var(--padding-overlay);
  transform: translateX(100%);
  transition: var(--transition-slow);
}

.overlay.open {
  transform: translateX(0);
}

/* Bottone chiudi */
.overlay-close {
  position: absolute;
  top: 3vw;
  right: 3vw;
  background: none;
  border: none;
  color: var(--bianco);
}

/* Mobile: tutti gli overlay a piena larghezza*/
@media (max-width: 768px) {
  .overlay {
    width: 100% !important;
    padding: var(--padding-overlay-mobile);
  }
  .overlay-close {
  top: 6vw;
  right: 6vw;
}
}

/* =======================================
   OVERLAY — CONTATTI
======================================= */

#overlay-contatti {
  width: 45vw;
  background-color: var(--marrone);
  color: var(--bianco);
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* contenuto ancorato in basso */
}

.overlay-content p {
  margin-bottom: 1.2em;
}

.overlay-content a {
  color: var(--bianco);
  background-color: transparent;
  text-decoration: none;
  transition: var(--transition-fast);
}

.overlay-content a:hover {
  text-decoration: underline;
  color: var(--marrone-3);
}


/* =======================================
   OVERLAY — AREA STAMPA
======================================= */

#overlay-stampa {
  width: 70vw;
  background-color: var(--marrone-2);
  color: var(--marrone-3);
  display: flex;
  flex-direction: column;
}

/* Layout: immagine fissa + lista scrollabile */
.overlay-stampa-inner {
  display: flex;
  height: 100%;
  gap: 3em;
  padding-top: 3vw;
}

/* immagine laterale fissa */
.overlay-stampa-img {
  width: 30%;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.overlay-stampa-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* lista articoli scrollabile */
.overlay-stampa-lista {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 3em;
}

/* singolo articolo */
.overlay-stampa-item {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 1.4em 0;
  border-bottom: 1px solid var(--marrone-3);
  text-decoration: none;
  color: var(--marrone-3);
  transition: var(--transition-normal);
}

.overlay-stampa-item:hover {
  color: var(--bianco);
}

.overlay-stampa-item:hover .overlay-stampa-btn {
  background-color: var(--rosso-scuro);
}


/* — titolo fonte sempre bianco — */
.overlay-stampa-item .titolo-gioco {
  display: block;
  color: var(--bianco);
  margin-bottom: 0.5em;
}


/* bottone freccia rotondo */
.overlay-stampa-btn {
  flex-shrink: 0;
  width: 2.5em;
  height: 2.5em;
  background-color: var(--rosso);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--bianco);
  transition: var(--transition-normal);
}

.overlay-stampa-btn img {
  width: 1.2em;
  height: 1.2em;
  display: block;
}

/* testo credits in fondo alla lista */
.overlay-stampa-footer {
  margin-top: 2em;
}


/* =======================================
   OVERLAY — MENU
======================================= */
#overlay-menu {
  width: 45vw;
  background-color: var(--rosso);
  color: var(--bianco);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2vw 3vw;
}

/* lista voci di menu */
.overlay-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.overlay-menu-nav a {
  color: var(--bianco);
  text-decoration: none;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.2em;
  transition: var(--transition-fast);
}

.overlay-menu-nav a:hover {
  opacity: 0.5;
}


/* mobile */
@media (max-width: 1078px) {
  .overlay-menu-nav a {
    font-size: 40px;
    }
}

@media (max-width: 768px) {
  #overlay-contatti,
  #overlay-stampa,
  #overlay-menu {
  width: 100%;
  }
  #overlay-menu {
    padding: var(--padding-overlay-mobile);
  }
  .overlay-content p {
    margin-bottom: 1em;
  }
  .overlay-stampa-inner {
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
  }
  .overlay-stampa-img {
    width: 100%;
    position: relative;
  }
  .overlay-stampa-lista {
    overflow-y: visible;
  }
  .overlay-menu-nav a {
    font-size: 38px;
  }
}