/* Страница /sports. Числа из макета: фрейм baqqybet-sports (1440) и
 * baqqybet-sports-mobile (390). Класс мобильной дельты M1 — состав тот же,
 * меняется только компоновка, поэтому мобильная ветка живёт в медиазапросах
 * рядом со своей секцией.
 *
 * Значения, которых нет в tokens.css, стоят литералом с пометкой откуда.
 */

/* ── sports-intro (2:470) ─────────────────────────────────────────────── */
.sports-intro { padding-block: var(--space-64) 30px; background: var(--color-bg); }
.sports-intro__inner { display: flex; flex-direction: column; gap: var(--space-32); }

.sports-intro__headers { display: flex; flex-direction: column; gap: var(--space-12); }

.sports-intro__eyebrow {
  align-self: flex-start;              /* 2:472 — HUG, не на всю ширину */
  font-family: var(--font-text);
  font-size: var(--fs-xs); font-weight: 800; line-height: 13.06px; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-accent);
}
.sports-intro__title {
  font-family: var(--font-text);
  font-size: 88px; font-weight: 900; line-height: 83.6px; letter-spacing: -2px;
  color: var(--color-text-strong);
}
.sports-intro__lead {
  font-family: var(--font-text);
  font-size: var(--fs-lg); font-weight: 400; line-height: 24px;
  color: var(--color-text);
}

/* Фильтры: компонент .tabs/.tab, числа — из sport-nav (2:475). */
.sports-intro__nav { gap: var(--space-12); padding-right: var(--space-48); }
.sports-intro__nav .tab {
  height: 34px;                        /* FIXED 2:475: у компонента 36 */
  padding: 0 14px;
  border: 0;                           /* габарит держит паддинг, а не рамка */
  text-align: left;                    /* у <button> по умолчанию center */
  background: var(--color-panel);
  box-shadow: inset 0 0 0 1px var(--color-border);   /* strokeAlign INSIDE */
  font-family: var(--font-text);
  font-size: var(--fs-sm); font-weight: 700; line-height: 14.14px;
  color: var(--color-text);
}
.sports-intro__nav .tab:hover { background: var(--color-panel-deep); color: var(--color-text-strong); }
.sports-intro__nav .tab[aria-selected="true"] {
  background: var(--color-accent); box-shadow: none;
  font-weight: 800; color: var(--color-on-accent);
}
.sports-intro__nav .tab[aria-selected="true"]:hover { background: var(--color-accent-hover); }

/* ── доска рынков (2:490 → 31:153) ────────────────────────────────────── */
.markets__panel:focus-visible { outline-offset: 4px; }

.board {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--color-border-light);   /* strokeAlign INSIDE */
  overflow: hidden;
}

.board__league { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); }

.league__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: 28px; }
.league__id { display: flex; align-items: center; gap: var(--space-10); }
.league__badge {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px;
  background: var(--color-accent); border-radius: var(--radius-md);
  color: var(--color-text-dark);
}
/* Иконка макета — контур, уже переведённый в заливку, поэтому базовое
   `.icon{fill:none;stroke:currentColor}` для неё надо снять. */
.league__badge .icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.league__name {
  font-size: var(--fs-body); font-weight: 800; line-height: 17px;
  color: var(--color-text-dark);
}
.league__meta { display: flex; align-items: center; gap: var(--space-8); }
.league__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 700; line-height: 16px;
  color: var(--color-text-muted);
}
.league__all { display: none; }        /* нарисован только в мобильном фрейме */

.event {
  display: flex; align-items: center; gap: var(--space-16);
  padding-block: 14px;
  box-shadow: inset 0 -1px 0 var(--color-border-light);   /* stroke INSIDE, bottom */
}
.event__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.event__meta { display: flex; align-items: center; gap: var(--space-8); }
.event__comp {
  font-size: var(--fs-xs); font-weight: 700; line-height: 15px;
  color: var(--color-text-muted);
}
.event__time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 400; line-height: 16px;
  color: var(--color-text-muted);
}
.event__title {
  font-size: var(--fs-lg); font-weight: 800; line-height: 19.36px;
  color: var(--color-text-dark);
}

.event__market { flex: none; width: 80px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.event__market-name {
  font-size: var(--fs-xs); font-weight: 400; line-height: 15px;
  color: var(--color-text-muted);
}
.event__market-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 700; line-height: 16px;
  color: var(--color-text-muted);
}

.event__odds { flex: none; display: flex; align-items: center; gap: var(--space-8); }

/* Выбор исхода. Лаймовая кнопка в макете — это ставка, которая стоит в купоне. */
.odds {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 49px; padding: var(--space-8) var(--space-12);
  border: 0; border-radius: var(--radius-10);
  text-align: left;                    /* у <button> по умолчанию center, в макете LEFT */
  background: var(--color-panel);
  box-shadow: inset 0 0 0 1px var(--color-border);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.odds:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }
.odds:active { transform: translateY(1px); }
.odds__team { font-size: var(--fs-xs); font-weight: 700; line-height: 15px; color: var(--color-text); }
.odds__price {
  font-family: var(--font-mono);
  font-size: var(--fs-body); font-weight: 800; line-height: 18.2px;
  color: var(--color-text-strong);
}
.odds.is-on { background: var(--color-accent); box-shadow: none; }
.odds.is-on:hover { background: var(--color-accent-hover); }
.odds.is-on .odds__team { font-weight: 800; color: var(--color-on-accent); }
.odds.is-on .odds__price { color: var(--color-on-accent); }

/* Пустое состояние фильтра: рынков по этому виду спорта сейчас нет. */
.board--empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16);
  padding: var(--space-32);
  background: var(--color-surface-light);
}
.board__empty-text {
  max-width: 60ch;
  font-size: var(--fs-lg); line-height: 24px; color: var(--color-text-dark-muted);
}

/* ── featured competition (2:617) ─────────────────────────────────────── */
.featured { padding-block: 80px; background: var(--color-bg); }
.featured__row { display: flex; align-items: stretch; gap: var(--space-24); }

.featured__copy {
  flex: none; width: 520px;
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24);
}
.featured__headers { display: flex; flex-direction: column; gap: var(--space-16); }
.featured__overline {
  align-self: flex-start;              /* 2:620 — HUG */
  font-family: var(--font-text);
  font-size: var(--fs-xs); font-weight: 800; line-height: 13.06px; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-accent);
}
.featured__title {
  align-self: flex-start;              /* 2:621 — HUG */
  font-family: var(--font-text);
  font-size: var(--fs-h1); font-weight: 900; line-height: 48px;
  color: var(--color-text-strong);
}
.featured__sub {
  font-family: var(--font-text);
  font-size: var(--fs-body); font-weight: 400; line-height: 15.23px;
  color: var(--color-text);
}

.featured__match { display: flex; flex-direction: column; gap: var(--space-6); }
.featured__match-name {
  font-family: var(--font-text);
  font-size: var(--fs-lg); font-weight: 600; line-height: 17.41px;
  color: var(--color-text-strong);
}
.featured__match-time {
  align-self: flex-start;              /* 2:625 — HUG */
  font-family: var(--font-text);
  font-size: var(--fs-sm); font-weight: 400; line-height: 14.14px;
  color: var(--color-text);
}

.featured__odds { display: flex; flex-direction: column; gap: var(--space-12); }
.featured__market-label {
  align-self: flex-start;              /* 2:627 — HUG */
  font-family: var(--font-text);
  font-size: var(--fs-xs); font-weight: 800; line-height: 13.06px; letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.featured__odds-row { display: flex; gap: var(--space-12); }

.odds--lg {
  flex: none; width: 152px;
  height: 52px; min-height: 0;         /* FIXED 2:629 — паддинг макета даёт 54 */
  padding: 0 var(--space-12); gap: var(--space-2);
  text-align: center;
}
.odds--lg .odds__team {
  font-family: var(--font-text);
  font-size: var(--fs-xs); font-weight: 600; line-height: 13.06px; letter-spacing: .5px;
  text-transform: uppercase;
  /* В макете подпись #666a66 стоит на тёмной панели #0e1b2e — 3.14:1 при норме
     4.5. Взят приглушённый из палитры, рассчитанный на тёмный фон (6.74:1). */
  color: var(--color-text-muted);
  text-align: center;
}
.odds--lg .odds__price { font-size: var(--fs-h6); font-weight: 700; line-height: 23.4px; }
.odds--lg.is-on { box-shadow: inset 0 0 0 1px var(--color-accent); }
.odds--lg.is-on .odds__team { font-weight: 600; color: var(--color-on-accent); }

.featured__count {
  align-self: flex-start;              /* 2:635 — HUG */
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 600; line-height: 16px;
  color: #c2c7c2;                      /* серо-зелёный из макета (2:635) */
}
.featured__link {
  align-self: flex-start;
  font-family: var(--font-text);
  font-size: var(--fs-sm); font-weight: 800; line-height: 14.14px;
}

.featured__media {
  flex: 1; min-width: 0; height: 360px;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.featured__media picture, .featured__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── responsible wagering (25:15) ─────────────────────────────────────── */
.rw > .container { display: flex; flex-direction: column; gap: var(--space-24); }
.rw__rule { height: 1px; border: 0; margin: 0; background: var(--color-border-light); }

.rw__grid { display: flex; align-items: flex-start; gap: var(--space-24); }
.rw__intro { flex: none; width: 520px; display: flex; flex-direction: column; gap: var(--space-16); }
.rw__overline {
  align-self: flex-start;              /* 25:19 — HUG */
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-green-deep);
}
.rw__title {
  font-size: var(--fs-h1); font-weight: 900; line-height: 48px;
  color: var(--color-text-dark);
}
.rw__text { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text-dark-muted); }

.rw__actions { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 49px; }   /* 24 + линия 1 + 24 */
.rw__action { display: flex; flex-direction: column; gap: var(--space-8); }
.rw__action + .rw__action { position: relative; }
.rw__action + .rw__action::before {
  content: ""; position: absolute; inset-inline: 0; top: -25px; height: 1px;
  background: var(--color-border-light);
}
.rw__num {
  font-size: var(--fs-h1); font-weight: 900; line-height: 53.25px; letter-spacing: -1px;
  color: var(--color-green-deep);
}
.rw__action-title { font-size: var(--fs-h6); font-weight: 900; line-height: 22px; color: var(--color-text-dark); }
.rw__action-text { font-size: var(--fs-body); line-height: 21px; color: var(--color-text-dark-muted); }
.rw__link { align-self: flex-start; }

.rw__support {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4);   /* у компонента center, в макете 25:42/40:298 — по левому краю */
  padding: var(--space-16) var(--space-20);
  background: var(--color-card);
  border-radius: var(--radius-14);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
}
.rw__support-title { font-size: var(--fs-body); font-weight: 900; line-height: 17px; color: var(--color-text-dark); }
.rw__support-text { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text-dark-muted); }

/* Фокус на светлых секциях: лайм по белому не читается. */
.markets :focus-visible, .rw :focus-visible { outline-color: var(--color-text-dark); }

/* ── планшет ──────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .sports-intro__title { font-size: var(--fs-d1); line-height: 62px; letter-spacing: -1.5px; }
  .sports-intro__nav { padding-right: 0; }

  .featured__copy { width: 420px; }
  .featured__media { height: 320px; }

  .rw__intro { width: 360px; }
}

/* ── мобильный фрейм макета, дельта M1 (77:400) ───────────────────────── */
@media (max-width: 767px) {

  /* sports-intro (77:425) */
  .sports-intro { padding-block: var(--space-32); }
  .sports-intro__inner { gap: var(--space-20); }
  .sports-intro__headers { gap: var(--space-8); }
  .sports-intro__eyebrow { font-family: var(--font-ui); line-height: 15px; }
  .sports-intro__title {
    align-self: flex-start;            /* 77:428 — HUG */
    font-family: var(--font-ui);
    font-size: var(--fs-h2); line-height: 32px; letter-spacing: -1px;
  }
  .sports-intro__lead { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 21px; }

  /* Полоса фильтров прокручивается, как tabs-scroll (77:430). */
  .sports-intro__nav {
    gap: var(--space-8); flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
    padding-right: 0;
  }
  .sports-intro__nav::-webkit-scrollbar { display: none; }
  .sports-intro__nav .tab {
    flex: none;
    height: 32px;                      /* FIXED 77:431 */
    padding: 0 14px;
    font-family: var(--font-ui); line-height: 16px;
  }

  /* доска (77:445) */
  .markets { padding-block: var(--space-24) var(--space-32); }
  .board:not(.board--empty) { background: var(--color-bg-light); }   /* просвет полосы 77:489 */
  .board__league { gap: var(--space-12); padding: var(--space-12); background: var(--color-card); }
  .board__league + .board__league { margin-top: 8px; }                /* 77:489 */

  .league__head { min-height: 24px; }
  .league__id { gap: var(--space-8); }
  .league__badge { width: 24px; height: 24px; }
  .league__badge .icon { width: 14px; height: 14px; }
  .league__name { font-size: var(--fs-sm); line-height: 16px; }
  .league__meta { gap: var(--space-6); }
  .league__count { font-size: var(--fs-2xs); line-height: 14.3px; }
  .league__all {
    display: inline-flex;
    font-size: var(--fs-2xs); font-weight: 700; line-height: 13.31px;
    color: var(--color-panel); text-decoration: none;
  }
  .league__all:hover { text-decoration: underline; }

  .event { flex-direction: column; align-items: stretch; gap: var(--space-12); padding: var(--space-8) 0 var(--space-16); }
  .event:last-child { padding-bottom: var(--space-8); }
  .event__comp { font-size: var(--fs-2xs); line-height: 13.31px; }
  .event__time { font-size: var(--fs-2xs); line-height: 14px; }        /* ряд 77:506 — 14 */
  .event__title { font-size: var(--fs-body); line-height: 17px; }

  .event__market {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    width: auto; gap: var(--space-8);
  }
  .event__market-name { font-size: var(--fs-2xs); line-height: 13.31px; }
  .event__market-count { font-size: var(--fs-2xs); line-height: 14px; color: var(--color-panel); }   /* ряд 77:549 — 14 */

  .event__odds > .odds {
    flex: 1; min-width: 0;
    flex-direction: row; align-items: center; justify-content: space-between;
    min-height: 32px; padding: 0 var(--space-10);
  }
  .event__odds > .odds .odds__price { font-size: var(--fs-xs); line-height: 16px; }

  /* три исхода — колонкой и ниже ростом (77:552) */
  .event__odds--three { gap: var(--space-4); }
  .event__odds--three > .odds {
    flex-direction: column; justify-content: center;
    min-height: 42px; padding: var(--space-8) var(--space-4);
  }
  /* 10px макета верстается как 11px — решение F3 (BUILD-NOTES). */
  .event__odds--three > .odds .odds__team { font-size: var(--fs-2xs); line-height: 12.1px; }
  .event__odds--three > .odds .odds__price { font-size: var(--fs-2xs); line-height: 14.3px; }

  .board--empty { padding: var(--space-20); }
  .board__empty-text { font-size: var(--fs-body); line-height: 21px; }

  /* featured (77:562) */
  .featured { padding-block: var(--space-40); }
  .featured__row { flex-direction: column; gap: var(--space-20); }
  .featured__copy { width: auto; padding: 0; gap: var(--space-20); }
  .featured__headers { gap: var(--space-8); }
  .featured__overline { font-family: var(--font-ui); line-height: 15px; }
  .featured__title { font-family: var(--font-ui); font-size: var(--fs-h2); line-height: 39px; }
  .featured__sub { align-self: flex-start; font-family: var(--font-ui); line-height: 17px; }   /* 77:566 — HUG */
  .featured__match { gap: var(--space-12); }
  .featured__match-name { font-family: var(--font-ui); font-size: var(--fs-h6); font-weight: 800; line-height: 22px; }
  .featured__match-time { font-family: var(--font-ui); line-height: 16px; }
  .featured__market-label { font-family: var(--font-ui); font-size: var(--fs-2xs); line-height: 13.31px; }
  .featured__odds-row { gap: var(--space-10); }
  .odds--lg { flex: 1; width: auto; min-width: 0; }
  .odds--lg .odds__team {
    font-family: var(--font-ui); font-size: var(--fs-2xs); line-height: 12.1px;   /* 10px макета → 11px, решение F3 */
    color: var(--color-text-muted);
  }
  .odds--lg .odds__price { font-size: var(--fs-lg); line-height: 21px; }
  .featured__count { color: var(--color-text); }
  .featured__link { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 17px; }
  .featured__media { flex: none; height: 180px; border-radius: var(--radius-12); box-shadow: none; }   /* 77:581 */

  /* responsible wagering (77:582) */
  .rw { padding-block: var(--space-40); }
  .rw__grid { flex-direction: column; gap: var(--space-24); }
  .rw__intro { width: auto; gap: var(--space-12); }
  .rw__title { font-size: var(--fs-h3); line-height: 31px; }
  .rw__text { font-size: var(--fs-body); line-height: 21px; }

  .rw__actions { gap: 33px; }                              /* 16 + линия 1 + 16 */
  .rw__action { gap: var(--space-6); }
  .rw__action + .rw__action::before { top: -17px; }
  .rw__num { font-size: var(--fs-h2); line-height: 39px; }
  .rw__action-title { font-size: var(--fs-lg); line-height: 19.36px; }
  .rw__action-text { font-size: var(--fs-sm); line-height: 18px; }

  .rw__support { height: auto; padding: var(--space-16); border-radius: var(--radius-12); }   /* 77:606 — 85, у компонента 69 */
}