/* =============================================================
   Ingenium — icone SVG monolinea + moduli della griglia hero
   Companion di assets/js/anim-svg.js
   ============================================================= */

/* --- Icone iniettate al posto dei glifi Font Awesome --------- */
.ing-icon {
  display: block;
  width: 60%;
  height: auto;
  color: var(--white);
  overflow: visible;          /* i tratti round non vengono tagliati ai bordi */
}

/* Misure per contenitore (i cerchi con gradiente esistenti) */
.feature-icon .ing-icon { width: 34px; }   /* cerchio 70px */
.why-icon .ing-icon     { width: 40px; }   /* cerchio 80px */
.stat-icon .ing-icon    { width: 32px; }   /* cerchio 60/70px */

/* Contrasto: i cerchi di .why-icon usano il gradiente caldo pesca->corallo.
   Un tratto bianco su pesca sta a 1,6:1 — illeggibile. Sul caldo il tratto
   diventa scuro (6,8:1); resta bianco sui cerchi teal->corallo (4,1:1).
   È la stessa regola scritta nel capitolato, applicata al sito. */
.why-icon .ing-icon { color: var(--dark); }

@media (max-width: 767px) {
  .feature-icon .ing-icon { width: 30px; }
  .why-icon .ing-icon     { width: 36px; }
  .stat-icon .ing-icon    { width: 28px; }
}

/* Stato prima del line-drawing: invisibile, mai "mezzo disegnato" */
.ing-icon.is-pending { opacity: 0; }
.ing-icon.is-drawn   { opacity: 1; }

/* Micro-interazione: al passaggio sulla card il tratto si ispessisce */
.why-card:hover .ing-icon,
.feature-item:hover .ing-icon {
  stroke-width: 3;
  transition: stroke-width .25s ease;
}

/* --- Moduli della griglia hero (sostituiscono i punti anonimi) ---
   Cinque moduli alternati: punto, anello, croce, trattino, cuneo.
   Tutto in CSS: nessun nodo DOM in più rispetto a prima.        */
.hg-dot {
  position: relative;
  background: var(--secondary-color);
}

.hg-dot--ring {
  width: 7px;
  height: 7px;
  background: none;
  border: 1px solid var(--secondary-color);
}

.hg-dot--dash {
  width: 9px;
  height: 2px;
  border-radius: 1px;
}

.hg-dot--cross {
  width: 9px;
  height: 9px;
  background: none;
  border-radius: 0;
}
.hg-dot--cross::before,
.hg-dot--cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--secondary-color);
  border-radius: 1px;
}
.hg-dot--cross::before {
  width: 9px;
  height: 1.6px;
  transform: translate(-50%, -50%);
}
.hg-dot--cross::after {
  width: 1.6px;
  height: 9px;
  transform: translate(-50%, -50%);
}

/* Il cuneo: la stessa geometria del gagliardetto nella legatura "ge" del logo */
.hg-dot--wedge {
  width: 8px;
  height: 9px;
  border-radius: 0;
  clip-path: polygon(10% 0%, 100% 28%, 97% 100%, 0% 45%);
}

/* --- H-11: mappa d'Italia SVG (fallback mobile alla scena Babylon.js) ---
   Montata da assets/js/map-svg.js solo quando Babylon non viene caricato. */
#italy-map-container.has-svg-map #italy-map,
#italy-map-container.has-svg-map + .map-controls {
  display: none;
}

.ing-map-svg { width: 100%; }
.ing-map-svg svg { width: 100%; height: auto; display: block; }

.ing-map-marker {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
}
.ing-map-marker circle { transition: opacity .2s ease; }
.ing-map-marker:hover circle,
.ing-map-marker.is-active circle { opacity: 1; }
.ing-map-marker:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
  border-radius: 50%;
}

/* Le etichette restano nel file — serve completo anche fuori dal sito, per
   presentazioni e stampa — ma sotto i 768px scenderebbero sotto i 9px:
   lì il nome del luogo lo dà il pannello dell'evento, non la mappa. */
@media (max-width: 767px) {
  .ing-map-svg #ing-map-etichette { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ing-icon { opacity: 1 !important; }
  .ing-map-svg #ing-map-contorno path,
  .ing-map-svg #ing-map-archi path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}