/* Home page — mockup pumtl23-homepage [3:2].
 * Sections: hero 670, upcoming-markets 865, next-to-jump 719, responsible-gambling 495. */

/* ── hero [21:31] ─────────────────────────────────────────────────────── */
.hero__content { min-height: 590px; }
.hero__cta { align-self: flex-start; border-radius: var(--radius-md); }

.hero__right {
  align-self: flex-start;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-16);
  width: 320px; flex: none; margin-top: 112px;
}
.hero__photo { position: relative; width: 320px; height: 320px; }
/* Свечение и фото — разные слои: в одном слое градиент забивает снимок. */
.hero__photo::before {
  content: ""; position: absolute; inset: -40px; z-index: -1;
  border-radius: 50%; background: var(--color-brand); opacity: .08; filter: blur(80px);
}
.hero__photo img {
  width: 320px; height: 320px; object-fit: cover;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .2);
}
.hero__photo::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--grad-veil); pointer-events: none;
}
.hero__chips { display: flex; gap: var(--space-12); }
.chip--odds { color: var(--color-brand-light); font-weight: 700; }

/* ── upcoming markets [21:55] ─────────────────────────────────────────── */
.markets { background: var(--color-light-bg); }
.markets__watermark {
  top: -120px; left: 357px;
  font-size: var(--fs-watermark-xl); line-height: 306.24px;
  color: var(--color-brand); opacity: .03;
}
.markets__top { display: flex; flex-direction: column; gap: var(--space-16); }

.market-row { display: flex; gap: var(--space-24); align-items: flex-start; padding-top: var(--space-32); }
.market-board { flex: 1; }
.market-row__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  min-height: 101px; padding: var(--space-20);
}
.market-row__item + .market-row__item { border-top: 1px solid var(--color-light-bg); }
.market-board__empty { margin: 0; padding: var(--space-32) var(--space-20); color: var(--color-muted-2); }

/* ── next to jump [21:171] ────────────────────────────────────────────── */
.racing { position: relative; overflow: hidden; background: var(--color-bg); }
.racing__watermark {
  top: -120px; left: 740px;
  font-size: 200px; line-height: 255.2px; color: #fff; opacity: .03;
}
.racing__top { display: flex; align-items: center; gap: var(--space-24); }
.racing__rule { flex: 1; height: 1px; background: var(--color-border); }

.racing .section__title { margin-top: var(--space-16); }

.racing__row { display: flex; align-items: flex-start; gap: var(--space-24); padding-top: var(--space-40); }
.racing__image { width: 430px; flex: none; }
.racing__image img {
  width: 430px; height: 440px; object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .2);
}

.race-cards { display: grid; align-content: start; gap: var(--space-12); flex: 1; }
.race-card {
  display: flex; align-items: center; gap: var(--space-16);
  min-height: 83px; padding: var(--space-20);
  border-radius: var(--radius-xl);
  background: var(--fill-glass-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: box-shadow var(--dur-base) var(--ease);
}
.race-card:hover { box-shadow: inset 0 0 0 1px var(--color-border-brand-strong); }
.race-card__number {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h4); line-height: 41px; color: var(--color-brand);
}
.race-card__meta { display: grid; gap: var(--space-2); flex: 1; }
.race-card__type { font-size: var(--fs-ui); line-height: 18px; color: var(--color-white); }
.race-card__track { font-size: var(--fs-lead); font-weight: 700; line-height: 23px; color: var(--color-white); }
.race-card__right { display: flex; align-items: center; gap: var(--space-16); }
.race-card__time {
  font-size: var(--fs-body); font-weight: 700; line-height: 20.42px; color: var(--color-brand-light);
}

/* ── responsible gambling [91:2] ──────────────────────────────────────── */

/* ── планшет ──────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .market-row { flex-direction: column; }
  .market-board { width: 100%; }
  .racing__row { flex-direction: column; }
  .racing__image, .racing__image img { width: 100%; }
  .rg__content { flex-direction: column; }
  .rg__left { width: 100%; }
}

/* ── мобильный фрейм 390 [95:5] ───────────────────────────────────────────
   Числа взяты из мобильного фрейма макета, а не пересчитаны с десктопа:
   hero pad 32/16 gap 24, заголовок 36/46, лид 14/21, фото 260, карточки 142. */
@media (max-width: 767px) {
  .hero { padding-block: var(--space-32); }
  .hero__content { flex-direction: column; gap: var(--space-24); min-height: 0; }
  .hero__left { gap: var(--space-24); max-width: none; width: 100%; }
  .hero__headline { gap: var(--space-2); font-size: 36px; line-height: 46px; }
  .hero__lead { max-width: none; font-size: var(--fs-ui); line-height: 21px; }
  .hero__cta { align-self: stretch; min-height: 48px; }

  .glass-eyebrow { gap: var(--space-6); padding: 4px var(--space-12); font-size: var(--fs-nano); line-height: 13px; }

  .hero__right { width: 100%; margin-top: 0; gap: var(--space-16); }
  .hero__photo, .hero__photo img { width: 260px; height: 260px; }
  .hero__photo::before { inset: -20px; }
  .hero__chips { gap: var(--space-8); }
  .chip { padding: 4px var(--space-10); font-size: var(--fs-nano); line-height: 13px; }

  /* upcoming-markets [95:44]: pad 40/16, gap 24, карточки 142 через 16 */
  .markets { padding-block: var(--space-40); }
  .markets__top { gap: var(--space-24); }
  .section__title { font-size: 30px; line-height: 38.28px; }
  .markets__watermark, .racing__watermark { font-size: 72px; line-height: 92px; left: var(--container-pad-mobile); top: -40px; }

  .tabs { gap: var(--space-8); width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; min-height: 32px; padding: 0 var(--space-16); font-size: var(--fs-caption); line-height: 15.31px; }

  .market-row { flex-direction: column; gap: var(--space-50, 50px); padding-top: var(--space-24); }
  .market-board { display: grid; gap: var(--space-16); background: none; width: 100%; }
  .market-row__item {
    flex-direction: column; align-items: stretch; gap: var(--space-12);
    min-height: 142px; padding: var(--space-16);
    border-radius: var(--radius-xl); background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-border-light);
  }
  .market-row__item + .market-row__item { border-top: 0; }
  .market-row__left { display: grid; gap: var(--space-4); }
  .market-row__teams { font-size: var(--fs-ui); line-height: 18px; }
  .market-row__meta, .market-row__type { font-size: var(--fs-micro); line-height: 14.04px; margin: 0; }
  .market-row__odds { gap: var(--space-8); }
  .market-row__odds .odd { flex: 1; min-height: 44px; }
  .odd__name { font-size: var(--fs-nano); line-height: 13px; }
  .odd__value { font-size: var(--fs-ui); line-height: 18px; }

  /* bet slip [95:31]: своя полоса под списком, pad 16, gap 16 */
  .bet-slip { width: 100%; gap: var(--space-16); padding: var(--space-16); }
  .bet-slip__title { font-size: var(--fs-ui); line-height: 18px; }
  .bet-slip__selection { padding: var(--space-12); gap: var(--space-8); }
  .bet-slip__selection-teams { font-size: var(--fs-small); line-height: 17px; }
  .bet-slip__selection-odds { font-size: 20px; line-height: 26px; }
  .bet-slip__quick .btn { min-height: 32px; font-size: var(--fs-caption); }

  /* next-to-jump [102:565]: pad 32/16, gap 20, фото 200, карточки 58 через 8 */
  .racing { padding-block: var(--space-32); }
  .racing__top { gap: var(--space-12); }
  .racing .section__title { margin-top: 0; font-size: var(--fs-h5); line-height: 36px; }
  .racing__row { flex-direction: column; gap: var(--space-20); padding-top: var(--space-20); }
  .racing__image, .racing__image img { width: 100%; }
  .racing__image img { height: 200px; }
  .race-cards { gap: var(--space-8); width: 100%; }
  .race-card { min-height: 58px; padding: var(--space-12); gap: var(--space-12); flex-wrap: nowrap; }
  .race-card__number { font-size: var(--fs-h6); line-height: 31px; }
  .race-card__type { font-size: var(--fs-micro); line-height: 14.04px; }
  .race-card__track { font-size: var(--fs-ui); line-height: 18px; }
  .race-card__right { width: auto; gap: var(--space-8); flex-direction: column; align-items: flex-end; }
  .race-card__time { font-size: var(--fs-ui); line-height: 18px; }
  .race-card .link-accent { font-size: var(--fs-micro); line-height: 14.04px; }

  /* responsible-gambling [95:192]: pad 32/16, gap 20, карточки 87 через 12 */
  .rg { padding-block: var(--space-32); }
  .rg__content { flex-direction: column; gap: var(--space-20); }
  .rg__left { width: 100%; }
  .rg .section__title { font-size: var(--fs-h5); line-height: 36px; }
  .rg__lead { margin-top: var(--space-4); font-size: var(--fs-ui); line-height: 21px; }
  .rg__cards { width: 100%; gap: var(--space-12); }
  .rg-card { flex-direction: row; align-items: flex-start; gap: var(--space-16); min-height: 87px; padding: var(--space-16); }
  .rg-card__number { font-size: var(--fs-h6); line-height: 31px; }
  .rg-card__title { margin-bottom: var(--space-4); font-size: var(--fs-small); line-height: 17px; }
  .rg-card__text { font-size: var(--fs-caption); line-height: 17px; }
}

@media (max-width: 767px) {
  /* Карточка рынка в макете 142px: 16 + meta 54 + 12 + odds 44 + 16.
     Значит и сам коэффициент ровно 44, без запаса от внутренних отступов. */
  .market-row__odds .odd { min-height: 44px; padding: 5px var(--space-12); }

  /* Карточка забега 58px: 12 + строка 34 + 12, где время и ссылка стоят В РЯД. */
  .race-card__right { flex-direction: row; align-items: center; gap: var(--space-8); width: auto; }
}