/* ================================================
   DESIGN SYSTEM — Lucrezia Stampi Dietista
   ================================================ */

:root {

  /* ── COLORI SFONDO ── */
  --crema:          #FAF8F5;
  --crema-scura:    #EEE7F1;
  --notte:          #4E435F;

  /* ── COLORI TESTO ── */
  --inchiostro:     #18131F;
  --sabbia:         #665A72;
  --chiaro:         #FAF8F5;

  /* ── TESTI SU SFONDO NOTTE ── */
  --chiaro-60:      rgba(250, 248, 245, 0.64); /* etichette, testo secondario */
  --chiaro-75:      rgba(250, 248, 245, 0.80); /* testo corpo */
  --chiaro-25:      rgba(250, 248, 245, 0.26); /* bordi sottili */

  /* ── ACCENTI ── */
  --terra:          #8E6FA3;
  --terra-scura:    #6F5483;

  /* ── LILLA ── */
  --lilla:          #BFAFCC;
  --lilla-scuro:    #82708F;
  --rosa:           #E8D4D2;

  /* ── BORDI ── */
  --bordo:          #D8CDDF;
  --bordo-scuro:    #18131F;

  /* ── BOTTONI ── */
  --btn-sfondo:     #8E6FA3;
  --btn-testo:      #FAF8F5;
  --btn-hover:      #6F5483;

  /* ── FONT ── */
  --font-corpo:     var(--theme-font-family);
  --font-titolo:    var(--theme-heading-font-family);

  /* ── PESI ── */
  --peso-light:     300;
  --peso-normale:   400;
  --peso-medio:     500;

  /* ── LAYOUT ── */
  --larghezza-max:     var(--theme-normal-container-max-width);
  --larghezza-stretta: var(--theme-narrow-container-max-width);
  --bordo-pagina:      var(--theme-container-edge-spacing);
  --spazio-verticale:  var(--theme-content-vertical-spacing);
  --offset-ampio:      var(--theme-wide-offset);

  /* ── TIPOGRAFIA ── */
  --testo-hero:     clamp(2.4rem, 5.5vw, 4.5rem);
  --testo-titolo:   clamp(1.8rem, 4vw, 3.8rem);
  --testo-titolo-s: clamp(1.4rem, 2.2vw, 2rem);
  --testo-subtitle: clamp(1.15rem, 2vw, 1.55rem);
  --testo-base:     clamp(1rem, 1.2vw, 1.15rem);
  --testo-piccolo:  0.875rem;

  /* ── INTERLINEE ── */
  --linea-hero:    1.05;
  --linea-titolo:  1.1;
  --linea-testo:   1.6;
  --linea-payoff:  1.3;

  /* ── SPAZIATURA SEZIONI ── */
  --sezione-s:  clamp(2.5rem, 5vh, 4rem);
  --sezione-m:  clamp(3rem, 6vh, 6rem);
  --sezione-l:  clamp(5rem, 12vw, 12rem);

  /* ── SPAZIO INTERNO ── */
  --spazio-1:  0.5rem;
  --spazio-2:  1rem;
  --spazio-3:  1.5rem;
  --spazio-4:  2rem;
  --spazio-6:  3rem;
  --spazio-8:  4rem;
  --spazio-12: 6rem;
  --spazio-16: 8rem;
}

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

* { touch-action: manipulation; }

*,
*::before,
*::after { box-sizing: border-box; }

body {
  background-color: var(--crema);
  color: var(--inchiostro);
  font-family: var(--font-corpo);
}

img, video {
  max-width: 100%;
  display: block;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ================================================
   UTILITIES
   ================================================ */

/* ── SEZIONE ── */
.sezione {
  width: 100%;
  background-color: var(--crema);
}

.sezione--alt   { background-color: var(--crema-scura); }
.sezione--scura { background-color: var(--notte); color: var(--chiaro); }

/* ── SPAZIATURA VERTICALE ── */
.gap-s { padding-block: var(--sezione-s); }
.gap-m { padding-block: var(--sezione-m); }
.gap-l { padding-block: var(--sezione-l); }

/* ── PRIMA SEZIONE: riduzione padding-top ── */
main > .sezione:first-child {
  padding-top: clamp(1rem, 2vh, 1.5rem);
}

/* ── MARGIN TOP ── */
.mt-1 { margin-top: var(--spazio-1); }
.mt-2 { margin-top: var(--spazio-2); }
.mt-3 { margin-top: var(--spazio-3); }
.mt-4 { margin-top: var(--spazio-4); }
.mt-6 { margin-top: var(--spazio-6); }
.mt-8 { margin-top: var(--spazio-8); }

/* ── ALLINEAMENTO TESTO ── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ── CONTAINER ── */
.container {
  width: var(--theme-container-width);
  max-width: var(--larghezza-max);
  margin-inline: auto;
}

/* ── ETICHETTA ── */
.etichetta {
  font-family: var(--font-corpo);
  font-size: var(--testo-piccolo);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sabbia);
}

/* ── BOTTONE ── */
.btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-family: var(--font-corpo);
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  font-weight: var(--peso-medio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--inchiostro);
  background-color: transparent;
  border: 1.5px solid var(--terra);
  padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1.2rem, 3vw, 2rem);
  border-radius: 1rem;
  transition: color 0.4s ease;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--notte);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 0;
}

.btn:hover { color: var(--chiaro); }
.btn:hover::before { transform: translateY(0); }

.btn span {
  position: relative;
  z-index: 1;
}

/* ── GRIGLIE ── */
.griglia-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-6);
  align-items: stretch;
}

@media (min-width: 768px) {
  .griglia-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.griglia-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spazio-6);
}

@media (min-width: 768px) {
  .griglia-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── COLONNA ── */
.colonna {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  height: 100%;
}

.colonna__immagine {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.colonna__immagine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── TITOLO SEZIONE ── */
.titolo-sezione {
  font-family: var(--font-titolo);
  font-size: var(--testo-titolo);
  font-weight: var(--peso-light);
  line-height: var(--linea-titolo);
  color: var(--inchiostro);
}

.titolo-sezione--chiaro {
  color: var(--chiaro);
}

/* ── TITOLO COLONNA ── */
.titolo-colonna {
  font-size: var(--testo-subtitle);
  font-weight: var(--peso-light);
  line-height: var(--linea-titolo);
  color: var(--inchiostro);
}

.titolo-colonna--chiaro {
  color: var(--chiaro);
}

/* ── TESTO CORPO ── */
.testo-corpo {
  font-family: var(--font-corpo);
  font-size: var(--testo-base);
  font-weight: var(--peso-light);
  line-height: var(--linea-testo);
  color: var(--sabbia);
}

/* ── TESTO CORPO SU SFONDO SCURO ── */
.sezione--scura .testo-corpo {
  color: var(--chiaro-75);
}

/* ── ETICHETTA SU SFONDO SCURO ── */
.sezione--scura .etichetta {
  color: var(--chiaro-60);
}

/* ── NUMERO ── */
.numero {
  font-family: var(--font-titolo);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: var(--peso-light);
  line-height: 1;
  color: var(--terra);
}

/* ── NUMERO SU SFONDO SCURO ── */
.sezione--scura .numero {
  color: var(--chiaro-25);
}

/* ── LINK FRECCIA ── */
.link-freccia {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  width: fit-content;
  font-family: var(--font-corpo);
  font-size: var(--testo-piccolo);
  font-weight: var(--peso-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--terra);
  transition: color 0.3s ease;
}

.link-freccia::before {
  content: '';
  position: absolute;
  left: 0;
  right: 1.5em;
  bottom: -0.25em;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.link-freccia::after {
  content: '→';
  display: inline-block;
  transition: transform 0.3s ease;
}

.link-freccia:hover {
  color: var(--terra-scura);
}

.link-freccia:hover::before {
  transform: scaleX(1);
}

.link-freccia:hover::after {
  transform: translateX(0.35rem);
}

/* ── LINK EMAIL ── */
.link-email {
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}

.link-email:hover {
  color: var(--terra-scura);
}

/* ================================================
   ACCESSIBILITY
   ================================================ */

/* ── FOCUS VISIBLE ── */
:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Rimuove outline di default solo se focus-visible è supportato */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .btn::before {
    transition: none;
  }
  .link-freccia,
  .link-freccia::before,
  .link-freccia::after {
    transition: none;
  }
}