/* Football and horse racing betting pages. Loaded after landing.css and
   sports.css; only adds what those two pages have that the old sports page
   didn't. */

/* ---------- Hero ---------- */
.bt-hero h1{text-transform:none;max-width:none}
/* Copy only: no odds panel beside it */
.bt-hero-solo .sp-hero-grid{grid-template-columns:minmax(0,760px);justify-content:start}
.bt-hero .sp-hero-fine{max-width:497px}

/* ---------- Intro above the steps ---------- */
.bt-steps-head{margin-bottom:25px}
.bt-steps-head .sp-head-row{margin-bottom:15px}
.bt-steps-head .sp-head-row .sp-h2{max-width:none}
.bt-steps-head p{font-size:20px;font-weight:300;line-height:1.32;color:#44564c;max-width:906px}
.bt-step-top{display:flex;align-items:center;gap:13px}
.bt-step-top .sp-step-label{margin-top:0}
.sp-step .bt-step-top + h3{margin-top:20px}

/* ---------- Feature blocks ---------- */
.bt-feature p{color:#44564c}
.bt-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:17px;padding:0;list-style:none}
.bt-tags li{background:#fff;border:1px solid #d3e2d9;border-radius:999px;padding:8px 16px;font-size:14px;line-height:1.25;color:#10231a}
.bt-feature .sp-feature-art img{box-shadow:none;border-radius:15px}

/* ---------- Market cards ---------- */
.bt-markets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bt-markets li{background:#f7faf8;border:1px solid #dde8e1;border-radius:14px;padding:22px}
.bt-markets .bt-num{display:block;font-size:12px;font-weight:500;line-height:1.25;color:#0f5b3a}
.sp-article .bt-markets h3{font-size:18px;line-height:1.25;letter-spacing:0;margin-top:11px}
.sp-article .bt-markets p{font-size:14px;line-height:1.65;color:#4a5b52;margin-top:10px}
.sp-article > .bt-markets,.sp-article > .sp-comps{margin-top:28px}
.sp-topic-ico .bt-horse{width:34px;height:34px}
.sp-comps.bt-three{grid-template-columns:repeat(3,minmax(0,200px))}
.sp-comps.bt-four{grid-template-columns:repeat(4,minmax(0,230px));column-gap:24px}
.bt-markets.bt-cols-3{grid-template-columns:repeat(3,minmax(0,340px))}
.sp-comps li svg{color:#12b76a}
.sp-article .bt-plain{margin-top:44px}

@media(max-width:1050px){
  .bt-markets,.bt-markets.bt-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .sp-comps.bt-four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .bt-steps-head p{font-size:16px}
  .bt-markets,.bt-markets.bt-cols-3{grid-template-columns:1fr;gap:12px}
  .bt-markets li{padding:18px}
  .sp-comps.bt-three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-article .bt-plain{margin-top:32px}
}

/* The shared type-scale overrides in sports.css size every bare p/h3 in
   .sp-wrap; keep the market cards at their own, smaller size. */
@media(min-width:651px){
  main .sp-wrap .bt-markets h3:not([class]){font-size:18px !important}
  main .sp-wrap .bt-markets p:not([class]){font-size:14px !important}
}
@media(max-width:650px){
  main .sp-wrap .bt-markets h3:not([class]){font-size:17px !important}
  main .sp-wrap .bt-markets p:not([class]){font-size:14px !important}
}

.bt-feature p.bt-small{font-size:16px !important}

/* Approved copy: extra intro paragraphs, in-text links, FAQ answers */
.bt-steps-head p + p{margin-top:12px}
.sp-hero-terms a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sp-article a,.bt-feature p a{color:var(--sp-link);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.sp-acc-a p{margin:0}

/* ---------- Football page: updated Figma (hero art + type scale) ---------- */
.bt-hero-art .sp-hero-card{background:linear-gradient(to right,#012b1d,#146a4c);border-radius:20px;padding:21px 70px 0 52px;overflow:hidden}
.bt-hero-art .sp-hero-grid{grid-template-columns:minmax(0,648px) minmax(0,493px);justify-content:space-between;align-items:center;gap:24px}
.bt-hero-art .sp-hero-grid > div{padding:38px 0 58px}
.bt-hero-art .sp-eyebrow{letter-spacing:-.9px}
.bt-hero-art h1{line-height:1.15;letter-spacing:-2px;margin-top:13px}
.bt-hero-art .sp-hero-terms{font-size:16px;line-height:27px;margin-top:13px;max-width:624px}
.bt-hero-art .sp-hero-terms + .sp-hero-terms{margin-top:27px}
.bt-hero-art .sp-hero-actions{margin-top:20px}
.bt-hero-art .sp-hero-fine{font-size:15px;line-height:20.48px;margin-top:21px}
.bt-hero-img{display:block;align-self:end;width:100%;height:auto}
/* Horse racing: image starts level with the copy and runs to the bottom edge */
.bt-hero-hr .sp-hero-card{padding:59px 64px 0 52px}
.bt-hero-hr .sp-hero-grid{grid-template-columns:minmax(470px,610px) minmax(0,596px);align-items:start;gap:0}
.bt-hero-hr .sp-hero-grid > div{padding:0 0 59px;position:relative;z-index:1}

@media(min-width:651px){
  main.bt-fig p.sp-eyebrow{font-size:18px !important}
  main.bt-fig .sp-hero-grid h1:not([class]){font-size:40px !important;line-height:1.15 !important}
  main.bt-fig h2.sp-h2,
  main.bt-fig .sp-feature-copy h2:not([class]),
  main.bt-fig .sp-topic h2:not([class]),
  main.bt-fig .sp-wrap h2:not([class]){font-size:35px !important;line-height:1.2 !important}
  main.bt-fig .sp-rg h2:not([class]){font-size:16px !important;line-height:1.1 !important}
  main.bt-fig .sp-rg p:not([class]){font-size:16px !important;line-height:24px}
  main.bt-fig p.sp-step-label{font-size:20px !important}
  main.bt-fig .sp-step h3:not([class]){font-size:24px !important}
  main.bt-fig .sp-feature-copy p:not([class]){font-size:16px !important}
  main.bt-fig-fb .sp-wrap .bt-markets p:not([class]){font-size:16px !important;line-height:22px}
  main.bt-fig .sp-comps li{font-size:16px}
  main.bt-fig .sp-acc summary{font-size:16px}
  main.bt-fig-fb .bt-steps-head p:not([class]){font-size:20px !important;line-height:26.4px}
  main.bt-fig .bt-steps-head p:not([class]){line-height:26.4px}
}
@media(max-width:1050px){
  .bt-hero-art .sp-hero-card{padding:21px 34px 0}
  .bt-hero-art .sp-hero-grid{grid-template-columns:1fr;gap:0}
  .bt-hero-art .sp-hero-grid > div{padding:24px 0 8px}
  .bt-hero-img{justify-self:center;max-width:380px}
  .bt-hero-hr .sp-hero-card{padding:21px 34px 0}
  .bt-hero-hr .sp-hero-grid > div{padding:24px 0 8px}
  .bt-hero-hr .bt-hero-img{max-width:460px}
}
@media(max-width:650px){
  .bt-hero-art .sp-hero-card{padding:6px 20px 0;border-radius:16px}
  .bt-hero-art .sp-hero-terms{font-size:15.5px;line-height:1.55}
  .bt-hero-art .sp-hero-terms + .sp-hero-terms{margin-top:14px}
  .bt-hero-art .sp-hero-fine{font-size:12.5px;line-height:1.5}
  .bt-hero-img{max-width:300px}
  .bt-hero-hr .sp-hero-card{padding:6px 20px 0}
  .bt-hero-hr .bt-hero-img{max-width:340px}
}