/* ═══════════════════════════════════════════
   Email Opt-In Section Component (v1)
   Partial: parts/wv-email-optin.php
   Mobile-first: base = 375px+, tablet = 768px+

   CHANGELOG
   ─────────
   v1 — 2026-04-16: Extracted from wv-learn-hub.css newsletter section
   ═══════════════════════════════════════════ */

.wv-email-optin {
  background: var(--wv-color-surface);
  border-top: 1px solid var(--wv-color-border);
  padding: 40px 24px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
.wv-email-optin__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}

/* Email input — fit mobile width */
.wv-email-optin .wv-email-input {
  width: 100%;
  box-sizing: border-box;
}
.wv-email-optin .wv-email-input__field {
  min-width: 0;
  flex: 1;
  box-sizing: border-box;
}
.wv-email-optin .wv-email-input__btn {
  padding-left: 16px;
  padding-right: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

.wv-email-optin__title {
  /* typography via .wv-h2 in markup */
  color: var(--wv-color-text-primary);
  margin-bottom: 8px;
}
.wv-email-optin__body {
  /* typography via .wv-body in markup */
  line-height: 1.6;
  color: var(--wv-color-text-secondary);
  max-width: 420px;
}

/* ── Responsive — Tablet (768px+) ── */
@media (min-width: 768px) {
  .wv-email-optin__inner {
    padding: 0 48px;
    /* 2-column grid 35fr / 65fr at ≥768 (2026-06-02): copy column on
       the left (35fr — heading + body), entry column on the right
       (65fr — wider input + button). Below 768 the base flex column
       layout stacks them. */
    display: grid;
    grid-template-columns: 35fr 65fr;
    align-items: center;
    gap: 48px;
  }
}