/* =========================================================================
   Module · Form / Newsletter — Figma 5495:35882 (page Global: Modules)
   420 5508:36457 · 1024 5495:35853 · 1440 5495:35824 · 1920 5492:17578
   A row (420: a column): "content" — Section Header, the two fields,
   the Button / CTA, spacing/stack-xl apart — beside the Image, which has a
   fixed height per variant (raw in Figma: 380 · 370 · 422 · 550) and
   radius/box. The row's gap is a Spacing primitive per variant (space/32
   at 1024, 48 at 1440, 64 at 1920 — not a Breakpoint token); on 420 the
   image sits section-gap under the content.
   The fields are the form kit (form.css): Figma's Input and Select are
   that kit drawn, set in Label/Small with a Black 30 placeholder — so the
   type, the placeholder colour and the inside-stroke inset are set here.
   ========================================================================= */
.m-form-newsletter { background: var(--module-background); }

.m-form-newsletter__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-xl);
  width: 100%;
  min-width: 0;
}
.m-form-newsletter__content > .b-section-header { align-self: stretch; }

/* ── the form kit, as Figma draws it ─────────────────────────────────── */
.m-form-newsletter__form { align-self: stretch; gap: var(--spacing-stack-xl); }
/* 420: the two fields stack, space/20 apart (Figma "inputs") */
.m-form-newsletter__fields { flex-direction: column; align-items: stretch; gap: var(--space-20); }
.m-form-newsletter__fields > * { flex: none; }
.m-form-newsletter .cw-input { text-box: normal; }
/* Figma's stroke is inside and takes no room: the value starts 24 from the
   outer edge; the kit's 1px border sits inside its 24 of padding */
.m-form-newsletter :is(.cw-input, .cw-select__trigger) { padding-inline: calc(var(--space-24) - 1px); }
.m-form-newsletter .cw-input::placeholder,
.m-form-newsletter .cw-select__value.is-placeholder { color: var(--color-black-30); }

.m-form-newsletter__done {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-blue);
}
.m-form-newsletter__done[hidden] { display: none; }

/* ── the image ───────────────────────────────────────────────────────── */
.m-form-newsletter__image {
  flex: none;
  width: 100%;
  height: 380px;                   /* Figma 420: 380, raw */
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-box);
  background: var(--color-placeholder);
}
.m-form-newsletter__image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── 1024 up: content and image side by side ─────────────────────────── */
@media (min-width: 1024px) {
  .m-form-newsletter { flex-direction: row; gap: var(--space-32); }
  .m-form-newsletter__content { flex: 1 1 0; width: auto; align-self: stretch; }
  .m-form-newsletter__fields { flex-direction: row; align-items: center; gap: var(--space-32); }
  .m-form-newsletter__fields > * { flex: 1 1 0; min-width: 0; }
  .m-form-newsletter__image { flex: 1 1 0; width: auto; min-width: 0; height: 370px; }   /* Figma 1024: 370, raw */
}
@media (min-width: 1392px) {
  .m-form-newsletter { gap: var(--space-48); }
  .m-form-newsletter__image { height: 422px; }                                          /* Figma 1440: 422, raw */
}
@media (min-width: 1920px) {
  .m-form-newsletter { gap: var(--space-64); }
  .m-form-newsletter__image { height: 550px; }                                          /* Figma 1920: 550, raw */
}