/* ==========================================================================
   ESTRIA — Pagina Caso (dettaglio case study)
   Figma: Case-1 / M-Case-1 (mobile 393px).
   ========================================================================== */

body.caso-dark {
  background: var(--black);
  color: var(--grigio-3);
}

/* Navbar Case-1 (variante Default-White-1): CTA arancio con testo nero.
   Override locale come da manifesto: components.css non prevede una CTA
   arancio per la navbar on-dark. Non tocca caso-2.html (navbar default). */
.navbar--on-dark .navbar__cta {
  background: var(--arancio-1);
  color: var(--black);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Debug 0812c: la CTA si riempie di #595959 (grigio-1) all'hover in OGNI stato
   della navbar, hero compresa. Prima, sulla navbar ferma sullo sfondo, l'hover
   era un 50% di opacità che spegneva il riempimento (::before opacity 0): il
   grigio si vedeva solo dopo lo scroll. Tolti quegli override, resta il
   riempimento di .btn::before — già grigio-1 — uguale sul resto della pagina.
   Su touch lo stesso aspetto arriva col tap (:active). */
@media (hover: hover) {
  .navbar--on-dark .navbar__cta:hover {
    color: var(--grigio-3);
  }
}

.navbar--on-dark .navbar__cta:active {
  color: var(--grigio-3);
}

/* Modulo - Proprietà 2.2: navigazione casi sovrapposta al fondo viewport. */
.case-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  column-gap: 30px;
  height: 50px;
  padding: 5px 30px;
  background: var(--black);
  color: var(--grigio-3);
  transition:
    opacity 0.22s ease,
    transform 0.3s cubic-bezier(0.75, 0, 0.2, 1);
}

/* La dock occupa il fondo pagina e ci resta. La barra della chat sta 15px
   sopra di lei, in basso al centro come su ogni altra pagina: la posiziona
   .chatbot--dock in css/chatbot.css, che js/chatbot.js applica riconoscendo
   [data-case-dock]. Debug 0818 — prima saliva sotto la navbar. */

.case-dock.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

.case-dock__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  min-height: 40px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 14.5px;
  letter-spacing: 0.03em;
  transition: opacity 0.2s ease;
}

/* Debug 07/2026-3: hover al 50% di opacità sugli elementi interattivi
   della dock (su touch lo stesso aspetto arriva col tap, via :active) */
@media (hover: hover) {
  .case-dock__link:hover {
    opacity: 0.5;
  }
}

.case-dock__link:active {
  opacity: 0.5;
}

.case-dock__link--next {
  justify-self: end;
}

.case-dock__name {
  justify-self: center;
  color: var(--grigio-2);
  white-space: nowrap;
}

.case-dock .icon {
  width: 20px;
  height: 20px;
}

/* Hero (Modulo Cover-2): settore del caso + dato di sintesi ---------------- */

/* Debug 0812b: rifatto sulle misure lette dal frame Figma Case-1 (nodo
   270:7710, modulo 1512x769 sotto la navbar da 70px). La 0812 aveva
   interpretato "1/3 dello schermo" come una fascia al vivo alta 33.333vh:
   sbagliato. Nel design l'immagine e un BLOCCO CENTRATO 711x396 (400px di
   margine a sinistra, 401 a destra, 187 sopra, 186 sotto), non al vivo.

   Immagine e dato di sintesi occupano la stessa cella di griglia e sono
   entrambi centrati. Con la foto ai 711x396 di Figma il dato era piu alto
   della foto (470 contro 396) e la sbordava; dal Debug 0812-3 la foto e
   ingrandita del 20% e le due altezze sono quasi pari (475 contro 470),
   quindi lo sbordo del numero e quello che resta dopo l'alzata. */
.caso-hero {
  /* Di quanto il blocco numero+didascalia viene sollevato rispetto al centro
     dell'immagine. Nato nel Debug 0812c su una geometria diversa (foto 396
     alta, blocco 470: alzando di 37 la didascalia appoggiava sul bordo basso
     della foto). Col +20% del Debug 0812-3 la foto e alta 475 e quindi e lei
     a contenere il blocco: gli stessi 37px ora servono a tenere il numero
     fuori dalla foto in alto (~34px di sbordo) invece che centrato dentro.
     Resta l'unico valore da toccare per calibrare l'alzata. */
  --caso-hero-lift: 37px;

  display: grid;
  /* minmax(0, 1fr) e non 1fr: il minimo implicito "auto" di 1fr non scende
     sotto i 711px fissi dell'immagine, e in mobile la colonna sfonderebbe il
     contenitore invece di lasciare che max-width:100% rimpicciolisca la foto */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  padding-top: 190px; /* 70px navbar + 120px padding Figma */
  padding-bottom: 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
  overflow: clip;
}

/* stessa cella per immagine e dato; il titolo sr-only resta position:absolute
   e quindi fuori dal flusso della griglia */
.caso-hero__img,
.caso-hero__data {
  grid-area: 1 / 1;
}

.caso-hero__data {
  z-index: 1;
}

/* Debug 0805-3: sfondo statico (era grafica animata) con overlay nero e
   apertura dal centro sull'asse orizzontale, stessa foto gia usata
   per la tile del caso in casi.html.
   Debug 0812b: 711x396 come da Figma, espresso come larghezza fissa piu
   aspect-ratio cosi sotto i 711px di spazio disponibile (mobile) si riduce
   mantenendo le proporzioni invece di deformarsi.
   Debug 0812c: overlay portato dal 35% al 50%.
   Debug 0812-3: +20% sulla misura di Figma, scritto come moltiplicazione e
   non come 853.2px cosi resta leggibile da dove esce. Cresce solo la
   larghezza: l'altezza la ricava aspect-ratio, quindi il 20% vale su
   entrambe le dimensioni e il taglio della foto non cambia.
   Debug 0813: tolto il grayscale introdotto in 0812c, la foto torna a colori.
   L'overlay al 50% resta: e' il box-shadow inset qui sotto. */
.caso-hero__img {
  width: calc(711px * 1.2);
  max-width: 100%;
  aspect-ratio: 711 / 396;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.5);
  clip-path: inset(50% 0);
  animation: caso-hero-img-reveal 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes caso-hero-img-reveal {
  to {
    clip-path: inset(0);
  }
}

/* Debug 0812: arrivando da una navigazione interna l'apertura si consumava
   dietro il velo a veneziana (animations.js) e non si vedeva mai. Resta in
   pausa sul primo fotogramma — clip-path: inset(50% 0), fascia chiusa — e
   riparte da sola quando animations.js toglie html.veil-in a velo aperto. */
html.veil-in .caso-hero__img {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .caso-hero__img {
    animation: none;
    clip-path: none;
  }
}

/* Debug 0804b: il titolo del caso (h1) non è più visibile — resta nel DOM
   per screen reader e SEO, così la pagina non perde l'unico h1. Tecnica
   standard di visually-hidden: clip a 1px invece di display:none, che
   verrebbe escluso dall'accessibility tree. */
.caso-hero__title--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Il dato di sintesi sta SOPRA l'immagine da 711x396 e la sborda: qui la
   larghezza è libera perché il numero da 380px è più largo dei 711px della
   foto. Interlinea 30px fra numero e didascalia (Figma: blocco 1205x470 =
   380 + 30 + 60), era 15px prima del Debug 0812b.
   Debug 0812c: numero e didascalia salgono insieme, come un blocco solo, di
   --caso-hero-lift. L'alzata è fatta con position/top e non con un margine
   proprio perché la foto non si deve muovere: top non entra nel calcolo
   della riga di griglia, quindi l'altezza della cella — e con lei la
   posizione dell'immagine, che è centrata nella stessa cella — resta quella
   di prima. Un margin-bottom avrebbe alzato il testo spingendo giù la foto. */
.caso-hero__data {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  position: relative;
  top: calc(-1 * var(--caso-hero-lift));
}

/* Numero — DM Mono 300 solo contorno arancio, nessun riempimento
   (Debug 0804; letter-spacing -0.5pt Debug 0804c). Nessuna interazione al
   passaggio del cursore (rimossa Debug 0804d): solo l'animazione di
   atterraggio di js/caso.js, che riscrive il testo mantenendo l'outline
   valido a ogni frame.
   Debug 0812b: tornato ai 380px di Figma (la 0812 lo aveva legato all'altezza
   dello schermo, 22vh, per farlo stare dentro la fascia: quel vincolo non
   esiste piu, il numero DEVE sbordare la foto). Il 31vw non è una misura di
   design ma un tetto di sicurezza: a 1512px vale 469px, quindi non tocca il
   design, e interviene solo sotto i ~1225px di viewport, dove il valore a 5
   caratteri ("+6.8%" = 3em in DM Mono) sfonderebbe la larghezza disponibile.
   Sotto i 1024px comanda comunque la regola mobile qui sotto. */
.caso-hero__num {
  font-family: var(--font-mono);
  font-size: min(380px, 31vw);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.5pt;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--arancio-1);
}

/* Didascalia testo-icona-testo (Debug 0804b), stesso pattern dei paragrafi
   di manifesto.html: icona inline-block allineata al testo circostante,
   così la riga va a capo normalmente quando il testo cresce. Icona e testo
   sono ancora segnaposto, verranno aggiornati con la copy definitiva.
   Icona 60x60 (Debug 0804c, era 30x30). */
.caso-hero__label {
  font-family: var(--font-title);
  font-size: 40px;
  line-height: 44px;
}

.caso-hero__label .icon {
  width: 60px;
  height: 60px;
  margin-inline: 9px;
  vertical-align: middle;
}

/* Intro articolo (Modulo 7 senza tile): paragrafo centrato 461px ----------- */

.caso-intro {
  padding-top: 120px;
  padding-bottom: 120px;
}

.caso-intro__text {
  max-width: 461px;
  margin-inline: auto;
  text-align: center;
}

/* Paragrafi attenuati: grigio-2 sulla variante scura, neri sulla chiara */
.caso-intro__text,
.caso-block__text,
.caso-results__text {
  color: var(--grigio-2);
}

/* Paragrafi multipli separati da 15px (paragraph spacing Figma) */
.caso-block__text,
.caso-results__text {
  display: grid;
  gap: 15px;
}

/* Etichetta di sezione (Modulo 2, 100px): solo tag a sinistra --------------- */

.caso-kicker {
  display: flex;
  align-items: center;
  min-height: 100px;
  padding-block: 30px;
}

/* Blocco contenuto (Modulo 1.1, 447/448px): titolo 668px + colonna testo ---- */

.caso-block {
  display: flex;
  gap: 60px;
}

.caso-block__title {
  flex: 0 1 668px;
  padding-top: 60px;
}

.caso-block__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 30px;
  padding: 90px 0 90px 30px;
}

.caso-block__text {
  max-width: 464px;
}

/* Lista puntata: intestazione (icona + etichetta mono) + voci con freccia */
.caso-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 447px;
}

.caso-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.caso-list .icon {
  width: 20px;
  height: 20px;
}

/* Debug 07/2026-3: icona centrata sull'etichetta — serve battere la
   specificità di ".caso-list li" (align-items: flex-start) */
.caso-list li.caso-list__head {
  align-items: center;
}

/* Debug 0812c: parole chiave delle voci sotto Problematiche e Funzionalità
   Chiave in Medium 500. Il peso è dichiarato esplicitamente e non lasciato al
   default di <strong> (700): di Special Gothic il sito carica solo 400 e 500,
   e un 700 richiesto lascerebbe al browser la scelta fra ripiegare sul 500 e
   ingrassare il 400 per conto suo, con due resi diversi a seconda del motore. */
.caso-list strong {
  font-weight: 500;
}

/* Risultati (Modulo 7 con Modulo 6: 4 tile numero + etichetta, 700px) ------- */

.caso-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding-top: 120px;
  padding-bottom: 120px;
  text-align: center;
}

.caso-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  width: 100%;
}

.caso-stat {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 300px;

  /* Debug 0812-3: il numero è più largo della tile e senza questo alzerebbe
     il minimo automatico della flex item fino alla sua larghezza ("-€230K"
     misura 375px a 108px di corpo), allargando la tile e spostando anche le
     altre tre. Con min-width:0 le tile restano ai 300px di Figma e il numero
     sborda simmetricamente, come già faceva prima. */
  min-width: 0;
}

/* Numero — DM Mono 300 108/108 (nessuna classe condivisa).
   Debug 0812-3: nowrap perché un dato è un blocco solo. La tile è larga 300px
   (Modulo 6 di Figma) ma in DM Mono a 108px ci stanno 4 caratteri e mezzo, e
   i valori più lunghi sbordano: finché non trovano un punto dove spezzare
   sbordano e basta — è così da sempre e va bene — ma "-€230K" ne ha uno
   subito dopo il meno e andava a capo, sfalsando in altezza la sua tile
   rispetto alle altre tre.

   align-self:center perché lo sbordo sia simmetrico: con la sola
   text-align:center la riga più larga della tile non torna indietro oltre il
   bordo sinistro e "-€230K" usciva tutto a destra, andando a toccare il
   -73% della tile accanto. Da flex item centrata sborda 37px per parte.

   Il 7.15vw non è una misura di design ma un tetto di sicurezza, come il
   31vw del numero in hero: a 1512px (la larghezza del frame Figma) vale
   108px esatti, quindi sul design non incide, e interviene solo più sotto,
   dove le tile si stringono e lo sbordo di un valore da 6 caratteri
   arriverebbe a toccare quello della tile accanto — a 1280px i numeri si
   toccavano. Sotto i 1024px comanda comunque la regola mobile. */
.caso-stat__num {
  align-self: center;
  font-family: var(--font-mono);
  font-size: min(108px, 7.15vw);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--arancio-1);
}

.caso-stat__label {
  font-family: var(--font-title);
  font-size: 40px;
  line-height: 44px;
}

.caso-results__text {
  max-width: 461px;
}

/* Header-row altri casi (Modulo 2 a tre colonne) ---------------------------- */

.caso-others__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  min-height: 104px;
  padding-block: 30px;
}

.caso-others__head .tag {
  justify-self: start;
}

.caso-others__title {
  text-align: center;
}

.caso-others__title-mobile {
  display: none;
}

.caso-others__nav {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-self: end;
}

.caso-others__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.caso-others__arrow .icon {
  width: 30px;
  height: 30px;
}

/* Carosello altri casi: componente condiviso .cases-track (components.css) -- */

.caso-others__track {
  margin-block: 120px;
}

/* Mobile (m-case-1: 393px) -------------------------------------------------- */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .case-dock {
    padding-inline: 15px;
  }

  .case-dock__label {
    display: none;
  }

  /* Debug 0812-3: in mobile la hero non è più una sovrapposizione centrata
     (testo al centro della foto) ma due blocchi incolonnati — foto in alto,
     numero+didascalia sotto — con il numero che risale a mordere il bordo
     basso della foto. Sono i due punti della lista debug: immagine in alto,
     contenuti testuali in basso appena sovrapposti. */
  .caso-hero {
    /* la foto sale perché sale tutta la hero: 70px di navbar + 70px di
       stacco, contro i 170px di stacco di prima */
    padding-top: 140px;
    padding-bottom: 170px;

    /* di quanto il blocco di testo risale sulla foto. È l'unico valore da
       toccare per calibrare la sovrapposizione: a 30px il numero ci entra
       con la sola punta e la didascalia resta tutta fuori. */
    --caso-hero-overlap: 30px;
  }

  /* foto e testo escono dalla cella condivisa del desktop e tornano in
     flusso, una riga di griglia ciascuno: è questo che li mette uno sopra
     l'altro invece che uno sull'altro */
  .caso-hero__img,
  .caso-hero__data {
    grid-area: auto;
  }

  /* Debug 0812b: il mobile non ha un frame di riferimento su Figma (il file
     ha la sola pagina DESKTOP, nessun frame m-case-1).
     Debug 0812c: qui la foto diventa quadrata. Cambia SOLO il rapporto:
     l'ingombro orizzontale resta tutta la larghezza disponibile (il
     max-width:100% della regola base, che qui vince sempre sulla larghezza
     fissa del desktop) — la lista debug chiede di non toccarlo. */
  .caso-hero__img {
    aspect-ratio: 1 / 1;
  }

  .caso-hero__data {
    gap: 10px;

    /* l'alzata del desktop qui non si applica: il testo non è più sovrapposto
       alla foto e la sua posizione la decide --caso-hero-overlap. Il margine
       negativo accorcia anche la riga di griglia, quindi la hero si stringe
       della stessa quantità e sotto non resta un buco. */
    top: 0;
    margin-top: calc(-1 * var(--caso-hero-overlap));
  }

  /* Debug 0804d: il font-size esatto è impostato via JS (js/caso.js,
     fitHeroNumMobile) perché il numero occupi per intero la larghezza
     disponibile, qualunque sia il valore ("+6.8%" è più lungo di "-85%").
     Questo clamp resta solo come base prima che JS misuri il testo, per
     evitare un flash col valore desktop (380px) prima dell'esecuzione.
     letter-spacing eredita -0.5pt dalla regola base. */
  .caso-hero__num {
    font-size: clamp(60px, 25vw, 110px);
    line-height: 1;
    -webkit-text-stroke-width: 1px;
  }

  .caso-hero__label {
    font-size: 25px;
    line-height: 28px;
  }

  /* Icona 40x40 (Debug 0804c, era 20x20): stessa proporzione 2:3 rispetto
     al desktop (60x60) del rapporto precedente 30:20. */
  .caso-hero__label .icon {
    width: 40px;
    height: 40px;
    margin-inline: 5px;
  }

  /* Etichetta di sezione centrata, riga da 40px senza padding */
  .caso-kicker {
    justify-content: center;
    min-height: 40px;
    padding-block: 0;
  }

  .caso-block {
    flex-direction: column;
    gap: 0;
  }

  .caso-block__title {
    flex: none;
    padding-top: 60px;
  }

  .caso-block__body {
    padding: 30px 0 60px;
  }

  .caso-block__text,
  .caso-list {
    max-width: none;
  }

  .caso-results {
    gap: 30px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .caso-stats {
    flex-direction: column;
    gap: 30px;
  }

  .caso-stat {
    gap: 10px;
    width: 100%;
  }

  /* Numero: DM Mono 300 66/66, ls 3.3px (0.05em) */
  .caso-stat__num {
    font-size: 66px;
    line-height: 66px;
    letter-spacing: 0.05em;
  }

  /* Etichetta tile e titolo header-row: Questrial 25/28 su mobile */
  .caso-stat__label,
  .caso-others__title {
    font-size: 25px;
    line-height: 28px;
  }

  .caso-results .btn {
    width: 100%;
  }

  .caso-others__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    min-height: 0;
  }

  /* Su mobile Figma il titolo della header-row cambia testo */
  .caso-others__title-desktop {
    display: none;
  }

  .caso-others__title-mobile {
    display: inline;
  }

  .caso-others__nav {
    justify-content: space-between;
    width: 100%;
  }

  .caso-others__track {
    margin-block: 60px;
  }
}