/**
 * Gate block — dark theme, matches the SnowPro 50-day editorial palette.
 *
 * Uses the theme's CSS custom properties (--sf-*) when present; falls back
 * to literal hex values so the plugin still looks polished on themes that
 * don't define those tokens.
 *
 * Color story:
 *   - Surface : --sf-surface (#141923) — same as cards on the landing page.
 *   - Border  : --sf-border (#232A38) — same hairline rule throughout site.
 *   - Accent  : --sf-cyan (#29B5E8), via --tcg-accent injected by the plugin.
 *   - Text    : --sf-text-bright on headings, --sf-muted on body.
 */

:root {
  --tcg-accent: #29B5E8;
}

/* ─────────────────────────────────────────────────────────
   Teaser wrapper

   When truncated, we apply a gradient mask + slight blur to the
   bottom ~120px of the last block, so the final sentences fade
   into the gate block visually. Cleaner than a hard cutoff or
   dot-dot-dot — reads like the content "continues but is hidden."

   Implementation:
   - Use a pseudo-element overlay positioned absolutely over the
     bottom slice of the teaser. It paints a gradient from
     transparent → surface color, plus a backdrop-filter blur
     so any text underneath visually softens.
   - Falls back to a plain fade (no blur) on browsers without
     backdrop-filter support — Firefox before 103, etc.
   ───────────────────────────────────────────────────────── */
.tcg-teaser {
  position: relative;
}

.tcg-teaser[data-tcg-truncated="1"] {
  /* Reserve space for the overlay so the gate block doesn't sit
     on top of meaningful content. */
  padding-bottom: 1rem;
}

.tcg-teaser[data-tcg-truncated="1"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 340px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(12, 9, 22, 0) 0%, 
        rgba(12, 9, 22, 0.45) 45%, 
        rgba(12, 9, 22, 0.85) 100%, 
        rgba(12, 9, 22, 1) 100%
  );
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
  /* Mask the blur so it ramps in with the gradient — full blur at
     bottom, no blur at top of the overlay area. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 60%, #000 100%);
}

/* Use theme bg variable when available (more accurate fade color
   if the theme isn't pure #0E1218). */
@supports (background: var(--sf-bg)) {
  .tcg-teaser[data-tcg-truncated="1"]::after {
     background: linear-gradient(180deg, 
        rgba(12, 9, 22, 0) 0%, 
        rgba(12, 9, 22, 0.45) 45%, 
        rgba(12, 9, 22, 0.85) 100%, 
        rgba(12, 9, 22, 1) 100%
    );
  }
}

/* Fallback for browsers without backdrop-filter — slightly stronger
   gradient so the visual cue still reads. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .tcg-teaser[data-tcg-truncated="1"]::after {
     background: linear-gradient(180deg, 
        rgba(12, 9, 22, 0) 0%, 
        rgba(12, 9, 22, 0.45) 45%, 
        rgba(12, 9, 22, 0.85) 100%, 
        rgba(12, 9, 22, 1) 100%
    );
  }
}

/* ─────────────────────────────────────────────────────────
   Gate block — the card itself
   ───────────────────────────────────────────────────────── */
.tcg-gate-block {
  margin: 2.5rem 0;
  padding: 2.5rem 1.75rem;
  background: var(--sf-surface, #141923);
  border: 1px solid var(--sf-border, #232A38);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

/* Left-edge cyan accent bar — matches the pillar-card treatment on landing. */
.tcg-gate-block::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tcg-accent);
  border-radius: 14px 0 0 14px;
}

.tcg-gate-inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.tcg-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  background: var(--sf-cyan-dim, rgba(41, 181, 232, 0.10));
  color: var(--tcg-accent);
  border-radius: 50%;
}

.tcg-gate-headline {
  font-family: var(--sf-font, 'Figtree', system-ui, sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sf-text-bright, #F4F6FA);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

.tcg-gate-sub {
  font-family: var(--sf-font, 'Figtree', system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--sf-muted, #8B93A4);
  margin: 0 0 1.75rem;
}

/* ─────────────────────────────────────────────────────────
   CTA buttons
   ───────────────────────────────────────────────────────── */
.tcg-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

.tcg-gate-cta,
.tcg-gate-cta-secondary {
  font-family: var(--sf-font, 'Figtree', system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}

/* Primary — solid cyan. */
.tcg-gate-cta {
  background: var(--tcg-accent);
  color: #0E1218;  /* sf-bg, for high-contrast text on cyan */
  box-shadow: 0 0 0 1px rgba(41, 181, 232, 0.18);
}

.tcg-gate-cta:hover,
.tcg-gate-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(41, 181, 232, 0.32);
  outline: none;
}

.tcg-gate-cta:active {
  transform: translateY(0);
}

/* Secondary — ghost button on dark surface. */
.tcg-gate-cta-secondary {
  background: transparent;
  color: var(--sf-text, #E4E7EE);
  border-color: var(--sf-border-light, #2E3648);
}

.tcg-gate-cta-secondary:hover,
.tcg-gate-cta-secondary:focus-visible {
  background: var(--sf-surface-hover, #1A2030);
  border-color: var(--tcg-accent);
  color: var(--sf-text-bright, #F4F6FA);
  outline: none;
}

/* ─────────────────────────────────────────────────────────
   Trust line — small reassurance below CTAs
   ───────────────────────────────────────────────────────── */
.tcg-gate-trust {
  font-family: var(--sf-font, 'Figtree', system-ui, sans-serif);
  font-size: 0.825rem;
  color: var(--sf-muted, #8B93A4);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.tcg-gate-trust span[aria-hidden="true"] {
  color: var(--tcg-accent);
}

/* ─────────────────────────────────────────────────────────
   Test variant — slight warm tint to match the practice-test
   row treatment on the landing page (--sf-tint-warm).
   ───────────────────────────────────────────────────────── */
.tcg-gate-block--test {
  background: var(--sf-tint-warm, #1F1C12);
  border-color: rgba(251, 191, 36, 0.18);
}

.tcg-gate-block--test::before {
  /* Test variant uses a warmer accent bar to differentiate. */
  background: var(--sf-yellow, #FBBF24);
}

.tcg-gate-block--test .tcg-gate-icon {
  background: rgba(251, 191, 36, 0.12);
  color: var(--sf-yellow, #FBBF24);
}

/* The primary CTA on test gates stays cyan — consistent across the site
   for "the action button" semantics. */

/* ─────────────────────────────────────────────────────────
   Mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tcg-gate-block {
    margin: 2rem 0;
    padding: 2rem 1.25rem;
    border-radius: 12px;
  }

  .tcg-gate-headline {
    font-size: 1.25rem;
  }

  .tcg-gate-sub {
    font-size: 0.95rem;
  }

  .tcg-gate-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tcg-gate-cta,
  .tcg-gate-cta-secondary {
    width: 100%;
    padding: 0.95rem 1.25rem;
  }
}

/* ─────────────────────────────────────────────────────────
   Reduced motion — drop the hover lift
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tcg-gate-cta,
  .tcg-gate-cta-secondary {
    transition: none;
  }
  .tcg-gate-cta:hover,
  .tcg-gate-cta:focus-visible {
    transform: none;
  }
}