/* ─────────────────────────────────────────────────────────────────────────
   Newsletter opt-in popup
   Four variants share the same form HTML; the wrapper styling differs.
   Form internals (.site-footer-newsletter-*) are styled in screens.css and
   reused here untouched. Status pill markup comes from newsletter-subscribe.js.
   ───────────────────────────────────────────────────────────────────────── */

#newsletter-popup-root { position: relative; z-index: 950; }

.np-backdrop {
  position: fixed; inset: 0;
  background: rgba(12, 12, 12, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 900;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.np-backdrop.is-open { opacity: 1; pointer-events: auto; }

.np {
  position: fixed;
  z-index: 950;
  background: var(--ds-white);
  color: var(--ds-ink);
  border: 1px solid var(--ds-stone);
  box-shadow: var(--ds-shadow-lg);
  opacity: 0; pointer-events: none;
  transition:
    opacity 240ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.np.is-open { opacity: 1; pointer-events: auto; }

.np-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--ds-graphite);
  cursor: pointer;
  transition: var(--ds-transition);
}
.np-close:hover { background: var(--ds-parchment); color: var(--ds-ink); }

.np-eyebrow {
  font-size: var(--ds-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-ash);
  font-weight: 600;
  margin-bottom: 8px;
}
.np-title {
  font-family: var(--ds-font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.np-copy {
  color: var(--ds-graphite);
  font-size: var(--ds-text-base);
  margin-bottom: 16px;
}
.np-fineprint {
  font-size: var(--ds-text-xs);
  color: var(--ds-ash);
  margin-top: 10px;
}

/* ── Variant 1 — Modal ───────────────────────────────────────────────── */
.np--modal {
  top: 50%; left: 50%;
  width: min(440px, calc(100vw - 32px));
  border-radius: var(--ds-radius);
  padding: 36px 32px 28px;
  transform: translate(-50%, -48%) scale(0.96);
}
.np--modal.is-open { transform: translate(-50%, -50%) scale(1); }
.np--modal .np-title { font-size: 28px; }
.np--modal .site-footer-newsletter-row {
  display: flex; flex-direction: column; gap: 8px;
}
.np--modal .site-footer-newsletter-input,
.np--modal .site-footer-newsletter-submit { width: 100%; }

/* ── Variant 2 — Bottom bar ──────────────────────────────────────────── */
.np--bar {
  left: 0; right: 0; bottom: 0;
  border-left: none; border-right: none; border-bottom: none;
  padding: 22px 24px 22px;
  transform: translateY(100%);
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
  z-index: 940;
}
.np--bar.is-open { transform: translateY(0); }
.np--bar .np-bar-text { max-width: 560px; }
.np--bar .np-eyebrow { margin-bottom: 4px; }
.np--bar .np-title { font-size: var(--ds-text-lg); margin-bottom: 2px; }
.np--bar .np-copy { font-size: var(--ds-text-sm); margin-bottom: 0; }
.np--bar .site-footer-newsletter { width: 100%; max-width: 640px; align-items: center; }
.np--bar .site-footer-newsletter-row { width: 100%; justify-content: center; }
.np--bar .site-footer-newsletter-label { display: none; }

/* Floating close button on the bar — half above / half over the top border */
.np--bar .np-close {
  position: absolute;
  top: 0; right: 24px;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  background: var(--ds-white);
  border: 1px solid var(--ds-stone);
  border-radius: 50%;
  box-shadow: var(--ds-shadow-sm);
  color: var(--ds-ink);
}
.np--bar .np-close:hover { background: var(--ds-parchment); border-color: var(--ds-stone-dark); }

@media (max-width: 560px) {
  .np--bar .site-footer-newsletter-row { flex-direction: column; }
  .np--bar .site-footer-newsletter-input,
  .np--bar .site-footer-newsletter-submit { width: 100%; }
}

/* ── Variants 3/4 — Corner cards ─────────────────────────────────────── */
.np--corner {
  bottom: 24px;
  width: min(360px, calc(100vw - 32px));
  border-radius: var(--ds-radius);
  padding: 28px 24px 24px;
}
.np--corner-br {
  right: 24px;
  transform: translateY(16px) scale(0.98);
  transform-origin: bottom right;
}
.np--corner-bl {
  left: 24px;
  transform: translateY(16px) scale(0.98);
  transform-origin: bottom left;
}
.np--corner.is-open { transform: translateY(0) scale(1); }
.np--corner .np-title { font-size: 22px; }
.np--corner .site-footer-newsletter-row {
  display: flex; flex-direction: column; gap: 8px;
}
.np--corner .site-footer-newsletter-input,
.np--corner .site-footer-newsletter-submit { width: 100%; }

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .np, .np-backdrop { transition: opacity 120ms ease; }
  .np--modal, .np--corner, .np--bar { transform: none !important; }
}

/* ── Dark-mode polish — picks up tokens from design-system.css ───────── */
[data-theme="dark"] .np {
  background: var(--ds-parchment);
  border-color: var(--ds-stone);
}
[data-theme="dark"] .np--bar .np-close {
  background: var(--ds-parchment);
  border-color: var(--ds-stone);
}