/* ==========================================================================
   Popup / Modal component
   Opened by [data-popup-trigger="<id>"] → shows #popup-<id>.
   Requires: tokens.css (--z-popup, --r, --shadow-lg, --bg-card, --line, --ink, --muted).
   Scroll-lock CSS lives in base.css (html.scroll-locked body { position: fixed; ... }).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Overlay — fixed, full-viewport, dimming backdrop
   Hidden by default via opacity + pointer-events + visibility (avoids
   display:none which breaks CSS transitions).
   -------------------------------------------------------------------------- */
.popup-overlay {
  position: fixed;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 */
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* no --ink-dark token — semi-transparent literal */
  z-index: var(--z-popup); /* = 1000; above cookie banner (900) and mobile menu (800) */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hidden state — JS toggles .popup-overlay--open */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* Transition on base element so both open AND close animate (CR-17) */
  transition: opacity 0.2s ease, visibility 0.2s ease;
  /* Prevent overlay itself from scrolling; only .popup scrolls */
  overflow: hidden;
}

/* Active state — added by popup.js when opening */
.popup-overlay--open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Modal container
   -------------------------------------------------------------------------- */
.popup {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r);
  padding: 32px;
  /* Desktop: between 480px and 560px */
  width: min(560px, calc(100% - 32px));
  /* Long content scrolls inside the modal, not the overlay or page */
  max-height: calc(100dvh - 32px);
  max-height: calc(100vh - 32px); /* fallback for browsers without dvh */
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  /* Keep modal above the overlay's stacking context */
  z-index: var(--z-popup);
}

/* --------------------------------------------------------------------------
   Close button — top-right corner
   -------------------------------------------------------------------------- */
.popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  /* Minimum 24px hit area; padding extends it for touch (≥ 44px touch target) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 10px;
  box-sizing: content-box;
  color: var(--muted);
  /* Inherits button reset from base.css (background: none; border: none; cursor: pointer) */
  border-radius: var(--r-xs);
  transition: color 0.15s, background 0.15s;
}

.popup__close:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.06); /* no token for subtle hover tint — intentional */
}

.popup__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.popup__close svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Content areas
   -------------------------------------------------------------------------- */
.popup__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 24px;
  /* Leave room for close button on the right */
  padding-right: 40px;
}

.popup__body {
  /* Content wrapper — no extra padding, relies on .popup's 32px */
}

/* --------------------------------------------------------------------------
   Mobile (≤ 640px per Decision 10) — full-screen popup
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .popup-overlay {
    align-items: flex-end; /* slide up from bottom on mobile */
  }

  .popup {
    width: 100%;
    max-height: calc(100dvh - 48px);
    max-height: calc(100vh - 48px); /* fallback */
    border-radius: var(--r) var(--r) 0 0; /* rounded only at top on mobile */
    padding: 24px 16px 32px;
    /* Ensure full width with 16px inner padding per spec */
    margin: 0;
  }
}