/* How It Works. Числа из макета: baqqybet-how-it-works-desktop (1440) и
 * baqqybet-how-it-works-mobile (390). Мобильная ветка пишется вместе с секцией.
 *
 * Компонентов, которых не хватило в components.css и которые собраны здесь:
 *   .market-card / .odd   — карточка события с котировками — пример из макета;
 *   .hiw-checklist        — маркированный список шагов 03 и 04;
 *   .hiw-support          — белая полоса «Need support?» на светлой секции.
 */

/* ── how-it-works-intro [46:2] ────────────────────────────────────────── */
.hiw-intro { background: var(--color-bg); }
.hiw-intro__inner {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding-block: 56px var(--space-48);          /* pad 56/48 из макета */
}
.hiw-intro__eyebrow {
  font-size: var(--fs-2xs); font-weight: 600; line-height: 13.31px; letter-spacing: 1.5px;
  color: var(--color-accent);
}
.hiw-intro__title {
  font-family: var(--font-ui);
  font-size: var(--fs-d3); font-weight: 900; line-height: 54px;
  color: var(--color-text-strong);
}
.hiw-intro__lead { font-size: var(--fs-md); line-height: 22px; color: var(--color-text); }

/* ── instructional-guide [46:6] ───────────────────────────────────────── */
.hiw-guide { background: var(--color-bg); padding-block: 0 var(--space-64); }
.hiw-guide__list { display: flex; flex-direction: column; gap: 1px; }   /* ровно под разделитель между шагами */

.hiw-step {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-48);   /* иначе колонка текста тянется на всю высоту ряда */
  padding-block: var(--space-48);
}
/* Разделители между шагами — ROUNDED_RECTANGLE 1344×1 #1f2a3a: отдельный узел
 * макета в зазоре между шагами, поэтому псевдоэлемент, а не рамка шага. */
.hiw-step + .hiw-step::before {
  content: ""; position: absolute; inset-inline: 0; top: -1px;
  height: 1px; background: var(--color-border);
}

.hiw-step__instruction {
  display: flex; flex-direction: column; gap: var(--space-16);
  width: 400px; flex: none;
}
/* Шаги 03 и 04 нарисованы во всю ширину: их «example» в макете пустой. */
.hiw-step--wide .hiw-step__instruction { width: 100%; }

.hiw-step__num {
  font-size: 56px; font-weight: 900; line-height: 56px;   /* 56 в токенах нет */
  color: var(--color-accent);
}
.hiw-step__title {
  font-family: var(--font-ui);
  font-size: var(--fs-h4); font-weight: 700; line-height: 30px;
  color: var(--color-text-strong);
}
.hiw-step__text { font-size: var(--fs-md); line-height: 24px; color: var(--color-text); }

.hiw-step__example {
  display: flex; flex-direction: column; gap: var(--space-16);
  flex: 1; min-width: 0;
}
.hiw-step__caption { font-size: var(--fs-sm); line-height: 20px; color: var(--color-text-muted); }   /* #96a3b8 макета → --color-text-muted, Δ=2 */

.hiw-note { display: flex; gap: var(--space-8); }
.hiw-note__arrow { flex: none; font-size: var(--fs-body); line-height: 17px; color: var(--color-accent); }

/* ── карточка события с котировками [46:13] ───────────────────────────── */
.market-card {
  display: flex; flex-direction: column; gap: var(--space-12);
  /* Фрейм карточки в макете на 1px выше суммы детей с паддингом 20 (дети стоят
     на +21 от края) — половина пикселя добирается здесь, а не в высоте. */
  padding: 20.5px;
  background: var(--color-panel);
  border-radius: var(--radius-10);
  box-shadow: inset 0 0 0 1px var(--color-border);   /* strokeAlign INSIDE */
}
.market-card__league,
.market-card__market {
  font-size: var(--fs-2xs); font-weight: 600; line-height: 13.31px; letter-spacing: 1px;
  color: var(--color-text-muted);   /* #96a3b8 макета, сведён в --color-text-muted (Δ=2) */
}
.market-card__time { font-size: var(--fs-xs); line-height: 15px; color: var(--color-text-muted); }   /* #96a3b8 макета → --color-text-muted, Δ=2 */
.market-card__fixture {
  font-size: var(--fs-lg); font-weight: 800; line-height: 22px; color: var(--color-text-strong);
}
.market-card__odds { display: flex; gap: var(--space-8); min-height: 53px; }   /* odds-row в макете FIXED 53 */
.market-card__more {
  font-size: var(--fs-sm); font-weight: 600; line-height: 16px; color: var(--color-accent);
}

.odd {
  display: flex; flex-direction: column; gap: var(--space-2);
  align-items: center; justify-content: center;
  flex: 1; min-width: 0;
  padding: var(--space-8) var(--space-12);
  background: var(--color-panel);
  border-radius: var(--radius-10);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.odd__name { text-align: center; font-size: var(--fs-xs); font-weight: 700; line-height: 15px; color: var(--color-text); }
.odd__price {
  font-family: var(--font-mono);
  text-align: center;
  font-size: var(--fs-body); font-weight: 800; line-height: 18.2px; color: var(--color-text-strong);
}
.odd--selected { background: var(--color-accent); box-shadow: none; }
.odd--selected .odd__name,
.odd--selected .odd__price { color: var(--color-on-accent); }

/* ── чек-листы шагов 03 и 04 [46:59] ──────────────────────────────────── */
.hiw-checklist {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding-block: var(--space-8) 0;   /* фрейм checklist в макете 120 = 8 + 4×22 + 3×8 */
}
.hiw-checklist li {
  font-size: var(--fs-body); font-weight: 500; line-height: 22px; color: var(--color-text);
}
.hiw-checklist--done li { color: var(--color-accent); }

/* ── responsible-wagering [46:113] ────────────────────────────────────── */
.hiw-rw { background: var(--color-bg-light); color: var(--color-text-dark); }
.hiw-rw__inner {
  display: flex; flex-direction: column; gap: var(--space-24);
  padding-block: var(--space-48);
}
.hiw-rw__rule { height: 1px; border: 0; background: var(--color-border-light); }

.hiw-rw__grid { display: flex; gap: var(--space-24); align-items: flex-start; }
.hiw-rw__lead {
  display: flex; flex-direction: column; gap: var(--space-16);
  width: 520px; flex: none;
}
.hiw-rw__eyebrow {
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-green-deep);
}
.hiw-rw__title {
  font-family: var(--font-ui);
  font-size: var(--fs-h1); font-weight: 900; line-height: 48px;
  color: var(--color-text-dark);
}
.hiw-rw__text { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text-dark-muted); }
.hiw-rw__text-narrow { display: none; }   /* редакция мобильного фрейма */

/* Разделители action-list — ROUNDED_RECTANGLE 1px #e5e7eb: в макете это
 * отдельный ребёнок списка с зазором 16 сверху и снизу, а не рамка карточки.
 * Линия рисуется псевдоэлементом, поэтому не входит в бокс .hiw-action. */
.hiw-actions { display: flex; flex-direction: column; gap: 33px; flex: 1; min-width: 0; }
.hiw-action { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.hiw-action + .hiw-action::before {
  content: ""; position: absolute; inset-inline: 0; top: -17px;
  height: 1px; background: var(--color-border-light);
}
.hiw-action__num {
  font-size: var(--fs-h1); font-weight: 900; line-height: 53.25px; letter-spacing: -1px;
  color: var(--color-green-deep);
}
.hiw-action__title {
  font-family: var(--font-ui);
  font-size: var(--fs-h6); font-weight: 900; line-height: 22px; color: var(--color-text-dark);
}
.hiw-action__text { font-size: var(--fs-body); line-height: 21px; color: var(--color-text-dark-muted); }
.hiw-action__link {
  align-self: flex-start;
  font-size: var(--fs-sm); font-weight: 800; line-height: 16px;
  color: var(--color-text-dark); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.hiw-action__link:hover { color: var(--color-green-deep); text-decoration: underline; }

/* ── support-strip [46:139] ───────────────────────────────────────────── */
.hiw-support {
  display: flex; align-items: center; justify-content: space-between;
  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);
}
.hiw-support__text { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; min-width: 0; }
.hiw-support__title {
  font-size: var(--fs-body); font-weight: 900; line-height: 17px; color: var(--color-text-dark);
}
.hiw-support__line { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text-dark-muted); }
.hiw-support__line a { color: var(--color-text-dark); font-weight: 700; }
.hiw-support__line a:hover { color: var(--color-green-deep); }

/* ── планшет ──────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .hiw-intro__title { font-size: 40px; line-height: 44px; }
  .hiw-step { gap: var(--space-24); }
  .hiw-step__instruction { width: 320px; }
  .hiw-rw__grid { flex-direction: column; }
  .hiw-rw__lead { width: 100%; }
  .hiw-rw__title { font-size: var(--fs-h2); line-height: 36px; }
}

/* ── мобильный фрейм макета ───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* интро [82:176]: pad 40/32, gap 10 */
  .hiw-intro__inner { gap: var(--space-10); padding-block: var(--space-40) var(--space-32); }
  .hiw-intro__title { font-size: 36px; line-height: 40px; }
  .hiw-intro__lead { font-size: var(--fs-body); line-height: 17px; }

  /* гид [82:180]: pad-block 8, шаги в колонку, gap 8, pad 32 */
  .hiw-guide { padding-block: var(--space-8); }
  .hiw-step {
    /* в мобильном фрейме шаг — колонка, дети во всю ширину: flex-start
       десктопной ветки здесь сжал бы карточку по содержимому. */
    flex-direction: column; align-items: stretch; gap: var(--space-8);
    padding-block: var(--space-32);
  }
  .hiw-step__instruction { width: 100%; gap: var(--space-8); }
  .hiw-step__num { font-size: var(--fs-d3); line-height: 58.09px; }
  .hiw-step__title { font-size: 22px; line-height: 27px; }
  .hiw-step__text { font-size: var(--fs-body); line-height: 17px; }

  /* spacer 12 и spacer 4 макета живут в отступах, отдельными блоками не верстаются */
  .hiw-step__example { gap: var(--space-8); }
  .market-card { margin-top: var(--space-20); padding: 16.5px; gap: var(--space-8); }   /* дети на +17 от края фрейма */
  .market-card__league,
  .market-card__market { letter-spacing: .5px; }
  .market-card__fixture { font-size: var(--fs-md); line-height: 18.15px; }
  .market-card__odds { min-height: 57px; }   /* odds-row мобильного фрейма FIXED 57 */
  .odd { align-items: flex-start; justify-content: flex-start; padding: var(--space-10) var(--space-12); }
  .odd__name, .odd__price { text-align: left; }   /* в мобильном фрейме текст прижат влево */
  .hiw-step__caption { margin-top: var(--space-12); font-size: var(--fs-xs); line-height: 15px; }
  .hiw-note { gap: var(--space-6); }

  /* после чек-листа в макете идёт spacer 16 через зазор 8 → 24 */
  .hiw-checklist { gap: var(--space-4); padding-block: 0; margin-bottom: var(--space-24); }
  .hiw-checklist li { line-height: 17px; }

  /* responsible-wagering [82:287]: pad 40/16, gap 24 */
  .hiw-rw__inner { padding-block: var(--space-40); }
  .hiw-rw__grid { flex-direction: column; gap: var(--space-24); }
  .hiw-rw__lead { width: 100%; gap: var(--space-12); }
  .hiw-rw__title { font-size: var(--fs-h3); line-height: 31px; }
  .hiw-rw__text { font-size: var(--fs-body); line-height: 21px; }
  .hiw-rw__text-wide { display: none; }
  .hiw-rw__text-narrow { display: inline; }

  .hiw-action { gap: var(--space-6); }
  .hiw-action__num { font-size: var(--fs-h2); line-height: 39px; }
  .hiw-action__title { font-size: var(--fs-lg); line-height: 19.36px; }
  .hiw-action__text { font-size: var(--fs-sm); line-height: 18px; }

  .hiw-support { padding: var(--space-16); border-radius: var(--radius-12); }
  .hiw-support__line { font-size: var(--fs-xs); line-height: 15px; }
}