/* ==========================================================================
   Connect 2026 - Connect Plus lock & gate modal                         T-12
   --------------------------------------------------------------------------
   NO ARTBOARD EXISTS FOR THIS. The design signals premium only through the
   "In-depth (Connect Plus)" listing heading (p8), the Membership page (p22),
   and the report gate copy "Report pages embedded here once logged into
   connect plus" (p14). There is no lock badge on any card and no modal.

   So this is built against the token system, like the footer. Review with the
   designer before treating it as final.

   Uses the native <dialog> element deliberately: it gives focus trapping,
   Esc-to-close, an inert background and correct dialog semantics for free.
   A hand-rolled modal has to reimplement all of that, usually badly.

   DEPENDS ON: tokens.css, components/button.css
   ========================================================================== */

/* ============================================================== LOCK ===== */
/*
   Corner marker on gated cards and covers. Relies on .cn-card being
   position: relative, which card.css sets.
*/
.cn-lock {
  position: absolute;
  top: var(--cn-space-3);
  left: var(--cn-space-3);
  z-index: var(--cn-z-base);
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-2);
  padding: 2px var(--cn-space-3);
  border-radius: var(--cn-radius-sm);
  background: var(--cn-navy);
  color: var(--cn-ink-invert);
  font-size: 11px;
  font-weight: var(--cn-fw-semibold);
  letter-spacing: var(--cn-tracking-label);
  text-transform: uppercase;
}

/* ============================================================= DIALOG ==== */

.cn-gate {
  width: min(560px, calc(100vw - var(--cn-space-8)));
  padding: 0;
  border: 0;
  border-radius: var(--cn-radius-card);
  background: var(--cn-surface);
  color: var(--cn-ink-body);
  box-shadow: var(--cn-shadow-raised);
}

.cn-gate::backdrop {
  background: rgba(0, 28, 100, .55);
}

.cn-gate__inner { padding: var(--cn-space-8); }

.cn-gate__eyebrow {
  font-size: var(--cn-text-label);
  font-weight: var(--cn-fw-semibold);
  letter-spacing: var(--cn-tracking-label);
  text-transform: uppercase;
  color: var(--cn-cyan);
}

.cn-gate__title {
  margin-top: var(--cn-space-3);
  font-size: var(--cn-text-h3);
  font-weight: var(--cn-fw-semibold);
  line-height: var(--cn-lh-tight);
  color: var(--cn-ink);
}

.cn-gate__body {
  margin-top: var(--cn-space-4);
  font-size: var(--cn-text-body);
  line-height: var(--cn-lh-body);
}

.cn-gate__list {
  margin-top: var(--cn-space-4);
  padding-left: var(--cn-space-5);
  font-size: var(--cn-text-meta);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink-muted);
}

.cn-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-3);
  margin-top: var(--cn-space-6);
}

/* Close control sits top-right of the dialog. */
.cn-gate__close {
  position: absolute;
  top: var(--cn-space-4);
  right: var(--cn-space-4);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--cn-radius-pill);
  color: var(--cn-ink-muted);
  font-size: 20px;
  line-height: 1;
}
.cn-gate__close:hover { background: var(--cn-band-grey); color: var(--cn-ink); }

/* =========================================================== RESPONSIVE == */
@media (max-width: 767px) {
  .cn-gate__inner { padding: var(--cn-space-6); }
  .cn-gate__actions .cn-btn { width: 100%; }
}

/* ========================================================== sign-in gate == */
/*
   The inline gate, where content needs an account. No artboard draws one, so
   this follows the live site's block - what an account gets you, what Connect+
   adds, and three ways in - rendered against the design's own tokens rather
   than live's inline styles.

   Navy ground because that is what live uses and because a gate should read
   as a distinct surface, not as more article.
*/
.cn-signin {
  margin: var(--cn-space-12) 0;
  padding: var(--cn-space-10);
  background: var(--cn-navy);
  color: var(--cn-ink-invert);
}

.cn-signin__title {
  margin: 0 0 var(--cn-space-8);
  font-size: var(--cn-text-section);
  font-weight: var(--cn-fw-semibold);
  line-height: var(--cn-lh-tight);
  color: var(--cn-ink-invert);
  text-wrap: balance;
}

/* "What's included", with the rule live runs to the right of it. */
.cn-signin__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--cn-space-4);
  margin: 0 0 var(--cn-space-5);
  font-size: var(--cn-text-meta);
  font-weight: var(--cn-fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cn-ink-invert);
}

.cn-signin__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

/*
   Four columns with dividers between them, as live sets them. They collapse
   to two and then one rather than shrinking to unreadable widths - the
   longest of the four runs to eleven words.
*/
.cn-signin__benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 var(--cn-space-8);
  padding: 0;
  list-style: none;
}

.cn-signin__benefits li {
  padding: 0 var(--cn-space-5);
  font-size: var(--cn-text-body);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink-invert);
}

.cn-signin__benefits li:first-child { padding-left: 0; }
.cn-signin__benefits li + li { border-left: 1px solid rgba(255, 255, 255, .45); }

/* The Connect+ pitch, outlined rather than filled so it reads as a step up
   from the free account above it rather than as a second gate. */
.cn-signin__plus {
  margin: 0 0 var(--cn-space-8);
  padding: var(--cn-space-6);
  border: 1px solid var(--cn-cyan);
  background: rgba(255, 255, 255, .06);
}

.cn-signin__plus-title {
  margin: 0 0 var(--cn-space-2);
  font-size: var(--cn-text-meta);
  font-weight: var(--cn-fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cn-ink-invert);
}

.cn-signin__plus-body {
  margin: 0;
  font-size: var(--cn-text-body);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink-invert);
}

.cn-signin__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-4);
}

/*
   The outline button is drawn for a light ground; on this navy it needs its
   own border and ink or it disappears.
*/
.cn-signin .cn-btn--outline {
  border-color: var(--cn-ink-invert);
  color: var(--cn-ink-invert);
  background: transparent;
}

.cn-signin .cn-btn--outline:hover,
.cn-signin .cn-btn--outline:focus-visible {
  background: var(--cn-ink-invert);
  color: var(--cn-navy);
}

@media (max-width: 1023px) {
  .cn-signin__benefits { grid-template-columns: repeat(2, 1fr); row-gap: var(--cn-space-5); }
  .cn-signin__benefits li:nth-child(odd) { padding-left: 0; }
  .cn-signin__benefits li:nth-child(odd) { border-left: 0; }
}

@media (max-width: 767px) {
  .cn-signin { padding: var(--cn-space-8) var(--cn-space-6); }
  .cn-signin__benefits { grid-template-columns: 1fr; }
  .cn-signin__benefits li { padding-left: 0; border-left: 0; }
  .cn-signin__actions .cn-btn { flex: 1 1 100%; text-align: center; }
}

/* The magazine gate's one-line status beside its button. */
.cn-signin--magazine [data-cn-subscribe-status] { margin: 0; align-self: center; }
.cn-signin--magazine [data-cn-subscribe-status]:empty { display: none; }