/* Audience card — three-up feature cards on the landing page.
 * ---------------------------------------------------------------------- */

@layer modules {
  .audience-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-xl);
    transition: transform 180ms, box-shadow 180ms, border-color 180ms;
  }

  .audience-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 24px 50px -22px oklch(var(--lch-ink-darkest) / 0.22);
    transform: translateY(-3px);
  }

  .audience-card__shape {
    align-items: center;
    background-color: var(--shape-color, var(--color-accent));
    border-radius: var(--border-radius-l);
    display: flex;
    height: 4.5rem;
    justify-content: center;
    width: 4.5rem;
  }

  .audience-card__shape::after {
    background-color: color-mix(in oklab, #fff 70%, transparent);
    border-radius: 50%;
    content: "";
    height: 1.75rem;
    width: 1.75rem;
  }

  .audience-card__title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: var(--font-display-tracking);
    margin: 0;
  }

  .audience-card__body {
    color: var(--color-ink-dark);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
  }

  .audience-card__availability {
    border-block-start: 1px solid var(--color-border);
    color: var(--color-ink-medium);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    margin: 0;
    margin-block-start: auto;
    padding-block-start: var(--space-s);
    text-transform: uppercase;
  }
}