/* ==========================================================================
   Meet the Barbers page
   ========================================================================== */
.mb-list { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.mb-card {
  display: flex;
  gap: 32px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  align-items: flex-start;
  transition: border-color 0.25s;
}
.mb-card:hover { border-color: var(--gold); }
.mb-card:nth-child(even) { flex-direction: row-reverse; }

.mb-photo {
  flex: 0 0 200px;
  width: 200px;
  height: 240px;
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 35%, #2a2620 0%, #161410 100%);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: sticky;
  top: 96px;
}
.mb-photo span { font-family: var(--serif); font-size: 44px; color: var(--gold); opacity: 0.7; }

.mb-body { flex: 1; }
.mb-body h2 { font-family: var(--serif); color: var(--cream); font-size: 28px; font-weight: 400; margin-bottom: 4px; }
.mb-role {
  color: var(--gold);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 16px;
}
.mb-bio p { color: var(--muted-2); font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
.mb-btn { margin-top: 10px; font-size: 14px; padding: 12px 28px; }

@media (max-width: 768px) {
  .mb-card, .mb-card:nth-child(even) {
    flex-direction: column;
    text-align: center;
    padding: 28px 22px;
    align-items: center;
  }
  .mb-photo { flex-basis: auto; width: 180px; height: 200px; position: static; }
  .mb-bio p { text-align: left; }
}