/* ============================================================
   Content gate — blurred content + elevated subscribe/compliance
   card, used on any detail page or Block List block when a member
   lacks the access a piece of content requires (news articles,
   events, webinars, watch back, individual blocks…).
   Uses Main.css design tokens only.
   ============================================================ */

.content-gate {
  position: relative;
  min-height: 340px; /* always leave room for the overlay card, even on short content */
  max-height: 480px;
  overflow: hidden;
}

/* Gating a single Block List block (a paragraph, a header, one card) rather
   than a whole page/article — sized to the block itself instead of forcing
   a full-page-sized box, so one small gated block doesn't dominate the
   screen next to its normal-sized siblings in the same list. Blur (not a
   text fade) means there's no legible text for the card to clash with, so
   this only needs a smaller height range — no structural changes. */
.content-gate--block {
  min-height: 220px;
  max-height: 300px;
}

.content-gate--block .content-gate__title {
  font-size: 1.125em;
}

.content-gate__content {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

/* Stands in for the real content when a member can't view it. No filter here —
   it always renders inside .content-gate__content above, which already blurs. */
.content-gate__placeholder {
  user-select: none;
  pointer-events: none;
  min-height: 400px;
}

.content-gate__placeholder--block {
  min-height: 200px;
}

.content-gate__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--surface-primary) 60%
  );
}

.content-gate__card {
  width: min(420px, 90%);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
}

.content-gate__title {
  margin: 0;
  color: var(--text-primary);
}

.content-gate__body {
  margin: 0;
  color: var(--text-secondary);
}

.content-gate__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--radius-xl);
  background: var(--interactive-primary-bg);
  color: var(--interactive-primary-text);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    filter 0.15s,
    transform 0.1s;
}

.content-gate__cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.content-gate__cta:focus-visible {
  outline: 2px solid var(--text-brand);
  outline-offset: 2px;
}