/* Same layout system as football, separate file as requested */
:root{
    --ink:#0e2431;
    --ink-2:#3a5060;
    --muted:#6b7e8a;
    --line:#e7edf1;
    --paper:#fff;
  
    /* You can tweak basketball accent if you want */
    --brand:#ff7a18;
    --brand-2:#ffb000;
  
    --shadow:0 14px 30px rgba(0,0,0,.12);
    --radius:14px;
    --max:1150px;
  }
  
  *{ box-sizing:border-box; }
  html,body{ margin:0; }
  body{
    font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
    color:var(--ink);
    background:#fff;
  }
  .wrap{ width:min(100%, var(--max)); margin-inline:auto; padding:0 16px; }
  
  /* hero */
  .sp-hero{
    position:relative;
    min-height:54vh;
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .sp-hero__bg{
    position:absolute; inset:0;
    background-image:var(--src);
    background-size:cover;
    background-position:center;
    filter:brightness(.8);
  }
  .sp-hero::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.40));
  }
  .sp-hero__overlay{
    position:relative; z-index:2;
    text-align:center; color:#fff;
    padding:16px;
    text-shadow:0 6px 22px rgba(0,0,0,.45);
  }
  .sp-hero__overlay h1{
    margin:0 0 8px;
    font-weight:900;
    letter-spacing:.3px;
    text-transform:uppercase;
    font-size:clamp(1.6rem, 3.6vw, 2.6rem);
  }
  .sp-hero__overlay p{
    margin:0;
    opacity:.95;
    font-size:clamp(.95rem, 1.4vw, 1.05rem);
  }
  .sp-hero__cta{
    margin-top:14px;
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
  }
  
  /* section head */
  .sp-section{ background:#fff; padding:28px 0 44px; }
  .sp-head h2{
    margin:0 0 4px;
    font:900 1.4rem/1 system-ui,Segoe UI,Inter,Arial;
    letter-spacing:.2px;
    text-transform:uppercase;
  }
  .sp-head p{ margin:0 0 16px; color:var(--muted); }
  
  /* grid/cards */
  .sp-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(280px, 1fr));
    gap:20px;
  }
  .sp-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .sp-card__media{
    margin:0;
    overflow:hidden;
    height:220px;
  }
  .sp-card__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  
  .sp-card__body{
    padding:14px 14px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .sp-card__icon{ color:#1f6aa6; font-size:14px; line-height:1; }
  .sp-card h3{
    margin:0;
    font:900 1rem/1.2 system-ui,Segoe UI,Inter,Arial;
    text-transform:uppercase;
    letter-spacing:.2px;
  }
  .sp-card p{
    margin:0;
    color:var(--ink-2);
    font-size:.95rem;
    line-height:1.45;
  }
  
  /* buttons */
  .btn{
    align-self:flex-start;
    text-decoration:none;
    border:none;
    cursor:pointer;
    padding:.55rem .9rem;
    border-radius:999px;
    font-weight:800;
    color:#2a1406;
    background:linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow:0 8px 18px rgba(0,0,0,.1);
  }
  .btn:hover{ filter:brightness(1.05); }
  .btn-outline{
    background:#fff;
    color:var(--ink);
    border:1.5px solid var(--line);
    box-shadow:none;
  }
  .btn-outline:hover{ background:#f7fbff; }
  .btn-disabled{
    background:#e7edf1;
    color:#8295a3;
    cursor:not-allowed;
    box-shadow:none;
  }
  
  /* media */
  .sp-media{ padding:56px 0 64px; background:#fff; }
  .sp-media__head{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-bottom:22px;
  }
  .sp-media__title{
    margin:0;
    font-size:clamp(24px, 3.4vw, 40px);
    font-weight:900;
    letter-spacing:.02em;
    text-transform:uppercase;
  }
  .sp-media__sub{ margin:6px 0 0; color:var(--muted); font-size:.95rem; }
  .sp-media__btn{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:40px;
    padding:10px 16px;
    border-radius:999px;
    border:2px solid var(--ink);
    color:var(--ink);
    text-decoration:none;
    font-weight:800;
    font-size:.9rem;
    white-space:nowrap;
    transition:transform .15s ease, background-color .15s ease, color .15s ease;
  }
  .sp-media__btn:hover{ background:var(--ink); color:#fff; transform:translateY(-1px); }
  
  .sp-media__grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
  }
  .sp-shot{
    margin:0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    aspect-ratio:16/11;
    padding:8px;
  }
  .sp-shot img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:6px;
    transition:transform .25s ease;
  }

  .sp-shot:hover img{ transform:scale(1.015); }
  
  /* responsive */
  @media (max-width: 1024px){
    .sp-media__grid{ grid-template-columns:repeat(2, 1fr); }
    .sp-media__btn{ height:38px; padding:8px 14px; }
  }
  @media (max-width: 900px){
    .sp-grid{ grid-template-columns:1fr; }
    .sp-hero{ min-height:44vh; }
  }
  @media (max-width: 600px){
    .sp-hero{ min-height:32vh; }
    .sp-hero__overlay h1{ font-size:1.4rem; }
    .sp-card__media{ height:160px; }
    .sp-section{ padding:16px 0 28px; }
    .sp-head h2{ font-size:1.1rem; }
    .sp-media{ padding:28px 0 36px; }
    .sp-media__head{ flex-direction:column; align-items:flex-start; }
    .sp-media__btn{ margin-left:0; }
    .sp-media__grid{ grid-template-columns:1fr; }
    .sp-shot{ aspect-ratio:16/8; }
  }