/* =========================================================================
   PAGES — header/nav, hero, sport rail, footer, page-specific layouts
   ========================================================================= */

/* ---------- Header ---------- */
.site-header{position:sticky;top:var(--rgbar-h);z-index:55;
  background:color-mix(in srgb,var(--bg-050) 94%,transparent);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--bg-300)}
.site-header__inner{display:flex;align-items:center;gap:var(--sp-4);
  min-height:var(--header-h);
  width:min(100% - 2*var(--sp-4),var(--maxw));margin-inline:auto}
.brand{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);
  text-transform:uppercase;font-size:var(--fs-600);color:var(--fg-000);letter-spacing:-.01em}
.brand__mark{width:30px;height:30px;background:var(--accent);
  clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%)}
.brand__logo{height:34px;width:auto;display:block}
.brand b{color:var(--accent)}
.main-nav{display:flex;gap:var(--sp-1);margin-left:var(--sp-4)}
.main-nav a{font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--fs-400);letter-spacing:.03em;color:var(--fg-100);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-2);
  border:1px solid transparent;transition:color var(--t-fast) var(--ease),
  border-color var(--t-fast) var(--ease)}
.main-nav a:hover{color:var(--fg-000)}
.main-nav a[data-active="true"]{color:var(--accent);border-color:var(--bg-300)}
.header-actions{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.nav-toggle{display:none;font-size:var(--fs-600);color:var(--fg-000);padding:var(--sp-2)}

@media (max-width:880px){
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(80vw,300px);z-index:80;
    flex-direction:column;gap:var(--sp-1);padding:calc(var(--header-h) + var(--sp-5)) var(--sp-4);
    background:var(--bg-050);border-left:1px solid var(--bg-300);
    transform:translateX(100%);transition:transform var(--t-slow) var(--ease)}
  .main-nav.is-open{transform:translateX(0)}
  .main-nav a{font-size:var(--fs-500)}
  .nav-toggle{display:block;margin-left:auto;order:3}
  .header-actions .btn--bet{display:none}
}

/* ---------- Sport rail ---------- */
.rail{background:var(--bg-100);border:1px solid var(--bg-300);border-radius:var(--r-2);
  position:sticky;top:calc(var(--rgbar-h) + var(--sp-3));overflow:hidden}
.rail__head{padding:var(--sp-3) var(--sp-4);background:var(--bg-050);
  border-bottom:1px solid var(--bg-300);font-family:var(--font-display);
  text-transform:uppercase;font-size:var(--fs-300);letter-spacing:.1em;color:var(--fg-300)}
.rail__list{padding:var(--sp-2)}
.rail__item{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3);border-radius:var(--r-2);color:var(--fg-100);
  font-weight:600;font-size:var(--fs-400);
  border-left:3px solid transparent;transition:background var(--t-fast) var(--ease)}
.rail__item:hover{background:var(--bg-150);color:var(--fg-000)}
.rail__item[data-active="true"]{background:var(--bg-150);color:var(--fg-000);
  border-left-color:var(--accent)}
.rail__ico{width:20px;text-align:center;color:var(--accent-2)}
.rail__count{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-300);
  color:var(--fg-300)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-050),var(--bg-000));
  border-bottom:1px solid var(--bg-300)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--concrete-grain);opacity:.6}
.hero__inner{position:relative;z-index:1;
  width:min(100% - 2*var(--sp-4),var(--maxw));margin-inline:auto;
  display:grid;grid-template-columns:1.4fr 1fr;gap:var(--sp-7);
  align-items:center;padding-block:var(--sp-8)}
.hero__hazard{position:absolute;top:0;left:0;right:0;height:8px;
  background:var(--hazard-stripe);opacity:.85;z-index:2}
.hero h1{font-size:var(--fs-900);margin:var(--sp-3) 0}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__lead{font-size:var(--fs-500);color:var(--fg-100);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.hero__panel{background:var(--bg-100);border:1px solid var(--bg-300);
  border-top:var(--bd-hazard);border-radius:var(--r-2);padding:var(--sp-4)}
.hero__panel h3{font-size:var(--fs-400);margin-bottom:var(--sp-3)}
@media (max-width:880px){.hero__inner{grid-template-columns:1fr;padding-block:var(--sp-7)}}

/* ---------- Grids ---------- */
.grid{display:grid;gap:var(--sp-4)}
.grid--kpi{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid--promo{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* Promo card */
.promo{background:var(--bg-100);border:1px solid var(--bg-300);border-radius:var(--r-2);
  overflow:hidden;display:flex;flex-direction:column}
.promo__tag{align-self:flex-start;margin:var(--sp-4) var(--sp-4) 0}
.promo__body{padding:var(--sp-4);flex:1;display:flex;flex-direction:column;gap:var(--sp-3)}
.promo h3{font-size:var(--fs-500)}
.promo__terms{font-size:var(--fs-300);color:var(--fg-300);margin-top:auto}

/* ---------- Racing ---------- */
.race{background:var(--bg-100);border:1px solid var(--bg-300);border-radius:var(--r-2);
  margin-bottom:var(--sp-3)}
.race__head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--bg-300)}
.race__no{font-family:var(--font-display);background:var(--accent-2);color:#fff;
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-2)}
.runner{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-3);
  align-items:center;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--bg-300)}
.runner:last-child{border-bottom:none}
.runner__no{font-family:var(--font-mono);color:var(--fg-300)}
.runner__name{font-weight:600;color:var(--fg-000)}
.runner__jockey{font-size:var(--fs-300);color:var(--fg-300)}

/* ---------- Event page ---------- */
.event-head{background:var(--bg-100);border:1px solid var(--bg-300);
  border-top:var(--bd-hazard);border-radius:var(--r-2);padding:var(--sp-5);
  margin-bottom:var(--sp-5)}
.event-head__teams{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap}
.event-head__team{font-family:var(--font-display);font-size:var(--fs-700);color:var(--fg-000)}
.event-head__vs{font-family:var(--font-mono);color:var(--accent);font-size:var(--fs-500)}

/* ---------- Account ---------- */
.acct-grid{display:grid;grid-template-columns:240px 1fr;gap:var(--sp-5);align-items:start}
.acct-nav .rail__item{cursor:default}
@media (max-width:760px){.acct-grid{grid-template-columns:1fr}}

/* ---------- Auth ---------- */
.auth{width:min(100% - 2*var(--sp-4),460px);margin:var(--sp-8) auto;
  background:var(--bg-100);border:1px solid var(--bg-300);
  border-top:6px solid var(--accent);border-radius:var(--r-2);padding:var(--sp-6)}
.auth h1{font-size:var(--fs-700);margin-bottom:var(--sp-2)}
.auth__alt{margin-top:var(--sp-5);text-align:center;font-size:var(--fs-300);color:var(--fg-300)}

/* ---------- Legal / prose ---------- */
.prose{max-width:74ch}
.prose h2{font-size:var(--fs-600);margin:var(--sp-6) 0 var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--bg-300)}
.prose h3{font-size:var(--fs-500);margin:var(--sp-5) 0 var(--sp-2);color:var(--fg-100)}
.prose p,.prose li{color:var(--fg-100);font-size:var(--fs-400)}
.prose p+p{margin-top:var(--sp-3)}
.prose ul,.prose ol{margin:var(--sp-3) 0 var(--sp-3) var(--sp-5)}
.prose li{margin-bottom:var(--sp-2)}
.prose ul{list-style:square}.prose ol{list-style:decimal}
.prose a{color:var(--accent);text-decoration:underline}
.prose strong{color:var(--fg-000)}
.review-flag{display:inline-block;background:color-mix(in srgb,var(--down) 22%,transparent);
  border:1px dashed var(--down);color:var(--down);font-family:var(--font-mono);
  font-size:.85em;padding:0 6px;border-radius:var(--r-1)}
.legal-toc{background:var(--bg-100);border:1px solid var(--bg-300);border-radius:var(--r-2);
  padding:var(--sp-4);margin-bottom:var(--sp-5)}
.legal-toc h2{margin:0 0 var(--sp-3);border:none;padding:0;font-size:var(--fs-500)}
.legal-toc a{color:var(--accent);text-decoration:none;font-size:var(--fs-400)}
.legal-toc li{margin-bottom:var(--sp-1)}
.legal-meta{font-size:var(--fs-300);color:var(--fg-300);margin-bottom:var(--sp-5)}

/* ---------- Page hero (interior) ---------- */
.page-hero{position:relative;border-bottom:1px solid var(--bg-300);
  background:linear-gradient(180deg,var(--bg-050),var(--bg-000));overflow:hidden}
.page-hero__inner{width:min(100% - 2*var(--sp-4),var(--maxw));margin-inline:auto;
  padding-block:var(--sp-7)}
.page-hero h1{font-size:var(--fs-800)}
.page-hero p{color:var(--fg-100);font-size:var(--fs-500);margin-top:var(--sp-3)}
.page-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:var(--hazard-stripe);opacity:.85}

/* ---------- Footer ---------- */
.site-footer{background:#0e0f11;border-top:1px solid var(--bg-300);
  margin-top:var(--sp-8)}
.footer-top{width:min(100% - 2*var(--sp-4),var(--maxw));margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-6);padding-block:var(--sp-7)}
.footer-col h4{font-size:var(--fs-300);letter-spacing:.1em;color:var(--fg-300);
  margin-bottom:var(--sp-3)}
.footer-col a{display:block;color:var(--fg-100);font-size:var(--fs-400);
  padding:var(--sp-1) 0}
.footer-col a:hover{color:var(--accent)}
.footer-legal{border-top:1px solid var(--bg-300);
  width:min(100% - 2*var(--sp-4),var(--maxw));margin-inline:auto;
  padding-block:var(--sp-6);font-size:var(--fs-300);color:var(--fg-300)}
.footer-legal p{max-width:none;margin-bottom:var(--sp-3)}
.footer-legal a{color:var(--fg-100);text-decoration:underline}
.footer-bottom{background:#000;color:var(--fg-500);font-size:var(--fs-300)}
.footer-bottom__inner{width:min(100% - 2*var(--sp-4),var(--maxw));margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;
  padding-block:var(--sp-4)}

.divider{height:3px;background:var(--bg-300);border:none;margin-block:var(--sp-5)}