/* Home page — frames homepage (5:4) and mobile-homepage (33:5). Numbers from fig-spec. */

/* ── 03 editorial hero ────────────────────────────────────────────────── */
.hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 520px; padding: 64px var(--container-pad);
  background: var(--color-purple); overflow: hidden;
}
.hero__content { display: flex; flex-direction: column; gap: 32px; width: 700px; max-width: 100%; }
.hero__text { display: flex; flex-direction: column; gap: 16px; }
.hero__eyebrow { font-weight: 800; font-size: 14px; line-height: 18px; text-transform: uppercase; color: var(--color-brand); }
.hero__title { font-family: var(--font-display); font-size: 56px; line-height: 60px; text-transform: uppercase; color: var(--color-text); }
.hero__lead { font-size: 16px; line-height: 24px; color: var(--color-card-3); }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__media { flex: 0 0 480px; width: 480px; height: 380px; position: relative; }
.hero__media picture, .hero__media img { display: block; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--color-brand); pointer-events: none; }   /* Figma 5:49: 2px INSIDE stroke over the photo (a shadow on the box itself paints under the image) */

/* ── 04 sport selector bar ────────────────────────────────────────────── */
.sportbar {
  display: flex; align-items: center; gap: 8px; height: 60px; padding-inline: var(--container-pad);
  background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border);
}
.sportbar__label { flex: none; margin-right: 8px; font-weight: 800; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-muted-2); }
.sportbar__list { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* ── 05–06 sportsbook: markets + bet slip ─────────────────────────────── */
.book {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 24px; row-gap: 24px;
  align-items: start; padding: 48px var(--container-pad) 64px; background: var(--color-bg);
}
.book__head { grid-column: 1; display: flex; flex-direction: column; gap: 8px; }
.book__intro { display: flex; flex-direction: column; gap: 8px; }
.book__title { font-family: var(--font-display); font-size: 28px; line-height: 30px; text-transform: uppercase; color: var(--color-text); }
.book__lead { font-size: 14px; line-height: 18px; color: var(--color-muted); }
.book__filters { display: flex; gap: 8px; padding: 8px 0 0; }   /* frame is 41 fixed: the bottom 8 is clipped in the mockup */
.book__filters .pill { padding: 8px 16px; color: var(--color-muted); }
.book__filters .pill.is-active { color: var(--color-text); }
.book__feed { display: contents; }                          /* desktop: the feed and the slip sit in the grid directly */
.book .markets { grid-column: 1; grid-row: 2; }
.book .markets__empty { grid-column: 1; grid-row: 2; }
.book .betslip { grid-column: 2; grid-row: 1 / 3; position: sticky; top: 96px; }

/* ── 07 racing ────────────────────────────────────────────────────────── */
.racing { display: flex; flex-direction: column; gap: 24px; padding: 56px var(--container-pad); background: var(--color-purple); }
.racing__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.racing__titles { display: flex; flex-direction: column; gap: 4px; }
.racing__title { font-family: var(--font-display); font-size: 32px; line-height: 35px; text-transform: uppercase; color: var(--color-text); }
.racing__eyebrow { font-weight: 800; font-size: 14px; line-height: 18px; text-transform: uppercase; color: var(--color-brand); }
.racing__all { padding: 8px 16px; font-size: 12px; line-height: 16px; }
.racecards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.racecard { display: flex; }
.racecard__link {
  display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 20px;
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.racecard__link:hover { box-shadow: inset 0 0 0 1px var(--color-brand); transform: translateY(-2px); }
.racecard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 23px; }
.racecard__min { font-family: var(--font-mono); font-weight: 900; font-size: 18px; line-height: 23px; color: var(--color-brand); }
.racecard__code { display: inline-flex; padding: 2px 6px; background: var(--color-surface-2); font-weight: 800; font-size: 9px; line-height: 12px; text-transform: uppercase; color: var(--color-muted); }
.racecard__bottom { display: flex; flex-direction: column; gap: 2px; }
.racecard__track { font-family: var(--font-display); font-size: 14px; line-height: 15px; text-transform: uppercase; color: var(--color-text); }
.racecard__race { font-size: 12px; line-height: 16px; color: var(--color-muted); }

/* ── 08 explore sports ────────────────────────────────────────────────── */
.explore { display: flex; flex-direction: column; gap: 32px; padding: 64px var(--container-pad); background: var(--color-bg); }
.explore__title { font-family: var(--font-display); font-size: 28px; line-height: 30px; text-transform: uppercase; color: var(--color-text); }
.dir { display: flex; flex-direction: column; }
.dir__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 20px 16px;
  box-shadow: inset 0 -1px 0 var(--color-border);
  transition: background-color var(--dur-fast) var(--ease);
}
.dir__row:hover { background: var(--color-surface); }
.dir__left { display: flex; align-items: center; gap: 32px; }
.dir__num { font-family: var(--font-mono); font-weight: 800; font-size: 16px; line-height: 21px; color: var(--color-purple-light); }
.dir__name { font-family: var(--font-display); font-size: 24px; line-height: 26px; text-transform: uppercase; color: var(--color-text); }
.dir__count { font-size: 14px; line-height: 18px; color: var(--color-muted); }
.dir__link { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-brand); text-decoration: none; }
.dir__link:hover { text-decoration: underline; }
.dir__arrow { width: 16px; height: 16px; }

/* ── 09 featured AFL ──────────────────────────────────────────────────── */
.featured { display: flex; min-height: 180px; padding-left: var(--container-pad); background: var(--color-surface); box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); overflow: hidden; }   /* the pad sits on the full-width section, so the wide-screen % pad resolves against the viewport */
.featured__info { display: flex; flex-direction: column; justify-content: center; gap: 12px; flex: 1; padding: 32px 32px 32px 0; }
.featured__eyebrow { display: flex; align-items: center; gap: 8px; }
.featured__tag { padding: 2px 6px; border-radius: 0; font-size: 10px; line-height: 13px; }
.featured__sport { font-weight: 700; font-size: 12px; line-height: 16px; color: var(--color-brand); }
.featured__titles { display: flex; flex-direction: column; gap: 2px; max-width: 404px; }
.featured__title { font-family: var(--font-display); font-size: 22px; line-height: 24px; text-transform: uppercase; color: var(--color-text); }
.featured__text { font-size: 13px; line-height: 17px; color: var(--color-muted); }
.featured__action { display: flex; align-items: center; gap: 32px; padding: 0 var(--container-pad) 0 32px; }
.featured__btn { font-size: 13px; line-height: 17px; }
.featured__img { flex: none; width: 240px; height: 180px; }
.featured__img img { width: 100%; height: 100%; object-fit: cover; }

/* ── 10 educational ───────────────────────────────────────────────────── */
.edu { display: flex; gap: 48px; min-height: 393px; padding: 64px var(--container-pad); background: var(--color-bg); }
.edu__left { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; }
.edu__head { display: flex; flex-direction: column; gap: 8px; max-width: 700px; }
.edu__eyebrow { font-weight: 800; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-brand); }
.edu__title { font-family: var(--font-display); font-size: 32px; line-height: 36px; text-transform: uppercase; color: var(--color-text); }
.edu__text { font-size: 15px; line-height: 22px; color: var(--color-muted); }
.edu__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.edu__btn { padding: 12px 24px; font-weight: 700; font-size: 13px; line-height: 17px; text-transform: none; }
.edu__btn--fill { background: var(--color-surface-2); color: var(--color-text); }
.edu__btn--fill:hover { background: var(--color-border-2); }
.edu__formula { display: flex; flex-direction: column; gap: 16px; flex: 0 0 500px; padding: 32px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); align-self: flex-start; }
.edu__formula-title { font-family: var(--font-display); font-size: 16px; line-height: 17px; text-transform: uppercase; color: var(--color-text); }
.edu__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border); }   /* Figma LINE: 1px paint, 0 in flow */
.edu__formula-body { display: flex; flex-direction: column; gap: 8px; }
.edu__formula-eq { font-family: var(--font-mono); font-weight: 800; font-size: 20px; line-height: 26px; text-transform: uppercase; color: var(--color-brand); }
.edu__formula-text { font-size: 13px; line-height: 17px; color: var(--color-muted); }

/* ── mobile (390 frame) ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .hero { flex-direction: column; align-items: stretch; gap: 20px; min-height: 0; padding: 32px var(--container-pad); }
  .hero__content { width: auto; gap: 20px; }
  .hero__text { gap: 12px; }
  .hero__eyebrow { font-size: 12px; line-height: 16px; letter-spacing: 1.2px; }
  .hero__title { font-size: 32px; line-height: 36px; }
  .hero__lead { font-size: 14px; line-height: 20px; color: var(--color-card-2); }
  .hero__actions { flex-direction: column; gap: 10px; }
  .hero__cta { padding: 14px 24px; min-height: 45px; font-size: 13px; line-height: 17px; }
  .hero__media { flex: none; width: 100%; height: 200px; }
  .hero__media::after { box-shadow: inset 0 0 0 1px var(--color-brand); }

  .sportbar { height: 54px; overflow-x: auto; scrollbar-width: none; }
  .sportbar::-webkit-scrollbar { display: none; }
  .sportbar__label { margin-right: 0; font-size: 11px; line-height: 14px; }
  .sportbar .pill { padding: 8px 12px; font-size: 12px; line-height: 16px; color: var(--color-muted); }
  .sportbar .pill.is-active { color: var(--color-text); }
  .sportbar__racing { display: none; }

  .book { display: block; padding: 0; }
  .book__head { gap: 16px; padding: 24px var(--container-pad) 12px; }
  .book__intro { gap: 6px; }
  .book__title { font-size: 22px; line-height: 24px; }
  .book__lead { font-size: 13px; line-height: 17px; }
  .book__filters { padding: 0; }
  .book__filters .pill { padding: 6px 14px; font-size: 12px; line-height: 16px; }
  .book__feed { display: flex; flex-direction: column; gap: 16px; padding: 0 var(--container-pad) 24px; }
  .book .betslip { position: static; }

  .racing { gap: 16px; padding: 16px var(--container-pad); }
  .racing__titles { gap: 2px; }
  .racing__title { font-size: 20px; line-height: 22px; }
  .racing__eyebrow { font-size: 12px; line-height: 16px; }
  .racing__all { padding: 8px 12px; font-size: 11px; line-height: 14px; }
  .racecards { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .racecards::-webkit-scrollbar { display: none; }
  .racecard { flex: 0 0 138px; display: flex; }
  .racecard__link { gap: 10px; padding: 12px; }
  .racecard__top { min-height: 18px; }
  .racecard__min { font-size: 14px; line-height: 18px; }
  .racecard__code { padding: 2px 4px; font-size: 8px; line-height: 10px; }   /* 8px as drawn: 9px pushes "05 MIN" onto two lines in the 138px card */
  .racecard__min { white-space: nowrap; }
  .racecard__top { gap: 4px; }
  .racecard__track { font-size: 11px; line-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .racecard__race { font-size: 11px; line-height: 14px; }

  .explore { gap: 16px; padding: 24px var(--container-pad); }
  .explore__title { font-size: 22px; line-height: 24px; }
  .dir { box-shadow: inset 0 0 0 1px var(--color-border); }
  .dir__row { min-height: 50px; padding: 16px; box-shadow: inset 0 0 0 1px var(--color-border); }
  .dir__left { gap: 16px; }
  .dir__num { font-size: 14px; line-height: 18px; color: var(--color-purple); }
  .dir__name { font-size: 16px; line-height: 17px; }
  .dir__count { font-size: 12px; line-height: 16px; }
  .dir__link { font-size: 12px; line-height: 16px; }
  .dir__arrow { display: none; }

  .featured { flex-direction: column; gap: 16px; min-height: 0; padding: 16px var(--container-pad); box-shadow: inset 0 0 0 1px var(--color-border); }
  .featured__info { justify-content: flex-start; gap: 8px; padding: 0; }
  .featured__eyebrow { gap: 6px; }
  .featured__tag { border-radius: var(--radius-xs); font-size: 11px; line-height: 14px; }
  .featured__titles { max-width: none; gap: 8px; }
  .featured__title { font-size: 20px; line-height: 22px; }
  .featured__action { flex-direction: column; align-items: stretch; gap: 16px; padding: 0; }
  .featured__btn { min-height: 45px; padding: 14px 0; }
  .featured__img { width: 100%; height: 180px; border-radius: var(--radius-md); overflow: hidden; }

  .edu { flex-direction: column; gap: 20px; min-height: 0; padding: 16px var(--container-pad); }
  .edu__left { gap: 8px; }
  .edu__head { gap: 8px; }
  .edu__title { font-size: 20px; line-height: 24px; }
  .edu__text { font-size: 13px; line-height: 18px; }
  .edu__actions { gap: 8px; margin-top: 12px; }
  .edu__btn { flex: 1; min-height: 36px; padding: 10px 14px; font-size: 12px; line-height: 16px; }
  .edu__btn--fill { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
  .edu__formula { flex: none; gap: 8px; padding: 16px; align-self: stretch; }
  .edu__formula-title { font-size: 12px; line-height: 13px; }
  .edu__formula-body { gap: 8px; }
  .edu__formula-eq { font-size: 14px; line-height: 18px; }
  .edu__formula-text { font-size: 12px; line-height: 16px; }
}

/* Figma 5:95: on the desktop home feed the taken price is red with white text (sports, racing and the 390 frame keep the yellow) */
@media (min-width: 1200px) {
  .markets .odd[aria-pressed="true"] { background: var(--color-red); box-shadow: inset 0 0 0 1px var(--color-red); }
  .markets .odd[aria-pressed="true"] .odd__name, .markets .odd[aria-pressed="true"] .odd__price { color: var(--color-text); }
}