/* Nieuwsbriefvoorbeelden: per gelegenheid een inboxregel (afzender,
   onderwerp, preheader) naast de opbouw van de mail. */

@layer components {
  .nv-lijst {
    display: grid;
    gap: var(--space-m);
  }

  .nv-voorbeeld {
    display: grid;
    gap: var(--space-m);
    padding: var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    scroll-margin-block-start: 6rem;
  }

  @media (min-width: 56rem) {
    .nv-voorbeeld {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      gap: var(--space-l);
      padding: var(--space-l);
    }
  }

  .nv-voorbeeld h2 {
    font-size: var(--step-2);
  }

  .nv-voorbeeld__intro {
    margin-block-start: var(--space-2xs);
    color: var(--color-muted);
  }

  /* De inboxregel: zo ziet de ontvanger hem voor hij opent. */
  .nv-inbox {
    display: grid;
    gap: 0.2rem;
    margin-block-start: var(--space-m);
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    background: var(--color-surface);
    font-size: var(--step--1);
  }

  .nv-inbox__van {
    font-weight: 700;
  }

  .nv-inbox__onderwerp {
    color: var(--color-ink);
    font-weight: 600;
  }

  .nv-inbox__preheader {
    color: var(--color-muted);
  }

  .nv-label {
    color: var(--color-muted);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .nv-opbouw {
    display: grid;
    gap: var(--space-2xs);
    margin: var(--space-2xs) 0 0;
    padding-inline-start: 1.2rem;
  }

  .nv-opbouw li::marker {
    color: var(--color-accent);
    font-weight: 700;
  }

  .nv-tip {
    margin-block-start: var(--space-s);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    background: var(--color-surface);
    font-size: var(--step--1);
  }

  .nv-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-m);
    margin-block-start: var(--space-s);
    font-size: var(--step--1);
  }
}