/* ============================================================
   NEW MONDAY — case-study.css
   Layout della pagina case study (Figma "Case Study- Lufthansa",
   2022:3635). Non è il CSS di UNA pagina ma del TIPO di pagina:
   lo caricano tutte le case study, che hanno lo stesso impianto e
   cambiano solo nei contenuti.

   Token, typography, header, footer, sistema icone, bottoni e
   primitive delle form stanno in main.css.

   REGOLA DEI CLAMP DIMENSIONALI
   ------------------------------------------------------------
   Come nelle altre pagine: il valore del frame Figma a 1920 è il
   massimo, il minimo è quello a 1280 (Laptop). Dove Mobile ==
   Laptop la formula si riduce a:
     clamp( V*2/3 px , V/19.2 vw , V px )

   BLOCCHI RIPRESI DA ALTRE PAGINE
   ------------------------------------------------------------
   accordion (leistungen), losung-item (= mehrwert-item della
   pagina CRM), result-card (= stat-card della home),
   portfolio-item-small (projekte) e cta-card (projekte) sono già
   codificati altrove: le regole sono ripetute qui perché ogni
   pagina carica solo main.css più il proprio file.
   ============================================================ */

losung-item,
result-card,
portfolio-item-small,
accordion-item{ display:block; }

/* ============================================================
   HERO — logo cliente, titolo, sommario, immagine di apertura e
   riga dei dati di progetto (Figma 2025:4796)
   ============================================================ */
.case-hero{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  /* il contenuto parte sotto la barra del menu (148) invece che
     sovrapposto: 148 + 128 di padding = 276 dal bordo pagina */
  padding:clamp(184px, 14.375vw, 276px) var(--space-page-margin) 0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--space-80);
}
.case-intro{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-32);
}
/* Il titolo prende tutta la riga, il sommario 8 colonne (Figma). */
/* Logo del cliente: resta un <img> (è l'eccezione dei loghi, vedi
   CLAUDE.md). Ogni case study ha il SUO export, preso dalla relativa
   pagina Figma e salvato come case-study-<cliente>-logo.svg accanto
   alla pagina: nelle case study il lettering è diverso da quello del
   muro loghi in home, e ha un rapporto tutto suo.
   Si dichiara solo l'altezza: la larghezza la dà il file, così il
   rapporto è sempre quello dell'export e non va aggiornato a mano.

   L'altezza però non è la stessa per tutti: in Figma i lettering
   lunghi stanno a 35 e le marche più compatte (DAK, SAP, Union
   Investment) a 50, se no leggono più piccole a parità di altezza.
   Sta in --case-logo-h, dichiarata sul tag dove serve. La formula è
   la solita rampa 1280→1920: alto quanto il numero a 1920 e due
   terzi a 1280. */
.case-client-logo{
  --case-logo-h:35;
  height:clamp(
    calc(var(--case-logo-h) * 0.66667px),
    calc(var(--case-logo-h) / 19.2 * 1vw),
    calc(var(--case-logo-h) * 1px));
  width:auto;
}
.case-summary{
  max-width:var(--size-col-8);
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
}
.case-hero-media{
  width:100%;
  aspect-ratio:1700 / 700;   /* la misura dell export, vedi lufthansa */
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-gray-15);
}
.case-hero-media img{ width:100%; height:100%; object-fit:cover; }

/* Riga dei dati: due righe di celle allineate per colonna, quindi
   una griglia e non un flex. Le colonne si dimensionano sul
   contenuto (auto), come nel frame, e vanno a capo insieme perché
   etichetta e valore stanno nella STESSA cella. */
.case-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(0, max-content));
  gap:var(--space-12) var(--space-80);
}
.case-meta div{
  display:flex;
  flex-direction:column;
  gap:var(--space-12);
}
.case-meta dt{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-xs);
  line-height:1.5;
  color:var(--color-gray-60);
}
.case-meta dd{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  color:var(--color-black);
}

/* ============================================================
   LEAD — il progetto raccontato in un paragrafo, fra la hero e
   le challenges (Figma 2954:32491). Paragraph/MD su 10 colonne.
   ============================================================ */
.case-lead{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-240) var(--space-page-margin) 0;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
}
.case-lead-text{
  width:var(--size-col-10);
  color:var(--color-black);
}

/* ============================================================
   CHALLENGES & GOALS — due accordion. Il testo lungo sta chiuso
   di default: chi vuole approfondire apre, chi va dritto ai
   risultati non incontra un muro di testo (Figma 2025:4757)
   ============================================================ */
.challenges{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-240) var(--space-page-margin) 0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-80);
}
.challenges-heading{
  width:100%;
  text-align:center;
}
.challenges-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-12);
  width:100%;
  max-width:1414px;
}
accordion-item{
  background:var(--color-gray-15);
  border-radius:var(--radius-24);
  overflow:hidden;
}
.accordion-header{
  display:flex;
  align-items:center;
  gap:var(--space-32);
  width:100%;
  padding:var(--space-32);
  text-align:left;
}
.accordion-question{ flex:1 1 auto; color:var(--color-black); }
.accordion-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease-out);
}
accordion-item.is-open .accordion-panel{ grid-template-rows:1fr; }
.accordion-panel-inner{ overflow:hidden; }
.accordion-answer{
  padding:0 var(--space-32) var(--space-48);
  font-family:var(--font-base);
  font-weight:400;
  font-size:var(--font-size-paragraph-md);
  line-height:1.4;
  letter-spacing:-0.01em;
  color:var(--color-gray-60);
}
/* I sotto-titoli dentro alla risposta (Low Credibility, ecc.) sono
   Paragraph/MD come il resto: cambia solo il colore, nero invece di
   gray-60. font-weight:inherit annulla il grassetto che <strong> si
   porta dietro dallo user-agent — il tag resta per la semantica. */
.accordion-answer strong{
  display:block;
  color:var(--color-black);
  font-weight:inherit;
}
.accordion-answer p + p{ margin-top:var(--space-32); }

/* ============================================================
   UNSERE LÖSUNG — testata centrata e quattro losung-item
   immagine + contenuto (Figma 2033:3720).
   Stesso impianto di mehrwert-item nella pagina CRM: cambia solo
   il rapporto dell'immagine (842×506 invece di 842×510).
   ============================================================ */
.losung{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-240) var(--space-page-margin);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--space-128);
}
.losung-heading{
  max-width:clamp(838.667px, 65.521vw, 1258px);
  margin-inline:auto;
  text-align:center;
}
.losung-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-16);
}
losung-item{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-16);
  align-items:stretch;
}
/* width:100% è obbligatorio: con align-items:stretch l'altezza
   della riga la detta il testo, quindi diventa definita, e senza
   una larghezza esplicita aspect-ratio ricaverebbe la LARGHEZZA
   da quella, facendo sfondare il blocco nella colonna accanto. */
.losung-media{
  width:100%;
  aspect-ratio:842 / 506;
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-gray-20);
}
.losung-media img{ width:100%; height:100%; object-fit:cover; }
.losung-content{
  display:flex;
  flex-direction:column;
  gap:var(--space-80);
  padding:var(--space-64);
  background:var(--color-gray-15);
  border-radius:var(--radius-24);
}
.losung-text{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  color:var(--color-gray-80);
}
/* Nota sotto le quattro voci: Special/Note in gray-60, dentro alla
   lista così sta a 16 dall'ultima voce come nella griglia Figma */
.losung-note{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--font-size-special-note);
  line-height:1.2;
  color:var(--color-gray-60);
}

/* ============================================================
   UNSER ANSATZ — titolo, testo e un'immagine, tutto su 10 colonne
   e a 80 l'uno dall'altro (Figma 2954:32595). Nessun padding in
   alto: segue la Lösung, che il suo 240 sotto ce l'ha già.
   ============================================================ */
.approach{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:0 var(--space-page-margin) var(--space-240);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-80);
}
.approach-content{
  width:var(--size-col-10);
  display:flex;
  flex-direction:column;
  gap:var(--space-80);
}
.approach-content p{ color:var(--color-black); }
.approach-media{
  width:var(--size-col-10);
  aspect-ratio:1414 / 700;
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-gray-20);
}
.approach-media img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   DIE ERGEBNISSE — fascia scura con tre numeri e due immagini
   (Figma 2033:3765). Lo sfondo sta sulla sezione, che NON è
   limitata in larghezza, così il nero arriva ai bordi anche
   sopra i 1920: il limite sta sul contenuto interno.
   ============================================================ */
.results{
  background:var(--color-black);
  color:var(--color-white);
  padding-block:var(--space-240);
}
.results-inner{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding-inline:var(--space-page-margin);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--space-128);
}
.results-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-24);
  text-align:center;
}
.results-heading{ max-width:clamp(656.667px, 51.302vw, 985px); }
.results-text{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  max-width:clamp(732px, 57.188vw, 1098px);
}
.results-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--space-16);
  align-items:stretch;
}
/* result-card: numero e testo, in griglia. Da non confondere con
   result-card-logo di agentur.css, che è la card statistica con il
   logo del cliente dentro al carosello delle recensioni.
   Bordo come box-shadow inset: in Figma lo stroke è interno, la card
   misura 260 bordo compreso e non 264 (stessa regola dei bottoni) */
result-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-32);
  padding:var(--space-48);
  box-shadow:inset 0 0 0 2px var(--color-gray-20);
  border-radius:var(--radius-24);
}
.result-number{
  font-family:var(--font-base);
  font-weight:600;
  font-size:var(--font-size-headings-lg);
  line-height:1.12;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
/* Dove non ci sono numeri la card apre con un titolo (Figma
   card-4-dark): Headings/XXS dalla classe, qui niente da aggiungere
   se non il colore, che arriva dalla fascia scura. */
.result-text{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-xs);
  line-height:1.5;
}
.results-gallery{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-16);
}
.results-shot{
  width:100%;
  aspect-ratio:842 / 750;
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-gray-15);
}
.results-shot img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   DOWNLOAD — copertina della case study e form di richiesta
   (Figma 2034:4081). Campi, etichette e consenso stanno in
   main.css: qui solo l'impaginazione.
   ============================================================ */
.download{
  background:var(--color-gray-15);
  padding-block:var(--space-240);
}
.download-inner{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding-inline:var(--space-page-margin);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--space-80);
}
.download-head{
  display:flex;
  flex-direction:column;
  gap:var(--space-24);
  max-width:clamp(561.333px, 43.854vw, 842px);
}
.download-text{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
}
.download-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-16);
  align-items:stretch;
}
.download-cover{
  position:relative;
  width:100%;
  aspect-ratio:842 / 632;
  border-radius:var(--radius-24);
  overflow:hidden;
}
.download-cover img{ width:100%; height:100%; object-fit:cover; }
/* Tag "PDF" (Figma case-form, livello nascosto 2948:21746): non è
   cotto nell'immagine ma sta sopra, fermo nell'angolo in alto a
   sinistra, così resta uguale qualunque misura prenda la copertina.
   Fondo e raggio li mette il CSS; nello sprite solo icona e scritta. */
.icon--pdf-tag{ aspect-ratio:116 / 48; }
.download-cover-tag{
  position:absolute;
  inset-block-start:var(--space-16);
  inset-inline-start:var(--space-16);
  width:clamp(78px, 6.042vw, 116px);
  color:var(--color-black);
  background:var(--color-gray-15);
  border-radius:var(--radius-12);
}
.download-form{
  display:flex;
  flex-direction:column;
  gap:var(--space-48);
  padding:var(--space-64);
  background:var(--color-white);
  border-radius:var(--radius-24);
}
.download-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-32);
}

/* ============================================================
   NEXT PROJECTS — due portfolio-item-small (Figma 2045:4254)
   ============================================================ */
.next-projects{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-240) var(--space-page-margin) 0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--space-128);
}
.next-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-64);
}
.next-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-64) var(--space-16);
}
.portfolio-small-link{
  display:flex;
  flex-direction:column;
  gap:var(--space-32);
}
.portfolio-small-media{
  width:100%;
  aspect-ratio:842 / 750;
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-gray-60);
}
.portfolio-small-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease-out);
}
portfolio-item-small:hover .portfolio-small-media img{ transform:scale(1.05); }
.portfolio-small-copy{
  display:flex;
  flex-direction:column;
  gap:var(--space-16);
}
.portfolio-small-client{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  color:var(--color-black);
  text-transform:uppercase;   /* nel codice il nome resta nella sua grafia: uno screen reader lo legge, non lo sillaba */
}
.portfolio-small-title{
  color:var(--color-black);
  transition:color .3s var(--ease-out);
}
portfolio-item-small:hover .portfolio-small-title{ color:var(--color-primary); }

/* ============================================================
   BREAKPOINT TABLET/MOBILE
   ============================================================ */

@media (max-width: 1023px){
  .case-hero{ padding-top:30px; gap:40px; }
  /* La hero non è la panoramica rimpicciolita ma un'immagine
     reimpaginata 1024×768: lo scambio lo fa il <picture> nella
     pagina, qui c'è solo il rapporto. Il media dei due DEVE
     coincidere, altrimenti cover ritaglia. */
  .case-hero-media{ aspect-ratio:4 / 3; }
  .case-hero h1{ font-size:clamp(32px, 10.5vw, 64px); overflow-wrap:break-word; hyphens:auto; }
  .case-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }

  .case-lead{ padding-top:80px; }
  .challenges{ padding-top:80px; gap:48px; }

  .losung{ padding-block:80px; gap:64px; }
  losung-item{ grid-template-columns:1fr; }
  .losung-content{ padding:32px; gap:32px; }
  .approach{ padding-bottom:80px; gap:48px; }
  /* Solo dove c'è la versione mobile (un <source> nel <picture>):
     rapporto preso dall'export 1024×700. Le altre case restano
     al rapporto largo finché non hanno la loro. */
  .approach-media:has(source){ aspect-ratio:1024 / 700; }
  .approach-content{ gap:32px; }

  .results{ padding-block:80px; }
  .results-inner{ gap:64px; }
  .results-cards{ grid-template-columns:1fr; }
  .results-gallery{ grid-template-columns:1fr; }

  .download{ padding-block:80px; }
  .download-inner{ gap:48px; }
  .download-row{ grid-template-columns:1fr; }
  .download-form{ padding:32px; gap:32px; }
  .download-actions .btn-primary{ justify-content:center; width:100%; }

  .next-projects{ padding-top:80px; gap:48px; }
  .next-head{ flex-direction:column; gap:32px; }
  .next-head .btn-secondary{ justify-content:center; width:100%; }
  .next-grid{ grid-template-columns:1fr; gap:48px; }

}