/* =========================================================
   Player Page — Mobile-first Single Stylesheet
   Structure:
   1) Foundations (variables, base, utilities)
   2) Generic section scaffold
   3) Components (basic header, KPIs, charts, streaks, matches,
      transfers, injuries, honors, teams, highlights)
   ========================================================= */

/* ---------- 1) Foundations ---------- */
:root{
  --slate-900:#0f172a;
  --slate-600:#475569;
  --slate-500:#64748b;
  --slate-50:#f8fafc;
  --panel-border:rgba(2,6,23,.08);
  --panel-border-soft:rgba(2,6,23,.06);
}

.text-muted{ color: var(--slate-500); }

.pb-h2{
  font-size: clamp(20px, 5.8vw, 24px);
  font-weight: 800; line-height: 1.2;
  margin: 0 0 6px;
}

/* ---------- 2) Generic section scaffold ---------- */
.player-section{
  max-width:1160px; margin:0 auto;
  padding:12px 16px 28px;
  color:var(--slate-900);
}

/* subtle separators if needed */
.pb-section{ padding:12px 0; border-top:1px solid rgba(0,0,0,.06); }
.pb-section:first-of-type{ border-top:0; }

/* ---------- 3) Components ---------- */

/* 3.1 Basic header (photo, name, socials) */
.pb-header{ display:grid; grid-template-columns:1fr; gap:12px; align-items:start; }
.pb-photo{ display:flex; align-items:center; }
.pb-photo img{
  width:44vw; max-width:420px; height:auto; border-radius:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
}
.pb-name{
  margin:4px 0 6px; font-weight:800; line-height:1.2;
  font-size:clamp(28px, 7vw, 40px); letter-spacing:-0.01em;
}
.pb-socials{ display:flex; gap:14px; align-items:center; margin:8px 0 16px; }
.pb-socials img{ width:clamp(26px, 7vw, 28px); height:clamp(26px, 7vw, 28px); display:block; }

.pb-grid{ display:grid; grid-template-columns:1fr; row-gap:10px; }
.pb-item{ display:grid; grid-template-columns:1fr; row-gap:4px; padding:10px 0; border-bottom:1px solid rgba(0,0,0,.08); }
.pb-item:last-child{ border-bottom:0; }
.pb-label{ font-size:.95em; font-weight:600; color:#6b7280; }
.pb-value{ font-size:1.1em; font-weight:700; }
.pb-bio{ margin-top:8px; color:var(--slate-600); line-height:1.6; }

@media (min-width:992px){
  .player-section{ padding:24px 16px 40px; }
  .pb-header{ grid-template-columns:360px 1fr; gap:28px; }
  .pb-photo img{ width:100%; max-width:360px; }
  .pb-socials{ margin-bottom:0; }
  .pb-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:28px; row-gap:12px; margin-top:8px; }
  .pb-item{ grid-template-columns:220px 1fr; align-items:center; padding:12px 0; }
}

/* 3.2 KPIs (Season Snapshot) */
.pb-kpis{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.pb-kpi{
  background:var(--slate-50); border:1px solid var(--panel-border-soft);
  border-radius:14px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.pb-kpi-label{
  font-size:12px; font-weight:600; color:#6b7280;
  text-transform:uppercase; letter-spacing:.02em; margin-bottom:6px;
}
.pb-kpi-value{ font-size:clamp(16px, 5.5vw, 22px); font-weight:800; color:var(--slate-900); }
.pb-empty{
  background:#fff7ed; border:1px dashed #fdba74; color:#92400e;
  padding:12px 14px; border-radius:10px; font-size:.95em;
}
@media (min-width:992px){
  .pb-kpis{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; }
  .pb-kpi{ padding:14px 16px; }
  .pb-kpi-value{ font-size:22px; }
}

/* 3.3 Charts container helpers */
.chart-card--bare{ border:0!important; box-shadow:none!important; background:transparent!important; padding:0!important; }
.chart-card--bare .chart-wrap{ padding:0; }
.player-form .chart-card{
  background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.06);
  padding:12px; margin:12px 0 20px;
}
.player-form .chart-wrap{ position:relative; height:280px; }
@media (min-width:768px){ .player-form .chart-wrap{ height:360px; } }

/* 3.4 Streaks */
.streaks-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
.streak-card{
  background:var(--slate-50); border:1px solid var(--panel-border);
  border-radius:10px; padding:14px 16px;
}
.streak-title{
  font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--slate-500);
  text-transform:uppercase; margin-bottom:6px;
}
.streak-main{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.streak-value{ font-size:28px; line-height:1; font-weight:800; color:var(--slate-900); }
.streak-meta{ font-size:13px; color:var(--slate-600); white-space:nowrap; }
@media (max-width:420px){ .streak-value{ font-size:24px; } }

/* 3.5 Recent Matches */
.player-recent .match-list{ display:grid; gap:12px; }
@media (min-width:640px){ .player-recent .match-list{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .player-recent .match-list{ grid-template-columns:1fr 1fr 1fr; } }

.match-card{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:12px; padding:14px 14px 10px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.match-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.match-date{ font-weight:600; color:#111; }
.match-fixture{ color:#333; font-weight:500; }
.match-fixture .vs{ color:#999; margin:0 6px; }
.match-score{
  font-weight:800; color:#111; background:#f4f6f8;
  padding:4px 8px; border-radius:8px; min-width:56px; text-align:center;
}
.match-body{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.stat-chip{
  background:#f7f9fb; border:1px solid rgba(0,0,0,.05);
  border-radius:10px; padding:8px 10px; min-width:92px; flex:0 0 auto;
}
.stat-chip .k{ font-size:12px; color:#666; }
.stat-chip .v{ font-weight:700; color:#121212; font-size:14px; }
.match-foot{ font-size:12px; color:#666; border-top:1px dashed #eee; padding-top:8px; }

/* chips never wrap internally */
.chip{
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap; line-height:1;
  padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid rgba(0,0,0,.08); background:#fff;
}
.stat-chips{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
@media (max-width:375px){ .stat-chips{ gap:4px; } .chip{ padding:1px 6px; font-size:11px; } }

/* 3.6 Transfers */
.player-transfers .transfer-card{ background:#fff; }
.player-transfers .transfer-row{
  display:grid; grid-template-columns:1fr 40px 1fr; align-items:center; gap:12px;
}
.player-transfers .club{ display:flex; align-items:center; gap:10px; min-width:0; }
.player-transfers .club .logo{ width:40px; height:40px; object-fit:contain; flex:0 0 auto; }
.player-transfers .club .name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-transfers .side.left .name{ text-align:right; }
.player-transfers .side.right .name{ text-align:left; }
.player-transfers .arrow{ text-align:center; font-size:22px; line-height:1; opacity:.75; }
@media (min-width:768px){ .player-transfers .club .logo{ width:48px; height:48px; } }

/* 3.7 Injuries (compact) */
.player-injuries .inj-card--compact{ background:#fff; }
.player-injuries .inj-type{ font-size:.95rem; line-height:1.2; }
.player-injuries .inj-meta.xsmall{ font-size:.8rem; line-height:1.25; }
.player-injuries .inj-days{ font-weight:600; padding:.2rem .5rem; }
@media (min-width:576px){ .player-injuries .inj-type{ font-size:1rem; } .player-injuries .inj-meta.xsmall{ font-size:.82rem; } }
@media (min-width:992px){ .player-injuries .inj-card--compact{ padding:.5rem!important; } }

/* 3.8 Honors grid */
.honors-grid{ display:grid; grid-template-columns:repeat(1, minmax(0, 1fr)); gap:16px; }
@media (min-width:576px){ .honors-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:992px){ .honors-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1200px){ .honors-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }

.honor-card{ height:100%; border-radius:12px; }
.honor-card__inner{
  height:100%; display:grid; grid-template-columns:56px 1fr; gap:14px; align-items:center;
  padding:14px 16px;
}
.honor-card__logo img{
  display:block; width:56px; height:56px; object-fit:contain;
  border-radius:8px; background:#fafafa; border:1px solid #f0f0f0;
}
.honor-card__meta{ display:grid; grid-template-columns:1fr auto; row-gap:6px; column-gap:8px; align-items:baseline; }
.honor-card__title{ font-weight:600; font-size:.98rem; }
.honor-card__count{
  font-size:.86rem; color:#6b7280; background:#f5f5f7; padding:2px 8px; border-radius:999px; justify-self:end;
}
.honor-card__years{ grid-column:1 / -1; font-size:.9rem; color:#4b5563; line-height:1.35; }
.honor-card__years .muted{ color:#9aa3af; margin-right:4px; }
.honor-card__years .sep{ color:#c7cbd1; }

/* 3.9 Teams grid/cards (used by both data sources) */
.teams-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.team-chip{ border:1px solid #e9edf3; border-radius:14px; background:#fff; }
.team-chip__inner{ display:flex; align-items:center; gap:12px; padding:12px 14px; }
.team-chip__logo img{ display:block; width:52px; height:52px; object-fit:contain; }
.team-chip__name{ font-weight:600; font-size:14.5px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-chip__years{ font-size:12.5px; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 3.10 Highlights thumbs */
.hl-thumbs{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hl-thumb{ display:block; border-radius:12px; overflow:hidden; border:1px solid #eee; background:#fff; transition:transform .15s ease, box-shadow .15s ease; }
.hl-thumb img{ display:block; height:200px; width:auto; max-width:100%; object-fit:cover; }
.hl-thumb:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); }

/* --- Inline replacements / table helpers --- */
.pb-h2__meta { font-size: 0.6em; }

.team-chip__logo .team-chip__logo-img {
  height: 44px;
  width: 44px;
  object-fit: contain;
  display: block;
}

.player-table-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.player-table-scroll { overflow-x: auto; }

.player-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.player-table th {
  padding: 16px 12px;
  border-bottom: 2px solid #f0f0f0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8898aa;
  text-align: center;
  white-space: nowrap;
}
.player-table th:first-child { text-align: left; padding-left: 20px; }
.player-table th:last-child { padding-right: 20px; }

.player-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #f6f6f6;
  color: #32325d;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
.player-table td:first-child { text-align: left; padding-left: 20px; font-weight: 600; }
.player-table td:last-child { padding-right: 20px; }
.player-table td.is-muted { color: #6c757d; }
.player-table td.is-good { color: #198754; font-weight: 700; }
.player-table tr:hover { background-color: #faf9fe; }

.text-075 { font-size: 0.75em; }