/* ==========================================================================
   Page-specific styles
   ========================================================================== */

/* ---------- shared page intro (sports / racing) ---------- */
.intro { border-bottom: 1px solid var(--line); }
.intro__in { display: flex; align-items: center; gap: 32px; padding-top: 40px; padding-bottom: 32px; }
.intro__left { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.intro__left .hero-title { margin-top: 0; }
.intro__left .lead { max-width: 733px; }

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 599fr) minmax(0, 841fr); max-width: var(--wrap); margin: 0 auto; background: var(--bg); }
.hero__left { display: flex; flex-direction: column; gap: 28px; padding: 48px 32px 48px var(--gutter); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero__text { display: flex; flex-direction: column; gap: 12px; }
.hero__eyebrow { font: 700 11px var(--f-sans); letter-spacing: 2px; color: var(--red); }
.hero__title { font: 700 54px/52px var(--f-narrow); color: #fff; }
.hero__lead { font: 400 13px/20px var(--f-sans); color: var(--gray); }
.hero__ctas { display: flex; align-items: center; gap: 16px; }
.hero__right { position: relative; min-height: 440px; background: linear-gradient(rgba(12,13,14,.35), rgba(12,13,14,.35)), url('../img/hero-afl.jpg') center/cover no-repeat; border-bottom: 1px solid var(--line); }
.hero__num { position: absolute; right: 32px; top: 24px; font: 700 120px var(--f-narrow); color: rgba(255,255,255,.08); line-height: normal; }
.hero__match { position: absolute; left: 32px; bottom: 32px; width: 340px; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--ink); border: 1px solid var(--red); border-radius: 2px; }
.hero__match-meta { display: flex; justify-content: space-between; align-items: center; }
.hero__match-time { font: 400 11px var(--f-mono); color: var(--gray); }
.hero__match-teams { display: flex; flex-direction: column; gap: 2px; }
.hero__match-teams b { font: 700 18px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.hero__match-teams span { font: 400 12px var(--f-sans); color: var(--gray); }
.hero__match-odds { display: flex; gap: 8px; }
.hero__match-odds .odd { padding: 0 8px; height: 32px; background: var(--bg-2); border-radius: 0; }
.hero__match-odds .odd__label { font-size: 10px; }
.hero__match-odds .odd__num { font-weight: 700; font-size: 12px; }
/* mobile hero pieces */
.hero__m-featured { display: none; }

.qindex { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.qindex__in { display: flex; align-items: center; gap: 12px; height: 64px; }
.qindex__label { flex: none; width: 120px; font: 700 12px var(--f-narrow); letter-spacing: 1.5px; color: var(--gray); }
.qindex__items { flex: 1; min-width: 0; display: flex; gap: 8px; overflow: auto; scrollbar-width: none; }
.qindex__items::-webkit-scrollbar { display: none; }
.qindex__item { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid transparent; border-radius: 2px; transition: border-color .15s, background-color .15s; }
.qindex__item:hover { background: var(--ink); }
.qindex__item.is-active { background: var(--ink); border-color: var(--red); }
.qindex__num { font: 400 10px var(--f-mono); color: var(--gray-2); }
.qindex__item.is-active .qindex__num { color: var(--red); }
.qindex__name { font: 700 14px var(--f-narrow); letter-spacing: .5px; color: var(--gray); }
.qindex__item.is-active .qindex__name { color: #fff; }
.qindex__count { font: 400 11px var(--f-sans); color: var(--gray-2); }

.core { padding: 40px 0; }
.core__in { display: flex; gap: 32px; align-items: flex-start; }
.core__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.core__side { flex: none; width: 356px; position: sticky; top: 80px; }
.ws-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.ws-head__title { display: flex; flex-direction: column; gap: 6px; }
.ws-head__title h2 { font: 700 32px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.board { display: flex; flex-direction: column; gap: 16px; }
.cat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; }
.cat__head { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--bg-3); border-bottom: 1px solid var(--line); }
.cat__head-left { display: flex; align-items: center; gap: 8px; }
.cat__sport { font: 700 16px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.cat__league { font: 400 12px var(--f-sans); color: var(--gray); }
.cat__more { font: 700 12px var(--f-sans); color: var(--red); white-space: nowrap; }
.ev { display: flex; align-items: center; gap: 24px; padding: 16px; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev__meta { flex: none; width: 180px; display: flex; flex-direction: column; gap: 4px; }
.ev__time { font: 400 11px var(--f-mono); color: var(--gray); }
.ev__time b { font-weight: 700; color: var(--red); }
.ev__market { font: 400 12px var(--f-sans); color: var(--gray-2); }
.ev__teams { flex: none; width: 220px; display: flex; flex-direction: column; gap: 2px; }
.ev__teams span { font: 700 14px var(--f-sans); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev__odds { flex: 1; min-width: 0; display: flex; gap: 8px; }
.ev__more { flex: none; width: 100px; text-align: right; font: 700 12px var(--f-sans); color: var(--gray); }
.ev__more:hover { color: var(--cream); }

.racing { padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.racing__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.racing__head-text { display: flex; flex-direction: column; gap: 6px; }
.racing__head-text h2 { font: 700 32px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.racing__all { font: 700 12px var(--f-sans); color: #fff; white-space: nowrap; }
.racing__all:hover { color: var(--red); }
.racing__block { display: flex; align-items: center; gap: 24px; }
.racing__img { flex: none; width: 411px; height: 160px; border-radius: 2px; object-fit: cover; }
.racing__items { flex: 1; min-width: 0; display: flex; gap: 16px; }
.ntj { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; transition: border-color .15s; }
.ntj:hover { border-color: var(--gray-2); }
.ntj.is-next { border-color: var(--red); }
.ntj__meta { display: flex; justify-content: space-between; align-items: center; }
.ntj__mins { font: 800 14px var(--f-mono); color: var(--cream); }
.ntj.is-next .ntj__mins { color: var(--red); }
.ntj__mins.is-jumped { color: var(--gray-2); }
.ntj__body { display: flex; flex-direction: column; gap: 2px; }
.ntj__venue { font: 700 16px var(--f-narrow); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntj__race { font: 400 12px var(--f-sans); color: var(--gray); }

.explore { position: relative; padding: 56px 0; overflow: hidden; }
.explore__lines { position: absolute; inset: 0; pointer-events: none; }
.explore__lines i { position: absolute; background: var(--line); }
.explore__lines i:nth-child(1) { left: 25%; top: 0; width: 1px; height: 100%; }
.explore__lines i:nth-child(2) { left: 50%; top: 0; width: 1px; height: 100%; }
.explore__lines i:nth-child(3) { left: 75%; top: 0; width: 1px; height: 100%; }
.explore__lines i:nth-child(4) { left: 0; top: 0; width: 100%; height: 1px; }
.explore__lines i:nth-child(5) { left: 0; top: 240px; width: 100%; height: 1px; }
.explore__lines i:nth-child(6) { left: 0; top: 420px; width: 100%; height: 1px; }
.explore__lines i:nth-child(7) { left: 0; bottom: 0; width: 100%; height: 1px; }
.explore .wrap { position: relative; }
.explore__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.explore__head h2 { font: 700 56px/62px var(--f-narrow); letter-spacing: -.5px; color: #fff; }
.dir { display: flex; flex-direction: column; gap: 16px; }
.dir__row { display: grid; gap: 16px; }
.dir__row--1 { grid-template-columns: minmax(0, 720fr) minmax(0, 544fr); }
.dir__row--2 { grid-template-columns: minmax(0, 560fr) minmax(0, 704fr); }
.dir__col { display: flex; flex-direction: column; gap: 16px; }
.feat { position: relative; display: block; height: 420px; background: linear-gradient(rgba(12,13,14,.35), rgba(12,13,14,.35)), url('../img/afl-footy.jpg') center/cover no-repeat; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.feat__bg { position: absolute; left: 18px; top: 18px; font: 700 120px var(--f-narrow); letter-spacing: -4px; color: rgba(255,255,255,.08); }
.feat__content { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 24px; background: linear-gradient(180deg, rgba(12,13,14,0) 0%, rgba(12,13,14,.8) 100%); }
.feat__meta { display: flex; flex-direction: column; gap: 8px; }
.feat__meta h3 { font: 700 36px var(--f-narrow); color: #fff; }
.feat__meta p { font: 400 13px var(--f-sans); color: var(--gray); }
.feat__actions { display: flex; justify-content: space-between; align-items: center; }
.feat__events { display: flex; align-items: center; gap: 8px; font: 400 13px var(--f-sans); color: var(--gray); }
.feat__cta { display: flex; align-items: center; gap: 8px; font: 700 13px var(--f-sans); color: var(--red); }
.scard { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 200px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; transition: border-color .15s; }
.scard:hover { border-color: var(--gray-2); }
.scard--180 { height: 180px; }
.scard__top { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.scard__top h3 { font: 700 18px var(--f-narrow); color: #fff; }
.scard__top span { font: 400 13px var(--f-sans); color: var(--gray); }
.scard__bottom { display: flex; align-items: center; padding: 16px; }
.scard__cta { display: flex; align-items: center; gap: 8px; font: 700 13px var(--f-sans); color: var(--red); }
.scard__bg { position: absolute; right: 12px; top: 12px; font: 700 44px var(--f-mono); color: rgba(255,255,255,.06); }
.scard__photo { position: absolute; right: 0; bottom: 0; width: 220px; height: 96px; object-fit: cover; border-radius: 2px; }

.promo { padding: 48px 0; }
.promo__block { display: flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.promo__content { flex: 1; display: flex; flex-direction: column; gap: 24px; padding: 40px; background: var(--bg-2); }
.promo__title { display: flex; flex-direction: column; gap: 6px; }
.promo__title h2 { font: 700 28px var(--f-narrow); color: #fff; }
.promo__content p { font: 400 14px/22px var(--f-sans); color: var(--gray); max-width: 626px; }
.promo__img { flex: none; width: 574px; background: url('../img/stadium-lights.jpg') center/cover no-repeat; }

@media (max-width: 1180px) {
  .hero__left { padding-right: 24px; }
  .hero__title { font-size: 46px; line-height: 46px; }
  .core__side { width: 300px; }
  .ev { gap: 16px; }
  .ev__meta { width: 120px; }
  .ev__teams { width: 160px; }
  .racing__img { width: 300px; }
  .feat__meta h3 { font-size: 30px; }
  .promo__img { width: 40%; }
  .explore__head h2 { font-size: 44px; }
}
@media (max-width: 1023px) {
  .core__in { flex-direction: column; align-items: stretch; }
  .core__side { width: 100%; position: static; }
  .ev { flex-wrap: wrap; }
  .ev__odds { flex-basis: 100%; }
  .ev__more { width: auto; }
  .racing__block { flex-direction: column; align-items: stretch; }
  .racing__img { width: 100%; }
  .racing__items { overflow: auto; }
  .ntj { flex: 0 0 200px; }
  .dir__row--1, .dir__row--2 { grid-template-columns: 1fr; }
  .feat { height: 320px; }
  .promo__block { flex-direction: column; }
  .promo__img { width: 100%; height: 200px; }
}
@media (max-width: 767px) {
  .hero { display: block; }
  .hero__left { display: none; }
  .hero__right { height: 420px; min-height: 0; border-bottom: 0; background: linear-gradient(rgba(12,13,14,.45), rgba(12,13,14,.45)), url('../img/hero-afl.jpg') center/cover no-repeat; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 16px; }
  .hero__num { right: 16px; top: 8px; color: rgba(255,255,255,.05); }
  .hero__match { display: none; }
  .hero__m { display: flex; flex-direction: column; gap: 16px; position: relative; }
  .hero__m .hero__title { font-size: 40px; line-height: 40px; }
  .hero__m .hero__lead { font-size: 12px; line-height: 18px; }
  .hero__m-ctas { display: flex; align-items: center; gap: 12px; }
  .hero__m-ctas .btn { padding: 10px 16px; font-size: 12px; }
  .hero__m-ctas a:not(.btn) { font: 700 12px var(--f-sans); color: var(--cream); }
  .hero__m-featured { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--bg-2); border: 1px solid var(--line); }
  .hero__m-featured .hero__match-teams b { font-size: 20px; }
  .hero__m-featured .hero__match-odds .odd { height: 48px; padding: 12px 16px; background: var(--ink); border-radius: 2px; }
  .hero__m-featured .hero__match-odds .odd__label { font-size: 12px; }
  .hero__m-featured .hero__match-odds .odd__num { font-size: 13px; }
  .qindex__in { height: 64px; }
  .qindex__item { padding: 10px 16px; }
  .qindex__count { font-size: 11px; }
  .core { padding: 16px 0; }
  .core__main { gap: 20px; }
  .ws-head { flex-direction: column; align-items: stretch; gap: 20px; }
  .ws-head__title { gap: 8px; }
  .ws-head__title h2 { font-size: 28px; }
  .tabs { padding: 3px; background: var(--bg-2); border-radius: 2px; gap: 4px; }
  .tabs button { flex: 1; padding: 6px 12px; border-color: transparent; text-align: center; font-size: 11px; }
  .tabs button.is-active { background: var(--bg-3); border-color: var(--line); }
  .cat__head { padding: 12px; }
  .cat__sport { font-size: 14px; letter-spacing: 0; }
  .cat__league { font-size: 11px; }
  .cat__more { font-size: 11px; }
  .ev { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; padding: 12px; }
  .ev__odds { flex-basis: auto; }
  .ev__odds .odd--row { min-width: 0; flex: 1 1 0; }
  .ev__meta { width: auto; flex-direction: row; justify-content: space-between; }
  .ev__market { font-size: 11px; }
  .ev__teams { width: auto; }
  .ev__teams span { font-size: 13px; }
  .ev__odds .odd--row { height: 48px; padding: 12px 10px; }
  .ev__odds .odd__label { font-size: 12px; }
  .ev__more { text-align: left; font-size: 11px; }
  .betslip { padding: 16px; gap: 16px; }
  .betslip__head h3 { font-size: 18px; }
  .racing { padding: 24px 0; border-top: 0; }
  .racing__head { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 20px; }
  .racing__head-text { gap: 8px; }
  .racing__head-row { display: flex; justify-content: space-between; align-items: center; }
  .racing__head-text h2 { font-size: 28px; }
  .racing__all { font-size: 11px; }
  .racing__block { gap: 20px; }
  .racing__img { height: 130px; }
  .racing__items { gap: 12px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .racing__items::-webkit-scrollbar { display: none; }
  .ntj { flex: 0 0 180px; padding: 12px; gap: 8px; }
  .ntj__mins { font-size: 13px; }
  .ntj__venue { font-size: 15px; }
  .ntj__race { font-size: 11px; }
  .explore { padding: 16px 0; }
  .explore__lines { display: none; }
  .explore__head { gap: 8px; margin-bottom: 20px; }
  .explore__head h2 { font-size: 28px; letter-spacing: .5px; }
  .dir { gap: 20px; }
  .dir__row--2 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dir__col { gap: 12px; }
  .feat { height: 260px; background: linear-gradient(rgba(12,13,14,.3), rgba(12,13,14,.3)), url('../img/afl-footy.jpg') center/cover no-repeat; }
  .feat__bg { left: 12px; top: 12px; font-size: 80px; letter-spacing: 0; color: rgba(255,255,255,.06); }
  .feat__content { padding: 16px; background: none; }
  .feat__meta h3 { font-size: 28px; }
  .feat__meta p { font-size: 11px; }
  .feat__events { font-size: 11px; }
  .feat__events .ico { display: none; }
  .feat__cta { font-size: 12px; }
  .feat__cta .ico { display: none; }
  .scard, .scard--180 { height: 150px; }
  .scard__top { gap: 4px; padding: 12px; }
  .scard__top h3 { font-size: 16px; }
  .scard__top span { font-size: 11px; }
  .scard__bottom, .scard__bg { display: none; }
  .scard__photo { width: 100%; height: 70px; border-radius: 0; }
  .promo { padding: 16px 0; border-top: 1px solid var(--line); }
  .promo__block { border: 0; border-radius: 0; }
  .promo__content { padding: 0; gap: 16px; background: none; }
  .promo__title { gap: 8px; }
  .promo__title h2 { font-size: 28px; letter-spacing: .5px; }
  .promo__content p { font-size: 13px; line-height: 20px; }
  .promo__img { height: 120px; border-radius: 2px; margin-top: 16px; }
}