/* ============================================================
 * farpa DS · component · section · v1.0.0 · 2026-05-10
 * ------------------------------------------------------------
 * Bloco de conteúdo com ritmo vertical. Eyebrow opcional.
 *
 * Padrão:
 *   <section class="farpa-section">
 *     <p class="farpa-section__eyebrow">PROCESSOS</p>
 *     <h2 class="farpa-section__title">DSBVLR · pipeline canônico</h2>
 *     <div class="farpa-section__content">...</div>
 *   </section>
 *
 * Modifiers:
 *   --divided   · border-top (separador entre seções)
 *   --wash      · background-wash (blood-50 light · tint dark · yellow HC)
 *   --tight     · padding-block reduzido
 *   --full      · sem max-width interno · use cuidadoso
 * ============================================================ */

.farpa-section {
  padding-block: var(--sp-8);
  padding-inline: var(--sp-5);
  max-width: var(--container-max);
  margin-inline: auto;
}

.farpa-section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 var(--sp-3);
}

.farpa-section__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-3xl);
  letter-spacing: -0.015em;
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-5);
  max-width: 30ch;
}

/* Editorial layout (≥1024px): prosa permanece em 672px (content-max),
   mas títulos relaxam ch-cap e cards/CTAs sobem para 1152px (container-max).
   Decisão Founder 2026-05-10 · Opção B · fix vitrine desktop. */
@media (min-width: 1024px) {
  .farpa-section__title {
    max-width: none;
  }
}

.farpa-section__content {
  max-width: var(--content-max);
}

/* Cards filhos diretos sobem para container-max (1152px) em desktop ·
   prosa <p> permanece em 672px herdado de .farpa-section__content. */
.farpa-section__content > .farpa-card {
  max-width: none;
}

/* Cards consecutivos ganham respiro vertical declarado (gap não funciona em
   filhos não-flex/grid · margin-top no irmão é canônico). */
.farpa-section__content > .farpa-card + .farpa-card {
  margin-top: var(--sp-5);
}

/* Parágrafo container de múltiplos CTAs · libera max-width e força wrap em
   qualquer viewport (não só mobile). Item 2 Frente 3. */
.farpa-section__content > p:has(.farpa-btn + .farpa-btn) {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.farpa-section__content > p:has(.farpa-btn + .farpa-btn) .farpa-btn,
.farpa-section__content > p:has(.farpa-btn + .farpa-btn) .farpa-btn + .farpa-btn {
  margin: 0;
}

/* Modifiers */
.farpa-section--divided {
  border-top: 1px solid var(--border-strong);
}

.farpa-section--wash {
  background: var(--bg-wash);
  /* wash quebra max-width container · usa full-bleed visual sem extrapolar */
  max-width: none;
  padding-inline: max(var(--sp-5), calc((100vw - var(--container-max)) / 2));
}

.farpa-section--tight {
  padding-block: var(--sp-6);
}

.farpa-section--full > .farpa-section__content {
  max-width: none;
}

@media (max-width: 720px) {
  .farpa-section {
    padding-block: var(--sp-7);
    padding-inline: var(--sp-4);
  }
  .farpa-section__title {
    font-size: var(--fs-2xl);
    max-width: none;
  }
}

@media (max-width: 380px) {
  .farpa-section {
    padding-inline: var(--sp-3);
  }
}

/* CTAs múltiplos dentro de <p> · forçam wrap em mobile (anti-overflow) */
.farpa-section__content p .farpa-btn + .farpa-btn {
  margin-left: var(--sp-2);
  margin-top: var(--sp-2);
}
@media (max-width: 720px) {
  .farpa-section__content p {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .farpa-section__content p .farpa-btn,
  .farpa-section__content p .farpa-btn + .farpa-btn {
    margin: 0;
    width: 100%;
    justify-content: center;
  }
}