/* Home — mockup frames betfans-homepage [1:2] / betfans-home-mobile [66:4].
 * Desktop: the hero is a 840/600 split of the 1440 frame, so it runs full-bleed
 * and only the copy sits on the container grid.
 */

/* ── hero [7:27] — 700px tall, gradient panel + photo ─────────────────── */
.hero { display: grid; grid-template-columns: 840fr 600fr; min-height: 700px; background: var(--color-bg); }
.hero__panel {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding: 56px 40px 56px max(var(--container-pad), calc((100vw - var(--container)) / 2));
  background: var(--grad-hero);
  color: var(--color-on-dark);
}
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-24); max-width: 720px; }
.hero__headline {
  display: flex; flex-direction: column; gap: var(--space-12);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-hero); line-height: 108px;
}
.hero__lead { max-width: 720px; font-size: var(--fs-body); line-height: 24px; color: var(--color-on-dark-70); }
.hero__cta { align-self: flex-start; }

/* Decorative circles [7:38] / [7:39] — behind the copy, never over it. */
.hero__circle, .hero__arc {
  position: absolute; z-index: 1; border-radius: var(--radius-pill);
  background: var(--color-on-dark); opacity: .06; pointer-events: none;
}
/* Позиции из макета: круг [7:38] @680,120 и дуга [7:39] @−80,320 от панели. */
.hero__circle { width: 220px; height: 220px; left: 680px; top: 120px; }
.hero__arc { width: 260px; height: 260px; left: -80px; top: 320px; }

.hero__media { position: relative; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── upcoming markets [7:54] ──────────────────────────────────────────── */
.markets__head { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-8); min-height: 180px; margin-bottom: var(--space-16); }   /* макет [14:22]: 520×180 */
.markets .filters { margin-bottom: var(--space-32); }

/* ── next to jump [7:168] ─────────────────────────────────────────────── */
.racing-next__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-24); min-height: 106px; }   /* макет [14:132] */
/* Макет набирает 760 + 24 + 560 = 1344 в колонке 1280 — переполнение самого
   макета. Фото держим ровно 560×560, как нарисовано, список отдаёт разницу. */
.racing-next__body { display: grid; grid-template-columns: 760fr 560fr; align-items: start; gap: var(--space-24); min-height: 560px; margin-top: var(--space-32); }   /* макет [14:137]: карточка расписания по контенту (283), фото на всю высоту */
.racing-next__media { align-self: start; height: 560px; border-radius: var(--radius-md); overflow: hidden; }
.racing-next__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── find your competition [7:214] ────────────────────────────────────── */
.competitions__head { min-height: 188px; }   /* макет [14:176] */
.competitions__eyebrow { display: none; }        /* есть только в мобильном фрейме [66:194] */
.competitions__body { display: grid; grid-template-columns: 360fr 520fr 360fr; gap: var(--space-24); min-height: 560px; margin-top: var(--space-32); }   /* макет [14:181] */
.competitions__lead { font-size: var(--fs-sm); line-height: 20px; color: var(--color-muted); }
.comp-list {
  background: var(--color-surface); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden;
}
.comp-list .numbered__note { display: block; }
.comp-list .numbered__title { display: block; }
.competitions__media { border-radius: var(--radius-md); overflow: hidden; }
.competitions__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1199px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__panel { padding: var(--space-32) var(--container-pad); }
  .hero__headline { font-size: 72px; line-height: 76px; }
  .hero__media img { max-height: 360px; }
  .racing-next__body { grid-template-columns: minmax(0, 1fr); }
  .competitions__body { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile frame [66:22]: gradient panel 414px, photo 220px below it. */
@media (max-width: 767px) {
  /* Mobile frame numbers: hero panel 414 + photo 220 [66:23]/[66:34];
     racing header 61, schedule rows 59, photo 200 [66:142]…[66:191];
     the markets section ends before the slip, so its padding closes there. */
  .hero__panel { height: 414px; min-height: 0; }
  .markets { padding-bottom: 0; }
  .markets__slip {
    padding-bottom: var(--section-pad-y);
    margin-inline: calc(var(--container-pad) * -1);   /* купон во всю ширину экрана [66:108] */
  }
  .competitions__head { min-height: 90px; }
  .competitions__lead { font-size: var(--fs-sm); line-height: 18px; }
  .competitions__eyebrow { display: block; }
  .competitions__body { min-height: 0; gap: var(--space-24); margin-top: var(--space-24); }
  .comp-list { min-height: 354px; }   /* 6 строк по 59 [66:199] */
  .competitions__media img { height: 200px; }
  .racing-next__head { min-height: 61px; }
  .schedule { min-height: 236px; }   /* 4 строки по 59 [66:147] */
  .racing-next__body { min-height: 0; gap: var(--space-24); margin-top: var(--space-24); }
  .racing-next__media { height: 200px; }   /* десктопные 560 не должны протекать сюда */
  .racing-next__media img { height: 200px; }
  .schedule__row { min-height: 59px; padding: var(--space-12) var(--space-16); }
  .schedule__row + .schedule__row { min-height: 59px; }
  .hero__panel { min-height: 414px; padding: var(--space-32) var(--container-pad); background: var(--grad-hero-mobile); }
  .hero__inner { gap: var(--space-16); }
  .hero__headline { font-size: 56px; line-height: 50.4px; gap: var(--space-4); }
  .hero__lead { font-size: var(--fs-sm); line-height: 18px; }
  .hero__cta { width: 100%; }
  .hero__media img { height: 220px; }
  .hero__circle, .hero__arc { display: none; }
  .markets__head { min-height: 0; margin-bottom: var(--space-24); }   /* 180px — десктопный бокс [14:22], на мобиле заголовок 80 */
  .racing-next__head { flex-direction: row; align-items: flex-end; gap: var(--space-12); min-height: 61px; }
  .racing-next__head > div { display: flex; flex-direction: column; gap: var(--space-6); flex: 1; }
  .racing-next__word { display: none; }   /* мобильный фрейм пишет просто «View all →» */
  .display--80 { font-size: 36px; line-height: 43.2px; }
}

@media (max-width: 359px) {
  .hero__headline { font-size: 40px; line-height: 40px; }
}