/* ========= LIGA – WSPÓLNE ========= */

.liga-top{
  --accent: #c00000;       /* kolor linków dopasowany do motywu */
  --chip-bg: #f4f6f8;      /* tło „kapsułki” z liczbą */
  --muted: #6b7280;        /* delikatny tekst */
  --border: #eaeaea;
  --row-border: #f1f1f1;
  --radius: 12px;
  margin: 24px 0;
}
.liga-top__list{
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.liga-top__item{
  position: relative;
  border-top: 1px solid var(--row-border);
}
.liga-top__item:nth-child(1){
  box-shadow: inset 0 0 0 2px #01b5e5; /* kolor ramki */
  border-radius: 10px;                  /* dopasowane do kontenera */
}

/* „kapsułka” – liczba odsłon + etykieta */
.liga-top__metric{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .6rem;
  min-width: 4.2ch;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #333;
  background: var(--chip-bg);
  border-radius: 999px;
  white-space: nowrap;
}
.liga-top__metric::before{
  content: "";
  width: 1.05em; height: 1.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 5c5.523 0 10 5 10 7s-4.477 7-10 7S2 14 2 12s4.477-7 10-7m0 2C8.134 7 4.722 10.042 4.08 12C4.72 13.958 8.134 17 12 17s7.279-3.042 7.92-5C19.279 10.042 15.866 7 12 7m0 2a3 3 0 1 1 0 6a3 3 0 0 1 0-6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 5c5.523 0 10 5 10 7s-4.477 7-10 7S2 14 2 12s4.477-7 10-7m0 2C8.134 7 4.722 10.042 4.08 12C4.72 13.958 8.134 17 12 17s7.279-3.042 7.92-5C19.279 10.042 15.866 7 12 7m0 2a3 3 0 1 1 0 6a3 3 0 0 1 0-6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: .8;
}
.liga-top__metric::after{
  content: " wyśw.";
  font-weight: 400;
  opacity: .8;
}


/* Subtelny akcent TOP3 (kolorowa kreska po lewej) */
.liga-top__item{ border-left: 3px solid transparent }
.liga-top__item:nth-child(1){ border-left-color:#01b5e5 }
.liga-top__item:nth-child(2){ border-left-color:#8dd8f0 }
.liga-top__item:nth-child(3){ border-left-color:#cfeef9 }

/* ========= MIESIĄC (miniatura + zajawka) ========= */

.liga-top[data-period="month"] .liga-top__item{
  counter-increment: liga;
  display: grid;
  grid-template-columns: 2.4ch 84px 1fr auto; /* nr | thumb | body | chip */
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}
.liga-top[data-period="month"] .liga-top__item::before{
  content: counter(liga) ".";
  font-weight: 700;
  opacity: .6;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.liga-top[data-period="month"] .liga-top__thumb{
  width: 84px; height: 84px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  display: block;
}
.liga-top[data-period="month"] .liga-top__thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.liga-top[data-period="month"] .liga-top__thumb--ph{ background: linear-gradient(135deg,#f5f5f5,#eee) }

.liga-top[data-period="month"] .liga-top__body{ min-width: 0 }
.liga-top[data-period="month"] .liga-top__title{
  margin: 0 0 4px;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--accent);
  text-decoration: none;
}
.liga-top[data-period="month"] .liga-top__title:hover{ text-decoration: underline }
.liga-top[data-period="month"] .liga-top__excerpt{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ========= EVER (prosta lista bez miniatur) ========= */

.liga-top[data-period="ever"] .liga-top__item{
  counter-increment: liga;
  display: grid;
  grid-template-columns: 2.6ch 1fr auto; /* nr | tytuł | chip */
  gap: .5rem .75rem;
  align-items: center;
  padding: .6rem .9rem;
}
.liga-top[data-period="ever"] .liga-top__item::before{
  content: counter(liga) ".";
  font-weight: 700;
  opacity: .6;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.liga-top[data-period="ever"] .liga-top__thumb{ display: none !important }
.liga-top[data-period="ever"] .liga-top__body{ min-width: 0 }
.liga-top[data-period="ever"] .liga-top__title{
  margin: 0;
  line-height: 1.35;
  color: var(--accent);
  text-decoration: none;
}
.liga-top[data-period="ever"] .liga-top__title:hover{ text-decoration: underline }

/* ========= RWD ========= */

/* ===== RWD: licznik pod miniaturą (tylko widok MIESIĘCZNY) ===== */
@media (max-width: 640px){
  .liga-top[data-period="month"] .liga-top__item{
    display: grid;
    grid-template-columns: 2ch 80px 1fr; /* nr | thumb | body */
    grid-auto-rows: auto;
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
  }

  /* numer (#) przez dwa wiersze */
  .liga-top[data-period="month"] .liga-top__item::before{
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 2px;
  }

  /* miniatura w 1. wierszu */
  .liga-top[data-period="month"] .liga-top__thumb{
    grid-column: 2;
    grid-row: 1;
    width: 80px;
    height: 80px;
  }

  /* treść (tytuł + zajawka) tylko w 1. wierszu (niech nie „zjada” miejsca kapsułce) */
  .liga-top[data-period="month"] .liga-top__body{
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
  }
  .liga-top[data-period="month"] .liga-top__title{ font-size: 1rem; }
  .liga-top[data-period="month"] .liga-top__excerpt{ -webkit-line-clamp: 2; }

  /* kapsułka: osobny 2. wiersz, pod thumb + body, szerokość na 2–3 kolumny */
  .liga-top[data-period="month"] .liga-top__metric{
    grid-column: 2 / 4;      /* span przez kolumny 2–3 */
    grid-row: 2;
    justify-self: start;
    margin-top: 4px;
    white-space: nowrap;     /* brak łamania liczby */
  }
}

/* Opcjonalnie: na bardzo wąskich ekranach usuń etykietę, zostaw samą liczbę */
@media (max-width: 380px){
  .liga-top[data-period="month"] .liga-top__metric::after { content: ""; }
  .liga-top[data-period="month"] .liga-top__metric{ padding: 2px 6px; }
}


/* (opcjonalnie) Minimalne wsparcie dark mode */
@media (prefers-color-scheme: dark){
  .liga-top__list{ background:#0b0b0b; border-color:#2a2a2a }
  .liga-top__item{ border-top-color:#1e1e1e }
  .liga-top__metric{ background:#1b1b1b; color:#ddd }
  .liga-top[data-period="month"] .liga-top__excerpt{ color:#aaa }
}

/* ===== Pełna tabela (toggle) ===== */
.liga-ft { margin: 12px 0 0; }
.liga-ft__summary {
  cursor: pointer;
  padding: .6rem .8rem;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  background: #fafafa;
  font-weight: 600;
}
.liga-ft[open] .liga-ft__summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.liga-ft__inner {
  border: 1px solid #eaeaea;
  border-top: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
}

.liga-ft__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.liga-ft__table th, .liga-ft__table td {
  padding: .55rem .7rem;
  border-top: 1px solid #f1f1f1;
}
.liga-ft__table thead th { background: #f9f9f9; font-weight: 700; }
.liga-ft__rank { width: 3.6ch; text-align: right; font-variant-numeric: tabular-nums; }
.liga-ft__metric { width: 8ch; text-align: right; font-variant-numeric: tabular-nums; }

/* Make the same variables available inside snapshot/winners containers */
.liga-snapshot,
.liga-winners{
  --accent: #c00000;
  --chip-bg: #f4f6f8;
  --muted: #6b7280;
  --border: #eaeaea;
  --row-border: #f1f1f1;
  --radius: 12px;
  margin: 24px 0;
}

/* Wrap table with a border feel similar to .liga-top__list */
.liga-snapshot .liga-ft__table,
.liga-winners .liga-ft__table{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.liga-snapshot .liga-ft__table thead th,
.liga-winners .liga-ft__table thead th{
  background: #f9f9f9;
}
.liga-snapshot .liga-ft__table tbody tr,
.liga-winners .liga-ft__table tbody tr{
  transition: background-color .18s ease;
}
.liga-snapshot .liga-ft__table tbody tr:hover,
.liga-winners .liga-ft__table tbody tr:hover{
  background: #fbfdff;
}

/* Match the TOP3 left accent on snapshot rows */
.liga-snapshot .liga-ft__table tbody tr{ border-left: 3px solid transparent }
.liga-snapshot .liga-ft__table tbody tr:nth-child(1){ border-left-color:#01b5e5 }
.liga-snapshot .liga-ft__table tbody tr:nth-child(2){ border-left-color:#8dd8f0 }
.liga-snapshot .liga-ft__table tbody tr:nth-child(3){ border-left-color:#cfeef9 }

/* ========= EVER + FULL MODE (wymuszony wygląd jak MONTH) ========= */

.liga-top[data-period="ever"][data-mode="full"] .liga-top__item{
  display: grid;
  grid-template-columns: 2.4ch 84px 1fr auto; /* nr | thumb | body | chip */
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.liga-top[data-period="ever"][data-mode="full"] .liga-top__thumb{
  display: block !important; /* zbija display:none !important z ever */
  width: 84px; height: 84px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.liga-top[data-period="ever"][data-mode="full"] .liga-top__thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.liga-top[data-period="ever"][data-mode="full"] .liga-top__thumb--ph{
  background: linear-gradient(135deg,#f5f5f5,#eee);
}

.liga-top[data-period="ever"][data-mode="full"] .liga-top__excerpt{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}