/* ============================================================
   COMPONENT: Newsletter (Home)
   FILE: assets/css/newsletter.css
   Depends on: newsletter.html, forms.css (field system), tokens.css.
   Loaded after blog-preview.css (Phase 1.0 §6, in build order).

   Section background is solid navy, the same "solid color band"
   pattern already used by Partners/Process/Announcement Bar
   (background-color: var(--color-navy)) — not a new surface
   system, and continues the rhythm: ... FAQ (light-gray) ->
   Blog Preview (white) -> Newsletter (navy).

   Global Form System: `.field__input` (forms.css) is reused
   completely unmodified for the email input — solid white
   background, existing border/focus states — which is exactly
   why it reads cleanly against this navy band with no extra
   styling required. Only label color and the section's own
   layout (row, max-width, centering) are added here, scoped
   under .newsletter__* — the input/button/message components
   themselves are untouched.

   Button: reuses the existing global .btn / .btn--primary /
   .btn--lg classes from buttons.css exactly as every other Home
   CTA does — no new button variant is introduced.

   No new JavaScript beyond forms.js's initForms (see
   newsletter.html content note) — this file is presentation
   only.

   RTL readiness (Stage 5.12 scope only): logical properties
   (text-align: start, margin-inline / padding-inline) are used
   instead of physical left/right, matching the rest of the
   project's convention, so this section reads correctly if an
   ancestor later sets dir="rtl" for Urdu content — no separate
   RTL stylesheet or breakpoint system is introduced.
   ============================================================ */

.newsletter {
  background-color: var(--color-navy);
  padding-block: var(--space-10);
}

.newsletter__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.newsletter__heading {
  margin: 0 0 var(--space-2);
  color: var(--color-white);
  font-size: var(--text-h3);
}

.newsletter__subheading {
  margin: 0 0 var(--space-6);
  color: var(--color-white);
  opacity: 0.85;
  font-size: var(--text-body);
}

/* ------------------------------------------------------------
   FORM
------------------------------------------------------------ */
.newsletter__form {
  text-align: start;
}

.newsletter__field {
  margin-bottom: 0;
}

.newsletter__label {
  color: var(--color-white);
  text-align: center;
}

.newsletter__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.newsletter__input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 0;
}

.newsletter__input {
  width: 100%;
}

.newsletter__submit {
  width: 100%;
}

.newsletter__message {
  margin: var(--space-2) 0 0;
  min-height: 1.2em;
  text-align: center;
  color: var(--color-white);
}

.newsletter__message.field__message--error {
  color: #ff9d9d; /* error red lightened for AA contrast on navy, same hue family as --color-error */
}

.newsletter__message.field__message--success {
  color: #7fe0ab; /* success green lightened for AA contrast on navy, same hue family as --color-success */
}

/* ------------------------------------------------------------
   RESPONSIVE
   Breakpoint values copied from tokens.css's documented
   reference values, same convention every other Home section
   uses. Input + button stack on mobile/tablet (already the
   default above) and sit side-by-side from desktop up, matching
   the roadmap's "input remains usable, button remains
   accessible" requirement at every width.
------------------------------------------------------------ */

@media (min-width: 1024px) {
  .newsletter {
    padding-block: var(--space-12);
  }

  .newsletter__row {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--space-2);
  }

  .newsletter__input-group {
    min-width: 0;
  }

  .newsletter__submit {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
}

/* Small mobile: tighten spacing, no overflow */
@media (max-width: 479px) {
  .newsletter {
    padding-block: var(--space-8);
  }
}

/* ============================================================
   NEWSLETTER — POLISHED FORM LAYOUT
   Design-only adjustment.
   Backend, validation and submission flow untouched.
   ============================================================ */

.newsletter__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--space-3);
  align-items: end;
  max-width: 820px;
  margin-inline: auto;
}

/* Full Name — own full-width row */
.newsletter__row .newsletter__input-group:first-child {
  grid-column: 1 / -1;
  width: 320px;
  max-width: 80%;
  margin-inline: auto;
}

/* Inputs fill their available width */
.newsletter__input-group {
  width: 100%;
}

.newsletter__input {
  width: 100%;
  box-sizing: border-box;
}

/* Subscribe button */
.newsletter__submit {
  width: 100%;
  min-height: 56px;
}

/* Success / error message stays aligned with the form */
.newsletter__message {
  max-width: 820px;
  margin-inline: auto;
  margin-block-start: var(--space-2);
}

/* Mobile */
@media (max-width: 767px) {
  .newsletter__row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .newsletter__row .newsletter__input-group:first-child {
    grid-column: auto;
  }

  .newsletter__submit {
    width: 100%;
  }
}