/*
 * ============================================================
 *  SVOLA CORPORATE BLOCKS — Global CSS
 *  Version: 1.0.0
 *
 *  ARCHITETTURA CSS:
 *  Questo file NON contiene colori o font hardcoded.
 *  Ogni valore visivo è espresso tramite variabili CSS che
 *  puntano al Design System globale di Elementor/UiCore.
 *
 *  BRIDGE VARIABILI:
 *   --e-global-color-*         → Elementor Global Colors
 *   --e-global-typography-*   → Elementor Global Typography
 *   --uicore-color-*          → UiCore Framework (se attivo)
 *
 *  Principio: se il cliente cambia il colore primario in
 *  Elementor → Site Settings → Global Colors, TUTTO il sito
 *  si aggiorna automaticamente, inclusi questi widget.
 * ============================================================
 */

/* ── DESIGN SYSTEM BRIDGE ──────────────────────────────────── */
:root {

  /* Colori — mappa da Elementor Global Colors */
  --scb-color-primary:      var(--e-global-color-primary,     #0a3d62);
  --scb-color-secondary:    var(--e-global-color-secondary,   #0f6cbf);
  --scb-color-accent:       var(--e-global-color-accent,      var(--e-global-color-secondary, #0f6cbf));
  --scb-color-text:         var(--e-global-color-text,        #1e2329);
  --scb-color-text-muted:   var(--e-global-color-6,           #6b7280);

  /* Tipografia — mappa da Elementor Global Typography */
  --scb-font-primary:       var(--e-global-typography-primary-font-family,   system-ui, -apple-system, 'Segoe UI', sans-serif);
  --scb-font-secondary:     var(--e-global-typography-secondary-font-family, system-ui, -apple-system, 'Segoe UI', sans-serif);

  /* Sfondi */
  --scb-bg-white:           #ffffff;
  --scb-bg-grey:            #f4f6f8;
  --scb-bg-dark:            var(--scb-color-primary);
  --scb-border-color:       #e2e6ea;

  /* Spaziatura — griglia base 8px */
  --scb-space-1:   8px;
  --scb-space-2:  16px;
  --scb-space-3:  24px;
  --scb-space-4:  32px;
  --scb-space-5:  48px;
  --scb-space-6:  64px;
  --scb-space-7:  80px;
  --scb-space-8: 120px;

  /* Layout */
  --scb-container-max:     1200px;
  --scb-container-wide:    1440px;
  --scb-container-narrow:   800px;
  --scb-container-pad:     clamp(20px, 5vw, 80px);

  /* Componenti */
  --scb-radius:      8px;
  --scb-radius-sm:   4px;
  --scb-radius-pill: 9999px;

  /* Ombre */
  --scb-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05);
  --scb-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --scb-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Transizioni */
  --scb-transition-fast: 0.2s ease;
  --scb-transition-base: 0.3s ease;
  --scb-transition-slow: 0.5s ease;
}


/* ── CONTAINER ─────────────────────────────────────────────── */

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

.scb-container--wide {
  max-width: var(--scb-container-wide);
}

.scb-container--narrow {
  max-width: var(--scb-container-narrow);
}


/* ── SEZIONI ───────────────────────────────────────────────── */

.scb-section {
  padding-block: var(--scb-space-7); /* 80px default */
}

.scb-section--large {
  padding-block: var(--scb-space-8); /* 120px */
}

.scb-section--small {
  padding-block: var(--scb-space-5); /* 48px */
}

/* Varianti sfondo */
.scb-section--white { background-color: var(--scb-bg-white); }
.scb-section--grey  { background-color: var(--scb-bg-grey);  }
.scb-section--dark  {
  background-color: var(--scb-bg-dark);
  color: #ffffff;
}

/* Testi su sfondo scuro ereditano colore bianco */
.scb-section--dark h1,
.scb-section--dark h2,
.scb-section--dark h3,
.scb-section--dark h4,
.scb-section--dark p {
  color: inherit;
}

/* Responsive: riduce il padding su mobile */
@media (max-width: 767px) {
  .scb-section        { padding-block: var(--scb-space-5); } /* 48px */
  .scb-section--large { padding-block: var(--scb-space-6); } /* 64px */
}


/* ── EYEBROW LABEL ─────────────────────────────────────────── */
/*
 * Label piccola in uppercase sopra al titolo di sezione.
 * Pattern tipico dei siti medicali/istituzionali di riferimento.
 * Es.: "OUR TECHNOLOGIES" → "LA NOSTRA TECNOLOGIA"
 */

.scb-eyebrow {
  display: inline-block;
  font-family: var(--scb-font-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--scb-color-accent);
  margin-bottom: 12px;
  line-height: 1;
}


/* ── BOTTONI ───────────────────────────────────────────────── */
/*
 * Sistema a 4 varianti:
 *   --primary  → sfondo pieno accent, hover outline
 *   --ghost    → outline bianco su sfondi scuri, hover riempito
 *   --outline  → outline accent su sfondi chiari, hover riempito
 *   --text     → solo testo + freccia, nessun bordo
 */

.scb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--scb-font-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--scb-radius);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--scb-transition-base),
    color            var(--scb-transition-base),
    border-color     var(--scb-transition-base);
}

/* Variante: Primary */
.scb-btn--primary {
  background-color: var(--scb-color-accent);
  color: #ffffff;
  border-color: var(--scb-color-accent);
}

.scb-btn--primary:hover,
.scb-btn--primary:focus-visible {
  background-color: transparent;
  color: var(--scb-color-accent);
}

/* Variante: Ghost (su sfondi scuri) */
.scb-btn--ghost {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.70);
}

.scb-btn--ghost:hover,
.scb-btn--ghost:focus-visible {
  background-color: #ffffff;
  color: var(--scb-color-primary);
  border-color: #ffffff;
}

/* Variante: Outline (su sfondi chiari) */
.scb-btn--outline {
  background-color: transparent;
  color: var(--scb-color-accent);
  border-color: var(--scb-color-accent);
}

.scb-btn--outline:hover,
.scb-btn--outline:focus-visible {
  background-color: var(--scb-color-accent);
  color: #ffffff;
}

/* Variante: Testo + freccia */
.scb-btn--text {
  background: none;
  border: none;
  padding: 0;
  color: var(--scb-color-accent);
  font-weight: 600;
  font-size: 15px;
}

.scb-btn--text::after {
  content: ' →';
  transition: transform var(--scb-transition-fast);
  display: inline-block;
}

.scb-btn--text:hover::after {
  transform: translateX(4px);
}

/* Focus outline accessibile su tutti i bottoni */
.scb-btn:focus-visible {
  outline: 3px solid var(--scb-color-accent);
  outline-offset: 3px;
}


/* ── GRIGLIE UTILITY ───────────────────────────────────────── */

.scb-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--scb-space-3);
}

.scb-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--scb-space-4);
}

.scb-grid-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--scb-space-6);
  align-items: center;
}

@media (max-width: 1023px) {
  .scb-grid-3   { grid-template-columns: repeat(2, 1fr); }
  .scb-grid-split { gap: var(--scb-space-4); }
}

@media (max-width: 767px) {
  .scb-grid-3,
  .scb-grid-2,
  .scb-grid-split { grid-template-columns: 1fr; }
}


/* ── CARDS UTILITY ─────────────────────────────────────────── */

.scb-card {
  background: var(--scb-bg-white);
  border: 1px solid var(--scb-border-color);
  border-radius: var(--scb-radius);
  padding: 28px 24px;
  transition:
    box-shadow var(--scb-transition-base),
    transform  var(--scb-transition-base);
}

.scb-card:hover {
  box-shadow: var(--scb-shadow-lg);
  transform: translateY(-3px);
}


/* ── SISTEMA ANIMAZIONI (stato iniziale) ───────────────────── */
/*
 * Gli elementi con .scb-animate-item partono invisibili.
 * svola-animations.js aggiunge .scb-is-visible quando
 * l'elemento entra nel viewport tramite IntersectionObserver.
 *
 * La transizione avviene su opacity + translateY:
 *  → solo proprietà accelerate dalla GPU → zero layout shift.
 */

[data-scb-animate] .scb-animate-item,
.scb-animate-init  .scb-animate-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   0.55s ease,
    transform 0.55s ease;
}

[data-scb-animate] .scb-animate-item.scb-is-visible,
.scb-animate-init  .scb-animate-item.scb-is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay — max 5 elementi; da estendere se serve */
.scb-animate-item:nth-child(1) { transition-delay: 0.00s; }
.scb-animate-item:nth-child(2) { transition-delay: 0.08s; }
.scb-animate-item:nth-child(3) { transition-delay: 0.16s; }
.scb-animate-item:nth-child(4) { transition-delay: 0.24s; }
.scb-animate-item:nth-child(5) { transition-delay: 0.32s; }

/* Accessibilità: disabilita animazioni se l'utente le ha disattivate nel SO */
@media (prefers-reduced-motion: reduce) {
  [data-scb-animate] .scb-animate-item,
  .scb-animate-init  .scb-animate-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}