/* =========================================================
   Sports Programme — editorial layout (sp-*)
   Brand: ink #363587 · marigold #f5c307
   ========================================================= */

body.sp-page{ background:#fff; }

.sp-hero,
.sp-icons-sec,
.sp-grid-sec,
.sp-bottom{
  position:relative;
  overflow:hidden;
  scroll-margin-top:96px;
}

.sp-copy h1,
.sp-card-body h2,
.sp-panel h2{
  margin:0 0 12px;
  color:rgb(52, 50, 114);
  font-family:Helvetica, Arial, sans-serif;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.015em;
}
.sp-copy h1{ font-size:clamp(2.2rem, 4.8vw, 3.55rem); }
.sp-card-body h2,
.sp-panel h2{ font-size:clamp(1.35rem, 2.2vw, 1.75rem); }
.sp-lead{
  margin:0 0 16px !important;
  color:var(--marigold) !important;
  font-family:Helvetica, Arial, sans-serif !important;
  font-size:clamp(1.2rem, 2.1vw, 1.55rem) !important;
  font-weight:700 !important;
  font-style:italic !important;
  line-height:1.25 !important;
}
.sp-copy p,
.sp-card-body p,
.sp-panel p{
  margin:0 0 12px;
  color:rgb(33, 37, 41);
  line-height:1.7;
}
.sp-copy p{ max-width:38rem; }
.sp-copy p:last-child,
.sp-card-body p:last-child,
.sp-panel p:last-child{ margin-bottom:0; }

.sp-split{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:clamp(28px, 4.5vw, 64px);
  align-items:center;
}
.sp-copy,
.sp-media{ min-width:0; }

.sp-hero{
  padding:42px 0 20px;
  background:#fff;
}
.sp-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 2.5vw, 28px);
  margin:clamp(28px, 4vw, 44px) 0 4px;
  padding:clamp(22px, 3vw, 34px) 0 0;
  border-top:1px solid rgba(54, 53, 135, .12);
}
.sp-stat{
  text-align:center;
  padding:8px 10px;
}
.sp-stat strong{
  display:block;
  margin:0 0 8px;
  color:rgb(52, 50, 114);
  font-family:Helvetica, Arial, sans-serif;
  font-size:clamp(2.2rem, 4vw, 3rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
}
.sp-stat span{
  display:block;
  max-width:16rem;
  margin:0 auto;
  color:rgb(90, 93, 110);
  font-family:Helvetica, Arial, sans-serif;
  font-size:clamp(.84rem, 1.4vw, .98rem);
  font-weight:600;
  line-height:1.45;
}
.sp-early{
  padding:28px 0 36px;
  background:#fcfcfe;
  scroll-margin-top:96px;
}
.sp-early-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:clamp(28px, 4.5vw, 64px);
  align-items:center;
}
.sp-early .sp-copy h2{
  margin:0 0 12px;
  color:rgb(52, 50, 114);
  font-family:Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  line-height:1.12;
}
.sp-hero-video{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:18px;
  background:#eceaf5;
}
.sp-hero-video img{
  display:block;
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  object-position:center 30%;
}
.sp-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(28, 27, 74, .18);
  transition:background .25s ease;
}
.sp-play i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--marigold);
  color:rgb(52, 50, 114);
  font-size:1.1rem;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.35);
}
.sp-hero-video:hover .sp-play{ background:rgba(28, 27, 74, .3); }

.sp-script{
  margin:0;
  color:rgb(52, 50, 114);
  font-family:Helvetica, Arial, sans-serif;
  font-weight:700;
  line-height:1.15;
}
.sp-script-hero{
  position:absolute;
  right:14px;
  top:14px;
  z-index:1;
  color:#fff;
  font-size:clamp(1.4rem, 2.2vw, 1.9rem);
  transform:rotate(-6deg);
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  background-image:linear-gradient(var(--marigold), var(--marigold));
  background-repeat:no-repeat;
  background-position:4px 100%;
  background-size:78% 5px;
  padding-bottom:4px;
}

.sp-icons-sec{
  padding:10px 0 28px;
  background:#fff;
}
.sp-icons{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  gap:12px;
}
.sp-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:rgb(52, 50, 114);
  text-decoration:none;
  font-family:Helvetica, Arial, sans-serif;
  font-size:.8rem;
  font-weight:700;
  text-align:center;
  transition:transform .22s ease;
}
.sp-icon:hover{ transform:translateY(-3px); color:rgb(52, 50, 114); }
.sp-icon-circle,
.sp-card-ic,
.sp-panel-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:rgb(52, 50, 114);
}
.sp-icon-circle{
  width:64px;
  height:64px;
  font-size:1.15rem;
  box-shadow:0 8px 18px -12px rgba(54, 53, 135, .35);
}
.sp-tone-blue .sp-icon-circle,
.sp-card-ic.sp-tone-blue{ background:#cfe4f8; }
.sp-tone-orange .sp-icon-circle,
.sp-card-ic.sp-tone-orange{ background:#ffd8b0; }
.sp-tone-green .sp-icon-circle,
.sp-card-ic.sp-tone-green{ background:#c8ecd4; }
.sp-tone-yellow .sp-icon-circle,
.sp-card-ic.sp-tone-yellow{ background:#f8e39a; }
.sp-tone-pink .sp-icon-circle,
.sp-card-ic.sp-tone-pink{ background:#f7c9d8; }
.sp-tone-red .sp-icon-circle,
.sp-card-ic.sp-tone-red{ background:#f5c4b8; }
.sp-tone-mint .sp-icon-circle,
.sp-card-ic.sp-tone-mint{ background:#c9efe8; }
.sp-tone-purple .sp-icon-circle,
.sp-card-ic.sp-tone-purple{ background:#e4d8f7; }

.sp-grid-sec{
  padding:12px 0 40px;
  background:#fafbfe;
}
.sp-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}
.sp-card{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
  align-items:stretch;
  min-width:0;
  background:#f4f7fb;
  border:1px solid rgba(54, 53, 135, .08);
  border-radius:22px;
  overflow:hidden;
}
.sp-card.is-flip{
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
}
.sp-card.is-flip .sp-card-body{ order:1; }
.sp-card.is-flip .sp-card-media{ order:2; }
.sp-card-media{
  margin:0;
  position:relative;
  min-height:100%;
  background:#eceaf5;
}
.sp-card-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:210px;
  object-fit:cover;
  object-position:center center;
}
.sp-card:not(.is-flip) .sp-card-media{
  clip-path:ellipse(100% 120% at 0% 50%);
}
.sp-card.is-flip .sp-card-media{
  clip-path:ellipse(100% 120% at 100% 50%);
}
.sp-card-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:22px 20px;
  background:transparent;
}
.sp-card-ic{
  width:42px;
  height:42px;
  font-size:.95rem;
  margin-bottom:2px;
}
.sp-card-body p{
  font-size:.9rem;
  line-height:1.6;
}

.sp-bottom{
  padding:48px 0 64px;
  background:#fff;
}
.sp-bottom-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(22px, 3.5vw, 36px);
  align-items:stretch;
}
.sp-panel{
  position:relative;
  padding:28px 26px 26px;
  border-radius:22px;
  background:#f7f8fc;
  border:1px solid rgba(54, 53, 135, .08);
  overflow:hidden;
}
.sp-panel-photo-bg{
  min-height:100%;
  padding:0;
  background-color:#1c1b4a;
  background-image:var(--sp-panel-bg);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  border:0;
}
.sp-panel-photo-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(28, 27, 74, .72) 0%, rgba(28, 27, 74, .58) 55%, rgba(28, 27, 74, .78) 100%);
}
.sp-panel-inner{
  position:relative;
  z-index:1;
  padding:28px 26px 26px;
}
.sp-panel-photo-bg h2,
.sp-panel-photo-bg p{
  color:#fff;
}
.sp-panel-photo-bg .sp-panel-ic{
  background:rgba(245, 195, 7, .95);
  color:rgb(52, 50, 114);
}
.sp-panel-ic{
  width:48px;
  height:48px;
  margin-bottom:14px;
  background:#fff4c8;
  font-size:1.05rem;
}
.sp-panel-cta{
  background:
    radial-gradient(ellipse 55% 70% at 88% 70%, rgba(245, 195, 7, .18), transparent 60%),
    linear-gradient(180deg, #fbfaf4 0%, #f7f8fc 100%);
}
.sp-runner{
  position:absolute;
  right:-8%;
  bottom:-6%;
  width:220px;
  height:220px;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 40%, rgba(245, 195, 7, .28), transparent 62%);
  opacity:.8;
  pointer-events:none;
}
.sp-script-cta{
  margin:16px 0 18px;
  font-size:clamp(1.7rem, 2.6vw, 2.2rem);
  transform:rotate(-3deg);
  width:fit-content;
}
.sp-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  position:relative;
  z-index:1;
}

@media (max-width:1100px){
  .sp-icons{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width:980px){
  .sp-split,
  .sp-grid,
  .sp-bottom-grid,
  .sp-early-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  .sp-hero .sp-media{ order:2; }
  .sp-hero .sp-copy{ order:1; }
  .sp-card,
  .sp-card.is-flip{
    grid-template-columns:1fr;
  }
  .sp-card.is-flip .sp-card-body,
  .sp-card.is-flip .sp-card-media{ order:initial; }
  .sp-card:not(.is-flip) .sp-card-media,
  .sp-card.is-flip .sp-card-media{
    clip-path:none;
  }
  .sp-card-media img{ min-height:200px; aspect-ratio:16 / 10; height:auto; }
}
@media (max-width:640px){
  .sp-hero{ padding:28px 0 12px; }
  .sp-icons{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sp-bottom{ padding:36px 0; }
  .sp-stats{ grid-template-columns:1fr; gap:18px; }
}