/*
 * Member-area layout (/leden dashboard and /leden/profiel).
 *
 * Uses shared primitives from _page_hero.css (.page-hero,
 * .page-eyebrow, .page-hero-title, .page-hero-lead, .breadcrumb),
 * _cards.css (.card, .card-body), _buttons.css (.btn), _forms.css
 * (.form-group, .form-label, .form-input, .form-errors).
 *
 * Everything in this file is genuinely member-specific: the section
 * framing around the single-card member/non-member panel, the meta
 * definition list, and the dashboard-bound form container.
 *
 * No literal colour, spacing, or font values — everything routes
 * through var() tokens from _tokens.css.
 */

.members-section {
  padding-block: 3rem;
  background: var(--stone);
}

@media (min-width: 48rem) {
  .members-section {
    padding-block: 3.5rem;
  }
}

.members-section .container > .card {
  max-width: 40rem;
  margin-inline: auto;
}

.members-form-container {
  max-width: 40rem;
  margin-inline: auto;
}

.members-card-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1rem;
}

.members-card-lead {
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.members-card-foot {
  margin-top: 1.25rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
}

.members-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* ---- Meta list (shared between member and profile cards) ---------- */

.members-meta-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.members-meta-list > div {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) 2fr;
  gap: 1rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--sand);
}

.members-meta-list > div:last-child {
  border-bottom: 0;
}

.members-meta-list dt {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 400;
}

.members-meta-list dd {
  font-size: var(--fs-base);
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}

.members-profile-email-note {
  margin-top: 1.25rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
}