/* ==========================================================
   Riverport Business Club - member profile (shared by every
   /club-members/[slug]/ page - one template, one stylesheet, §7)
   hero > contact card + profile content (grey) > member circles (white) > footer
   ========================================================== */

.mp__grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; max-width: 1280px; }

/* ---------- Contact card (dark panel with the logo circles) ---------- */
.mp-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: 2rem 1.6rem 1.75rem; border-radius: var(--radius-lg); color: var(--white);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(254, 104, 191, 0.25), transparent 55%),
    linear-gradient(150deg, #4d4d4d 0%, #383838 100%);
  box-shadow: var(--shadow-md);
}
.mp-card__circles { position: absolute; z-index: -1; width: 220px; aspect-ratio: 1; right: -80px; top: -90px; pointer-events: none; }
.mp-card__circles span { position: absolute; border-radius: 50%; width: 52%; aspect-ratio: 1; }
.mp-card__circles span:nth-child(1) { left: 22%; top: 4%; background: rgba(255, 255, 255, 0.07); }
.mp-card__circles span:nth-child(2) { left: 6%; top: 40%; background: rgba(254, 104, 191, 0.45); }
.mp-card__circles span:nth-child(3) { left: 40%; top: 38%; background: rgba(147, 147, 147, 0.3); }

.mp-card__media { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 0.25rem; }
.mp-card__photo { width: 168px; height: 168px; object-fit: cover; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 3px var(--brand), 0 14px 30px rgba(0, 0, 0, 0.35); background: var(--white); }
.mp-card__logo-wrap { display: flex; align-items: center; justify-content: center; background: var(--white); border-radius: var(--radius); padding: 0.75rem 1rem; max-width: 230px; }
.mp-card__logo { max-width: 100%; max-height: 80px; width: auto; height: auto; }

.mp-card__cat { padding: 0.25rem 0.75rem; border-radius: 999px; background: rgba(254, 104, 191, 0.18); color: #ffb3dd; font-size: 0.85rem; font-weight: 700; }
.mp-card__badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 700; color: var(--white); }
.mp-card__badge i { color: var(--brand); }

.mp-card__list { display: grid; gap: 0.65rem; width: 100%; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.mp-card__list li { display: flex; align-items: baseline; gap: 0.7rem; line-height: 1.5; min-width: 0; color: #ececec; }
.mp-card__list i { width: 1rem; flex-shrink: 0; text-align: center; color: var(--brand); }
.mp-card__list a { color: var(--white); text-decoration: none; font-weight: 600; }
.mp-card__list a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.mp-card__list address { font-style: normal; }
.mp-card__email { font-size: 0.95rem; }
.mp-card__web { margin-top: 0.25rem; }
.mp-card__web i { color: var(--brand); }
.mp-card__ext { font-size: 0.75em; opacity: 0.8; }

.mp-card__social { display: flex; gap: 0.55rem; }
.mp-card__social a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--white); text-decoration: none; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease); }
.mp-card__social a:hover { background: var(--brand); transform: translateY(-2px); }

/* ---------- Content ---------- */
.mp-body { min-width: 0; }
.mp-body p { max-width: 75ch; }
.mp-lead { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.22rem); font-weight: 500; color: #3a3a3a; line-height: 1.65; }
.mp-block + .mp-block, .mp-block + .mp-highlight, .mp-highlight + .mp-block { margin-top: clamp(2rem, 4vw, 2.75rem); }
.mp-block__title { font-size: var(--fs-h3); font-weight: 800; margin-bottom: 1rem; padding-left: 0.9rem; border-left: 4px solid var(--brand); line-height: 1.25; }

.mp-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.75rem; }
.mp-ticks li { display: flex; align-items: baseline; gap: 0.65rem; line-height: 1.5; }
.mp-ticks i { flex-shrink: 0; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--brand-tint); color: var(--brand-deep); font-size: 0.7rem; display: inline-flex; align-items: center; justify-content: center; transform: translateY(2px); }

.mp-highlight {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 1.4rem; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #4d4d4d, #3a3a3a); color: var(--white);
}
.mp-highlight i { color: var(--brand); font-size: 1.2rem; margin-top: 0.2rem; }
.mp-highlight p { margin: 0; font-weight: 600; }

.mp-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mp-quote {
  margin: 0; display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--white); border: 0; border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem; box-shadow: var(--shadow-sm);
}
.mp-quote > i { color: var(--brand); font-size: 1.2rem; }
.mp-quote blockquote { margin: 0; }
.mp-quote blockquote p { margin: 0 0 0.6rem; font-size: 0.975rem; line-height: 1.65; color: #3a3a3a; }
.mp-quote blockquote p:last-child { margin-bottom: 0; }
.mp-quote figcaption { margin-top: auto; font-weight: 800; font-size: 0.925rem; color: var(--charcoal); }

.mp-smallprint { margin-top: 2rem; font-size: var(--fs-small); color: var(--muted); line-height: 1.6; }
.mp-body > .rp-textlink { margin-top: 1.5rem; }
.mp-back { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2.5rem; padding: 0.7rem 1.2rem; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-sm); color: #3a3a3a; font-weight: 700; text-decoration: none; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.mp-back:hover { background: var(--charcoal); color: var(--white); }
.mp-back i { color: var(--brand); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .mp__grid { grid-template-columns: 290px minmax(0, 1fr); }
  .mp-quotes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .mp__grid { grid-template-columns: minmax(0, 1fr); }
  /* Tablet: photo + logo on the left, details on the right */
  .mp-card { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 2rem; row-gap: 0.85rem; align-items: start; padding: 2rem; }
  .mp-card__media { grid-column: 1; grid-row: 1 / span 6; align-self: center; margin: 0; }
  .mp-card > *:not(.mp-card__media):not(.mp-card__circles) { grid-column: 2; }
  .mp-card__cat, .mp-card__badge { justify-self: start; }
  .mp-card__list { padding-top: 0.85rem; }
  .mp-card__photo { width: 150px; height: 150px; }
  .mp-card__logo-wrap { max-width: 180px; padding: 0.55rem 0.8rem; }
  .mp-card__logo { max-height: 64px; }
}
@media (max-width: 560px) {
  .mp-card { display: flex; align-items: center; text-align: center; padding: 1.75rem 1.25rem 1.5rem; }
  .mp-card > *:not(.mp-card__media):not(.mp-card__circles) { grid-column: auto; }
  .mp-card__media, .mp-card__cat, .mp-card__badge { align-self: center; }
  .mp-card__list { text-align: left; }
  .mp-card__social { align-self: center; }
  .mp-ticks { grid-template-columns: minmax(0, 1fr); }
  .mp-card__email { font-size: 0.875rem; }
}