/* ============================================================
   RosterDive DS — Shared CSS: prosa delle pagine informative
   Usato da About / Privacy / Contatti e dai contenuti informativi
   condivisi (shared/site_content_view.js, shared/privacy_consent_modal.js,
   pages/org_members_privacy).

   Solo token del Design System. Non introduce componenti nuovi:
   regola esclusivamente la spaziatura e la tipografia del contenuto
   testuale dentro le .card esistenti.

   FIX 2026-10-16 (issue 132 — DS audit):
   - Spostato da pages/legal/legal.css a css/ (foglio condiviso cross-page)
   - Responsive mobile-first (base = mobile, desktop in min-width: 600px)
   - Il link delle licenze riusa il pattern DS .card__link
   ============================================================ */

.legal-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Il gap del contenitore gestisce la distanza dall'header di pagina. */
.legal-page .page-header {
  margin-bottom: 0;
}

.legal-page__text {
  margin: 0;
  font-size: var(--font-body-large);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.legal-page__text + .legal-page__text {
  margin-top: var(--space-3);
}

/* ── Licenze (pagina About) ── */
.legal-page__licenses-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.legal-page__license {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.legal-page__license-name {
  font-size: var(--font-title-medium);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

/* Il link riusa .card__link (ds/components/card.css); qui solo il layout
   della colonna flex, così il link resta a larghezza naturale. */
.legal-page__license .card__link {
  align-self: flex-start;
}

/* ── Responsive: desktop / laptop 15" (da 600px in su) ── */
@media (min-width: 600px) {
  .legal-page {
    gap: var(--space-6);
  }
}