/* ─────────────────────────────────────────────────────────────────────
   Surge / newsletter.css
   Centered subscribe block. Light surface backdrop (configurable),
   eyebrow chip + display headline (Space Grotesk ~32-40px) + 1-2 line
   tagline + inline email/button input-group + tiny privacy line below.
   Mobile (≤768): input + button stack vertically, headline ~28px.
   Matches /tmp/theme-mocks/fashion-home.html lines 783-795.
   ───────────────────────────────────────────────────────────────────── */

.sg-newsletter {
  border-block: 1px solid var(--color-border-soft);
}

.sg-newsletter__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.sg-newsletter__eyebrow {
  color: var(--color-accent-warm);
  margin-bottom: var(--space-1);
}

.sg-newsletter__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.4vw, 2.5rem); /* ~32 → 40px */
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: inherit;
  margin: 0;
}

.sg-newsletter__subhead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 480px;
}

/* ── Form ─────────────────────────────────────────────────────────── */
.sg-newsletter__form {
  width: 100%;
  max-width: 460px;
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.sg-newsletter__group {
  width: 100%;
  background: var(--color-bg);
}

.sg-newsletter__input {
  /* Inputs inherit .input from common.css — keep size tuned for the block */
  padding-block: 14px;
  font-size: var(--text-base);
}

.sg-newsletter__btn {
  /* Match .input-group inner button overrides from common.css; widen slightly */
  padding: 14px 24px;
  font-size: var(--text-base);
  border-radius: 0;
}

.sg-newsletter__success {
  font-size: var(--text-sm);
  color: var(--color-success);
  margin: 0;
}

/* ── Privacy line ─────────────────────────────────────────────────── */
.sg-newsletter__privacy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  margin: var(--space-2) 0 0 0;
  max-width: 460px;
}
.sg-newsletter__privacy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sg-newsletter__privacy a:hover { color: var(--color-text); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sg-newsletter__heading {
    font-size: clamp(1.625rem, 6.5vw, 1.875rem); /* ~26 → 30px */
  }
  .sg-newsletter__subhead { font-size: var(--text-sm); }

  /* Stack input + button vertically — input row full-width, button full-width below. */
  .sg-newsletter__group {
    flex-direction: column;
    border: none;
    background: transparent;
    gap: var(--space-2);
    overflow: visible;
    border-radius: 0;
  }
  .sg-newsletter__group:focus-within { border-color: transparent; }
  .sg-newsletter__input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    width: 100%;
  }
  .sg-newsletter__input:focus {
    border-color: var(--color-text);
  }
  .sg-newsletter__btn {
    border-radius: var(--radius-md);
    width: 100%;
    padding-block: 14px;
  }
}

@media (max-width: 480px) {
  .sg-newsletter__inner { gap: var(--space-2); }
  .sg-newsletter__heading { font-size: 1.625rem; /* 26px */ }
}