/* ============================================================
   Плашка «Старт недельного сезона» в сайдбаре (public/weeklyBanner.js).

   Строится вокруг отсчёта: крупные цифры, а позади них веером стоят значки
   лиг по возрастанию — от новобранца к легенде. Плашка целиком ссылка: это
   приглашение, а не отчёт.
   ============================================================ */

/* Соседи по сайдбару — графики распределения — на телефоне не рисуются, но
   пустые обёртки продолжали набирать gap колонки: под плашкой висела дыра. */
.sidebar-col > div:empty { display: none; }

.wkb {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 16px 14px 14px;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  background:
    radial-gradient(300px 150px at 50% 108%, rgba(255, 201, 77, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.16)),
    rgba(18, 22, 20, 0.94);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: border-color 0.15s, transform 0.15s;
}
.wkb:hover { border-color: color-mix(in srgb, var(--accent) 65%, transparent); transform: translateY(-1px); }

/* Веер лиг: полоса во всю ширину плашки, значки наезжают друг на друга и
   растут слева направо — от новобранца к легенде. */
.wkb-fan {
  display: flex; align-items: center; justify-content: center;
  margin: 12px -14px 0;
}
.wkb-fan img {
  /* Шесть значков с нахлёстом ровно на ширину плашки: 6w - 5o = 100%. */
  width: 26%; aspect-ratio: 8 / 9; object-fit: contain;
  margin-left: -11.2%;
  opacity: calc(0.6 + var(--i) * 0.08);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55));
  /* Порядок наложения задаём явно: сильная лига всегда поверх слабой. Без
     этого крыло грандмастера ложилось на легенду и съедало её. */
  position: relative;
  z-index: var(--i);
}
.wkb-fan img:first-child { margin-left: 0; }

.wkb-body { display: block; }

.wkb-title {
  display: block;
  font: 700 11px Oswald, sans-serif; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
}
.wkb-clock {
  display: block; margin-top: 10px;
  font: 600 30px/1 Oswald, sans-serif; letter-spacing: 0.02em;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255, 201, 77, 0.4);
  font-variant-numeric: tabular-nums;
}
.wkb-sub {
  display: block; margin-top: 8px; padding: 0 6px;
  font-size: 11.5px; line-height: 1.45; color: var(--text-dim);
}
.wkb-go {
  display: block; margin-top: 12px;
  font: 700 11px Oswald, sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}

/* Телефон: плашка сжимается в одну строку — слева лиги, справа отсчёт,
   ссылка уходит вниз. Здесь она соседствует с поиском и фильтрами, поэтому
   не должна занимать пол-экрана. */
/* Компактный вид — одной строкой: слева лиги, справа заголовок с отсчётом,
   ссылка снизу. Включается классом (см. weeklyBanner.js): так плашка ведёт
   себя одинаково и на телефоне, и в широкой колонке главной, где вертикальная
   раскладка растянулась бы на пол-экрана. */
.wkb.is-compact { padding: 12px; text-align: left; }
.wkb.is-compact .wkb-body {
  display: grid; align-items: center;
  /* Вееру нужен минимум ширины: длинный отсчёт «6 дней 20 ч» иначе выдавливал
     значки в ноль, и слева оставалась пустота. */
  grid-template-columns: minmax(120px, 1fr) minmax(0, auto);
  grid-template-areas: 'fan title' 'fan clock' 'fan sub' 'go go';
  column-gap: 12px;
}
.wkb.is-compact .wkb-fan { grid-area: fan; margin: 0; }
/* Подпись под отсчётом: без своей области она вставала в случайную клетку. */
.wkb.is-compact .wkb-sub { grid-area: sub; margin: 2px 0 0; text-align: right; font-size: 11px; line-height: 1.35; white-space: normal; }
.wkb.is-compact .wkb-fan img { filter: none; }
.wkb.is-compact .wkb-title { grid-area: title; text-align: right; font-size: 10px; letter-spacing: 0.12em; }
.wkb.is-compact .wkb-clock { grid-area: clock; margin-top: 0; text-align: right; font-size: 22px; white-space: nowrap; }
.wkb.is-compact .wkb-go {
  grid-area: go; margin-top: 10px; padding-top: 9px; text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Широкая колонка (главная): всё в одну строку — лиги, отсчёт и ссылка
   справа, как у соседнего промо. Веер держим в узде, иначе он растянется на
   всю ширину экрана. */
.wkb-wide { display: block; margin-bottom: 14px; }
.wkb-wide .wkb.is-compact { padding: 14px 18px; }
.wkb-wide .wkb.is-compact .wkb-body {
  /* Колонку веера задаём треком: у 'auto' её сжимал бы соседний текст, и
     значки съезжали к паре десятков пикселей. */
  grid-template-columns: minmax(200px, 340px) 1fr auto;
  grid-template-areas: 'fan title go' 'fan clock go' 'fan sub go';
  column-gap: 18px;
}
.wkb-wide .wkb.is-compact .wkb-fan { width: 100%; }
.wkb-wide .wkb.is-compact .wkb-title,
.wkb-wide .wkb.is-compact .wkb-go { white-space: nowrap; }
/* Значки крупнее за счёт нахлёста: 6w - 5o = 100% ширины веера. */
.wkb-wide .wkb.is-compact .wkb-fan img { width: 31%; margin-left: -17.2%; }
/* Отсчёт отодвинут от значков: слева им нужно место, а вплотную к вееру
   цифры сливались с ним в одну кашу. */
.wkb-wide .wkb.is-compact .wkb-title,
.wkb-wide .wkb.is-compact .wkb-sub,
.wkb-wide .wkb.is-compact .wkb-clock { text-align: left; padding-left: 28px; }
.wkb-wide .wkb.is-compact .wkb-clock { font-size: 28px; margin-top: 2px; }
.wkb-wide .wkb.is-compact .wkb-go {
  align-self: center; margin: 0; padding: 0; border: 0; text-align: right;
}

/* Совсем узкой широкая колонка тоже бывает — на телефоне возвращаем общий
   компактный вид: отсчёт справа, ссылка снизу. */
@media (max-width: 760px) {
  .wkb-wide .wkb.is-compact { padding: 12px; }
  .wkb-wide .wkb.is-compact .wkb-body {
    grid-template-columns: minmax(120px, 1fr) minmax(0, auto);
    grid-template-areas: 'fan title' 'fan clock' 'fan sub' 'go go';
    column-gap: 12px;
  }
  .wkb-wide .wkb.is-compact .wkb-fan { width: auto; max-width: none; }
  .wkb-wide .wkb.is-compact .wkb-title,
  .wkb-wide .wkb.is-compact .wkb-sub,
  .wkb-wide .wkb.is-compact .wkb-clock { text-align: right; padding-left: 0; }
  .wkb-wide .wkb.is-compact .wkb-go {
    margin-top: 10px; padding-top: 9px; text-align: center;
    border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  }
}