/* ═══════════════════════════════════════════════════════════════
   Connections detail (jockey + trainer)
   ─────────────────────────────────────────────────────────────────
   Same cream paper-zone palette as horses/detail.css, scoped under
   `.connection-page` so the two stylesheets never collide.

   Layout (top → bottom):
     hero                   — dark band, avatar + identity + strap
     status pill strip      — running today / active / dormant
     career stats           — 5-cell grid (runs, wins, places, win%, pl%)
     form figures band      — racecard-style 1-2-3-P-1-1, oldest → newest
     [trainer only] yard    — preview of horses-in-yard
     partnerships           — top horses linked
     recent results         — newest race history ribbon
     editorial bio + notable wins
═══════════════════════════════════════════════════════════════ */

.connection-page {
  --cp-paper:        #FAFAF7;
  --cp-card:         #FFFFFF;
  --cp-card-warm:    #F7F5EE;
  --cp-ink:          #11151F;
  --cp-ink-70:       #41474F;
  --cp-ink-40:       #9CA3AF;
  --cp-rule:         #E7E5DD;
  --cp-rule-strong:  #D6D2C5;
  --cp-gold-ink:     #9C7B12;
  --cp-gold-bright:  #D4AF37;
  --cp-gold-wash:    #FAF1D7;
  --cp-emerald:      #1A7D4A;
  --cp-emerald-soft: rgba(26, 125, 74, 0.10);
  --cp-red:          #C0392B;
  --cp-amber:        #C46A1A;

  background: var(--cp-paper);
  color: var(--cp-ink);
  min-height: calc(100vh - 64px);
}

.connection-page .container { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.connection-page > section + section { margin-top: 22px; }
.connection-page > section:last-child { padding-bottom: 56px; }

/* ── HERO ─────────────────────────────────────────────────────── */
.connection-hero {
  background: linear-gradient(180deg, #16223a 0%, #0e1827 100%);
  color: #fff;
  padding: 40px 16px 36px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}
.connection-hero__inner {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: center;
}
.connection-hero__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(212, 175, 55, 0.50);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.connection-hero__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.connection-hero__avatar-initials {
  font-size: 40px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}
.connection-hero__identity { min-width: 0; }
.connection-hero__eyebrow {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 8px;
}
.connection-hero__role {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cp-gold-bright);
}
.connection-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(255,255,255,0.10);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}
.connection-badge--claim { background: rgba(196, 106, 26, 0.25); color: #ffc890; }
.connection-badge--yard  { background: rgba(26, 125, 74, 0.25); color: #9be0ba; }

.connection-hero__name {
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.05;
  margin: 4px 0 6px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.connection-hero__strap {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
}

/* ── STATUS STRIP ─────────────────────────────────────────────── */
.connection-status-strip { padding-top: 22px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  background: var(--cp-card);
  border: 1px solid var(--cp-rule);
  color: var(--cp-ink-70);
}
.status-pill__count {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--cp-ink-40);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.status-pill--running_today {
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.40);
  color: var(--cp-red);
}
.status-pill--running_today .status-dot--live {
  background: var(--cp-red);
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.18);
  animation: cp-pulse 1.6s ease-in-out infinite;
}
@keyframes cp-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(192, 57, 43, 0.06); }
}
.status-pill--active {
  background: var(--cp-emerald-soft);
  border-color: rgba(26, 125, 74, 0.35);
  color: var(--cp-emerald);
}
.status-pill--dormant {
  background: rgba(196, 106, 26, 0.08);
  border-color: rgba(196, 106, 26, 0.30);
  color: var(--cp-amber);
}

/* ── CAREER STATS GRID ────────────────────────────────────────── */
.connection-stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  background: var(--cp-card);
  padding: 16px;
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.connection-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 6px;
  text-align: center;
  border-right: 1px solid var(--cp-rule);
}
.connection-stat:last-child { border-right: 0; }
.connection-stat__num {
  font-size: 26px; font-weight: 800;
  color: var(--cp-ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.connection-stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--cp-ink-40);
  margin-top: 4px;
}
.connection-stat--accent .connection-stat__num { color: var(--cp-gold-ink); }
@media (max-width: 640px) {
  .connection-stats__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .connection-stat { border-right: 0; }
}

/* ── FORM FIGURES BAND ────────────────────────────────────────── */
.connection-form-band {
  background: var(--cp-card-warm);
  padding: 14px 18px;
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.connection-form-band__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cp-ink-40);
  font-weight: 700;
}
.connection-form-band__value {
  display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.form-figure {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--cp-rule-strong);
  font-weight: 800; font-size: 14px;
  color: var(--cp-ink);
}
.connection-form-band__hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--cp-ink-40);
  font-style: italic;
}

/* ── PARTNERSHIPS / YARD lists ────────────────────────────────── */
.connection-card__header {
  margin-bottom: 12px;
}
.connection-card__header h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--cp-ink);
}
.connection-card__header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--cp-ink-70);
}

.partnership-list,
.yard-list {
  list-style: none;
  margin: 0; padding: 0;
  background: var(--cp-card);
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
  overflow: hidden;
}
.partnership-row + .partnership-row,
.yard-row + .yard-row {
  border-top: 1px solid var(--cp-rule);
}
.partnership-row__link,
.yard-row__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--cp-ink);
  gap: 12px;
}
.partnership-row__link:hover,
.yard-row__link:hover {
  background: var(--cp-card-warm);
}
.partnership-row__name,
.yard-row__name {
  font-weight: 700;
}
.partnership-row__counts,
.yard-row__meta {
  font-size: 13px;
  color: var(--cp-ink-70);
}

/* ── RECENT RESULTS RIBBON ────────────────────────────────────── */
.connection-recent__list {
  list-style: none;
  margin: 0; padding: 0;
  background: var(--cp-card);
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
  overflow: hidden;
}
.recent-row {
  display: grid;
  grid-template-columns: 90px 56px 1.4fr 2fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--cp-ink);
}
.recent-row + .recent-row {
  border-top: 1px solid var(--cp-rule);
}
.recent-row__date { color: var(--cp-ink-70); font-variant-numeric: tabular-nums; }
.recent-row__pos {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 800;
  background: var(--cp-card-warm);
  color: var(--cp-ink-70);
}
.recent-row--win    .recent-row__pos {
  background: var(--cp-gold-wash);
  color: var(--cp-gold-ink);
  border: 1px solid rgba(212, 175, 55, 0.4);
}
.recent-row--placed .recent-row__pos {
  background: var(--cp-emerald-soft);
  color: var(--cp-emerald);
}
.recent-row__horse a {
  color: var(--cp-ink);
  font-weight: 700;
  text-decoration: none;
}
.recent-row__horse a:hover { text-decoration: underline; }
.recent-row__race { color: var(--cp-ink-70); }
.recent-row__odds {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--cp-ink-70);
}
@media (max-width: 640px) {
  .recent-row {
    grid-template-columns: 70px 50px 1fr;
    grid-template-areas:
      "date pos horse"
      ".    .   race";
    row-gap: 2px;
  }
  .recent-row__date  { grid-area: date; }
  .recent-row__pos   { grid-area: pos; }
  .recent-row__horse { grid-area: horse; }
  .recent-row__race  { grid-area: race; font-size: 12px; }
  .recent-row__odds  { display: none; }
}

/* ── EDITORIAL BIO + NOTABLE WINS ─────────────────────────────── */
.connection-bio__body {
  background: var(--cp-card);
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cp-ink);
}
.connection-bio__body p { margin: 0 0 12px; }
.connection-bio__body p:last-child { margin-bottom: 0; }

.connection-notable__list {
  list-style: none;
  margin: 0; padding: 0;
  background: var(--cp-card);
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
  overflow: hidden;
}
.connection-notable__list li {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--cp-ink);
}
.connection-notable__list li + li {
  border-top: 1px solid var(--cp-rule);
}

/* ── Mobile fine-tuning ───────────────────────────────────────── */
@media (max-width: 480px) {
  .connection-hero__inner {
    grid-template-columns: 72px 1fr;
    gap: 14px;
  }
  .connection-hero__avatar { width: 72px; height: 72px; }
  .connection-hero__avatar-initials { font-size: 30px; }
}