/* ==========================================================================
   Subscribe card (shared): rendered by js/subscribe.js into
   <div data-subscribe="<variant>"></div>. One look on every page: white card
   with the card shadow and a red top edge, interest chips, email + button.
   Self-contained: requires tokens.css + base.css only (not gate.css).
   Never a popup; it sits in the page flow inside a .subscribe-slot band.
   ========================================================================== */

/* Band around the slot (the page adds this wrapper around the placeholder) */
.subscribe-slot { padding-block: var(--s-4); }
.subscribe-slot [data-subscribe]:empty { display: none; }

/* Card ------------------------------------------------------------------- */
.subscribe-card {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--c-white);
  color: var(--c-text);
  border-top: 4px solid var(--c-red);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.subscribe-card__head { display: grid; gap: var(--s-1); align-content: start; }
.subscribe-card__kicker { display: flex; }
.subscribe-card__title { font-size: 1.5rem; }
.subscribe-card__lead { color: var(--c-text-muted); }

/* Form --------------------------------------------------------------------- */
.subscribe-card__form { display: grid; gap: var(--s-2); min-width: 0; }
.subscribe-card__fieldset { display: grid; gap: var(--s-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.subscribe-card__legend { padding: 0; font-weight: 700; font-size: var(--fs-base); }
.subscribe-card__chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* Interest chip: toggle button, aria-pressed drives the look */
.subscribe-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: var(--tap-min);
  padding: 0.5rem 0.875rem 0.5rem 0.75rem;
  font-family: var(--ff-display);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--c-slate);
  background: var(--c-white);
  border: 2px solid #B9C0C8;
  border-radius: 999px;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.subscribe-card__chip svg { width: 18px; height: 18px; flex: 0 0 auto; }
.subscribe-card__chip .chip__on { display: none; }
.subscribe-card__chip:hover { border-color: var(--c-slate); }
.subscribe-card__chip[aria-pressed="true"] {
  color: var(--c-white);
  background: var(--c-charcoal);
  border-color: var(--c-charcoal);
}
.subscribe-card__chip[aria-pressed="true"] .chip__on { display: block; }
.subscribe-card__chip[aria-pressed="true"] .chip__off { display: none; }

/* Email + button: stacked on phones, one row from 640px */
.subscribe-card__row { display: grid; gap: var(--s-2); align-items: end; }
.subscribe-card__field { display: grid; gap: 4px; min-width: 0; }
.subscribe-card__label { font-weight: 700; font-size: var(--fs-base); }
.subscribe-card__input {
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1rem;              /* 16px: iOS does not zoom */
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid #B9C0C8;
  border-radius: var(--radius-sm);
}
.subscribe-card__input:focus { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-focus); }
.subscribe-card__input[aria-invalid="true"] { border-color: var(--c-red-text); }
.subscribe-card__select { appearance: auto; }
.subscribe-card__phone { display: flex; }
.subscribe-card__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  color: var(--c-text-muted);
  background: var(--c-surface);
  border: 1px solid #B9C0C8;
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.subscribe-card__phone .subscribe-card__input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.subscribe-card__btn { width: 100%; min-height: 48px; }
.subscribe-card__error { font-size: var(--fs-sm); color: var(--c-red-text); }
.subscribe-card__error:empty { display: none; }
.subscribe-card__note { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Honeypot: off-screen, never for people */
.subscribe-card__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit spinner */
.subscribe-card__btn .spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: subscribe-spin 0.7s linear infinite;
}
.subscribe-card__btn.is-loading { pointer-events: none; opacity: 0.85; }
.subscribe-card__btn.is-loading .spinner { display: inline-block; }
@keyframes subscribe-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .subscribe-card__btn .spinner { animation-duration: 1.5s; } }

/* Success state (replaces head + form inside the same card) ---------------- */
.subscribe-card__done { display: grid; gap: var(--s-2); grid-column: 1 / -1; }
.subscribe-card__done-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); align-items: start; }
.subscribe-card__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  color: var(--c-white);
  background: var(--c-red-text);
  border-radius: 50%;
}
.subscribe-card__tick svg { width: 22px; height: 22px; }
.subscribe-card__done-title { font-size: 1.5rem; }
.subscribe-card__done-title:focus { outline: none; }
.subscribe-card__done-title:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 4px; }
.subscribe-card__done-text { color: var(--c-text-muted); }
.subscribe-card__email { font-weight: 700; color: var(--c-text); overflow-wrap: anywhere; }

/* Optional second step: tinted panel, Save + visible Skip */
.subscribe-card__more {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-2);
  background: var(--c-surface);
  border-radius: var(--radius-sm);
}
.subscribe-card__more-title { font-family: var(--ff-display); font-size: var(--fs-h3); color: var(--c-slate); }
.subscribe-card__more-lead { color: var(--c-text-muted); font-size: var(--fs-base); }
.subscribe-card__more-grid { display: grid; gap: var(--s-2); }
.subscribe-card__actions { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.subscribe-card__actions .btn { flex: 1 1 100%; }
.subscribe-card__after { display: grid; gap: var(--s-2); justify-items: start; }
.subscribe-card__more[hidden], .subscribe-card__after[hidden] { display: none; }
.subscribe-card__next { width: 100%; }

/* Tablet and up ---------------------------------------------------------- */
@media (min-width: 640px) {
  .subscribe-card__row { grid-template-columns: minmax(0, 1fr) auto; }
  .subscribe-card__btn { width: auto; min-width: 160px; }
  .subscribe-card__more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscribe-card__actions .btn { flex: 0 1 auto; min-width: 140px; }
  .subscribe-card__next { width: auto; }
}

/* Desktop: copy on the left, form on the right, one band-width card -------- */
@media (min-width: 960px) {
  .subscribe-slot { padding-block: var(--s-5); }
  .subscribe-card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-5);
    padding: var(--s-4) var(--s-5);
    align-items: start;
  }
  .subscribe-card__title { font-size: 1.75rem; }
  .subscribe-card__done { max-width: 760px; }
}

/* Phones: a slim strip, not half a screen. Kicker and lead hidden, one row of chips, email + button on one line */
@media (max-width: 639px) {
  .subscribe-slot { padding-block: var(--s-2); }
  .subscribe-card { gap: var(--s-1); padding: var(--s-2); border-top-width: 3px; }
  .subscribe-card__kicker, .subscribe-card__lead { display: none; }
  .subscribe-card__title { font-size: 1.125rem; line-height: 1.25; }
  .subscribe-card__form { gap: 8px; }
  .subscribe-card__legend, .subscribe-card__row > .subscribe-card__field > .subscribe-card__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .subscribe-card__chips { gap: 6px; }
  .subscribe-card__chip { min-height: 36px; padding: 0.25rem 0.625rem 0.25rem 0.5rem; font-size: 0.875rem; border-width: 1px; }
  .subscribe-card__chip svg { width: 15px; height: 15px; }
  .subscribe-card__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
  .subscribe-card__input { min-height: 44px; }
  .subscribe-card__btn { width: auto; min-height: 44px; padding-inline: 1rem; }
}