/* Scope this component */

.members-section {
  --brand: #779349;
  --brand-700: #67823f;
  --text: #1f2937;
  --muted: #6b7280;
  --chip-bg: rgba(119,147,73,.12);
  --chip-text: #3b4a2a;
}

/* Heading */

.members-section h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin-bottom: .25rem;
}

.members-section .lead {
  font-size: 1rem;
}

/* Card base */

.member-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}

.member-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

/* Media (background image via CSS var set in JS) */

.member-media {
  position: relative;
  background-color: #f3f4f6;
  background-image: var(--bg, none);
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 9;
}

/* Readability gradient */

.member-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%);
}

/* Logo chip */

.member-logo {
  position: absolute;
  left: .9rem;
  bottom: .9rem;
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  z-index: 1;
}

/* Body */

.member-body {
  padding: 1rem 1rem 1.25rem;
}

.member-name {
  color: var(--text);
  margin: 0;
}

.member-desc {
  color: var(--muted);
  margin: .25rem 0 .5rem;
}

/* Tags */

.member-tags .badge {
  background: var(--chip-bg);
  color: var(--chip-text);
  font-weight: 600;
  border-radius: 999px;
  padding: .35rem .6rem;
  margin-right: .3rem;
}

/* Buttons in brand green */

.btn-brand {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn-brand:hover, .btn-brand:focus {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

.btn-outline-brand {
  border-color: var(--brand);
  color: var(--brand);
}

.btn-outline-brand:hover, .btn-outline-brand:focus {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Respect reduced motion */

@media (prefers-reduced-motion: reduce) {
  .member-card {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .member-card:hover {
    transform: none;
  }
}