/* ==========================================================================
   AI NOW 2027 × Casartigiani Napoli — landing casartigiani.ai-now.it
   Caricato DOPO assets/style.css: usa i token di :root, non li ridefinisce.
   Tutte le classi nuove hanno prefisso cas- per non interferire col sito.
   02/11/2026
   ========================================================================== */

/* --- correzioni di contesto -----------------------------------------------
   .pill e .linea in style.css sono tarati su fondo scuro: qui vivono anche
   su fondo chiaro e i bordi chiari risulterebbero invisibili. */
.cas-chiaro .pill li {
  border-color: var(--ink-line);
  color: var(--ink-soft);
}

/* --- testata: senza selettore lingua la riga va bilanciata ---------------- */
.cas-testata .testata-marchio { gap: 1rem; }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.cas-hero {
  background: var(--paper);
  padding-block: clamp(3rem, 7vw, 5.5rem) var(--sezione);
  border-bottom: 1px solid var(--ink-line);
}
.cas-hero-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.cas-hero .titolo-sezione { max-width: 24ch; }
.cas-hero .titolo-sezione em { font-style: normal; color: var(--magenta-deep); }
.cas-hero-sotto {
  font-size: var(--t-xl);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 44ch;
  margin-top: 1.5rem;
}
.cas-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* coppia di marchi: altezze normalizzate, proporzioni intatte */
.cas-marchi {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--white);
  border: 1px solid var(--ink-line);
  border-top: 6px solid var(--lime);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
/* impilati e non affiancati: così entrambi i marchi restano leggibili
   e hanno la stessa larghezza d'asse, senza alterarne le proporzioni */
.cas-marchi-pila { display: grid; gap: 1.1rem; justify-items: start; }
.cas-marchio-ainow {
  display: block;
  width: 100%;
  max-width: 215px;
  height: auto;
  aspect-ratio: 1593 / 453;
  color: var(--ink);
}
.cas-marchio-cas { display: block; width: 100%; max-width: 205px; height: auto; }
.cas-marchi-con {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  font-size: var(--t-xs);
  font-weight: 650;
  font-stretch: 78%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cas-marchi-con::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink-line);
}
.cas-marchi-nota {
  font-size: var(--t-s);
  line-height: 1.45;
  color: var(--ink-soft);
  border-top: 1px solid var(--ink-line);
  padding-top: 1.25rem;
  margin: 0;
}
.cas-marchi-nota strong { color: var(--ink); }

/* ==========================================================================
   2 · PERCHÉ NASCE IL PROGETTO
   ========================================================================== */
.cas-perche { background: var(--paper-2); }
.cas-perche-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.cas-perche .titolo-sezione { max-width: 20ch; }
.cas-perche-testi > .testo:first-child { margin-top: 0; }
.cas-motto {
  font-size: var(--t-l);
  font-weight: 650;
  line-height: 1.4;
  color: var(--ink);
  border-left: 4px solid var(--lime);
  padding-left: 1.25rem;
  margin-top: 2rem;
  max-width: 52ch;
}

/* ==========================================================================
   3 · COME FUNZIONA — cinque passi
   ========================================================================== */
.cas-passi {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  counter-reset: passo;
}
.cas-passo {
  position: relative;
  border-top: 2px solid var(--ink);
  padding-top: 1.1rem;
}
/* nodo sulla linea, nei tre colori a rotazione come le linee settore */
.cas-passo::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--c, var(--lime));
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
}
.cas-passo:nth-child(3n + 1) { --c: var(--lime); }
.cas-passo:nth-child(3n + 2) { --c: var(--lavender); }
.cas-passo:nth-child(3n + 3) { --c: var(--magenta); }
.cas-passo-num {
  display: block;
  font-size: var(--t-xl);
  font-weight: 800;
  font-stretch: 70%;
  color: var(--magenta-deep);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.cas-passo h3 {
  font-size: var(--t-m);
  font-weight: 760;
  font-stretch: 96%;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cas-passo p {
  font-size: var(--t-s);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 0.6rem;
}

/* ==========================================================================
   4 · COMMUNITY DIGITALE — schema illustrativo
   ========================================================================== */
.cas-community {
  background: var(--ink);
  color: var(--on-dark);
}
.cas-community .titolo-sezione { color: var(--on-dark); max-width: 22ch; }
.cas-community .testo { color: var(--on-dark-soft); }
.cas-community-griglia {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* lo schema NON è una finta interfaccia: è un diagramma etichettato */
.cas-schema {
  border: 1px solid rgb(244 242 247 / 0.2);
  border-radius: 18px;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: rgb(244 242 247 / 0.04);
}
.cas-schema-titolo {
  font-size: var(--t-xs);
  font-weight: 650;
  font-stretch: 78%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: 1.25rem;
}
.cas-schema-blocchi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}
.cas-blocco {
  border: 1px dashed rgb(244 242 247 / 0.3);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.cas-blocco-eti {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-xs);
  font-weight: 650;
  font-stretch: 85%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.cas-blocco p {
  font-size: var(--t-s);
  line-height: 1.45;
  color: var(--on-dark-soft);
  margin-top: 0.4rem;
}
.cas-schema-nota {
  font-size: var(--t-s);
  line-height: 1.5;
  color: var(--on-dark-soft);
  border-top: 1px solid rgb(244 242 247 / 0.2);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
.cas-schema-nota strong { color: var(--on-dark); }

/* ==========================================================================
   5 · VANTAGGI — due colonne
   ========================================================================== */
.cas-vantaggi-griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}
.cas-scheda {
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid transparent;
}
.cas-scheda-cas { background: var(--lime-tint); border-color: #cfe0a9; }
.cas-scheda-ainow { background: var(--lavender-tint); border-color: #cfc8e4; }
.cas-scheda h3 {
  font-size: var(--t-xl);
  font-weight: 780;
  font-stretch: 96%;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.cas-scheda .etichetta { margin-bottom: 0.75rem; }
.cas-elenco { margin-top: 1.5rem; }
.cas-elenco li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.75rem;
  border-top: 1px solid rgb(20 18 26 / 0.12);
  font-size: var(--t-m);
  line-height: 1.45;
  color: var(--ink);
}
.cas-elenco li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--white);
}

/* ==========================================================================
   6 · RUOLO DI FABRIZIO LUONGO
   ========================================================================== */
.cas-ruolo { background: var(--paper-2); }
.cas-ruolo .ospite { background: var(--white); }
.cas-ruolo-nota {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--t-s);
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px dashed var(--ink-line);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-top: 1.5rem;
  max-width: 56ch;
}
.cas-ruolo-nota strong { color: var(--ink); }

/* ==========================================================================
   7 · VERSO AI NOW 2027
   ========================================================================== */
.cas-verso {
  background: var(--ink);
  color: var(--on-dark);
}
.cas-verso .titolo-sezione { color: var(--on-dark); max-width: 20ch; }
.cas-verso .testo { color: var(--on-dark-soft); }
.cas-verso-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.cas-dati { margin-top: 0; }
.cas-dato {
  border-top: 1px solid rgb(244 242 247 / 0.2);
  padding: 1.1rem 0;
}
.cas-dato:last-child { border-bottom: 1px solid rgb(244 242 247 / 0.2); }
.cas-dato dt {
  font-size: var(--t-xs);
  font-weight: 650;
  font-stretch: 78%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.cas-dato dd {
  font-size: var(--t-l);
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1.2;
  margin-top: 0.3rem;
}

/* ==========================================================================
   8 · UN PROGETTO CHE CONTINUA
   ========================================================================== */
.cas-continua .titolo-sezione { max-width: 26ch; }
.cas-continua-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .cas-passi { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
}

@media (max-width: 960px) {
  .cas-hero-griglia,
  .cas-perche-griglia,
  .cas-community-griglia,
  .cas-verso-griglia,
  .cas-continua-griglia,
  .cas-vantaggi-griglia { grid-template-columns: minmax(0, 1fr); }
  .cas-hero-griglia { gap: 2.5rem; }
  .cas-marchi { max-width: 520px; }
  .cas-continua-griglia { align-items: start; }
  .cas-ruolo .ospite { grid-template-columns: minmax(0, 1fr); }
  .cas-ruolo .ospite-marchio { border-right: 0; border-bottom: 1px solid var(--ink-line); }
}

@media (max-width: 680px) {
  .cas-passi { grid-template-columns: minmax(0, 1fr); }
  .cas-passo { padding-top: 1.25rem; }
  .cas-azioni .btn { width: 100%; }
}

/* ==========================================================================
   Movimento — comparsa progressiva, coerente con il sito (ease-out-expo)
   ========================================================================== */
.js .cas-anima {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .cas-anima.cas-dentro { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .cas-anima { opacity: 1; transform: none; transition: none; }
}