/* ============================================================
 * farpa DS · component · numbered-list · v1.0.0 · 2026-05-10
 * ------------------------------------------------------------
 * Lista numerada editorial · Fraunces oversize na numeração 01·02·03.
 * Uso: vitrine cards · destaques · listas signaturais.
 *
 * Padrão:
 *   <ol class="farpa-numbered-list">
 *     <li>
 *       <span class="farpa-numbered-list__num">01</span>
 *       <div class="farpa-numbered-list__body">
 *         <h3>Título</h3>
 *         <p>Descrição.</p>
 *       </div>
 *     </li>
 *     ...
 *   </ol>
 *
 * Importante: como o número é parte do conteúdo semântico (sumário),
 * preferimos <span> explícito a counter() CSS para garantir leitor de tela.
 * ============================================================ */

.farpa-numbered-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.farpa-numbered-list > li {
  display: grid;
  grid-template-columns: 5ch 1fr;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--border-strong);
}

.farpa-numbered-list > li:last-child {
  border-bottom: 1px solid var(--border-strong);
}

.farpa-numbered-list__num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 700;
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
  line-height: 1;
  color: var(--accent);
  text-align: right;
  padding-right: var(--sp-4);
  border-right: 1px solid var(--border-strong);
  align-self: start;
}

.farpa-numbered-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.farpa-numbered-list__body > h3,
.farpa-numbered-list__body > h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-2xl);
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg);
}

.farpa-numbered-list__body > p {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
  margin: 0;
  max-width: 60ch;
}

@media (max-width: 720px) {
  .farpa-numbered-list > li {
    grid-template-columns: 4ch 1fr;
    gap: var(--sp-3);
    padding: var(--sp-5) 0;
  }
  .farpa-numbered-list__num {
    font-size: var(--fs-3xl);
    padding-right: var(--sp-3);
  }
}