/* /assets/css/sports.css
 * Стилі для спортивних блоків: таблиця ліги, розклад, результати
 */

/* ───── ВКЛАДКИ ЛІГ ───── */
.sports-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid #e0e0e0;
}
.sports-tab {
  padding: 10px 16px;
  background: #f5f5f5;
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.sports-tab:hover { background: #ebebeb; color: #12122a; }
.sports-tab.active {
  background: #fff;
  color: #e63c3c;
  border-bottom-color: #e63c3c;
}

/* ───── ТАБЛИЦЯ ЛІГИ ───── */
.lg-card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.lg-head {
  background: #12122a;
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Roboto Condensed', sans-serif;
}
.lg-head-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lg-head-meta {
  font-size: 11px;
  opacity: 0.75;
}

.lg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lg-table thead th {
  background: #f7f9fb;
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
}
.lg-table thead th.lg-th-team { text-align: left; padding-left: 12px; }
.lg-table tbody td {
  padding: 9px 8px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.lg-table tbody tr:last-child td { border-bottom: none; }
.lg-table tbody tr:hover { background: #fafbfc; }

.lg-pos {
  font-weight: 700;
  color: #888;
  width: 32px;
}
/* Топ-4 (Ліга чемпіонів) */
.lg-table tbody tr.zone-cl .lg-pos { color: #fff; background: #2e7d32; border-radius: 4px; }
/* Зона єврокубків */
.lg-table tbody tr.zone-el .lg-pos { color: #fff; background: #1565c0; border-radius: 4px; }
.lg-table tbody tr.zone-ecl .lg-pos { color: #fff; background: #7e57c2; border-radius: 4px; }
/* Зона вильоту */
.lg-table tbody tr.zone-rel .lg-pos { color: #fff; background: #c62828; border-radius: 4px; }

.lg-team {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding-left: 12px;
}
.lg-team-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.lg-team-logo-ph {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #e63c3c, #12122a);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.lg-team-name {
  font-weight: 600;
  color: #12122a;
}

.lg-pts {
  font-weight: 800;
  color: #e63c3c;
  font-size: 14px;
}
.lg-gd-plus  { color: #2e7d32; }
.lg-gd-minus { color: #c62828; }

/* Форма (останні 5 матчів) */
.lg-form { display: inline-flex; gap: 2px; }
.lg-form-item {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lg-form-W { background: #2e7d32; }
.lg-form-D { background: #888; }
.lg-form-L { background: #c62828; }

/* Легенда зон */
.lg-legend {
  font-size: 11px;
  color: #888;
  padding: 10px 16px;
  background: #f7f9fb;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid #f0f0f0;
}
.lg-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ───── РОЗКЛАД І РЕЗУЛЬТАТИ ───── */
.fx-list { display: flex; flex-direction: column; gap: 0; }
.fx-day-header {
  padding: 10px 16px;
  background: #f7f9fb;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 0.5px;
  border-top: 1px solid #f0f0f0;
}
.fx-row {
  display: grid;
  grid-template-columns: 60px 1fr auto 1fr 60px;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.fx-row:hover { background: #fafbfc; }
.fx-time { font-weight: 700; color: #888; text-align: center; }
.fx-team-h { text-align: right; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.fx-team-a { text-align: left;  display: flex; align-items: center; gap: 8px; }
.fx-team-h img, .fx-team-a img, .fx-team-h .lg-team-logo-ph, .fx-team-a .lg-team-logo-ph { flex-shrink: 0; }
.fx-team-name { font-weight: 600; color: #12122a; }
.fx-score {
  font-weight: 800;
  color: #12122a;
  background: #f0f2f5;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
}
.fx-score.live { background: #e63c3c; color: #fff; animation: pulse 1.5s infinite; }
.fx-vs { font-size: 11px; color: #aaa; font-weight: 700; }
.fx-round { font-size: 11px; color: #888; text-align: center; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ───── СТАН ЗАВАНТАЖЕННЯ / ПОМИЛКА ───── */
.sports-loading {
  padding: 40px;
  text-align: center;
  color: #888;
  font-size: 14px;
}
.sports-error {
  padding: 20px;
  background: #fff3f3;
  border: 1px solid #ffcdd2;
  border-radius: 6px;
  color: #c62828;
  margin: 16px;
}
.sports-stamp {
  font-size: 11px;
  color: #aaa;
  padding: 10px 16px;
  text-align: right;
  background: #fafbfc;
}

/* ───── МОБІЛЬНА ───── */
@media (max-width: 720px) {
  .lg-table { font-size: 12px; }
  .lg-table thead th, .lg-table tbody td { padding: 7px 4px; }
  .lg-team { gap: 6px; padding-left: 8px; }
  .lg-team-logo, .lg-team-logo-ph { width: 18px; height: 18px; }
  /* Ховаємо менш важливі колонки */
  .lg-table .col-played,
  .lg-table .col-w,
  .lg-table .col-d,
  .lg-table .col-l,
  .lg-table .col-gf,
  .lg-table .col-ga { display: none; }
  /* Лишаються: позиція, команда, GD, очки, форма */

  .fx-row { grid-template-columns: 48px 1fr 60px 1fr 48px; gap: 8px; font-size: 12px; padding: 10px; }
  .fx-team-name { font-size: 12px; }
}

/* === СПИСОК ГРАВЦІВ (бомбардири, асисти, картки) === */
.pl-list { display: flex; flex-direction: column; }
.pl-row {
  display: grid;
  grid-template-columns: 36px 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}
.pl-row:last-child { border-bottom: none; }
.pl-row:hover { background: #fafbfc; }

.pl-rank {
  font-weight: 800;
  color: #aaa;
  text-align: center;
  font-size: 14px;
}
.pl-row:nth-child(1) .pl-rank { color: #e63c3c; font-size: 18px; }
.pl-row:nth-child(2) .pl-rank { color: #c97700; font-size: 16px; }
.pl-row:nth-child(3) .pl-rank { color: #4caf50; font-size: 15px; }

.pl-info { min-width: 0; }
.pl-name {
  font-weight: 700;
  color: #12122a;
  font-size: 14px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-meta {
  font-size: 11px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pl-team {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #555;
  font-weight: 600;
}
.pl-team-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.pl-value {
  font-weight: 800;
  color: #e63c3c;
  font-size: 16px;
  white-space: nowrap;
  background: #fff3f3;
  padding: 4px 10px;
  border-radius: 4px;
}

@media (max-width: 540px) {
  .pl-row { grid-template-columns: 28px 30px 1fr auto; gap: 8px; padding: 10px 12px; font-size: 12px; }
  .pl-name { font-size: 13px; }
  .pl-value { font-size: 14px; padding: 3px 8px; }
  .pl-meta { font-size: 10px; }
}

/* === FLAG CIRCLES (заміна emoji-прапорів для Windows) === */
.flag-c {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: 0.5px;
  line-height: 1;
  flex-shrink: 0;
  text-align: center;
  overflow: hidden;
}
/* Розміри */
.flag-c.sm { width: 18px; height: 18px; font-size: 9px; }
.flag-c.md { width: 28px; height: 28px; font-size: 11px; }
.flag-c.lg { width: 42px; height: 42px; font-size: 14px; }

/* Country gradients */
.flag-ua { background: linear-gradient(180deg, #005bbb 50%, #ffd500 50%); color: #12122a; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.flag-en { background: linear-gradient(180deg, #fff 35%, #c8102e 35% 65%, #fff 65%); color: #c8102e; }
.flag-es { background: linear-gradient(180deg, #aa151b 25%, #f1bf00 25% 75%, #aa151b 75%); color: #aa151b; text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
.flag-de { background: linear-gradient(180deg, #000 33%, #dd0000 33% 66%, #ffce00 66%); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.flag-it { background: linear-gradient(90deg, #009246 33%, #fff 33% 66%, #ce2b37 66%); color: #009246; text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
.flag-fr { background: linear-gradient(90deg, #002654 33%, #fff 33% 66%, #ed2939 66%); color: #002654; text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
.flag-eu { background: #003399; color: #ffcc00; }
.flag-cl { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #12122a; }
.flag-el { background: linear-gradient(135deg, #ff9800, #f57c00); color: #fff; }
.flag-uecl { background: linear-gradient(135deg, #43a047, #2e7d32); color: #fff; }


/* === БЛОК ОСТАННІХ + НАСТУПНИХ МАТЧІВ КОМАНДИ === */
.tm-list { padding: 6px 0; }
.tm-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  font-size: 13px;
}
.tm-row:last-child { border-bottom: none; }
.tm-row:hover { background: #fafbfc; }
.tm-date {
  font-weight: 700;
  color: #888;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}
.tm-time { font-weight: 600; color: #aaa; font-size: 11px; }
.tm-opp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-opp-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.tm-opp > span:nth-child(2), .tm-opp > span:nth-child(3) { font-weight: 600; color: #12122a; }
.tm-venue { font-size: 11px; color: #aaa; font-weight: 400; font-style: italic; }
.tm-score, .tm-vs {
  font-weight: 800;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.tm-result-win  { background: #e8f5e9; color: #2e7d32; }
.tm-result-loss { background: #ffebee; color: #c62828; }
.tm-result-draw { background: #f5f5f5; color: #666; }
.tm-vs { background: #f0f2f5; color: #888; font-size: 11px; }
@media (max-width: 540px) {
  .tm-row { grid-template-columns: 50px 1fr auto; gap: 8px; padding: 8px 10px; }
  .tm-score, .tm-vs { font-size: 12px; padding: 3px 6px; }
}


/* === БЛОК ТРОФЕЇВ КОМАНДИ === */
.trophies-list { padding: 6px 0; }
.trophy-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.trophy-row:last-child { border-bottom: none; }
.trophy-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.trophy-icon.t-domestic        { background: linear-gradient(135deg,#fff3cd,#ffd700); color:#806000; }
.trophy-icon.t-cup             { background: linear-gradient(135deg,#e8e8e8,#c0c0c0); color:#404040; }
.trophy-icon.t-supercup        { background: linear-gradient(135deg,#ffe5b4,#cd7f32); color:#5d3a1a; }
.trophy-icon.t-europe          { background: linear-gradient(135deg,#cce5ff,#0066cc); color:#fff; }
.trophy-icon.t-intercontinental{ background: linear-gradient(135deg,#e0c3fc,#8e44ad); color:#fff; }
.trophy-info { min-width:0; }
.trophy-title {
  font-weight: 700;
  color: #12122a;
  font-size: 14px;
  margin-bottom: 2px;
}
.trophy-years {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
}
.trophy-count {
  background: #12122a;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}
.trophies-empty {
  padding: 18px;
  text-align: center;
  color: #888;
  font-size: 13px;
  font-style: italic;
}
@media (max-width: 540px) {
  .trophy-row { grid-template-columns: 36px 1fr auto; gap: 8px; padding: 10px; }
  .trophy-icon { width: 32px; height: 32px; font-size: 15px; }
  .trophy-title { font-size: 13px; }
}


/* === БЛОК СПОРТИВНИХ СТАТЕЙ (грід на сторінках ліг) === */
.articles-grid-wrap {
  margin: 24px 0 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.articles-grid-head {
  background: #12122a;
  color: #fff;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 15px;
}
#articles-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.ag-card {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  color: #12122a;
}
.ag-card:hover {
  transform: translateY(-2px);
  border-color: #ffa500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.ag-card-img, .ag-card-img-ph {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: #f5f6f8;
}
.ag-card-img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffa500, #e63c3c);
  color: #fff;
  font-size: 28px;
}
.ag-card-body {
  padding: 10px 12px 12px;
}
.ag-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ag-card-date {
  font-size: 11px;
  color: #888;
  margin-top: 6px;
}
.ag-loading, .ag-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 20px;
  color: #888;
  font-style: italic;
}
@media (max-width: 600px) {
  #articles-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  .ag-card-title { font-size: 12px; -webkit-line-clamp: 2; }
}