/* ===========================================================================
   CE-42 · Zapis do newslettera (newsletter sign-up)
   Root:     section.ce-newsletter (data-bg-scroll: #F4F4F4 band, in .lf-wrap)
   Parts:    __in (two columns), __head (__eyebrow .lf-eyebrow, __title H2
             with .lf-h2, __lead), __form (form, novalidate): __field
             (label __label + row __row: input __input and the UI button
             lf-btn--ui), __error (the message under the field), __consent
             (checkbox with its text and the privacy link), __consent-error;
             __done (the thank-you that replaces the form, tabindex -1)
   Variants: none
   Mechanics: ce/CE-42-newsletter.js – a mock-up: nothing is sent. On
             submit the e-mail (a plausible address) and the consent are
             checked; each gap gets its message and the first one takes the
             focus (aria-invalid, aria-describedby). A valid form fades out
             and the thank-you comes in with the address typed (focus on
             it). The H2 comes in letter by letter (kit „chars”), the eyebrow
             codes in, the lead and the form rise in (data-appear), the
             button grows in (data-pop). Reduced motion: no movement.
   Layout:   hi-fi on the kit: #F4F4F4 band, clamp 80–140 px above and
             below; head 6 / 12 on the left, the form 5 / 12 on the right,
             aligned to the bottom; H2 clamp 28–46 px Expanded Regular
             (−.04em, #1D1D1E); the field a 1 px line (#1D1D1E 25%, solid
             on focus) with the address in 20 px Expanded, the button at its
             right; errors in --ui-error (as the form CE-24). ≤ 900 px one
             column; ≤ 640 px the button under the field, full width.
   Base:     insights.html#newsletter · registry: ce-registry.js → CE-42
   =========================================================================== */

.ce-newsletter {
  margin-top: clamp(96px, 10vw, 160px);
  padding-block: clamp(80px, 8.75vw, 140px);
}

.ce-newsletter__in {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: end;
  gap: 48px clamp(40px, 8vw, 140px);
}

.ce-newsletter__eyebrow { margin-bottom: clamp(20px, 2.3vw, 37px); }
.ce-newsletter__title {
  max-width: 17em;
  font-size: clamp(1.75rem, 2.9vw, 46px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.04em;
  color: var(--ui-ink);
}
.ce-newsletter__lead {
  margin-top: clamp(16px, 1.6vw, 24px);
  max-width: 34em;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.6;
  color: rgba(29, 29, 30, .7);
}

/* ---- form ------------------------------------------------------------------ */
.ce-newsletter__label {
  display: block;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ui-muted);
}
.ce-newsletter__row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 6px;
}
.ce-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(29, 29, 30, .25);
  border-radius: 0;
  background: transparent;
  color: var(--ui-ink);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  letter-spacing: -.02em;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease;
}
.ce-newsletter__input::placeholder { color: rgba(29, 29, 30, .3); }
.ce-newsletter__input:hover { border-bottom-color: rgba(29, 29, 30, .5); }
.ce-newsletter__input:focus { outline: none; border-bottom-color: var(--ui-ink); }
.ce-newsletter__input:focus-visible { box-shadow: 0 1px 0 var(--ui-ink); }
.ce-newsletter__input[aria-invalid="true"] { border-bottom-color: var(--ui-error); }
.ce-newsletter__row .lf-btn--ui { flex: none; min-width: 160px; }

.ce-newsletter__error {
  margin-top: 8px;
  font-size: .8125rem;
  color: var(--ui-error);
}

.ce-newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  font-size: .8125rem;
  line-height: 1.5;
  color: rgba(29, 29, 30, .7);
}
.ce-newsletter__consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ui-ink);
}
.ce-newsletter__consent input[aria-invalid="true"] { outline: 1px solid var(--ui-error); outline-offset: 1px; }

.ce-newsletter__done {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--ui-ink);
}
.ce-newsletter__done:focus { outline: none; }
.ce-newsletter__done p + p {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: .9375rem;
  letter-spacing: 0;
  color: rgba(29, 29, 30, .7);
}

@media (prefers-reduced-motion: no-preference) {
  .ce-newsletter__form.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
  .ce-newsletter__done.is-coming { animation: ce-newsletter-in .6s var(--ease-out-quart) both; }
}
@keyframes ce-newsletter-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .ce-newsletter__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ce-newsletter__row { flex-direction: column; align-items: stretch; gap: 20px; }
  .ce-newsletter__row .lf-btn--ui { width: 100%; }
}