/* ==========================================================================
   IO SUONO E BASTA — Stili personalizzati
   Layout e spaziature base arrivano da Bootstrap 5: qui ci sono le variabili
   del progetto e solo ciò che Bootstrap non offre.

   Indice
   1. Variabili
   2. Base
   3. Tipografia
   4. Layout e sezioni
   5. Navigazione e brand
   6. Componenti
   7. Utility (spazi, rotazioni, proporzioni)
   ========================================================================== */


/* 1. VARIABILI
   ========================================================================== */

:root {
  /* Colori */
  --color-azure: #53A8BC;
  --color-azure-rgb: 83, 168, 188;
  --color-azure-light: #8CC7D5;
  --color-azure-light-rgb: 140, 199, 213;
  --color-ink: #191919;
  --color-ink-rgb: 25, 25, 25;
  --color-cream: #E2D4B9;
  --color-cream-rgb: 226, 212, 185;
  --color-tape: rgba(236, 232, 214, .72);

  /* Font */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;

  /* Mappatura sul tema Bootstrap */
  --bs-primary: var(--color-azure);
  --bs-primary-rgb: var(--color-azure-rgb);
  --bs-secondary: var(--color-cream);
  --bs-secondary-rgb: var(--color-cream-rgb);
  --bs-dark: var(--color-ink);
  --bs-dark-rgb: var(--color-ink-rgb);
  --bs-body-bg: var(--color-ink);
  --bs-body-bg-rgb: var(--color-ink-rgb);
  --bs-body-color: var(--color-azure);
  --bs-body-color-rgb: var(--color-azure-rgb);
  --bs-body-font-family: var(--font-body);
  --bs-body-line-height: 1.55;
  --bs-heading-color: inherit;
  --bs-link-color: var(--color-azure);
  --bs-link-color-rgb: var(--color-azure-rgb);
  --bs-link-hover-color: var(--color-azure-light);
  --bs-link-hover-color-rgb: var(--color-azure-light-rgb);
  --bs-border-color: var(--color-azure);

  /* Layout */
  --site-max: 1200px;
  --site-gutter: max(2.5rem, 10vw);
  --section-y: clamp(4.5rem, 9.7vw, 8.75rem);
  --section-y-xl: clamp(5.5rem, 12.5vw, 11.25rem);
  --section-y-lg: clamp(5rem, 11vw, 10rem);
  --section-y-md: clamp(4.5rem, 8.3vw, 7.5rem);
  --section-y-sm: clamp(3rem, 5.5vw, 5rem);
  --band-cut: clamp(1.25rem, 3.3vw, 3rem);

  /* Spaziature fluide */
  --space-fluid-sm: clamp(1.75rem, 2.5vw, 2.25rem);
  --space-fluid-md: clamp(2rem, 3.9vw, 3.5rem);
  --space-fluid-lg: clamp(2.5rem, 5vw, 4.5rem);
  --gutter-sm: clamp(1.75rem, 2.8vw, 2.5rem);
  --gutter-md: clamp(2rem, 3.9vw, 3.5rem);
  --gutter-lg: clamp(2rem, 4.45vw, 4rem);
  --gutter-xl: clamp(2.5rem, 5.55vw, 5rem);
  --gap-point: .875rem;
  --point-number-width: 2.5rem;

  /* Inclinazione: su mobile è ridotta per guadagnare spazio */
  --tilt-scale: .6;

  /* Pulsanti */
  --btn-offset: 6px;

  /* Testi display (Bebas Neue) — mobile first */
  --fs-d196: clamp(5.5rem, 27vw, 11.5rem);
  --fs-d176: clamp(4.75rem, 22vw, 10rem);
  --fs-d150: clamp(3.5rem, 16vw, 8.5rem);
  --fs-d136: clamp(3.75rem, 18vw, 8.5rem);
  --fs-d128: clamp(3.5rem, 17vw, 8rem);
  --fs-d104: clamp(3.25rem, 15.5vw, 6.5rem);
  --fs-d96: clamp(4rem, 17vw, 6rem);
  --fs-d88: clamp(3.75rem, 17vw, 5.5rem);
  --fs-d80: clamp(3.25rem, 14vw, 5rem);
  --fs-d72: clamp(3rem, 13vw, 4.5rem);
  --fs-d64: clamp(2.75rem, 11.5vw, 4rem);
  --fs-d56: clamp(2.5rem, 10vw, 3.5rem);
  --fs-d48: clamp(2.25rem, 9vw, 3rem);
  --fs-d44: clamp(2.125rem, 8.5vw, 2.75rem);
  --fs-d40: clamp(1.875rem, 7.6vw, 2.5rem);
  --fs-d38: clamp(2rem, 8vw, 2.375rem);
  --fs-d36: clamp(1.75rem, 7vw, 2.25rem);
  --fs-d26: 1.625rem;
  --fs-d24: 1.5rem;

  /* Testi correnti (Hanken Grotesk) */
  --fs-30: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --fs-28: clamp(1.3125rem, 1.05rem + 1.1vw, 1.75rem);
  --fs-24: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --fs-22: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  --fs-20: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-19: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --fs-18: clamp(1.0625rem, 1rem + .15vw, 1.125rem);
  --fs-17: clamp(1rem, .97rem + .1vw, 1.0625rem);
  --fs-16: 1rem;
  --fs-15: .9375rem;
  --fs-14: .875rem;
  --fs-13: .8125rem;
}

/* Tablet e desktop */
@media (min-width: 768px) {
  :root {
    --tilt-scale: 1;
    --gap-point: 1.5rem;
    --point-number-width: 3.5rem;
  }
}

/* Da qui il layout è a due colonne: i titoli si ridimensionano sulla colonna */
@media (min-width: 992px) {
  :root {
    --fs-d196: clamp(8rem, 13.6vw, 12.25rem);
    --fs-d176: clamp(7rem, 12.2vw, 11rem);
    --fs-d150: clamp(5.25rem, 10.4vw, 9.375rem);
    --fs-d136: clamp(5.5rem, 9.45vw, 8.5rem);
    --fs-d128: clamp(5.5rem, 8.9vw, 8rem);
    --fs-d104: clamp(4.5rem, 7.2vw, 6.5rem);
  }
}

/* Tre card affiancate: il nome della fase deve stare nella colonna */
@media (min-width: 1200px) {
  :root {
    --fs-d88: clamp(4.5rem, 6.1vw, 5.5rem);
  }
}


/* 2. BASE
   ========================================================================== */

h1, h2, h3, p, ol {
  margin: 0;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-cream);
  outline-offset: 3px;
}


/* 3. TIPOGRAFIA
   ========================================================================== */

[class*='dsp-'] {
  font-family: var(--font-display);
  font-weight: 400;
}

.dsp-196 { font-size: var(--fs-d196); line-height: .82; }
.dsp-176 { font-size: var(--fs-d176); line-height: .82; }
.dsp-150 { font-size: var(--fs-d150); line-height: .82; }
.dsp-136 { font-size: var(--fs-d136); line-height: .82; }
.dsp-128 { font-size: var(--fs-d128); line-height: .84; }
.dsp-104 { font-size: var(--fs-d104); line-height: .86; }
.dsp-96  { font-size: var(--fs-d96);  line-height: .82; }
.dsp-88  { font-size: var(--fs-d88);  line-height: .86; }
.dsp-80  { font-size: var(--fs-d80);  line-height: .9; }
.dsp-72  { font-size: var(--fs-d72);  line-height: .9; }
.dsp-64  { font-size: var(--fs-d64);  line-height: .92; }
.dsp-56  { font-size: var(--fs-d56);  line-height: .95; }
.dsp-48  { font-size: var(--fs-d48);  line-height: .95; }
.dsp-44  { font-size: var(--fs-d44);  line-height: 1; }
.dsp-40  { font-size: var(--fs-d40);  line-height: 1; }
.dsp-38  { font-size: var(--fs-d38);  line-height: 1; }
.dsp-36  { font-size: var(--fs-d36);  line-height: 1; }
.dsp-26  { font-size: var(--fs-d26);  line-height: 1; }
.dsp-24  { font-size: var(--fs-d24);  line-height: 1; }

.txt-30 { font-size: var(--fs-30); }
.txt-28 { font-size: var(--fs-28); }
.txt-24 { font-size: var(--fs-24); }
.txt-22 { font-size: var(--fs-22); }
.txt-20 { font-size: var(--fs-20); }
.txt-19 { font-size: var(--fs-19); }
.txt-18 { font-size: var(--fs-18); }
.txt-17 { font-size: var(--fs-17); line-height: 1.6; }
.txt-16 { font-size: var(--fs-16); }
.txt-15 { font-size: var(--fs-15); }
.txt-14 { font-size: var(--fs-14); }
.txt-13 { font-size: var(--fs-13); }

.fw-extrabold { font-weight: 800; }
.lh-tight { line-height: 1.15; }
.lh-snug { line-height: 1.3; }
.lh-compact { line-height: 1.42; }
.lh-display-highlight { line-height: 1.2; } /* evita che l'evidenziato copra la riga accanto */
.label-spaced { letter-spacing: .14em; }

.highlight,
.highlight-ink {
  padding: 0 .18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.highlight {
  background: var(--color-azure);
  color: var(--color-ink);
}

.highlight-ink {
  background: var(--color-ink);
  color: var(--color-azure);
}


/* 4. LAYOUT E SEZIONI
   ========================================================================== */

/* Taglia nastri e foto inclinate ai bordi. `clip`, a differenza di `hidden`,
   impedisce che focus e ancore facciano scorrere la pagina di lato. */
.site-page {
  overflow-x: hidden;
  overflow-x: clip;
}

.site-container {
  --bs-gutter-x: var(--site-gutter);
  max-width: calc(var(--site-max) + var(--site-gutter));
}

.site-container-hero { --site-max: 1240px; }
.site-container-wide { --site-max: 1260px; }

.hero { padding: 2rem 0 var(--section-y-md); }

.hero-kicker { max-width: 520px; }
.hero-lead { max-width: 480px; }

.section { padding-block: var(--section-y); }
.section-top-xl { padding-top: var(--section-y-xl); }
.section-top-lg { padding-top: var(--section-y-lg); }
.section-top-sm { padding-top: var(--section-y-sm); }
.section-bottom-lg { padding-bottom: var(--section-y-lg); }
.section-bottom-sm { padding-bottom: var(--section-y-md); }

.section-overlap { margin-block: calc(var(--band-cut) * -1); }

/* Fasce azzurre tagliate in diagonale: taglio fisso, indipendente dall'altezza */
.band-cut-a { clip-path: polygon(0 var(--band-cut), 100% 0, 100% calc(100% - var(--band-cut)), 0 100%); }
.band-cut-b { clip-path: polygon(0 0, 100% var(--band-cut), 100% 100%, 0 calc(100% - var(--band-cut))); }
.band-cut-c { clip-path: polygon(0 var(--band-cut), 100% 0, 100% 100%, 0 calc(100% - var(--band-cut))); }

.block-narrow { max-width: 980px; }

.site-footer { padding-block: 4rem 3.5rem; }
.footer-text { max-width: 460px; }

@media (min-width: 992px) {
  .hero-title {
    width: 760px;
    max-width: 120%;
  }

  .shift-column { translate: 0 28px; }
}

@media (min-width: 1200px) {
  .shift-card { translate: 0 18px; }
}


/* 5. NAVIGAZIONE E BRAND
   ========================================================================== */

.site-nav {
  --bs-navbar-color: var(--color-azure);
  --bs-navbar-hover-color: var(--color-azure-light);
  --bs-navbar-active-color: var(--color-azure-light);
  --bs-navbar-brand-color: var(--color-azure);
  --bs-navbar-brand-hover-color: var(--color-azure-light);
  --bs-navbar-nav-link-padding-x: 0;
  --bs-navbar-toggler-padding-x: .5rem;
  --bs-navbar-toggler-padding-y: .375rem;
  --bs-navbar-toggler-border-color: var(--color-azure);
  --bs-navbar-toggler-border-radius: 0;
  --bs-navbar-toggler-focus-width: 0;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2353A8BC' stroke-linecap='square' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-nav-link-font-size: .9375rem;
  --bs-nav-link-font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.site-nav .navbar-toggler {
  border-width: 3px;
}

.brand-logo,
.brand-footer {
  font-family: var(--font-display);
  line-height: .8;
}

.brand-logo { text-decoration: none; }
.brand-line-1 { font-size: 1.875rem; }
.brand-line-2 { font-size: 2.625rem; }

.brand-footer-1 { font-size: clamp(3.25rem, 5vw, 4.5rem); }
.brand-footer-2 { font-size: clamp(4.75rem, 7.25vw, 6.5rem); }


/* 6. COMPONENTI
   ========================================================================== */

/* Pulsante: estende .btn di Bootstrap tramite le sue variabili.
   --punk-bg e --punk-fg definiscono le varianti. */
.btn-punk {
  --punk-bg: var(--color-azure);
  --punk-fg: var(--color-ink);
  --bs-btn-color: var(--punk-fg);
  --bs-btn-bg: var(--punk-bg);
  --bs-btn-border-color: var(--punk-bg);
  --bs-btn-hover-color: var(--punk-bg);
  --bs-btn-hover-bg: var(--punk-fg);
  --bs-btn-hover-border-color: var(--punk-bg);
  --bs-btn-active-color: var(--punk-bg);
  --bs-btn-active-bg: var(--punk-fg);
  --bs-btn-active-border-color: var(--punk-bg);
  --bs-btn-border-width: 3px;
  --bs-btn-border-radius: 0;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: .75rem;
  --bs-btn-font-family: var(--font-body);
  --bs-btn-font-size: 1.0625rem;
  --bs-btn-font-weight: 800;
  --bs-btn-line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  width: calc(100% - var(--btn-offset) - 2px);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .03em;
  rotate: calc(-2deg * var(--tilt-scale));
  box-shadow:
    var(--btn-offset) var(--btn-offset) 0 var(--punk-fg),
    var(--btn-offset) var(--btn-offset) 0 2px var(--punk-bg);
}

.btn-punk:focus-visible {
  outline: 3px solid var(--color-cream);
  outline-offset: 3px;
  box-shadow:
    var(--btn-offset) var(--btn-offset) 0 var(--punk-fg),
    var(--btn-offset) var(--btn-offset) 0 2px var(--punk-bg);
}

.btn-punk-ink {
  --punk-bg: var(--color-ink);
  --punk-fg: var(--color-azure);
}

.btn-punk-cream {
  --punk-bg: var(--color-cream);
  --punk-fg: var(--color-ink);
}

.btn-punk-card {
  --bs-btn-font-size: 1rem;
}

.btn-punk-sm {
  --bs-btn-font-size: .875rem;
  --bs-btn-padding-y: 0;
  min-height: 48px;
  justify-content: center;
}

.btn-punk-sub {
  display: block;
  margin-top: 6px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  opacity: .8;
}

.btn-punk-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

@media (min-width: 768px) {
  .btn-punk {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-font-size: 1.1875rem;
    justify-content: flex-start;
    width: auto;
  }

  .btn-punk-card {
    --bs-btn-font-size: 1rem;
    justify-content: space-between;
    width: 100%;
  }

  .btn-punk-sm {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: .875rem;
  }

  .btn-punk-lg {
    --bs-btn-padding-x: 2.5rem;
    --bs-btn-padding-y: .875rem;
    --bs-btn-font-size: 1.5rem;
    min-height: 80px;
  }

  .btn-punk-lg .btn-punk-sub { font-size: .8125rem; }
  .btn-punk-lg .btn-punk-icon { width: 24px; height: 24px; }
}

/* Nastro adesivo */
.tape {
  --tilt-scale: 1;
  position: absolute;
  top: -14px;
  z-index: 2;
  width: clamp(110px, 10.4vw, 150px);
  height: clamp(28px, 2.5vw, 36px);
  background: var(--color-tape);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

.tape-sm { width: clamp(90px, 8.3vw, 120px); }

.tape-left-8  { left: 8%; }
.tape-left-10 { left: 10%; }
.tape-left-12 { left: 12%; }
.tape-left-30 { left: 30%; }
.tape-left-32 { left: 32%; }
.tape-left-34 { left: 34%; }
.tape-left-38 { left: 38%; }
.tape-left-40 { left: 40%; }
.tape-right-8  { right: 8%; }
.tape-right-10 { right: 10%; }
.tape-right-12 { right: 12%; }
.tape-right-18 { right: 18%; }

.tape-corner-tl {
  top: -12px;
  left: -20px;
  rotate: -35deg;
}

.tape-corner-br {
  top: auto;
  right: -24px;
  bottom: -10px;
  rotate: -30deg;
}

/* Ritagli irregolari delle immagini */
.cut-a { clip-path: polygon(2% 3%, 18% 0, 41% 2.5%, 63% 0, 86% 3%, 100% 1%, 98% 22%, 100% 47%, 97.5% 71%, 99% 97%, 78% 100%, 52% 97%, 29% 100%, 6% 98%, 0 76%, 2% 51%, 0 27%); }
.cut-b { clip-path: polygon(0 1%, 24% 3.5%, 49% 0, 73% 2%, 99% 0, 100% 30%, 97% 58%, 100% 83%, 98% 100%, 71% 97%, 45% 100%, 20% 98%, 1% 100%, 3% 70%, 0 44%, 2.5% 20%); }
.cut-c { clip-path: polygon(4% 0, 96% 2%, 100% 96%, 0 100%); }

/* Punti numerati */
.point-number {
  flex: 0 0 var(--point-number-width);
  line-height: .9;
}

.list-number {
  flex: 0 0 36px;
}

.result-label {
  flex: 0 0 96px;
}

/* Etichette e pannelli */
.badge-title {
  padding: .375rem 1.625rem 0;
  line-height: 1;
}

.stamp {
  padding: .25rem 1.375rem 0;
  line-height: 1;
}

.panel-lg {
  padding: 2rem 1.5rem;
}

@media (min-width: 992px) {
  .panel-lg { padding: 3rem; }
}

/* Divisori */
.divider-solid { border-bottom: 2px solid var(--color-ink); }
.divider-solid-lg { border-bottom: 4px solid var(--color-ink); }
.divider-dashed-top { border-top: 1px dashed var(--color-ink); }
.divider-top-thin { border-top: 2px solid var(--color-azure); }
.divider-dashed-soft:not(:last-child) { border-bottom: 2px dashed rgba(var(--color-azure-rgb), .5); }

.split-divider { border-bottom: 3px solid var(--color-ink); }

@media (min-width: 992px) {
  .split-divider {
    border-right: 3px solid var(--color-ink);
    border-bottom: 0;
  }
}


/* 7. UTILITY
   ========================================================================== */

/* Estensioni della scala di spaziatura Bootstrap */
.gap-fluid-sm { gap: var(--space-fluid-sm); }
.gap-fluid-md { gap: var(--space-fluid-md); }
.gap-fluid-lg { gap: var(--space-fluid-lg); }
.gap-point { gap: var(--gap-point); }

.g-fluid-sm { --bs-gutter-x: var(--gutter-sm); --bs-gutter-y: var(--gutter-sm); }
.g-fluid-md { --bs-gutter-x: var(--gutter-md); --bs-gutter-y: var(--gutter-md); }
.g-fluid-lg { --bs-gutter-x: var(--gutter-lg); --bs-gutter-y: var(--gutter-lg); }
.g-fluid-xl { --bs-gutter-x: var(--gutter-xl); --bs-gutter-y: var(--gutter-xl); }
.g-fluid-card { --bs-gutter-x: 2rem; --bs-gutter-y: 2.5rem; }
.gx-fluid-lg { --bs-gutter-x: var(--gutter-lg); }

.p-fluid { padding: clamp(1.5rem, 2.5vw, 2.25rem); }

@media (min-width: 992px) {
  .p-lg-fluid { padding: 1.75rem 2rem !important; }
}

/* Proporzioni immagini */
.ar-1x1   { aspect-ratio: 1 / 1; }
.ar-4x5   { aspect-ratio: 4 / 5; }
.ar-4x3   { aspect-ratio: 4 / 3; }
.ar-16x10 { aspect-ratio: 16 / 10; }
.ar-16x6  { aspect-ratio: 16 / 6; }

@media (max-width: 767.98px) {
  .ar-16x6 { aspect-ratio: 16 / 9; }
}

.origin-left { transform-origin: left center; }

/* Inclinazioni: proprietà `rotate`, moltiplicate per --tilt-scale */
.tilt-n4   { rotate: calc(-4deg * var(--tilt-scale)); }
.tilt-n3   { rotate: calc(-3deg * var(--tilt-scale)); }
.tilt-n2-5 { rotate: calc(-2.5deg * var(--tilt-scale)); }
.tilt-n2   { rotate: calc(-2deg * var(--tilt-scale)); }
.tilt-n1-5 { rotate: calc(-1.5deg * var(--tilt-scale)); }
.tilt-n1-2 { rotate: calc(-1.2deg * var(--tilt-scale)); }
.tilt-n1   { rotate: calc(-1deg * var(--tilt-scale)); }
.tilt-n0-8 { rotate: calc(-.8deg * var(--tilt-scale)); }
.tilt-p1   { rotate: calc(1deg * var(--tilt-scale)); }
.tilt-p1-2 { rotate: calc(1.2deg * var(--tilt-scale)); }
.tilt-p1-5 { rotate: calc(1.5deg * var(--tilt-scale)); }
.tilt-p2   { rotate: calc(2deg * var(--tilt-scale)); }
.tilt-p3   { rotate: calc(3deg * var(--tilt-scale)); }

.tilt-tape-n8 { rotate: -8deg; }
.tilt-tape-n6 { rotate: -6deg; }
.tilt-tape-n5 { rotate: -5deg; }
.tilt-tape-n4 { rotate: -4deg; }
.tilt-tape-n3 { rotate: -3deg; }
.tilt-tape-p4 { rotate: 4deg; }
.tilt-tape-p5 { rotate: 5deg; }
.tilt-tape-p7 { rotate: 7deg; }