/* ===========================
   Ambassadors (bp-card clone)
   =========================== */

/* Theme-friendly (same as best_practices.css) */
:root{
  --bp-bg: #f5f7fb;
  --bp-card: #fff;
  --bp-text: #1f2937;
  --bp-muted: #6b7280;
  --bp-border: rgba(0,0,0,.08);
  --bp-shadow: 0 14px 30px rgba(0,0,0,.10);
  --bp-shadow-hover: 0 18px 38px rgba(0,0,0,.14);
  --bp-radius: 14px;
}

.amb-page{ background: var(--bp-bg); }

.bp-title{
  font-family:"Jost", sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  color: var(--bp-text);
}

.bp-subtitle{ color: var(--bp-muted); }

/* Cards (layout like screenshots) */
.bp-card{
  border-radius: var(--bp-radius);
  overflow: hidden;
  background: var(--bp-card);
  border: 1px solid var(--bp-border);
  box-shadow: var(--bp-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.bp-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--bp-shadow-hover);
}

/* Header bar uses bootstrap primary (same as bp) */
.bp-card-top{
  background: var(--bs-primary);
  padding: 18px;
  text-align: center;
}
.bp-card-title{
  color:#fff;
  font-family:"Jost", sans-serif;
  font-weight:800;
  font-size:1.05rem;
  line-height:1.25;
}
.bp-card-category{
  color: rgba(255,255,255,.85);
  font-size:.82rem;
  font-weight:700;
}

.bp-card-body{ padding: 16px 18px 18px; }
.bp-card-desc{ color: var(--bp-muted); font-size:.93rem; text-align: center;}

/* Tags (same as bp) */
.bp-tag{
  background: rgba(0,0,0,.04);
  border: 1px solid var(--bp-border);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--bp-text);
}

/* Empty state (same vibe as best practices) */
.bp-empty{
  background: var(--bp-card);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  padding: 24px;
}

/* Optional animation helper (kept from bp css) */
.bp-card-col.bp-leave{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}

/* ===========================
   Ambassador-specific styling
   =========================== */

/* Initials badge inside the header bar */
.amb-initials{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family:"Jost", sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.02em;
  margin: 0 auto 12px;
}

/* keep tags nicely centered */
.amb-tags{
  min-height: 34px; /* keeps cards aligned even if 1 tag */
}

/* Slightly tighter spacing on very small screens */
@media (max-width: 420px){
  .bp-card-top{ padding: 16px; }
  .bp-card-body{ padding: 14px 16px 16px; }
  .amb-initials{ width: 66px; height: 66px; font-size: 24px; }
}