/*
 * 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;
}

/* ---- Committees index + show ------------------------------------- */

.members-committees-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 56rem;
}

@media (min-width: 48rem) {
  .members-committees-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.members-committee-card {
  height: 100%;
}

.members-committee-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  margin-bottom: .65rem;
}

.members-committee-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.members-committee-name a {
  color: inherit;
  text-decoration: none;
}

.members-committee-name a:hover,
.members-committee-name a:focus {
  color: var(--forest);
  text-decoration: underline;
}

.members-committee-meta {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.members-committee-link {
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
}

.members-committee-link:hover,
.members-committee-link:focus {
  text-decoration: underline;
}

.members-section .container > .members-committee-detail {
  max-width: 56rem;
  margin-inline: auto;
}

.members-committee-roster {
  margin-top: .5rem;
}

.members-committee-empty {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--muted);
  font-style: italic;
}

/* ---- Mijn commissies preview card on /leden ---------------------- */

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

.members-committees-roster {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .65rem;
}

.members-committees-roster li {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: baseline;
  padding-block: .35rem;
  border-bottom: 1px solid var(--sand);
}

.members-committees-roster li:last-child {
  border-bottom: 0;
}

.members-committees-role {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 600;
  min-width: 7rem;
}

.members-committees-committee {
  font-size: var(--fs-base);
  color: var(--ink);
  font-weight: 600;
}

/* Custom fields panel — same card shell, sits beneath the committees
 * card in source order. Stacks single-column on mobile; on desktop the
 * existing .members-section .container > .card max-width keeps it the
 * same width as its peers. */
.members-section .container > .members-custom-fields-card {
  max-width: 40rem;
  margin-inline: auto;
  margin-top: 1.25rem;
}

/* Borg_notes renders as a sub-row beneath the Borg amount in the same
 * dd cell, so the relationship between the deposit and its context
 * (date, method) is visually grouped without claiming another dt row. */
.members-custom-fields-note {
  display: block;
  margin-top: .25rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
}

/* Member-facing IBAN renderings need to break inside the 18-char string
 * on narrow viewports so the card doesn't overflow its container.
 * Applied wherever IBAN appears on member-facing pages. */
.members-iban {
  overflow-wrap: break-word;
  word-break: break-all;
  font-family: var(--font-mono);
}

/* Profile edit form — five fieldsets matching the U4 admin form. The
 * outer form-container in the section keeps the 40rem max-width. */
.members-profile-fieldset {
  /* min-width: 0 disables the browser-default min-width: min-content on
   * <fieldset> — without this, the 3-column Naam row's min-content
   * width pushes the whole fieldset wider than the parent card and the
   * Achternaam column overflows the right edge of the card. */
  min-width: 0;
  border: 1px solid var(--sand);
  border-radius: .5rem;
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 1rem;
}

.members-profile-fieldset legend {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--forest);
  padding: 0 .5rem;
  margin-left: -.5rem;
}

.members-profile-form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .members-profile-form-row {
    grid-template-columns: 1.4fr .8fr 1.4fr;
  }

  .members-profile-form-row-address {
    grid-template-columns: 3fr 1fr;
  }
}

.members-profile-form-prefix .form-input {
  max-width: 12rem;
}

.members-profile-hint {
  display: block;
  margin-top: .35rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
}