/* Home — betaces-homepage (1440) / betaces-homepage-mobile (390).
 * Section numbers below are the mockup's own frame names. */

/* ── 02-editorial-hero ────────────────────────────────────────────────── */
.hero {
  position: relative; display: flex; height: 780px;
  background: var(--color-cream);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.hero__left {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 55.556%; flex: none; padding: 64px 48px 64px var(--section-gutter);
}
.hero__eyebrow { font-size: var(--fs-meta); line-height: 16px; color: var(--color-brand); }
.hero__title {
  margin-top: var(--space-8);
  font-size: var(--fs-display); font-weight: 700; line-height: 95px;
  letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--color-ink);
}
.hero__index { display: grid; gap: var(--space-12); }
.hero__index a {
  font-family: var(--font-display); font-size: var(--fs-card); font-weight: 700;
  line-height: 24.25px; color: var(--color-ink); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.hero__index a:hover { color: var(--color-brand); }
.hero__bottom { display: grid; gap: var(--space-32); }
.hero__lede { max-width: 340px; font-size: var(--fs-ui); line-height: 18px; color: var(--color-muted); }
.hero__links { display: flex; gap: var(--space-24); }

.hero__media { position: relative; flex: 1; min-width: 0; }
.hero__photo, .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__photo img { object-fit: cover; }

.hero__watermark {
  /* 700 из 1440 — долей, иначе на широком экране знак уезжает в середину текста */
  position: absolute; top: 80px; left: 48.611%; z-index: 1;
  width: 400px; height: 560px; color: var(--color-ink); opacity: .06; pointer-events: none;
}
.hero__watermark .icon { width: 100%; height: 100%; }

.hero-widget {
  position: absolute; right: 40px; bottom: 40px; z-index: 2;
  display: grid; gap: var(--space-16); width: 340px; padding: var(--space-24);
  background: var(--color-brand); border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-brand-deep);
}
.hero-widget__badge {
  display: flex; justify-content: space-between; gap: var(--space-16);
  font-size: var(--fs-label); line-height: 14.3px; color: var(--color-cream);
}
.hero-widget__badge span:first-child { color: var(--color-accent); }
.hero-widget__title {
  font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 700;
  line-height: 30px; color: var(--color-cream);
}
.hero-widget__market { margin-top: var(--space-4); font-size: var(--fs-meta); line-height: 16px; color: var(--color-cream); }
.hero-widget__odds { display: flex; gap: var(--space-8); }
.hero-widget__cta { display: block; font-size: var(--fs-meta); line-height: 16px; }

/* ── 03-markets-section ───────────────────────────────────────────────── */
.markets {
  display: flex; gap: var(--space-40);
  padding: var(--section-pad-y) var(--section-gutter);
  background: var(--color-page);
}
.markets__view { width: 880px; flex: none; display: grid; gap: var(--space-40); align-content: start; }
.markets__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.markets__h {
  margin-top: var(--space-8);
  font-size: var(--fs-h2); font-weight: 700; line-height: 86.21px;
  letter-spacing: var(--ls-h1); color: var(--color-ink);
}
.eyebrow--accent { color: var(--color-accent); }

.tabs { display: flex; align-items: center; gap: var(--space-16); }
.tab {
  padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--color-ink); }
.tab.is-active { color: var(--color-brand); border-color: var(--color-brand); font-weight: 700; }

.markets__grid { display: flex; align-items: flex-start; gap: var(--space-24); }
.markets__stack { display: grid; gap: var(--space-16); width: 340px; flex: none; align-content: start; }

.event-card { background: var(--color-cream); border-radius: 0; }
.event-card--featured { width: 516px; flex: none; }
.event-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: 20px; background: var(--color-page);
}
.event-card__league {
  font-family: var(--font-display); font-size: var(--fs-body-sm); font-weight: 700;
  line-height: 19px; color: var(--color-ink);
}
.event-card__when { font-size: var(--fs-meta); line-height: 16px; color: var(--color-brand); }
.event-card__body { display: grid; gap: 28px; padding: 28px; }
.event-card__teams {
  font-family: var(--font-display); font-size: 36px; font-weight: 700; line-height: 48.49px;
  color: var(--color-ink);
}
.event-card__odds { display: flex; gap: var(--space-12); }
.event-card__odds--sm { gap: var(--space-8); }
.event-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted);
}
.event-card__foot .link-brand { font-size: var(--fs-ui); line-height: 17px; }

.event-card--sm { display: grid; gap: var(--space-12); padding: 20px; }
.event-card__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  font-size: var(--fs-label); line-height: 14.3px; color: var(--color-muted);
}
.event-card__meta .link-brand { font-size: var(--fs-label); line-height: 14.3px; }
.event-card__name {
  font-family: var(--font-display); font-size: var(--fs-card); font-weight: 700;
  line-height: 24.25px; color: var(--color-ink);
}

/* ── 04-racing-section ────────────────────────────────────────────────── */
.racing-strip {
  display: flex; gap: 0; padding: var(--section-pad-y-sm) var(--container-pad);
  background: var(--color-cream);
}
.racing-strip__left { display: flex; flex-direction: column; justify-content: space-between; width: 320px; flex: none; }
.racing-strip__h {
  font-size: var(--fs-h1); font-weight: 700; line-height: 97px; letter-spacing: var(--ls-h1);
  text-transform: uppercase; color: var(--color-ink);
}
.racing-strip__kicker { margin-top: var(--space-12); font-size: var(--fs-ui); line-height: 17px; color: var(--color-brand); }
.racing-strip__actions { display: grid; gap: var(--space-8); }
.racing-strip__note { font-size: var(--fs-ui); line-height: 18px; color: var(--color-muted); }

.race-list { flex: 1; display: grid; gap: var(--space-16); align-content: start; padding: 0 var(--space-40); }
.race-row {
  display: flex; align-items: center; gap: var(--space-16);
  height: 68px; padding: var(--space-16);
  background: var(--color-page); border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-border);
  text-decoration: none; color: inherit;
  transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.race-row:hover { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-brand); }
.race-row__min {
  width: 64px; flex: none;
  font-size: var(--fs-card); font-weight: 800; line-height: 23.4px; color: var(--color-brand);
}
.race-row__where { display: grid; gap: 2px; }
.race-row__track { font-size: var(--fs-body-sm); font-weight: 700; line-height: 18.2px; color: var(--color-ink); }
.race-row__detail { font-size: var(--fs-meta); line-height: 16px; color: var(--color-muted); }
.race-row__type {
  margin-left: auto; padding: 4px var(--space-8);
  background: var(--color-ink); color: var(--color-cream);
  font-size: var(--fs-nano); font-weight: 700; line-height: 12px;
}
.race-row__type--greyhounds { background: var(--color-muted); }

.racing-strip__media { width: 400px; height: 400px; flex: none; }
.racing-strip__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── 05-explore-sports-directory ──────────────────────────────────────── */
.directory {
  display: grid; gap: var(--space-48);
  padding: var(--section-pad-y) var(--container-pad);
  background: var(--color-brand); color: var(--color-cream);
}
.directory__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-40); }
.directory__h {
  margin-top: var(--space-12);
  font-size: var(--fs-h3); font-weight: 700; line-height: 75.43px; letter-spacing: -1px;
}
.directory__note { width: 280px; flex: none; font-size: var(--fs-body-sm); line-height: 18px; }

.dir-row {
  display: flex; align-items: center; gap: var(--space-32);
  padding: 28px 0; box-shadow: inset 0 1px 0 var(--color-brand-deep);
  text-decoration: none; color: inherit;
  transition: padding-left var(--dur-base) var(--ease);
}
.directory__rows > li:last-child .dir-row { box-shadow: inset 0 1px 0 var(--color-brand-deep), inset 0 -1px 0 var(--color-brand-deep); }
.dir-row__num { font-size: var(--fs-h6); line-height: 21px; color: var(--color-accent); }
.dir-row__name { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; line-height: 43.1px; }
.dir-row__count { margin-left: auto; font-size: var(--fs-body-sm); line-height: 18.2px; }
.dir-row__arrow {
  font-size: var(--fs-h6); line-height: 21px; color: var(--color-accent);
  transition: transform var(--dur-fast) var(--ease);
}
.dir-row:hover .dir-row__arrow { transform: translateX(6px); }
.dir-row:hover .dir-row__name { color: var(--color-accent); }

/* ── 06-featured-editorial-banner ─────────────────────────────────────── */
.featured {
  display: grid; gap: var(--space-24);
  padding: var(--section-pad-y-sm) var(--container-pad);
  background: var(--color-cream);
}
.featured__h {
  margin-top: var(--space-8);
  font-size: var(--fs-h4); font-weight: 700; line-height: 54px; letter-spacing: var(--ls-h4);
  text-transform: uppercase; color: var(--color-ink);
}
.featured__showcase {
  position: relative; height: 380px; overflow: hidden; border-radius: var(--radius-sm);
}
.featured__photo, .featured__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.featured__photo img { object-fit: cover; }
.featured__plate {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  display: flex; align-items: center; gap: var(--space-40);
  height: 78px; padding: var(--space-24);
  background: var(--color-brand); color: var(--color-cream);
}
.featured__plate-text { font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 700; line-height: 30px; }

/* The responsible-wagering editorial lives in components.css — it is on every
   page. Home draws it with 120px of vertical padding instead of the 96 the rest
   of the site uses. */
.rg-editorial { padding-block: var(--section-pad-y); }
.rg-menu__item { padding-block: var(--space-24); }

/* ── mobile: betaces-homepage-mobile (390) ───────────────────────────────
   Numbers below are that frame's own; the desktop block above is untouched. */
@media (max-width: 1199px) {
  .hero { flex-direction: column; height: auto; box-shadow: none; }
  .hero__left {
    display: grid; gap: var(--space-20); width: auto;
    padding: 32px var(--container-pad-mobile) 24px;
  }
  .hero__meta { display: grid; gap: 6px; }
  .hero__eyebrow { font-size: var(--fs-label); line-height: 14.3px; }
  .hero__title { margin: 0; font-size: 54px; line-height: 48px; letter-spacing: -1.5px; }
  .hero__index {
    display: flex; flex-wrap: wrap; gap: var(--space-12);
    font-family: var(--font-display);
  }
  .hero__index a { font-size: var(--fs-label); line-height: 15px; }
  .hero__index li + li a { color: var(--color-muted); }
  .hero__bottom { display: grid; gap: var(--space-20); }
  .hero__lede { max-width: none; font-size: var(--fs-ui); line-height: 18px; }
  .hero__links { gap: var(--space-20); }
  .hero__links a { font-size: var(--fs-ui); line-height: 17px; text-transform: uppercase; }

  .hero__media {
    display: flex; align-items: flex-end; justify-content: center;
    width: auto; flex: none; height: 420px; padding-bottom: 24px;
  }
  .hero__watermark { display: none; }
  .hero-widget {
    position: relative; right: auto; bottom: auto; z-index: 2;
    width: 310px; gap: var(--space-12); padding: var(--space-16);
  }
  .hero-widget__badge { font-size: var(--fs-micro); line-height: 13px; }
  .hero-widget__title { font-size: var(--fs-card); line-height: 24.25px; }
  .hero-widget__market { display: none; }         /* not drawn on the mobile frame */
  .hero-widget__odds .odd { height: 32px; }
  .hero-widget__cta { font-size: var(--fs-label); line-height: 14.3px; }

  /* 03-markets-section */
  .markets {
    flex-direction: column; gap: var(--space-24);
    padding: 48px var(--container-pad-mobile);
  }
  /* minmax(0,1fr): дорожка auto растягивается по min-content ребёнка, и на 320
     секция выезжала за экран. */
  .markets__view { width: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .markets__header { flex-direction: column; align-items: stretch; gap: var(--space-24); }
  .markets__titles { display: grid; gap: var(--space-8); }
  .eyebrow { font-size: var(--fs-label); line-height: 14.3px; }
  .markets__h { margin: 0; font-size: 38px; line-height: 51.19px; letter-spacing: -1px; }
  .tabs { gap: var(--space-12); height: 20px; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 0 0 4px; font-size: var(--fs-meta); line-height: 16px; white-space: nowrap; }

  .markets__grid { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .event-card--featured { width: auto; box-shadow: inset 0 0 0 1px var(--color-border); border-radius: var(--radius-sm); }
  .event-card__head { padding: var(--space-12); }
  .event-card__league { font-size: var(--fs-label); line-height: 15px; }
  .event-card__when { font-size: var(--fs-micro); line-height: 13px; }
  .event-card__body { gap: var(--space-16); padding: var(--space-16); }
  .event-card__teams { font-size: var(--fs-h6); line-height: 30px; }
  .event-card__odds { gap: var(--space-8); }
  .odd--lg { height: 41px; padding: 0 var(--space-12); font-size: var(--fs-meta); line-height: 16px; }
  .odd--lg .odd__value { font-size: var(--fs-ui); line-height: 17px; }
  .event-card__foot { font-size: var(--fs-label); line-height: 14.3px; }
  .event-card__foot .link-brand { font-size: var(--fs-label); line-height: 14.3px; }

  .markets__stack { width: auto; gap: var(--space-12); }
  .event-card--sm {
    gap: var(--space-12); padding: var(--space-16);
    border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border);
  }
  .event-card__meta { font-size: var(--fs-micro); line-height: 13px; }
  .event-card__meta .link-brand { font-size: var(--fs-micro); line-height: 13px; }
  .event-card__name { font-size: 16px; line-height: 22px; }
  .odd--sm { height: 34px; }

  /* 04-racing-section */
  .racing-strip {
    flex-direction: column; gap: var(--space-24);
    padding: 48px var(--container-pad-mobile);
    box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border);
  }
  .racing-strip__left { display: contents; }
  .racing-strip__title-cluster { display: grid; gap: var(--space-8); }
  .racing-strip__h { font-size: 36px; line-height: 48.49px; letter-spacing: -1px; }
  .racing-strip__kicker { order: -1; margin: 0; font-size: var(--fs-label); line-height: 14.3px; }
  .racing-strip__actions { display: contents; }
  .racing-strip__note { display: none; }          /* not drawn on the mobile frame */
  .racing-strip__media { order: 2; width: auto; height: 240px; }
  .race-list { order: 3; gap: 0; padding: 0; }
  .race-row {
    height: 60px; padding: 14px 0; gap: var(--space-12);
    background: transparent; border-radius: 0;
    box-shadow: inset 0 -1px 0 var(--color-border);
  }
  .race-row:hover { background: transparent; box-shadow: inset 0 -1px 0 var(--color-brand); }
  .race-row__min { width: 57px; font-size: 16px; line-height: 21px; }
  .race-row__track { font-size: var(--fs-ui); line-height: 17px; }
  .race-row__detail { font-size: var(--fs-label); line-height: 14.3px; }
  .race-row__type { padding: 3px 6px; font-size: 8px; line-height: 10.4px; }
  .racing-strip .racing-strip__all { order: 4; font-size: var(--fs-ui); line-height: 17px; }

  /* 05-explore-sports-directory */
  .directory { gap: var(--space-32); padding: 64px var(--container-pad-mobile); }
  .directory__head { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .directory__head > div { display: grid; gap: var(--space-12); }
  .directory__h { margin: 0; font-size: 42px; line-height: 42px; }
  .directory__note { width: auto; font-size: var(--fs-ui); line-height: 17px; }
  .dir-row { gap: var(--space-16); padding: 18px 0; }
  .dir-row__num { font-size: var(--fs-ui); line-height: 17px; }
  .dir-row__name { font-size: var(--fs-title); line-height: 27px; }
  .dir-row__count { font-size: var(--fs-meta); line-height: 16px; }
  .dir-row__arrow { font-size: var(--fs-body-sm); line-height: 18.2px; }

  /* 06-featured-editorial-banner */
  .featured { gap: var(--space-20); padding: 48px var(--container-pad-mobile); }
  .featured__head { display: grid; gap: 6px; }
  .featured__h { margin: 0; font-size: var(--fs-h5); line-height: 43px; }
  .featured__showcase { height: 280px; }
  .featured__plate { height: 40px; padding: 0 var(--space-12); gap: var(--space-12); }
  .featured__plate-text { font-size: var(--fs-label); line-height: 15px; }
  .featured__plate .link-accent { font-size: var(--fs-label); line-height: 14.3px; }

  /* На главной купон остаётся в потоке — макет рисует его внутри секции
     рынков. Нижний лист (.slip--sheet) — в components.css, он общий для
     sports и racing. */
}

/* Below the mobile frame width the only job is not to break. */
@media (max-width: 389px) {
  .hero__index { gap: var(--space-8); }
  .event-card__odds { flex-wrap: wrap; }
  .dir-row { gap: var(--space-12); }
}