/* =========================================================================
   EMME-CI — Design System Core
   File: ec-core.css
   Versione: 1.0.0
   Data: 2026-08-25
   Collocazione: child theme /assets/css/ec-core.css (enqueued)
   NON incollare dentro i Code Module di Divi.

   CHANGELOG
   1.0.0 — 2026-08-25 — Prima release. Token colore/tipografia/spazio,
                        temi sezione, componenti atomici, sistema reveal,
                        guard Visual Builder.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKEN
   ---------------------------------------------------------------------- */

:root {

  /* --- Colore -------------------------------------------------------- */
  /* Ricavati dagli screenshot del wireframe. Se hai i valori esatti del
     brand book, sostituisci qui: tutto il resto si aggiorna da solo. */

  --ec-ink-900:      #0E1B2B;   /* hero, footer */
  --ec-ink-800:      #142740;   /* sezioni navy (competenze, mappa, config) */
  --ec-ink-700:      #1D3350;   /* card e superfici dentro il navy */
  --ec-blue-600:     #2A4A72;   /* fascia CTA finale */
  --ec-blue-400:     #4A6E9B;   /* accent italic su fondo chiaro */
  --ec-blue-200:     #7FA3C9;   /* accent italic su fondo scuro (contrasto AA) */

  --ec-paper:        #F6F5F2;   /* bianco caldo, sezioni chiare */
  --ec-paper-alt:    #E9EAEB;   /* card grigia dentro le sezioni chiare */
  --ec-white:        #FFFFFF;

  /* Testo — ruoli, non valori. Cambiano col tema sezione. */
  --ec-text:         var(--ec-ink-900);
  --ec-text-soft:    rgba(14, 27, 43, .68);
  --ec-text-faint:   rgba(14, 27, 43, .45);
  --ec-accent:       var(--ec-blue-400);
  --ec-rule:         rgba(14, 27, 43, .16);
  --ec-rule-strong:  rgba(14, 27, 43, .34);
  --ec-surface:      var(--ec-paper-alt);

  /* --- Tipografia ---------------------------------------------------- */
  /* Sostituisci i primi nomi con le famiglie definitive.
     Il display è un grotesque stretto; il voice è un serif con italic
     marcato (l'italic è il dispositivo di accento di tutto il sito). */

  --ec-font-display: "Neue Haas Grotesk Display", "Helvetica Now Display",
                     Inter, system-ui, sans-serif;
  --ec-font-body:    "Neue Haas Grotesk Text", Inter, system-ui, sans-serif;
  --ec-font-voice:   "Canela", "Freight Display Pro", Georgia, serif;
  --ec-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Scala fluida — min a 375px, max a 1600px */
  --ec-fs-display:   clamp(2.75rem, 1.2rem + 6.6vw, 7rem);      /* hero      */
  --ec-fs-h2:        clamp(2rem,   1.1rem + 3.9vw, 4.5rem);     /* headline  */
  --ec-fs-h3:        clamp(1.375rem, 1.05rem + 1.4vw, 2rem);    /* sottotit. */
  --ec-fs-lead:      clamp(1.0625rem, .98rem + .38vw, 1.25rem); /* intro     */
  --ec-fs-body:      clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  --ec-fs-small:     .875rem;
  --ec-fs-label:     .75rem;                                    /* eyebrow   */

  --ec-lh-display:   .94;
  --ec-lh-head:      1.04;
  --ec-lh-body:      1.65;

  --ec-ls-label:     .16em;   /* letterspacing eyebrow / uppercase */
  --ec-ls-display:   -.025em;

  /* --- Spazio -------------------------------------------------------- */

  --ec-space-3xs:    .25rem;
  --ec-space-2xs:    .5rem;
  --ec-space-xs:     .75rem;
  --ec-space-sm:     1rem;
  --ec-space-md:     1.5rem;
  --ec-space-lg:     2.5rem;
  --ec-space-xl:     4rem;
  --ec-space-2xl:    6rem;
  --ec-space-3xl:    9rem;

  /* Ritmo verticale delle sezioni: un solo valore, tre densità */
  --ec-sect-pad:     clamp(4.5rem, 2rem + 9vw, 10rem);
  --ec-sect-pad-sm:  clamp(3rem, 1.5rem + 5vw, 6rem);
  --ec-sect-pad-xs:  clamp(1.5rem, 1rem + 2vw, 3rem);

  /* --- Layout -------------------------------------------------------- */

  --ec-wrap-max:     1560px;
  --ec-wrap-pad:     clamp(1.25rem, .5rem + 4vw, 5rem);
  --ec-gutter:       clamp(1.25rem, .6rem + 2.4vw, 3rem);

  /* --- Movimento ----------------------------------------------------- */

  --ec-ease:         cubic-bezier(.22, 1, .36, 1);
  --ec-ease-inout:   cubic-bezier(.65, 0, .35, 1);
  --ec-dur-fast:     180ms;
  --ec-dur:          320ms;
  --ec-dur-slow:     520ms;
  --ec-reveal-dur:   640ms;
  --ec-stagger:      80ms;
}

/* -------------------------------------------------------------------------
   2. TEMI SEZIONE
   Un solo set di ruoli, quattro rimappature. Nessuna classe deve
   ridefinire i colori a mano: si applica il tema alla sezione e basta.
   ---------------------------------------------------------------------- */

.ec-t-dark,
.ec-t-darker,
.ec-t-blue {
  --ec-text:        var(--ec-white);
  --ec-text-soft:   rgba(255, 255, 255, .72);
  --ec-text-faint:  rgba(255, 255, 255, .46);
  --ec-accent:      var(--ec-blue-200);
  --ec-rule:        rgba(255, 255, 255, .18);
  --ec-rule-strong: rgba(255, 255, 255, .40);
  --ec-surface:     var(--ec-ink-700);
  color: var(--ec-text);
}

.ec-t-darker { background-color: var(--ec-ink-900); }
.ec-t-dark   { background-color: var(--ec-ink-800); }
.ec-t-blue   { background-color: var(--ec-blue-600); }

.ec-t-paper {
  --ec-text:        var(--ec-ink-900);
  --ec-text-soft:   rgba(14, 27, 43, .68);
  --ec-text-faint:  rgba(14, 27, 43, .45);
  --ec-accent:      var(--ec-blue-400);
  --ec-rule:        rgba(14, 27, 43, .16);
  --ec-rule-strong: rgba(14, 27, 43, .34);
  --ec-surface:     var(--ec-paper-alt);
  background-color: var(--ec-paper);
  color: var(--ec-text);
}

/* -------------------------------------------------------------------------
   3. LAYOUT
   ---------------------------------------------------------------------- */

.ec-section {
  position: relative;
  padding-block: var(--ec-sect-pad);
  overflow: clip;
}
.ec-section.ec-pad-sm   { padding-block: var(--ec-sect-pad-sm); }
.ec-section.ec-pad-xs   { padding-block: var(--ec-sect-pad-xs); }
.ec-section.ec-pad-none { padding-block: 0; }
.ec-section.ec-full     { min-height: 100svh; display: flex; align-items: center; }

.ec-wrap {
  width: 100%;
  max-width: var(--ec-wrap-max);
  margin-inline: auto;
  padding-inline: var(--ec-wrap-pad);
}

.ec-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--ec-gutter);
}

/* Ancoraggi di colonna ricorrenti nel wireframe */
.ec-col-head  { grid-column: 2 / span 7; }   /* headline sezione        */
.ec-col-aside { grid-column: 10 / span 3; }  /* colonna nota a destra   */
.ec-col-full  { grid-column: 1 / -1; }
.ec-col-body  { grid-column: 2 / span 6; }

@media (max-width: 1024px) {
  .ec-grid { grid-template-columns: repeat(6, 1fr); }
  .ec-col-head,
  .ec-col-aside,
  .ec-col-body,
  .ec-col-full { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   4. TIPOGRAFIA
   ---------------------------------------------------------------------- */

.ec-display {
  font-family: var(--ec-font-display);
  font-size: var(--ec-fs-display);
  line-height: var(--ec-lh-display);
  letter-spacing: var(--ec-ls-display);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

.ec-h2 {
  font-family: var(--ec-font-display);
  font-size: var(--ec-fs-h2);
  line-height: var(--ec-lh-head);
  letter-spacing: -.02em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

.ec-h3 {
  font-family: var(--ec-font-voice);
  font-size: var(--ec-fs-h3);
  line-height: 1.25;
  font-weight: 400;
  margin: 0;
}

/* Il dispositivo di accento del sito: parola in serif italic dentro
   una headline grotesque. Ottico: il serif regge un filo più grande. */
.ec-em {
  font-family: var(--ec-font-voice);
  font-style: italic;
  font-weight: 400;
  color: var(--ec-accent);
  font-size: 1.06em;
  letter-spacing: 0;
}

.ec-lead {
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-lead);
  line-height: 1.5;
  color: var(--ec-text);
  margin: 0;
  max-width: 46ch;
}

.ec-body {
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-body);
  line-height: var(--ec-lh-body);
  color: var(--ec-text-soft);
  margin: 0;
  max-width: 62ch;
}

.ec-body-sm {
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-small);
  line-height: 1.6;
  color: var(--ec-text-soft);
  margin: 0;
  max-width: 56ch;
}

/* -------------------------------------------------------------------------
   5. COMPONENTI ATOMICI
   ---------------------------------------------------------------------- */

/* --- Eyebrow: trattino + label uppercase --------------------------- */
.ec-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ec-space-sm);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-label);
  font-weight: 500;
  letter-spacing: var(--ec-ls-label);
  text-transform: uppercase;
  color: var(--ec-text);
  margin: 0 0 var(--ec-space-lg);
}
.ec-eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.ec-eyebrow.ec-eyebrow--soft { color: var(--ec-text-faint); }

/* --- Marker: cerchio numerato + etichetta sezione ------------------ */
.ec-marker {
  display: inline-flex;
  align-items: center;
  gap: var(--ec-space-sm);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-label);
  letter-spacing: var(--ec-ls-label);
  text-transform: uppercase;
  color: var(--ec-text);
}
.ec-marker__num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  border: 1px solid var(--ec-rule-strong);
  border-radius: 50%;
  font-size: .6875rem;
  letter-spacing: .06em;
  flex: none;
}

/* --- Hairline ------------------------------------------------------- */
.ec-rule {
  height: 1px;
  border: 0;
  background: var(--ec-rule);
  margin: 0;
}

/* --- Link con freccia ---------------------------------------------- */
.ec-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ec-space-md);
  padding-block: var(--ec-space-xs);
  border-bottom: 1px solid var(--ec-rule);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-label);
  letter-spacing: var(--ec-ls-label);
  text-transform: uppercase;
  color: var(--ec-text);
  text-decoration: none;
  transition: border-color var(--ec-dur) var(--ec-ease);
}
.ec-link__arrow {
  display: inline-block;
  transition: transform var(--ec-dur) var(--ec-ease);
}
.ec-link:hover { border-color: var(--ec-rule-strong); }
.ec-link:hover .ec-link__arrow { transform: translate(3px, -3px); }

/* --- Pulsante a pillola -------------------------------------------- */
.ec-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ec-space-md);
  padding: var(--ec-space-sm) var(--ec-space-lg);
  border: 1px solid var(--ec-rule-strong);
  border-radius: 999px;
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-label);
  letter-spacing: var(--ec-ls-label);
  text-transform: uppercase;
  color: var(--ec-text);
  text-decoration: none;
  background: none;
  cursor: pointer;
  transition: background-color var(--ec-dur) var(--ec-ease),
              color var(--ec-dur) var(--ec-ease),
              border-color var(--ec-dur) var(--ec-ease);
}
.ec-btn:hover {
  background: var(--ec-text);
  color: var(--ec-ink-900);
  border-color: var(--ec-text);
}
.ec-t-paper .ec-btn:hover { color: var(--ec-paper); }

/* --- Pulsante circolare (freccia hero) ------------------------------ */
.ec-btn-circle {
  display: grid;
  place-items: center;
  width: 4.5rem;
  aspect-ratio: 1;
  border: 1px solid var(--ec-rule-strong);
  border-radius: 50%;
  color: var(--ec-text);
  text-decoration: none;
  background: none;
  cursor: pointer;
  transition: background-color var(--ec-dur) var(--ec-ease),
              color var(--ec-dur) var(--ec-ease);
}
.ec-btn-circle span { transition: transform var(--ec-dur) var(--ec-ease); }
.ec-btn-circle:hover { background: var(--ec-text); color: var(--ec-ink-900); }
.ec-btn-circle:hover span { transform: translate(3px, -3px); }

/* --- Numeri (counter, mq, dati) ------------------------------------ */
.ec-num {
  font-family: var(--ec-font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 500;
  display: block;
}
.ec-num__suffix {
  font-size: .38em;
  letter-spacing: 0;
  vertical-align: super;
  color: var(--ec-text-faint);
}
.ec-num__label {
  display: block;
  margin-top: var(--ec-space-sm);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-small);
  line-height: 1.45;
  color: var(--ec-text-soft);
  max-width: 22ch;
}

/* --- Coppia dato/etichetta in mono (schede tecniche, certificazioni) */
.ec-spec {
  font-family: var(--ec-font-mono);
  font-size: var(--ec-fs-small);
  letter-spacing: .02em;
  color: var(--ec-text-soft);
}

/* -------------------------------------------------------------------------
   6. SISTEMA REVEAL
   Un solo osservatore in JS aggiunge .is-in. Qui solo gli stati.
   Lo stagger si controlla con --ec-i sull'elemento o sul genitore.
   ---------------------------------------------------------------------- */

[data-ec-reveal] {
  opacity: 0;
  transition: opacity var(--ec-reveal-dur) var(--ec-ease),
              transform var(--ec-reveal-dur) var(--ec-ease),
              clip-path var(--ec-reveal-dur) var(--ec-ease);
  transition-delay: calc(var(--ec-i, 0) * var(--ec-stagger));
  will-change: opacity, transform;
}

[data-ec-reveal="up"]    { transform: translateY(1.5rem); }
[data-ec-reveal="fade"]  { transform: none; }
[data-ec-reveal="line"]  { clip-path: inset(0 0 100% 0); transform: none; opacity: 1; }
[data-ec-reveal="rule"]  { transform: scaleX(0); transform-origin: left; opacity: 1; }

[data-ec-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
[data-ec-reveal="rule"].is-in { transform: scaleX(1); }

/* Headline spezzata in righe dal JS: ogni riga ha il suo clip */
.ec-line { display: block; overflow: hidden; }
.ec-line > span {
  display: block;
  transform: translateY(100%);
  transition: transform var(--ec-reveal-dur) var(--ec-ease);
  transition-delay: calc(var(--ec-i, 0) * var(--ec-stagger));
}
.is-in .ec-line > span,
.ec-line.is-in > span { transform: none; }

/* -------------------------------------------------------------------------
   7. UTILITY
   ---------------------------------------------------------------------- */

.ec-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ec-stack > * + * { margin-top: var(--ec-space-md); }
.ec-stack-lg > * + * { margin-top: var(--ec-space-lg); }

/* -------------------------------------------------------------------------
   8. QUALITÀ DI BASE
   ---------------------------------------------------------------------- */

/* Focus visibile ovunque, non solo sui link Divi */
.ec-section :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ec-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Il viewport deve restare zoomabile: assicurati che il meta viewport
   NON contenga maximum-scale=1 (era il caso del sito vecchio). */

@media (prefers-reduced-motion: reduce) {
  [data-ec-reveal],
  [data-ec-reveal].is-in,
  .ec-line > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .ec-section * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   9. GUARD VISUAL BUILDER
   Dentro il VB, Divi riavvolge i moduli: sticky e scroll-driven perdono
   il contenitore di riferimento. In editor mostriamo tutto statico.
   ---------------------------------------------------------------------- */

body.et-fb [data-ec-reveal],
body.et-fb .ec-line > span {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
body.et-fb .ec-sticky {
  position: static !important;
}