/* home — правки по макету поверх pages.css.
   Файл подключается после pages.css, поэтому правила с той же
   специфичностью здесь выигрывают. Значения — числами из макета. */

/* ═══════════════════════════════════════════════════════════════════════
   Купон. В макете он существует двумя разными вариантами, а не одним
   резиновым: десктопный 0:201 (белая карточка выбора) и мобильный 0:5956
   (карточки нет вовсе, всё на тёмном фоне купона). Геометрия сведена и
   там и там; ниже — только то, чего сверка боксов не видит: заливки,
   прозрачности, начертания и состав строк.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Десктоп (0:201) ──────────────────────────────────────────────── */

/* 0:203 — YOUR BET: Archivo Black 22/23.94 */
.page-home .slip__title { font-size: 22px; line-height: 24px; }

/* 0:204 — плашка «1 PICK»: pad(4,10), r4 (у нас была 2/6 и r3) */
.page-home .slip__count { padding: 4px 10px; border-radius: 4px; }

/* 0:209 — тег лиги в карточке выбора: pad(2,6), Geist 800 */
.page-home .slip__pick-head .badge { padding: 2px 6px; font-weight: var(--fw-extrabold); }

/* 0:217 — коэффициент в купоне нарисован БРЕНДОВЫМ красным, а не чернилами */
.page-home .slip__selection strong { color: var(--color-brand-text); }

/* 0:219 — STAKE — AUD: Geist 800 12/15.6, трекинга в макете нет */
.page-home .slip__stake-label { font-size: 12px; line-height: 16px; letter-spacing: normal; }

/* 0:225 — POTENTIAL RETURN: Geist 400 13/16.9 без трекинга */
.page-home .slip__return-label {
  font-weight: var(--fw-regular); font-size: 13px; line-height: 17px; letter-spacing: normal;
}

/* 0:226 — сумма возврата набрана Archivo Black 20/21.76, а не Geist 900 */
.page-home .slip__return-value {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 20px; line-height: 22px;
}

/* 0:228 — на кнопке в макете есть стрелка, и кегль 15/19.5, а не 16/21 */
.page-home .slip__place { font-size: 15px; line-height: 20px; }
.page-home .slip__place::after { content: " \2192"; }

/* 0:232 — «Set a Deposit Limit →» в макете оранжевая (#ff7900), не красная */
.page-home .slip__legal-link { color: #ff7900; }

/* ── Мобильный купон (0:5956, 358×452) ────────────────────────────── */
@media (max-width: 767px) {

  /* 0:5957 — шапка купона: row gap10, плашка сразу за заголовком,
     а не отжата в правый край (space-between — это десктопный 0:202) */
  .page-home .slip__head { justify-content: flex-start; gap: 10px; }

  /* 0:5958 — YOUR BET: Archivo Black 20/21.76, ls 1.5 */
  .page-home .slip__title { font-size: 20px; line-height: 22px; letter-spacing: .075em; }

  /* 0:5959 — плашка «1 PICK»: 52×20, pad(3,8), r4, Geist 700 11/14.3 ls0.5 */
  .page-home .slip__count {
    padding: 3px 8px; border-radius: 4px;
    font-weight: var(--fw-bold); letter-spacing: .045em;
  }

  /* 0:5961 — bet-details: белой карточки в мобильном макете НЕТ.
     Плоский блок 318×98 на фоне купона, col gap8, без паддинга и радиуса. */
  .page-home .slip__pick {
    gap: var(--space-4);
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--color-surface);
  }

  /* 0:5962 — tag-row: тег слева, «Remove ×» справа, а название события
     уезжает на свою строку (0:5966) под ними. */
  .page-home .slip__pick-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-4);
    row-gap: var(--space-4);
    min-height: 19px;
  }

  /* 0:5963 — тег лиги: 35×19, pad(3,8), r4, Geist 700 10/13 */
  .page-home .slip__pick-head .badge {
    padding: 3px 8px; border-radius: 4px; font-weight: var(--fw-bold);
  }

  /* 0:5965 — «Remove ×»: Geist 400 12/15.6 брендовым красным.
     На тёмном фоне #f20d2f даёт нормальный контраст, поэтому здесь
     берём цвет макета, а не затемнённый --color-brand-text. */
  .page-home .slip__remove {
    font-weight: var(--fw-regular);
    line-height: 16px;
    color: var(--color-brand);
  }

  /* 0:5966 — «Collingwood vs Sydney»: своя строка, Geist 700 14/18.2, белым */
  .page-home .slip__event {
    order: 3;
    width: 100%;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-surface);
  }

  /* 0:5967 + 0:5968 лежат в bet-details с общим зазором 8, а не 2 */
  .page-home .slip__detail { gap: var(--space-4); }

  /* 0:5967 — «Market: …»: Geist 400 12/15.6, кремовый при 0.7 */
  .page-home .slip__market {
    font-size: 12px; line-height: 16px;
    color: var(--color-paper); opacity: .7;
  }

  /* 0:5969 — имя выбора: Geist 700 16/20.8 белым (на десктопе — Archivo Black) */
  .page-home .slip__selection {
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: 16px;
    line-height: 21px;
    color: var(--color-surface);
  }

  /* 0:5970 — коэффициент: Archivo Black 18/19.58 ls0.5 кремовым */
  .page-home .slip__selection strong {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    font-size: 18px;
    line-height: 20px;
    letter-spacing: .028em;
    color: var(--color-paper);
  }

  /* 0:5973 — STAKE — AUD: Geist 500 11/14.3 ls1, кремовый при 0.6 */
  .page-home .slip__stake-label {
    font-weight: var(--fw-medium);
    font-size: 11px; line-height: 14px; letter-spacing: .0909em;
    opacity: .6;
  }

  /* 0:5974 — поле ставки: тёмная плашка #282423 с радиусом 10,
     а не белая карточка десктопа. Зазор 4. */
  .page-home .slip__stake-control {
    gap: 4px;
    border-radius: 10px;
    background: var(--color-ink-hover);
    color: var(--color-surface);
  }

  /* 0:5975 — «$»: Geist 500 18/23.4, кремовый при 0.5 */
  .page-home .slip__currency {
    font-weight: var(--fw-medium);
    font-size: 18px; line-height: 23px;
    color: var(--color-paper); opacity: .5;
  }

  /* 0:5976 — сумма: Geist 700 18/23.4 белым, ПО ЛЕВОМУ краю сразу за «$»
     (по правому она выровнена только на десктопном 0:220) */
  .page-home .slip__input {
    width: 100%;
    text-align: left;
    font-weight: var(--fw-bold);
    font-size: 18px; line-height: 23px;
    color: var(--color-surface);
  }

  /* 0:5979 — POTENTIAL RETURN:: Geist 500 12/15.6 ls0.5 при 0.7 */
  .page-home .slip__return-label {
    font-weight: var(--fw-medium);
    font-size: 12px; line-height: 16px; letter-spacing: .0417em;
    opacity: .7;
  }

  /* 0:5980 — сумма возврата на мобильном БЕЛАЯ и набрана Archivo Black
     22/23.94; зелёный --color-success — это десктопный 0:226 */
  .page-home .slip__return-value {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    font-size: 22px; line-height: 24px;
    color: var(--color-surface);
  }

  /* 0:5981 — кнопка: радиус 12 и БЕЗ светлой обводки (обводка 1.5px —
     это десктопный 0:227). Текст Archivo Black 16/17.41 ls1. */
  .page-home .slip__place {
    border-radius: 12px;
    box-shadow: none;
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    font-size: 16px;
    line-height: 17px;
    letter-spacing: .0625em;
  }

  /* 0:5984 — «18+ Gamble responsibly» на мобильном при 0.5, не 0.7 */
  .page-home .slip__legal-line { opacity: .5; }

  /* 0:5985 — «Set a Deposit Limit →»: Geist 500, брендовый красный
     (оранжевый #ff7900 — только десктопный 0:232) */
  .page-home .slip__legal-link {
    font-weight: var(--fw-medium);
    color: var(--color-brand);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BetStop-полоса (0:368 / 0:6118)
   ═══════════════════════════════════════════════════════════════════ */

/* 0:371 / 0:6121 — «BETSTOP» набран Archivo Black, а не Geist 900 */
.page-home .betstop-strip .badge--brand {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  border-radius: 4px;
}

/* 0:370 — на десктопе плашка 74×20 с полями 4/8 (у нас были 2/6 и r3) */
.page-home .betstop-strip .badge--brand { padding: 4px 8px; }

/* 0:374 / 0:6124 — «VISIT BETSTOP →» в макете Geist 900.
   Цвет остаётся затемнённым --color-brand-text: макетный #f20d2f на
   кремовом #f4e2cf даёт 3.5:1 при норме 4.5:1 (правка ради доступности). */
.page-home .betstop-strip__cta { font-weight: var(--fw-black); }

@media (max-width: 767px) {
  /* 0:6119 — на мобильном фрейме плашка, заголовок и пояснение стоят
     КОЛОНКОЙ с зазором 6 (в одну строку они собраны только на 1440, 0:369),
     а блок занимает все 358 — без своих боковых полей поверх полосы. */
  .page-home .betstop-strip__inner { padding-inline: 0; }

  .page-home .betstop-strip__lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* 0:6120 — плашка на мобильном 64×15: поля 2/6 */
  .page-home .betstop-strip .badge--brand { padding: 2px 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Плашки-кикеры (0:34 · 0:237 · 0:269)
   ═══════════════════════════════════════════════════════════════════ */

/* Во всех трёх плашках макета текст кремовый #f4e2cf, а не белый */
.page-home .kicker-pill { color: var(--color-paper); }

/* 0:34/0:36 — кикер героя: Geist 900 11/14.3 (у нас был 12/13, из-за чего
   плашка была 216×25 вместо макетных 201×26) */
.page-home .hero .kicker-pill { font-size: 11px; line-height: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   Карточка «AFL Season» (0:304 / 0:6056)
   ═══════════════════════════════════════════════════════════════════ */

/* 0:311 / 0:6063 — «VIEW AFL MARKETS →» набран Archivo Black, а не Geist 800.
   Цвет остаётся --color-brand-text: макетный #f20d2f на белой карточке
   даёт 4.0:1 при норме 4.5:1 (правка ради доступности). */
.page-home .featured .link-arrow {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
}

/* 0:311 — на десктопе строка 13/14.14, а не 13/17 */
.page-home .featured .link-arrow { line-height: 14px; }

/* 0:307 — плашка «FEATURED LEAGUE» на десктопе 113×21, поля 4/8 */
.page-home .featured__flag { padding: 4px 8px; }

@media (max-width: 767px) {
  /* 0:6063 — на мобильном строка 12/13.06 */
  .page-home .featured .link-arrow { line-height: 13px; }
  /* 0:6059 — плашка на мобильном 109×17, поля 2/6 */
  .page-home .featured__flag { padding: 2px 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   «Betting without the mess» на мобильном (0:6064)
   Десктопный 0:314 совпадает с макетом числом в число, расходится только
   мобильный: шаги набраны крупнее заголовком и мельче текстом, чем в макете.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* 0:6072 — «01 FIND A SPORT»: Archivo Black 13/14.14 (у нас было 15/16) */
  .page-home .hiw__step-title { font-size: 13px; line-height: 14px; }

  /* 0:6073 — пояснение шага: Geist 400 13/16.9 (у нас было 12/15) */
  .page-home .hiw__step-text { font-size: 13px; line-height: 17px; }

  /* 0:6084 — «LEARN HOW IT WORKS →»: Geist 900 13/16.9 */
  .page-home .hiw__cta { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Лента видов спорта (0:51 / 0:5824)
   ═══════════════════════════════════════════════════════════════════ */

/* 0:54 / 0:5827 — звёздочка-разделитель в макете ОРАНЖЕВАЯ #ff7900,
   а не белая. Глиф декоративный (aria-hidden), поэтому берём цвет
   макета без поправки на контраст. */
.page-home .ticker__star { color: #ff7900; }

@media (max-width: 767px) {
  /* 0:5826 — на мобильном лента набрана 15/16.32, а не 14/15 */
  .page-home .ticker__label,
  .page-home .ticker__star { font-size: 15px; line-height: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Водяной знак героя (0:48) — вертикальная посадка
   Бокс узла стоит верно (y 134.46 = top 14 от постера), но Figma и браузер
   по-разному раскладывают строку внутри бокса: Figma ставит первую базовую
   линию на 160px от верха (hhea 1.0/0.088em), браузер — на 145px
   (win-метрики 166/50 при line-height 174). Из-за этого знак у нас сидел
   на 17px выше макета: ink начинался на y 167 вместо 184.5.
   Замер по постеру: расхождение зоны 2.04% → 1.84% (пол без знака — 1.27%).
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .page-home .hero__watermark { top: 31px; }
}

/* 0:54 / 0:5827 — бокс звёздочки в макете 18×22 (на мобильном 14×16).
   В Archivo Black глифа ✦ нет, подхватывается запасной шрифт с другой
   шириной (16.3 вместо 18), и на семи элементах ряд собирается на 17px
   уже макетного — центрированный ряд из-за этого уезжает на 8.5px влево
   целиком. Ширину берём числом из макета. */
.page-home .ticker__star { width: 18px; text-align: center; }

@media (max-width: 767px) {
  .page-home .ticker__star { width: 14px; }
}

/* 0:75 / 0:5845 — в макете звёздочка стоит и после последнего вида спорта
   (ticker-item BASKETBALL = 175 = 149 + 8 + 18, на мобильном 134 = 112+8+14).
   Общее правило прячет её, из-за чего ряд собирался на 26px уже макета,
   а так как он центрированный — уезжал влево целиком на 13px. */
.page-home .ticker__item:last-child .ticker__star { display: inline; }