/* Sports — mockup frames betfans-sports-desktop [1:366] / betfans-sports-mobile [68:4].
 *
 * Numbers come from fig-spec: the hero is a full-bleed gradient panel 598 tall
 * with 56/40/80/80 padding, the board sits on the 1280 container, and the
 * featured competition is a 360/896 split with 24 between.
 */

/* ── sports-hero [1:394] / [68:20] ────────────────────────────────────── */
/* The frame is 660 with a 598 gradient inside it, so 62 of page ground closes it. */
.sports-hero { min-height: 660px; padding-bottom: 62px; background: var(--color-bg); }

/* hero-gradient [20:11] — full-bleed, but its copy keeps the container's left
   edge at any width, so the headline never drifts away from the grid. */
.sports-hero__inner {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-24);
  min-height: 598px;
  padding: 56px max(40px, calc((100vw - 1440px) / 2 + 40px))
           80px max(var(--container-pad), calc((100vw - 1440px) / 2 + var(--container-pad)));
  background: var(--grad-hero);
  color: var(--color-on-dark);
}
.sports-hero .eyebrow, .sports-hero__headline, .sports-hero__lead { position: relative; z-index: 2; }

/* grain [20:12] — a white wash at 3% over the gradient */
.sports-hero__grain {
  position: absolute; inset: 0; z-index: 0;
  background: var(--color-on-dark); opacity: .03;
  pointer-events: none;
}
.sports-hero__headline {
  display: flex; flex-direction: column; gap: var(--space-12);
  font-family: var(--font-display); font-weight: 700;
  font-size: 130px; line-height: 117px;
}
.sports-hero__lead { max-width: 1320px; font-size: var(--fs-body); line-height: 24px; color: var(--color-on-dark-70); }

/* accent-arc [20:17] — 260 circle, white at 6%, half outside the left edge */
.sports-hero__arc {
  position: absolute; z-index: 1; left: -80px; top: 320px;
  width: 260px; height: 260px;
  border-radius: var(--radius-pill);
  background: var(--color-on-dark); opacity: .06;
  pointer-events: none;
}

/* ── markets [1:407] = markets-header [20:18] + filters [1:413] ───────── */
/* On desktop the side padding belongs to the section, so each block is exactly
   the 1280 the mockup draws; on mobile the frames run edge to edge and the
   padding moves onto the blocks. */
.markets, .market-list {
  width: 100%; max-width: calc(var(--container) + var(--container-pad) * 2);
  margin-inline: auto;
  background: var(--color-bg);
}
.markets { padding: var(--section-pad-y) var(--container-pad); }
.markets__head { min-height: 180px; }                       /* title [1:409] 1280×180 */
.markets__title { display: flex; flex-direction: column; gap: var(--space-8); }
.markets__filters { min-height: 32px; margin-top: var(--space-32); }

/* The mockup tabs hug their labels and sit 4 apart [1:413]; the shared component
   stretches them, so this page pins them back to content width. */
.markets .filters { gap: var(--space-4); flex-wrap: wrap; }
.markets .filter-tab { flex: 0 0 auto; }

/* ── market-list [1:420] = market-table [21:36] + bet-slip-bar [21:104] ── */
.market-list { padding: 0 var(--container-pad) var(--section-pad-y); }
/* market-table [21:36] is 404: five 80px rows plus the four 1px rules between. */
.market-list .market-row + .market-row { min-height: 81px; }
.market-list__slip { margin-top: var(--space-16); }

/* ── featured competition [1:520] ─────────────────────────────────────── */
.featured__split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--space-24); min-height: 500px; }   /* featured-split [1:521] */

.featured__photo { border-radius: var(--radius-md); overflow: hidden; min-height: 500px; }
.featured__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }

.featured__content {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-24);
  min-height: 500px; padding: 40px;
  border-radius: var(--radius-md);
  background: var(--color-brand); color: var(--color-on-dark);
}
.featured__grain { position: absolute; inset: 0; z-index: 0; background: var(--color-on-dark); opacity: .03; pointer-events: none; }

/* tennis-ball [20:96] — 250 circle at 8%, hanging off the bottom-right corner */
.featured__ball {
  position: absolute; z-index: 0; right: -60px; bottom: -60px;
  width: 250px; height: 250px;
  border-radius: var(--radius-pill);
  background: var(--color-on-dark); opacity: .08;
  pointer-events: none;
}

.featured__eyebrow, .featured__title, .featured__lead, .featured__match, .featured__when { position: relative; z-index: 1; }

.featured__eyebrow { opacity: .7; }
.featured__title { font-family: var(--font-display); font-weight: 700; font-size: 180px; line-height: 216px; }
.featured__lead, .featured__when { font-size: var(--fs-base); line-height: 19.12px; color: var(--color-on-dark-70); }
.featured__match { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12); }
.featured__player { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 43.2px; }
.featured__vs { font-size: var(--fs-xs); font-weight: 700; line-height: 16.39px; color: var(--color-on-dark-50); }

/* ── tablet: no mockup frame, derived from the container and the splits ── */
@media (max-width: 1199px) {
  .sports-hero { min-height: 0; padding-bottom: 0; }
  .sports-hero__inner { min-height: 0; padding: var(--space-48) var(--container-pad); }
  .sports-hero__headline { font-size: 88px; line-height: 82px; }
  .sports-hero__arc { top: auto; bottom: -80px; }
  .featured__split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .featured__photo { min-height: 320px; }
  .featured__content { min-height: 0; }
  .featured__title { font-size: 120px; line-height: 132px; }
}

/* ── mobile frame [68:4] ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* hero [68:20]: the section is the gradient, 362 tall, 40/20 padding, 20 gap */
  .sports-hero { min-height: 362px; padding-bottom: 0; }
  .sports-hero__inner { min-height: 362px; padding: 40px var(--container-pad); gap: var(--space-20); }
  .sports-hero__headline { font-size: 62px; line-height: 55.8px; gap: 0; }
  .sports-hero__lead { font-size: var(--fs-base); line-height: 20px; }
  .sports-hero__arc { width: 120px; height: 120px; left: -40px; top: 260px; bottom: auto; }

  /* markets-heading [68:31] 390×132 — 32/8 padding around two 46px lines */
  .markets { padding: 0; }
  .markets__head { min-height: 132px; padding: var(--space-32) var(--container-pad) var(--space-8); }
  .markets__title { min-height: 92px; gap: 0; font-size: var(--fs-h2); line-height: 46px; }

  /* filters [68:34] 390×122 — 12/16 padding around two 44px rows, 6 apart */
  .markets__filters { min-height: 122px; margin-top: 0; padding: var(--space-12) var(--container-pad) var(--space-16); }
  .markets .filters { gap: var(--space-6); }
  .markets .filter-tab { min-height: 44px; }

  /* market-list [68:47] 390×833 closes with 24; bet-slip-container [68:121]
     390×485 opens with 8 and holds a 445 bar [68:122] with the note inside it. */
  .market-list { padding: 0; }
  .market-list__board { min-height: 833px; padding: 0 var(--container-pad) var(--space-24); }
  .market-list__slip { min-height: 485px; margin-top: 0; padding: var(--space-8) var(--container-pad) var(--space-32); }
  .market-list .bet-slip { min-height: 445px; }

  /* event-row [68:49 …]: the mockup fixes the card at 153, and at 173 where the
     fixture title runs to two lines; the 1px rule adds to every row but the first. */
  .market-list .market-row { min-height: 153px; }
  .market-list .market-row + .market-row { min-height: 154px; }
  .market-list .market-row:nth-child(3), .market-list .market-row:nth-child(4) { min-height: 174px; }

  /* featured-competition [68:156]: copy first, photo under it, no gap */
  .featured { padding-block: var(--space-12) 40px; }
  .featured__split { gap: 0; }
  .featured__photo { order: 2; min-height: 0; border-radius: var(--radius-2xl); }
  .featured__photo img { height: 320px; }
  .featured__content { order: 1; padding: var(--space-24); gap: var(--space-20); border-radius: 0; }
  .featured__title { font-size: 70px; line-height: 63px; }
  .featured__match { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .featured__player { font-size: var(--fs-h4); line-height: 34px; }
  .featured__ball { width: 140px; height: 140px; right: -30px; bottom: -20px; }
}