/* Locked section — public-web teaser for account-gated content.
 * Default: readable teaser with the CTA card stacked after it.
 * Veiled: decorative teaser dimmed and blurred behind a centered card.
 * ---------------------------------------------------------------------- */

@layer components {
  .locked-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .locked-section__card {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-width: 34rem;
    padding: var(--space-m);
    text-align: center;
  }

  .locked-section:not(.locked-section--veiled) .locked-section__overlay {
    display: flex;
    justify-content: center;
  }

  .locked-section--veiled {
    display: block;
    position: relative;
  }

  .locked-section--veiled .locked-section__teaser {
    filter: blur(3px) saturate(0.5);
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
  }

  .locked-section--veiled .locked-section__overlay {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: var(--space-m);
    position: absolute;
  }

  .locked-section__title {
    font-size: 1.125rem;
  }

  .locked-section__lead {
    color: var(--color-ink-medium);
    font-size: 0.9rem;
    max-width: 28rem;
    text-wrap: balance;
  }

  .locked-value {
    align-items: center;
    color: var(--color-ink-medium);
    display: inline-flex;
    text-decoration: none;
  }

  .locked-value:hover,
  .locked-value:focus-visible {
    color: var(--color-accent);
  }

  .locked-value svg {
    block-size: 0.875em;
    inline-size: 0.875em;
  }

  .locked-value--large {
    color: var(--color-accent);
  }

  .locked-value--large svg {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }
}