/* ============================================================
   DiveLog DS — Component: Section Header
   Header di sezione con icona e titolo, pattern comune cross-page.
   Usato da: admin_dashboard, user_dashboard, user_gear,
             gestione_corsi, log_dives e pagine simili.
   Token: --color-primary, --color-text-primary,
          --font-title-large, --weight-bold,
          --space-2, --space-3
   ============================================================ */

.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--font-title-large);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.section-header__icon {
  color: var(--color-primary);
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* ── Variante con margine superiore ── */
.section-header--spaced {
  margin-top: var(--space-6);
}

/* ── Responsive ── */
@media (max-width: 599px) {
  .section-header {
    font-size: var(--font-title-medium);
  }
}