/**
 * Sticky Metrics Styles
 * CSS per la sezione sticky-steps con animazioni e layout
 */

/* === SEZIONE PRINCIPALE === */
.sticky-steps {
  position: relative;
}

/* === LAYOUT METRICHE === */
.sticky-steps .metric {
  display: grid;
  grid-template-columns: var(--icon-size) 1fr;
  gap: var(--icon-gap);
  padding: 0;
}

/* === ICONE SVG === */
.sticky-steps .metric > div[aria-hidden="true"] {
  margin-left: -15px;
  padding-top: 100px;
  padding-bottom: 25px;
}

/* === CONTENUTO METRICHE === */
.sticky-steps .metric-body {
  color: #fff;
  padding-left: 40px;
  padding-top: 100px;
  padding-bottom: 25px;
}

/* === ANIMAZIONE NUMERI === */
.sticky-steps .metric-kpi {
  /* Stili specifici per i numeri - layout orizzontale */
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 2px;
  
  /* Dimensioni contenitore */
  width: auto;
  height: auto;
  flex-shrink: 0;
  
  /* Animazione */
  transition: all 0.5s ease;
  font-weight: bold;
  font-size: 48px; /* Font size inline per il numero */
}

.sticky-steps .metric-kpi.animated {
  transform: scale(1.05);
}

/* === SOTTOTITOLI METRICHE === */
.sticky-steps .metric-body h3,
.sticky-steps .metric-body .metric-subtitle {
  color: var(--CG-colors-Grey-White, #FFF);
  
  /* Body 4 - medium */
  font-family: var(--Typography-font-family-body, Montserrat);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px; /* 130% */
}

/* === TESTO DESCRITTIVO METRICHE === */
.sticky-steps .metric-body p,
.sticky-steps .metric-body .metric-description {
  color: var(--CG-colors-Highlights-White-80, rgba(255, 255, 255, 0.80));
  
  /* Body 3 */
  font-family: var(--Typography-font-family-body, Montserrat);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 133.333% */
}

/* === UNITÀ NUMERI === */
.sticky-steps .metric-kpi .unit {
  color: #9EC31B;
  font-weight: 700;
  font-size: 0.7em; /* Più piccola del numero principale */
  margin-left: 0; /* Attaccata al numero */
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
  .sticky-steps .metric {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .sticky-steps .metric > div[aria-hidden="true"] {
    margin-left: 0;
    padding: 20px 0;
    text-align: center;
  }
  
  .sticky-steps .metric-body {
    padding-left: 0;
    padding-top: 20px;
    padding-bottom: 40px;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .sticky-steps .metric > div[aria-hidden="true"] {
    padding: 15px 0;
  }
  
  .sticky-steps .metric-body {
    padding: 15px 0 30px;
  }
}

/* --- responsive overrides added by agent: sticky-metrics view --- */
@media (max-width: 768px) {
  .sticky-metrics { display: none; }
}
@media (min-width: 350px) and (max-width: 550px) {
  .sticky-metrics { display: none; }
}