/* Home — numbers from fig-spec of robwaterhause-homepage-v2 (desktop) and
 * home-mobile-390 (≤1199px). Hero glass modules are genuinely overlaid on the
 * photo, so they are the one place position:absolute is legitimate. */

.hero__only-m { display: none; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; height: 730px; overflow: hidden; background: var(--color-bg); }
.hero__glow { position: absolute; left: 480px; top: 80px; width: 800px; height: 650px; border-radius: 50%; background: var(--grad-glow); pointer-events: none; }
.hero__inner { position: relative; display: flex; align-items: flex-start; gap: 80px; height: 100%; }
.hero__editorial { display: flex; flex-direction: column; gap: 36px; width: 520px; flex: none; margin-top: 140px; }
.hero__eyebrow { display: none; }
.hero__title {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-hero-lg); line-height: 81px;
  letter-spacing: -.04em; color: var(--color-text);
}
.hero__lead { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.hero__cta { display: flex; align-items: center; gap: 24px; width: fit-content; }
.hero__btn { gap: 0; letter-spacing: .08em; }   /* 1:33: трекинг .08em только у этой кнопки */
.hero__btn .icon { margin-left: 0; }
.hero__link { color: var(--color-brand-2); font-weight: 600; }

.hero__visual { position: relative; width: 680px; height: 520px; flex: none; margin-top: 100px; }
.hero__pic { position: relative; width: 680px; height: 480px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: inset 0 0 0 1px var(--color-border-brand); }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; }
.hero__pic::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(0deg, #050505 0%, rgba(0, 0, 0, 0) 50%, #050505 100%), rgba(22, 8, 12, .4);
  box-shadow: inset 0 0 0 1px var(--color-border-brand);
}
.hero__edge { position: absolute; left: 0; top: 478px; width: 680px; height: 2px; background: var(--color-brand-2); box-shadow: 0 0 12px var(--color-brand-2); }
.hero__reflection {
  position: absolute; left: 40px; top: 482px; width: 600px; height: 38px; border-radius: var(--radius-md); opacity: .35;
  background: linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0) 100%), rgba(5, 5, 5, .8), url("/assets/img/hero-track-500.webp") center / cover;
  transform: scaleY(-1);
}

.hero__module {
  position: absolute; display: flex; flex-direction: column; gap: 8px; width: 240px; padding: 16px;
  background: var(--color-surface-glass); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--color-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  text-decoration: none; color: var(--color-text);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.hero__module:hover { box-shadow: inset 0 0 0 1px var(--color-border-brand-2); transform: translateY(-2px); }
.hero__module--a { left: -100px; top: 80px; }   /* 580,180 on the page → relative to the visual at 680,100 */
.hero__module--b { left: 440px; top: 240px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; box-shadow: inset 0 0 0 1px var(--color-border-brand); }
.hero__module--c { left: 840px; top: 570px; width: 280px; }
.hero__module-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-micro); line-height: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-brand-2);
}
.hero__module-head--muted { color: var(--color-muted); }
.hero__module-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-2); box-shadow: 0 0 8px var(--color-brand-2); }
.hero__module-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body); line-height: 18px; }
.hero__module-meta { font-size: var(--fs-caption); line-height: 15px; color: var(--color-muted); }
.hero__connector { position: absolute; height: 1px; background: var(--color-border-brand); }
.hero__connector--1 { left: 640px; top: 230px; width: 80px; }
.hero__connector--2 { left: 940px; top: 550px; width: 100px; }

/* ── sports bento ─────────────────────────────────────────────────────── */
.bento { padding: 100px 0; background: var(--color-bg); }
.bento .container { display: flex; flex-direction: column; gap: 48px; }
.bento__head .eyebrow { font-weight: 600; }
.bento__head .link-arrow { color: var(--color-brand-2); font-weight: 600; gap: 4px; }
.bento__console { display: flex; flex-direction: column; gap: 32px; padding: 32px; }
.bento__top { display: grid; grid-template-columns: 784fr 400fr; gap: 32px; }
.bento__feature {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  min-height: 360px; padding: 32px;
  background: linear-gradient(63deg, #2a0710 0%, #0b090a 100%); border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px var(--color-border-brand);
}
.bento__feature-glow { position: absolute; left: 380px; top: 180px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 24, 63, .11) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.bento__meta { position: relative; display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); line-height: 16px; color: var(--color-muted); }
.bento__time { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); line-height: 16px; color: var(--color-brand-2); }
.bento__teams {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 39px;   /* 32/39 из макета, не --fs-h3 */
  letter-spacing: -.03em; text-transform: uppercase; color: var(--color-text);
}
.bento__vs { font-weight: 500; font-size: 20px; line-height: 24px; letter-spacing: 0; color: var(--color-muted); }
.bento__odds { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bento__odds .odd--lg { height: 52px; padding: 0 24px; }
/* красный фон — только у выбранного коэффициента (.is-selected из components.css); статичной подсветки нет */
.odd--dark { background: var(--color-bg); }

.bento__second {
  display: flex; flex-direction: column; justify-content: space-between; min-height: 360px; padding: 24px;
  background: var(--color-bg-alt); border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--color-border);
}
.bento__second-head { display: flex; flex-direction: column; gap: 12px; }
.bento__small-meta { font-family: var(--font-display); font-size: var(--fs-caption); line-height: 13px; color: var(--color-muted); }
.bento__second-title { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 24px; color: var(--color-text); }
.bento__stack { display: flex; flex-direction: column; gap: 10px; }
.odd--stack { height: 41px; padding: 0 12px; border-radius: 6px; }
.odd--stack .odd__name { font-family: var(--font-display); font-size: var(--fs-label); line-height: 16px; }
.odd--stack .odd__price { font-size: var(--fs-ui); line-height: 17px; }

.bento__rail {
  display: grid; grid-template-columns: 404fr 406fr 404fr; align-items: start; min-height: 150px; overflow: hidden;
  background: var(--color-bg-alt); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--color-border);
}
.rail-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; box-shadow: -1px 0 0 var(--color-border); }
.rail-card:first-child { box-shadow: none; }
.rail-card--hot { background: var(--color-burgundy); }
.rail-card__meta { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: var(--fs-caption); line-height: 13px; color: var(--color-muted); }
.rail-card__mkts { font-weight: 700; color: var(--color-brand-2); }
.rail-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lead); line-height: 20px; color: var(--color-text); }
.rail-card__odds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rail-card__odds--3 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.odd--rail { height: 36px; padding: 0 10px; border-radius: var(--radius-sm); box-shadow: none; }
.odd--rail .odd__name { font-family: var(--font-display); font-size: var(--fs-caption); line-height: 13px; }
.odd--rail .odd__price { font-size: var(--fs-label); line-height: 16px; }
.rail-card__odds--3 .odd--rail { height: 29px; padding: 0 8px; }
.rail-card__odds--3 .odd--rail .odd__name { font-size: var(--fs-micro); line-height: 12px; }
.rail-card__odds--3 .odd--rail .odd__price { font-size: var(--fs-caption); line-height: 13px; }

/* ── racing panel ─────────────────────────────────────────────────────── */
.racing-panel { position: relative; height: 440px; overflow: hidden; background: var(--color-bg); }
/* decorative photo as a CSS background: a display:none <img loading=lazy> never fires load and stalls full-page tooling */
.racing-panel__bg {
  position: absolute; inset: 0 0 auto 0; z-index: 0; height: 680px;
  background: linear-gradient(0deg, #050505 0%, rgba(0, 0, 0, 0) 50%, #050505 100%), rgba(11, 4, 6, .85), url("/assets/img/hero-track-1184.jpg") center / cover;
  background-image: linear-gradient(0deg, #050505 0%, rgba(0, 0, 0, 0) 50%, #050505 100%), linear-gradient(rgba(11, 4, 6, .85), rgba(11, 4, 6, .85)), image-set(url("/assets/img/hero-track-1184.webp") type("image/webp"), url("/assets/img/hero-track-1184.jpg") type("image/jpeg"));
}
.racing-panel__glow { position: absolute; left: 400px; top: 200px; z-index: 0; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 24, 63, .082) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.racing-panel__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 40px; padding-block: 40px; }
.racing-panel__head { display: flex; flex-direction: column; gap: 24px; width: 420px; flex: none; }
.racing-panel__titles { display: flex; flex-direction: column; gap: 12px; }
.racing-panel__title {
  display: flex; flex-direction: column;
  font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 61px; letter-spacing: -.05em; color: var(--color-text);
}
.racing-panel__lead { font-size: var(--fs-ui); line-height: 22px; color: var(--color-muted); }

.race-tile {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  background: var(--color-surface); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-border);
  text-decoration: none; color: var(--color-text);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.race-tile:hover { box-shadow: inset 0 0 0 1px var(--color-border-brand-2); transform: translateY(-2px); }
.race-tile--feature { justify-content: center; width: 440px; height: 312px; flex: none; }
.race-tile--feature .race-tile__no { font-size: 48px; line-height: 59px; }
.race-tile--feature .race-tile__body { gap: 6px; }
.race-tile--feature .race-tile__track { font-size: var(--fs-h4); line-height: 34px; font-weight: 700; }
.race-tile--feature .race-tile__meta { font-size: var(--fs-ui); line-height: 19px; }
.race-tile__no { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h5); line-height: 29px; }
.race-tile__body { display: flex; flex-direction: column; gap: 2px; }
.race-tile__track { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 22px; }
.race-tile__meta { font-size: var(--fs-small); line-height: 16px; color: var(--color-muted); }
.race-tile__link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); line-height: 15px; text-transform: uppercase; color: var(--color-brand-2); }
.race-tile--feature .race-tile__link { font-size: var(--fs-label); line-height: 16px; color: var(--color-brand); }
.race-tile__link .icon { width: 10px; height: 10px; stroke-width: 2.5; }
.racing-panel__side { display: flex; flex-direction: column; gap: 16px; width: 340px; flex: none; }
.race-tile--small { height: 148px; }

/* ── responsible gambling ─────────────────────────────────────────────── */
.rg { padding: 120px 0; background: var(--color-bg-deep); }
.rg--md { padding: 100px 0; }   /* 1:333 на Sports */
.rg__inner { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.rg__text { display: flex; flex-direction: column; gap: 24px; width: 500px; flex: none; }
.rg__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 59px; letter-spacing: -.04em; color: var(--color-text); }
.rg__lead { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.rg__console { width: 640px; flex: none; background: var(--color-surface); border-radius: var(--radius-2xl); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; }
.rg__item {
  display: flex; align-items: center; gap: 24px; padding: 28px; text-decoration: none; color: var(--color-text);
  border-top: 1px solid var(--color-border);   /* 1px-разделители макета входят в высоту консоли */
  transition: background-color var(--dur-base) var(--ease);
}
.rg__item:first-child { border-top: 0; }
.rg__item:hover { background: var(--color-bg-alt); }
.rg__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 34px; color: rgba(140, 26, 46, .7); }
.rg__item-body { display: flex; flex-direction: column; gap: 4px; }
.rg__item-kicker { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption); line-height: 13px; text-transform: uppercase; color: var(--color-brand-2); }
.rg__item-kicker--strong { color: var(--color-brand); }
.rg__item-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 22px; text-transform: uppercase; }
.rg__item-text { font-size: var(--fs-label); line-height: 18px; color: var(--color-muted); }

/* ── mobile (390 frame) ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .hero__only-d { display: none; }
  .hero__only-m { display: inline; }

  .hero { height: auto; }
  .hero__glow { left: -150px; top: 100px; width: 600px; height: 500px; }
  .hero__inner { flex-direction: column; gap: 24px; padding-block: 32px; }
  .hero__editorial { width: auto; margin-top: 0; gap: 24px; }
  .hero__eyebrow { display: flex; }
  .hero__eyebrow::before { width: 12px; }
  .hero__title { display: block; font-family: var(--font-body); font-weight: 700; font-size: 48px; line-height: 46px; }
  .hero__title span { display: inline; }
  .hero__lead { font-size: var(--fs-ui); line-height: 21px; }
  .hero__cta { gap: 16px; }
  .hero__cta { width: auto; }
  .hero__btn { height: 40px; letter-spacing: .04em; }
  .hero__btn .icon { display: none; }
  .hero__link { color: var(--color-brand); }
  .hero__visual { width: 100%; height: auto; aspect-ratio: 358 / 240; margin-top: 0; }
  .hero__pic { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; }
  .hero__edge { top: auto; bottom: 2px; width: 100%; }
  .hero__reflection, .hero__connector { display: none; }
  .hero__module { gap: 4px; padding: 10px; width: 180px; border-radius: var(--radius-md); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero__module--a { left: 12px; top: 12px; }
  .hero__module--b { left: auto; right: 12px; top: auto; bottom: 16px; width: 160px; border-radius: var(--radius-md); }
  .hero__module--c { position: static; width: 100%; padding: 12px; border-radius: var(--radius-lg); }
  .hero__module-head { gap: 6px; font-size: var(--fs-tiny); line-height: 11px; }
  .hero__module--b .hero__module-head { font-size: 8px; line-height: 10px; }   /* 9:3830 — ширина фрейма 390 */
  .hero__module-dot { width: 4px; height: 4px; }
  .hero__module-title { font-size: var(--fs-small); line-height: 15px; }
  .hero__module-meta { font-size: var(--fs-tiny); line-height: 12px; }
  .hero__module--c .hero__module-title { font-size: var(--fs-ui); line-height: 17px; }
  .hero__module--c .hero__module-meta { font-size: var(--fs-caption); line-height: 15px; }

  .bento { padding: 40px 0; }
  .bento .container { gap: 24px; }
  .bento__head.sec-head { gap: 8px; }
  .bento__head .sec-head__block { gap: 8px; }
  .bento__head .eyebrow { font-size: var(--fs-micro); line-height: 12px; gap: 6px; }
  .bento__head .eyebrow::before { width: 12px; }
  .bento__head .sec-title--lg { font-size: 32px; line-height: 39px; }
  .bento__head .link-arrow { color: var(--color-brand); font-size: var(--fs-small); line-height: 15px; }
  .bento__console { gap: 24px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .bento__top { display: contents; }
  .bento__feature { justify-content: flex-start; gap: 16px; min-height: 0; padding: 20px; }
  .bento__feature-glow { display: none; }
  .bento__meta { gap: 8px; font-size: var(--fs-caption); line-height: 15px; }
  .bento__time { font-size: var(--fs-small); line-height: 15px; color: var(--color-brand); }
  .bento__teams { font-size: var(--fs-h6); line-height: 27px; }
  .bento__vs { font-size: var(--fs-ui); line-height: 17px; }
  .bento__odds { gap: 12px; }
  .bento__odds .odd--lg { height: 44px; padding: 0 16px; }
  .bento__odds .odd--lg .odd__name { font-size: var(--fs-small); line-height: 15px; }
  .bento__odds .odd--lg .odd__price { font-size: var(--fs-ui); line-height: 17px; }
  .bento__second { min-height: 0; gap: 12px; padding: 16px; background: var(--color-surface); border-radius: var(--radius-lg); margin-bottom: -12px; }
  .bento__second-title { font-size: var(--fs-body); line-height: 18px; }
  .bento__stack { flex-direction: row; gap: 8px; }
  .bento__stack .odd { flex: 1; height: 44px; padding: 0 10px; background: var(--color-bg); }
  .bento__rail { display: flex; flex-direction: column; align-items: stretch; gap: 12px; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
  .rail-card { gap: 12px; padding: 16px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--color-border); }
  .rail-card--hot { background: var(--color-burgundy); }
  .rail-card__meta { justify-content: flex-start; gap: 4px; }
  .rail-card__mkts { font-weight: 400; color: var(--color-muted); }
  .rail-card__mkts::before { content: "• "; }
  .rail-card__title { font-size: var(--fs-body); line-height: 18px; }
  .rail-card__odds, .rail-card__odds--3 { gap: 8px; }
  .odd--rail, .rail-card__odds--3 .odd--rail { height: 44px; padding: 0 10px; border-radius: 6px; background: var(--color-bg); }
  .odd--rail .odd__name, .rail-card__odds--3 .odd--rail .odd__name { font-size: var(--fs-caption); line-height: 13px; }
  .odd--rail .odd__price, .rail-card__odds--3 .odd--rail .odd__price { font-size: var(--fs-label); line-height: 16px; }

  .racing-panel { height: auto; background: var(--color-surface); }
  .racing-panel__bg, .racing-panel__glow { display: none; }
  .racing-panel__inner { flex-direction: column; align-items: stretch; gap: 24px; padding-block: 48px; }
  .racing-panel__head { width: auto; gap: 8px; }
  .racing-panel__titles { gap: 8px; }
  .racing-panel__titles .eyebrow { font-size: var(--fs-micro); line-height: 12px; color: var(--color-brand); }
  .racing-panel__title { display: block; font-family: var(--font-body); font-size: 32px; line-height: 32px; }
  .racing-panel__lead { font-size: var(--fs-label); line-height: 20px; }
  .race-tile { background: var(--color-bg); }
  .race-tile--feature { width: auto; height: auto; justify-content: flex-start; border-radius: var(--radius-lg); }
  .race-tile--feature .race-tile__no { font-size: var(--fs-h3); line-height: 44px; }
  .race-tile--feature .race-tile__body { gap: 2px; }
  .race-tile--feature .race-tile__track { font-size: 20px; line-height: 24px; }
  .race-tile--feature .race-tile__meta { font-size: var(--fs-small); line-height: 16px; }
  .racing-panel__side { flex-direction: row; width: auto; gap: 12px; overflow-x: auto; scrollbar-width: none; }
  .racing-panel__side::-webkit-scrollbar { display: none; }
  .race-tile--small { flex: none; width: 160px; height: auto; gap: 10px; padding: 16px; }
  .race-tile--small .race-tile__no { font-size: 20px; line-height: 24px; }
  .race-tile--small .race-tile__track { font-size: var(--fs-ui); line-height: 17px; }
  .race-tile--small .race-tile__meta { font-size: var(--fs-micro); line-height: 14px; }
  .race-tile--small .race-tile__link { font-size: var(--fs-caption); line-height: 13px; color: var(--color-brand); }

  .rg { padding: 48px 0; background: var(--color-bg); }
  .rg__inner { flex-direction: column; align-items: stretch; gap: 24px; }
  .rg__text { width: auto; gap: 12px; }
  .rg__title { font-size: 32px; line-height: 34px; letter-spacing: -.03em; }
  .rg__lead { font-size: var(--fs-ui); line-height: 21px; }
  .rg__console { width: auto; border-radius: var(--radius-xl); }
  .rg__item { gap: 16px; padding: 20px; align-items: flex-start; }
  .rg__num { font-size: 20px; line-height: 24px; }
  .rg__item-kicker { font-size: var(--fs-micro); line-height: 12px; }
  .rg__item-title { font-size: var(--fs-body); line-height: 18px; }
  .rg__item-text { font-size: var(--fs-small); line-height: 16px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero__editorial { max-width: 640px; }
  .bento__rail { display: grid; grid-template-columns: 1fr 1fr; }
  .bento__second { margin-bottom: 0; }
}

/* планшет (макета нет): 8px из мобильного фрейма не читается — держим 9px, как у соседнего модуля */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero__module--b .hero__module-head { font-size: var(--fs-tiny); line-height: 11px; }
}