/* ============================================================
   FABBRUCCIO: THE NEWSLETTER LINE (section, sitewide)

   Ported from beta2 site.css:374-382 and :395.
   Structure: design-language/components.md section 15.

   beta2 -> here
     .newsletter -> .fab-newsletter
     .news-row   -> .fab-newsletter__row

   The .fab-news-line form primitive itself lives in fab-base.css, because
   the footer reuses it: one component, two placements.

   WHY THIS IS A LINE AND NOT A BAND
   The identity forbids the accent as a FIELD, and a full-width tinted
   signup strip is exactly that. So this section has a hairline top rule,
   the quiet band padding, AND NO BACKGROUND AT ALL. If someone adds a
   background-color here, they have turned the one accent mark into a
   field and the rule in design-language/rules.md section 2 has been
   broken.
   ============================================================ */

.fab-newsletter {
  padding-block: var(--fab-band-sm);
  border-top: 1px solid var(--fab-hairline);
}

/* Baseline-aligned, so the copy on the left and the input's own baseline
   on the right sit on one optical line. Copy left, form right. */
.fab-newsletter__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 44px;
}
.fab-newsletter__row p {
  margin: 0;
  max-width: var(--fab-measure-wide);
  font-size: var(--fab-size-lede);
  color: var(--fab-ink-secondary);
}
.fab-newsletter__row .fab-news { margin-left: auto; }

@media (max-width: 700px) {
  /* Once the row wraps, margin-left:auto would push the form to the right
     edge under left-aligned copy, so it is dropped. */
  .fab-newsletter__row .fab-news { margin-left: 0; }
}