/* ==========================================================================
   Promotion history card on member profiles (profile_card_promotionhistory.php).
   A vertical timeline, newest belt first: a dot in the belt's colour on the
   rail, and one card per belt with a compact header (belt, name, date,
   location, time at the belt) followed by promoter(s), comment, stripe dates
   and photos. Tokens come from styles/modern.css. Mobile first.
   ========================================================================== */

.bc-pht {
  --pht-surface: var(--bc-surface, #fff);
  --pht-surface-2: var(--bc-surface-2, #f6f6f8);
  --pht-line: var(--bc-line, rgba(15, 15, 25, 0.07));
  --pht-line-strong: var(--bc-line-strong, rgba(15, 15, 25, 0.12));
  --pht-ink: var(--bc-ink, #0b0b10);
  --pht-ink-2: var(--bc-ink-2, #3a3a44);
  --pht-muted: var(--bc-muted, #6b6b76);
  --pht-faint: var(--bc-faint, #9a9aa5);
  container-type: inline-size;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.theme-dark .bc-pht {
  --pht-surface: rgba(255, 255, 255, 0.03);
  --pht-surface-2: rgba(255, 255, 255, 0.06);
  --pht-line: rgba(255, 255, 255, 0.08);
  --pht-line-strong: rgba(255, 255, 255, 0.16);
  --pht-ink: #f2f2f5;
  --pht-ink-2: #d0d0d8;
  --pht-muted: #9d9daa;
  --pht-faint: #767684;
}

/* ---------- Rail and dots ---------- */

.bc-pht-item {
  --bc-pht-belt: #9aa0ab;
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 0 12px;
  padding: 0 0 14px;
}
.bc-pht-item:last-child { padding-bottom: 0; }
.bc-pht-item::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 22px;
  bottom: -20px;
  width: 2px;
  border-radius: 1px;
  background: var(--pht-line-strong);
}
.bc-pht-item:last-child::before { display: none; }

.bc-pht-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-top: 20px;
  border-radius: 50%;
  background: var(--bc-pht-belt);
  box-shadow: 0 0 0 3px var(--pht-surface), 0 0 0 4px var(--pht-line-strong);
}
.theme-dark .bc-pht-dot { box-shadow: 0 0 0 3px #0f1117, 0 0 0 4px var(--pht-line-strong); }
.bc-pht-item.is-current .bc-pht-dot {
  box-shadow: 0 0 0 3px var(--pht-surface), 0 0 0 5px var(--bc-pht-belt);
}
.theme-dark .bc-pht-item.is-current .bc-pht-dot { box-shadow: 0 0 0 3px #0f1117, 0 0 0 5px var(--bc-pht-belt); }

/* ---------- Card ---------- */

.bc-pht-card {
  min-width: 0;
  padding: 14px;
  border-radius: 16px;
  background: var(--pht-surface);
  box-shadow: inset 0 0 0 1px var(--pht-line);
  color: var(--pht-ink-2);
  font-size: 14px;
  line-height: 1.45;
}
.bc-pht-item.is-current .bc-pht-card {
  box-shadow: inset 0 0 0 1px var(--pht-line-strong), var(--bc-shadow-2, 0 8px 24px -6px rgba(16, 16, 30, 0.08));
}

/* Header: belt on top on phones, belt | title | time on wider cards */
.bc-pht-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "belt" "title" "time";
  gap: 10px;
  align-items: center;
}
.bc-pht-belt { grid-area: belt; min-width: 0; max-width: 320px; }
.bc-pht-belt > div { box-shadow: 0 2px 6px -2px rgba(16, 16, 30, 0.3) !important; }
.bc-pht-title { grid-area: title; min-width: 0; }
.bc-pht-time { grid-area: time; justify-self: start; }

@container (min-width: 560px) {
  .bc-pht-head {
    grid-template-columns: 150px minmax(0, 1fr) auto;
    grid-template-areas: "belt title time";
    gap: 16px;
  }
  .bc-pht-card { padding: 16px 18px; }
}

.bc-pht-name {
  margin: 0;
  padding: 0;
  font: 650 16px/1.3 var(--bc-font, inherit);
  letter-spacing: -0.01em;
  color: var(--pht-ink) !important;
  overflow-wrap: anywhere;
}
.bc-pht-now {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
}
.theme-dark .bc-pht-now { background: rgba(34, 197, 94, 0.16); color: #4ade80; }

.bc-pht-when {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 3px 0 0 !important;
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pht-muted) !important;
}
.bc-pht-when span { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.bc-pht-when i,
.bc-pht-time i { font-size: 11.5px; color: var(--pht-faint); }

.bc-pht-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pht-surface-2);
  box-shadow: inset 0 0 0 1px var(--pht-line);
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.3;
  color: var(--pht-ink-2);
  font-variant-numeric: tabular-nums;
}

/* Degree given early (functions_copromoters.php) */
.bc-pht .bc-early-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  font-size: 12.5px;
  font-weight: 600;
}
.theme-dark .bc-pht .bc-early-note { color: #fbbf24; }

/* ---------- Promoter and co-promoters ---------- */

.bc-pht-promo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--pht-line);
}
.bc-pht-group { min-width: 0; }
.bc-pht-label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pht-muted);
}
.bc-pht-person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}
.bc-pht-person > div:first-child { flex: 0 0 auto; line-height: 0; }
/* Phones: the status badge sits under the name, beside the avatar */
@container (max-width: 559px) {
  .bc-pht-person:has(.w3-tag) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
  }
  .bc-pht-person:has(.w3-tag) > :first-child { grid-row: 1 / span 2; align-self: center; }
  .bc-pht-person:has(.w3-tag) .bc-pht-pname { align-self: end; }
  .bc-pht-person:has(.w3-tag) .w3-tag { justify-self: start; align-self: start; }
}
.bc-pht-person .w3-tag { margin: 0 !important; }
.bc-pht-pname {
  min-width: 0;
  font-weight: 600;
  color: var(--pht-ink) !important;
  overflow-wrap: anywhere;
}
a.bc-pht-pname { text-decoration: none; }
a.bc-pht-pname:hover { text-decoration: underline; text-underline-offset: 3px; }
.bc-pht-noav {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pht-surface-2);
  box-shadow: inset 0 0 0 1px var(--pht-line);
  color: var(--pht-faint);
  font-size: 15px;
}
.bc-cop-public-list { display: flex; flex-direction: column; gap: 8px; }
.bc-pht-auto { display: flex; align-items: center; gap: 8px; margin: 0 !important; color: var(--pht-muted) !important; font-size: 13.5px; }
.bc-pht-auto i { color: var(--pht-faint); }

/* ---------- Comment ---------- */

.bc-pht-comment {
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 0;
  border-left: 3px solid var(--bc-pht-belt);
  border-radius: 4px 12px 12px 4px;
  background: var(--pht-surface-2);
  color: var(--pht-ink-2);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bc-pht-comment em { font-style: italic; }

/* ---------- Stripe dates ---------- */

.bc-pht-stripes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.bc-pht-stripes li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--pht-surface-2);
  box-shadow: inset 0 0 0 1px var(--pht-line);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--pht-muted);
  white-space: nowrap;
}
.bc-pht-stripes b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 650;
  color: var(--pht-ink-2);
}
.bc-pht-stripes b::before {
  content: "";
  width: 3px;
  height: 11px;
  border-radius: 1px;
  background: var(--pht-ink-2);
}

/* ---------- Photos ---------- */

.bc-pht .bc-pp { margin: 14px 0 0; }

/* Photos use the full card width on wider screens: a row of equal tiles instead of a
   560px mosaic with empty space beside it. Phones keep the mosaic (styles/promophotos.css). */
@media (min-width: 768px) {
  .bc-pht .bc-pp { max-width: none; gap: 8px; }
  .bc-pht .bc-pp--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; aspect-ratio: auto; }
  .bc-pht .bc-pp--3 .bc-pp-tile:first-child { grid-row: auto; }
  .bc-pht .bc-pp--3 .bc-pp-tile, .bc-pht .bc-pp--2 .bc-pp-tile { aspect-ratio: 4 / 3; }
  /* One photo: the same size as one of two, so every belt keeps the same rhythm */
  .bc-pht .bc-pp--1 { max-width: calc(50% - 4px); }
  .bc-pht .bc-pp--1 .bc-pp-tile { aspect-ratio: 4 / 3; }
  .bc-pht .bc-pp .bc-pp-tile { border-radius: 12px; }
  .bc-pht .bc-pp .bc-pp-tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
}