/* ==========================================================================
   info_grid.css — Info Grid Component

   Griglia informativa label/valore per pagine di dettaglio.
   Pattern unificato da: log_dives (.dive-detail-grid),
   gestione_corso_dettaglio (.corso-info-grid).

   Varianti:
   - default → card items con sfondo ed elevation
   - .info-grid--flat → senza sfondo card, solo testo

   Struttura:
   <div class="info-grid">
     <div class="info-grid__item">
       <span class="info-grid__label">Label</span>
       <span class="info-grid__value">Value</span>
     </div>
   </div>

   Token: --color-surface, --color-text-primary, --color-text-secondary,
          --radius-medium, --space-1, --space-3, --space-4, --space-6,
          --font-body-medium, --font-title-large,
          --weight-medium, --weight-bold,
          --line-height-tight, --shadow-low, --font-family-primary
   ========================================================================== */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-4);
  padding: var(--space-6) 0;
}

.info-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-low);
}

.info-grid__label {
  font-family: var(--font-family-primary);
  font-size: var(--font-body-medium);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: var(--line-height-tight);
}

.info-grid__value {
  font-family: var(--font-family-primary);
  font-size: var(--font-title-large);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  word-break: break-word;
}


/* ==========================================================================
   VARIANT: FLAT (senza card background)
   ========================================================================== */

.info-grid--flat .info-grid__item {
  background: transparent;
  box-shadow: none;
  padding: 0;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 599px) {
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 320px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}