:root{ --gc-w: 300px; }

.gc-banner{
  position:fixed;
  left:0;
  top:169px;
  bottom:20px;
   width: var(--gc-w);
  background:linear-gradient(180deg,#121622,#0b0f16);
  border-right:1px solid #232636;
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
  padding:.6rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  z-index:900;
}
@media (max-width:1024px){
  .gc-banner{ display:none; }
}

.gc-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.gc-toggle{
  background:#141a24;
  border:1px solid #273042;
  border-radius:.5rem;
  color:#e6e6e6;
  padding:.25rem .45rem;
  cursor:pointer;
}

.gc-stream{
  flex:1;
  overflow:auto;
  border:1px solid #1f2533;
  border-radius:.6rem;
  padding:.5rem;
  background:#0f141c;
}
.gc-msg{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  border-bottom:1px dashed #202737;
  padding:.4rem 0;
}
.gc-msg:last-child{border-bottom:0;}
.gc-meta{font-size:.82rem;opacity:.7;}
.gc-body{white-space:pre-wrap;word-break:break-word;font-size:.88rem;}

.gc-form{
  display:flex;
  gap:.4rem;
  align-items:center;
}
.gc-form input[type=text]{
  flex:1;
  border:1px solid #2a2f3a;
  background:#0f1115;
  color:#e6e6e6;
  border-radius:.6rem;
  padding:.5rem;
}
.gc-note{
  opacity:.7;
  margin-top:.2rem;
}

/* gold button reuse */
.btn--gold{
  background:linear-gradient(180deg,#E7C14D,#CFA73A);
  border-color:#CFA73A;
  color:#0e0e0e;
  font-weight:600;
}
.btn--gold:hover{
  background:linear-gradient(180deg,#CFA73A,#A88424);
  border-color:#A88424;
}

/* modal */
.modal-overlay[hidden]{ display:none !important; }
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
  display:grid;
  place-items:center;
  z-index:1000;
}
.modal-card{
  width:min(720px,92vw);
  max-height:85vh;
  overflow:auto;
  background:var(--card);
  border:1px solid #232636;
  border-radius:1rem;
  padding:1rem;
  position:relative;
}
.modal-close{
  position:absolute;
  top:.4rem;
  right:.6rem;
  font-size:1.8rem;
  line-height:1;
  background:none;
  border:0;
  color:#e5e7eb;
  cursor:pointer;
}

/* promos */
.card.promo-item{
  display:grid;
  grid-template-columns:minmax(220px,30%) 1fr;
  gap:1rem;
  align-items:stretch;
  min-height:180px;
}
.promo-logo{
  width:100%;
  height:100%;
  padding:0;
  border:1px solid #232636;
  border-radius:.75rem;
  overflow:hidden;
  background:rgba(255,255,255,.02);
  display:block;
}

/* Mobile: stack logo above info */
@media (max-width:600px){
  .card.promo-item{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .promo-logo{
    width:100%;
    height:160px;
    border-radius:.6rem;
  }
}
.promo-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.byline{
  margin-top:.15rem;
  font-size:.85rem;
  color:var(--muted);
}
.byline a{
  color:inherit;
  text-decoration:underline;
}
.byline a:hover{
  text-decoration:none;
}
.js-bonus-stars{
  cursor:pointer;
  display:inline-block;
}
.js-bonus-stars:hover{
  filter:brightness(1.15);
}

/* =========================
   HOME LAYOUT  — 2 columns on large screens
   .home-news-main   = LEFT  (Latest Sports News)
   .home-fixtures-col= RIGHT (Upcoming Fixtures)
   ========================= */

.home-layout{
  display:grid;
  grid-template-columns: 1fr 480px;
  gap:1.5rem;
  margin-top:1.5rem;
  align-items:stretch;
  padding-left: 7rem;
  padding-right: 1.5rem;
  width: 100vw;
  margin-left: calc(-1 * (100vw - 100%) / 2);
  box-sizing: border-box;
}

.home-news-main{
  min-width:0;
}

/* ── RIGHT: Fixtures column — folds at the news column height ── */
.home-fixtures-col{
  min-width:0;
  position:relative;
}

/* Desktop: the card fills exactly the row height set by the news column,
   so both panels end at the same point; fixtures scroll inside. */
@media (min-width:1025px){
  .home-fixtures-col .right-fixtures{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
  }
}

/* Tablet and below: static card with a capped, scrollable list */
@media (max-width:1024px){
  .home-fixtures-col .right-fixtures{
    display:flex;
    flex-direction:column;
  }
  .home-fixtures-col .rf-table-wrap{
    max-height:420px;
  }
}

/* ── RIGHT: Bonuses sidebar — top aligned ── */
.home-sidebar{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-self:start;
}

/* Wider screens: grow fixtures and bonuses a touch */
@media (min-width:1280px){
  .home-layout{
    grid-template-columns: 1fr 520px;
  }
}

@media (min-width:1536px){
  .home-layout{
    grid-template-columns: 1fr 580px;
  }
}

/* Tablet */
@media (max-width:1024px) and (min-width:641px){
  .home-layout{
    grid-template-columns: 1fr 1fr;
    width: 100vw;
    margin-left: calc(-1 * (100vw - 100%) / 2);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .home-news-main{
    grid-column: 1 / -1;
  }
  .home-fixtures-col{
    grid-column: 1 / -1;
  }
}

/* Mobile */
@media (max-width:640px){
  .home-layout{
    grid-template-columns: 1fr;
    width: 100vw;
    margin-left: calc(-1 * (100vw - 100%) / 2);
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .home-fixtures-col{
    display:block;
    height:auto;
  }
}

/* Legacy classes — hidden/reset */
.home-main{ display:contents; }
.home-right{ display:none; }

/* =========================
   FULL-WIDTH RANKING ROW
   Stretches across the entire page width below the 2-col layout
   ========================= */

.home-ranking-row{
  margin-top:1.5rem;
  padding-left:1.5%;
  padding-right:0;
  margin-right: calc(-1 * (100vw - 100%) / 2);
  box-sizing:border-box;
}

.home-ranking-row section{
  width:100%;
}

.home-ranking-row h2{
  font-size:1rem;
  font-weight:700;
  margin:0 0 .75rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#e5e7eb;
  padding-bottom:.5rem;
  border-bottom:1px solid #1e2535;
}

.home-ranking-row .card{
  width:100%;
  box-sizing:border-box;
}

/* On large screens lay out ranking criteria in a grid */
@media (min-width:1025px){
  .home-ranking-row .prose ul{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:.6rem 1.2rem;
    list-style:none;
    padding:0;
    margin:.65rem 0;
  }
  .home-ranking-row .prose ul li{
    background:#0a0d18;
    border:1px solid #1e2535;
    border-radius:.6rem;
    padding:.6rem .75rem;
    font-size:.82rem;
  }
  .home-ranking-row .prose p{
    font-size:.82rem;
    margin:.5rem 0 0;
  }
}

@media (min-width:1280px){
  .home-ranking-row .prose ul{
    grid-template-columns:repeat(5, 1fr);
  }
}

/* =========================
   LATEST SPORTS NEWS — big hero treatment
   ========================= */

.right-news{
  background:var(--card);
  border:1px solid #232636;
  border-radius:.85rem;
  padding:1rem 1.1rem;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}

.right-news h2{
  font-size:1.1rem;
  font-weight:700;
  margin:0 0 .85rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#e5e7eb;
  padding-bottom:.55rem;
  border-bottom:1px solid #1e2535;
}

.right-news .rn-list{
  display:flex;
  flex-direction:column;
  gap:.65rem;
}

/* First item: large hero card with full-width banner image */
.right-news .rn-item:first-child{
  flex-direction:column;
  align-items:stretch;
  padding:0;
  border-radius:.7rem;
  border:1px solid #232636;
  background:#07091a;
  overflow:hidden;
}
.right-news .rn-item:first-child .rn-thumb{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  border-radius:0;
  flex-shrink:unset;
}
.right-news .rn-item:first-child .rn-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  background:#07091a;
}
/* Hero image: show the WHOLE picture (contain), and let the leftover space
   either side act as a transparent window onto the animated backdrop.
   `cover` would crop the image and leave no space at all. */
.right-news .rn-list .rn-item:first-child .rn-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center;
  background:transparent !important;
  display:block;
}

.right-news .rn-item:first-child .rn-text{
  padding:.85rem 1rem .7rem;
  gap:.3rem;
}
.right-news .rn-item:first-child .rn-title{
  font-size:1.1rem;
  font-weight:600;
  line-height:1.4;
  color:#f3f4f6;
}
.right-news .rn-item:first-child .rn-meta{
  font-size:.75rem;
  color:#9ca3af;
}

/* Remaining items: compact horizontal rows */
.right-news .rn-item{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.5rem .55rem;
  border-radius:.55rem;
  background:#050811;
  border:1px solid transparent;
  text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s;
}
.right-news .rn-item:hover{
  border-color:#374151;
  background:#070c18;
  transform:translateY(-1px);
}

.right-news .rn-thumb{
  width:90px;
  height:62px;
  border-radius:.45rem;
  overflow:hidden;
  background:#020817;
  flex-shrink:0;
}
.right-news .rn-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.right-news .rn-fallback{
  width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  font-weight:900;
  font-family:'Arial Black', 'Helvetica Neue', 'Arial', sans-serif;
  color:#e8000d;
  text-transform:uppercase;
  letter-spacing:-.02em;
  text-shadow:0 0 24px rgba(232,0,13,.45), 0 2px 8px rgba(0,0,0,.8);
}

.right-news .rn-text{
  display:flex;
  flex-direction:column;
  gap:.12rem;
}
.right-news .rn-title{
  font-size:.88rem;
  color:#e5e7eb;
  line-height:1.35;
}
.right-news .rn-meta{
  font-size:.66rem;
  color:#9ca3af;
}
.right-news .rn-more{
  display:block;
  margin-top:.55rem;
  font-size:.72rem;
  text-align:right;
  color:var(--muted);
}
.right-fixtures .rf-more{
  display:block;
  flex:0 0 auto;
  margin-top:.55rem;
  font-size:.72rem;
  text-align:right;
  color:var(--muted);
}

/* =========================
   BONUSES SIDEBAR BANNER — compact right panel
   ========================= */

/* Override global promo card: compact 2-col logo+text */
.home-sidebar .card.promo-item{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:.65rem;
  align-items:center;
  min-height:auto;
  padding:.7rem .75rem;
}

.home-sidebar .promo-logo{
  width:100px;
  height:70px;
  padding:0;
  border:1px solid #232636;
  border-radius:.5rem;
  overflow:hidden;
  background:rgba(255,255,255,.02);
  display:block;
}

@media (max-width:600px){
  .home-sidebar .card.promo-item{
    grid-template-columns:1fr;
  }
  .home-sidebar .promo-logo{
    width:100%;
    height:140px;
    border-radius:.6rem;
  }
}

/* Shrink text in sidebar promo cards */
.home-sidebar .hero .highlight > h1{
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 .3rem;
  color:#e5e7eb;
}
.home-sidebar .hero .highlight > p{
  font-size:.7rem;
  margin-bottom:.65rem;
  color:var(--muted);
}
.home-sidebar h3{
  font-size:.8rem;
  margin:.1rem 0 .05rem;
  line-height:1.25;
}
.home-sidebar .promo-meta{
  font-size:.65rem;
}
.home-sidebar .byline{
  font-size:.7rem;
}
.home-sidebar .muted{
  font-size:.68rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-sidebar .promo-actions{
  gap:.35rem;
  margin-top:.3rem;
}
.home-sidebar .btn{
  font-size:.72rem;
  padding:.3rem .6rem;
}
.home-sidebar .promo-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

/* Wrap sidebar hero section in a card-like panel */
.home-sidebar .hero{
  background:var(--card);
  border:1px solid #232636;
  border-radius:.85rem;
  padding:.8rem .85rem;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.home-sidebar .hero .highlight{
  all:unset;
  display:block;
}

/* =========================
   FIXTURES SIDEBAR BANNER — compact right panel
   ========================= */

.right-fixtures{
  background:var(--card);
  border:1px solid #232636;
  border-radius:.85rem;
  padding:.8rem .9rem;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  height:100%;
  box-sizing:border-box;
}

.right-fixtures h2{
  font-size:1.25rem;
  font-weight:800;
  margin:0 0 .5rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#e5e7eb;
  padding-bottom:.4rem;
  border-bottom:1px solid #1e2535;
  flex-shrink:0;
}

.right-fixtures .rf-table-wrap{
  margin-top:.1rem;
  flex:1 1 auto;
  min-height:200px; /* ensures content visible even with no parent height */
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#2a3045 transparent;
}
.right-fixtures .rf-table-wrap::-webkit-scrollbar{ width:4px; }
.right-fixtures .rf-table-wrap::-webkit-scrollbar-track{ background:transparent; }
.right-fixtures .rf-table-wrap::-webkit-scrollbar-thumb{ background:#2a3045; border-radius:4px; }

/* Mobile: remove height:100% dependency entirely */
@media(max-width:640px){
  .right-fixtures{
    height:auto;
  }
  .right-fixtures .rf-table-wrap{
    flex:none;
    min-height:0;
    max-height:400px;
  }
}

/* ── Header row: title + league filter pills on one line ── */
.rf-head-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  flex:0 0 auto;
  margin-bottom:.35rem;
}
.rf-head-row h2{
  margin:0;
  flex:0 0 auto;
}
.rf-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
  margin-left:auto;
  min-width:0;
}
.rf-filter{
  font-family:inherit;
  font-size:.66rem;
  padding:.18rem .55rem;
  border-radius:999px;
  background:var(--card, #141826);
  border:1px solid #232636;
  color:#9ca3af;
  cursor:pointer;
  transition:all .15s;
}
.rf-filter:hover{
  border-color:rgba(255,193,7,.4);
  color:#ffc107;
}
.rf-filter.active{
  background:rgba(255,193,7,.12);
  border-color:rgba(255,193,7,.4);
  color:#ffc107;
  font-weight:600;
}

/* ── Fixtures list: stacked cards ── */
.rf-list{
  display:flex;
  flex-direction:column;
}
.rf-item{
  padding:.55rem .15rem .6rem;
  border-bottom:1px solid rgba(148,163,253,.08);
}
.rf-item:last-child{ border-bottom:0; }

.rf-head{
  display:flex;
  align-items:center;
  gap:.45rem;
  min-width:0;
}
.rf-head .pill{
  display:inline-block;
  font-size:.62rem;
  padding:.06rem .28rem;
  border-radius:999px;
  background:rgba(37,99,235,.16);
  color:#bfdbfe;
  flex:0 0 auto;
}
.rf-time{
  font-size:.68rem;
  color:#9ca3af;
  flex:0 0 auto;
}
.rf-league{
  margin-left:auto;
  font-size:.66rem;
  color:#8890b0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rf-teams{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.3rem;
  margin-top:.3rem;
  color:#e5e7eb;
  font-size:.9rem;
  font-weight:600;
}
.rf-vs{
  opacity:.6;
  font-size:.7rem;
  font-weight:400;
}

/* ── Best odds strip: 3 equal columns (1 / X / 2), compare-page style ── */
.rf-odds{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.3rem;
  margin-top:.45rem;
  text-decoration:none;
}
.rf-odds-col{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-width:0;
}
.rf-odds-item{
  position:relative;
  display:flex;
  align-items:stretch;
  width:100%;
  padding:0;
  background:rgba(255,255,255,.02);
  border:1px solid #232636;
  border-radius:.5rem .5rem 0 0;
  min-width:0;
  min-height:48px;
  overflow:hidden;
}
/* Bookmaker logo full-bleeds the first 2/3 of the cell.
   The whole logo shows (contain) over a blurred copy of itself,
   so nothing gets cropped and no empty gaps appear. */
.rf-odds-logo{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:66.667%;
  min-width:0;
  display:block;
  overflow:hidden;
}
.rf-odds-logo-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(8px) brightness(.85);
  transform:scale(1.4);
}
.rf-odds-logo-img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.rf-odds-info{
  margin-left:66.667%;
  flex:1 1 auto;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  min-width:0;
  padding:.18rem .25rem .15rem;
}
/* Cells without a logo: odds info spans the full pill */
.rf-odds-info:first-child{
  margin-left:0;
}
.rf-odds-lbl{
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.04em;
  color:#8890b0;
  line-height:1.1;
}
.rf-odds-val{
  font-size:.88rem;
  font-weight:700;
  color:#ffc107;
  line-height:1.1;
}
.rf-odds-na{
  color:#4b5268;
  font-weight:400;
}
/* Name plate fused to the bottom of its pill */
.rf-odds-bm{
  display:block;
  max-width:100%;
  min-width:0;
  font-size:.58rem;
  color:#aab1cc;
  line-height:1.1;
  text-align:center;
  background:#1a1f2e;
  border:1px solid #232636;
  border-top:0;
  border-radius:0 0 .5rem .5rem;
  padding:.16rem .25rem;
}
.rf-odds-bm-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rf-odds:hover .rf-odds-item,
.rf-odds:hover .rf-odds-bm{
  border-color:rgba(255,193,7,.4);
}
.rf-odds:hover .rf-odds-item{
  background:rgba(255,193,7,.05);
}

/* Shared right-card for anything else in sidebar */
.right-card{
  background:var(--card);
  border:1px solid #232636;
  border-radius:.85rem;
  padding:.8rem .9rem;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.right-card h2{
  font-size:.78rem;
  font-weight:700;
  margin:0 0 .5rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#e5e7eb;
  padding-bottom:.4rem;
  border-bottom:1px solid #1e2535;
}

/* =========================================================================
   ANIMATED BACKDROP (homepage only — markup lives in index.php)
   Three large blurred blobs drifting behind the page in the brand colours.
   Animates transform/opacity only, so it stays on the GPU and never
   triggers layout on the odds tables.
   ========================================================================= */
.bg-fx{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:var(--bg,#0b0c10);
}
.bg-fx span{
  position:absolute;
  display:block;
  width:48vmax;
  height:48vmax;
  border-radius:50%;
  filter:blur(80px);
  opacity:.55;
  will-change:transform;
}
/* brand blue */
.bg-fx span:nth-child(1){
  background:#5199ea;
  top:-18%; left:-12%;
  animation:bgfx1 28s ease-in-out infinite;
}
/* brand gold */
.bg-fx span:nth-child(2){
  background:#f59e0b;
  top:30%; right:-18%;
  opacity:.38;
  animation:bgfx2 34s ease-in-out infinite;
}
/* deep blue */
.bg-fx span:nth-child(3){
  background:#1d4ed8;
  bottom:-20%; left:25%;
  animation:bgfx3 40s ease-in-out infinite;
}

/* Mismatched durations stop a visible repeating pattern */
@keyframes bgfx1{ 50%{ transform:translate3d(12vw,8vh,0) scale(1.15); } }
@keyframes bgfx2{ 50%{ transform:translate3d(-10vw,-6vh,0) scale(.9); } }
@keyframes bgfx3{ 50%{ transform:translate3d(6vw,-10vh,0) scale(1.1); } }

/* Accessibility: hold still for anyone who asks for reduced motion */
@media (prefers-reduced-motion:reduce){
  .bg-fx span{ animation:none; }
}

/* Mobile: cheaper blur, dialled back so it never fights the content */
@media (max-width:640px){
  .bg-fx span{ filter:blur(55px); opacity:.38; }
}

/* -------------------------------------------------------------------------
   Let the animated backdrop show through the news / blog image area.

   Tints MULTIPLY: a .22 blob under a 30% tint under a 55% tint leaves only
   ~7% of the colour — invisible. So the image area is left completely clear
   and the tint is applied only behind the text, where legibility matters.
   ------------------------------------------------------------------------- */
.right-news{
  background:transparent;
  border-color:rgba(35,38,54,.85);
}
.right-news .rn-item:first-child{
  background:transparent;
  border-color:rgba(35,38,54,.85);
}
.right-news .rn-thumb{
  background:transparent;
}
.right-news .rn-item:first-child .rn-thumb img{
  background:transparent;
}
/* Tint lives here only — keeps the headline readable over moving colour */
.right-news .rn-item:first-child .rn-text{
  background:rgba(7,9,26,.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
/* Compact rows below the hero */
.right-news .rn-item{
  background:rgba(5,8,17,.62);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.right-news .rn-item:hover{
  background:rgba(7,12,24,.75);
}
/* Section heading sits directly on the backdrop */
.right-news h2{
  background:transparent;
}

/* -------------------------------------------------------------------------
   The band beside the hero image — make every layer that could paint it
   see-through, so the backdrop shows in that gap.
   ------------------------------------------------------------------------- */
.right-news .rn-list .rn-item:first-child{ background:transparent !important; }
.right-news .rn-list .rn-item:first-child .rn-thumb{ background:transparent !important; }
.right-news .rn-list .rn-item:first-child .rn-thumb img{ background:transparent !important; }
.home-news-main{ background:transparent; }

/* =========================================================================
   FINAL OVERRIDE — make the hero news block genuinely see-through.

   The dark area around the picture is painted by up to five stacked layers:
   the card (.right-card), the hero <a>, the .rn-thumb box, the <img>'s own
   background, and the column wrapper. Every one of them is forced clear
   here with !important so nothing can win on specificity or source order.
   ========================================================================= */
.home-news-main,
.right-news,
.right-news.right-card,
.right-news .rn-list,
.right-news .rn-list > .rn-item:first-child,
.right-news .rn-list > .rn-item:first-child .rn-thumb,
.right-news .rn-list > .rn-item:first-child .rn-thumb img,
.right-news .rn-item:first-child,
.right-news .rn-item:first-child .rn-thumb,
.right-news .rn-item:first-child .rn-thumb img{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}

/* Keep the text block readable — it is the only part that keeps a fill */
.right-news .rn-list > .rn-item:first-child .rn-text{
  background:rgba(7,9,26,.72) !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

/* -------------------------------------------------------------------------
   Ticker stays OPAQUE.
   .bk-ticker's own fill is rgba(255,255,255,.02) — practically clear. It only
   looked dark before because the solid body colour sat behind it. Now the
   backdrop shows through, so we keep the original subtle gradient but stack
   it on a solid base.
   ------------------------------------------------------------------------- */
.bk-ticker{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--bg,#0b0c10) !important;

  /* <main class="container"> caps content at 1600px and centres it, so on a
     wide screen the ticker was inset while .home-layout below broke out to
     full width. Same break-out formula as .home-layout so the two align. */
  width:100vw;
  margin-left: calc(-1 * (100vw - 100%) / 2);
  margin-right: calc(-1 * (100vw - 100%) / 2);
  box-sizing:border-box;
}
/* Inner content stays centred and aligned with the rest of the page */
.bk-ticker-inner{
  max-width:1600px;
  margin-inline:auto;
}

/* -------------------------------------------------------------------------
   SPORT TAGS — suspended from the bottom edge of the ticker.
   Full-bleed like the ticker so both align with the layout below.
   ------------------------------------------------------------------------- */
.sport-tags-wrap{
  width:100vw;
  margin-left: calc(-1 * (100vw - 100%) / 2);
  margin-right: calc(-1 * (100vw - 100%) / 2);
  box-sizing:border-box;
  background:var(--bg,#0b0c10);
  border-bottom:1px solid #232636;
}
.sport-tags{
  max-width:1600px;
  margin-inline:auto;
  padding:0 1.5%;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}
.sport-tag{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem .85rem;
  border:0;
  border-radius:0 0 3px 3px;   /* squared, hanging down from the ticker */
  background:#141824;
  color:#c7cbd6;
  font-size:.85rem;
  font-weight:500;
  font-family:inherit;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.sport-tag:hover{
  background:#1b2130;
  color:var(--brand-blue,#5199ea);
}
/* Selected tag: gold underline hanging below, matching the nav accent */
.sport-tag.is-active{
  background:#1b2130;
  color:#fff;
}
.sport-tag.is-active::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--brand,#f59e0b);
}
.sport-tag-count{
  padding:.12rem .35rem;
  border-radius:2px;
  background:rgba(255,255,255,.09);
  font-size:.7rem;
  font-weight:700;
  color:#9ca3af;
}
.sport-tag.is-active .sport-tag-count{
  background:rgba(245,158,11,.18);
  color:var(--brand,#f59e0b);
}
/* Sports with no fixtures yet — still clickable, but visibly quiet */
.sport-tag.is-empty{ opacity:.45; }
.sport-tag.is-empty:hover{ opacity:.7; }

@media (max-width:640px){
  .sport-tags{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .sport-tags::-webkit-scrollbar{ display:none; }
  .sport-tag{ flex:0 0 auto; font-size:.8rem; padding:.45rem .7rem; }
}

/* -------------------------------------------------------------------------
   News block stripped back to just the image + text.
   The "Latest Sports News" heading is gone from home/right_news.php, and the
   card chrome (border, radius, padding, shadow) is removed here so the hero
   picture and its headline sit directly on the animated backdrop.
   ------------------------------------------------------------------------- */
.right-news,
.right-news.right-card{
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}
.right-news h2{ display:none !important; }

/* Hero item: no frame of its own */
.right-news .rn-list > .rn-item:first-child,
.right-news .rn-item:first-child{
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
.right-news .rn-list > .rn-item:first-child .rn-thumb,
.right-news .rn-item:first-child .rn-thumb{
  border:0 !important;
  border-radius:0 !important;
}
/* Headline + date sit straight under the picture, no panel behind them */
.right-news .rn-list > .rn-item:first-child .rn-text{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  padding:.75rem 0 0 !important;
}

/* -------------------------------------------------------------------------
   HERO NEWS IMAGE — final sizing.
   `contain` was fitting a near-square photo by its height, leaving big empty
   bands either side, and 16:9 across this column came out ~620px tall.
   `cover` fills the frame edge to edge, and the height is capped so the
   picture leads the page instead of swallowing it.
   ------------------------------------------------------------------------- */
.right-news .rn-list > .rn-item:first-child .rn-thumb,
.right-news .rn-item:first-child .rn-thumb{
  width:100% !important;
  aspect-ratio:16/9 !important;
  max-height:470px !important;
  height:auto !important;
  overflow:hidden !important;
  background:transparent !important;
}
.right-news .rn-list > .rn-item:first-child .rn-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  /* Crop from near the top of the frame. The second value is where the crop
     window sits: 0% = flush with the top of the photo, 100% = flush with the
     bottom. 8% keeps heads in with a sliver of headroom and sacrifices the
     grass at the bottom, which carries no information. */
  object-position:center 8% !important;
  display:block !important;
  background:transparent !important;
}

/* Headline + date under the picture */
.right-news .rn-list > .rn-item:first-child .rn-text{
  padding:.85rem 0 0 !important;
  background:transparent !important;
}
.right-news .rn-item:first-child .rn-title{
  font-size:1.15rem;
  font-weight:700;
  line-height:1.3;
  color:#f1f5f9;
  transition:color .15s ease;
}
.right-news .rn-item:first-child:hover .rn-title{
  color:var(--brand-blue,#5199ea);
}
.right-news .rn-item:first-child .rn-meta{
  margin-top:.3rem;
  font-size:.78rem;
  color:#8890b0;
}


/* -------------------------------------------------------------------------
   HERO IMAGE FULL-BLEED — left, right and upwards.
   .home-layout supplies padding-left:7rem, padding-right:1.5rem, gap:1.5rem
   and margin-top:1.5rem. Cancelling those with negative margins lets the
   picture run to the viewport edge on the left, across the gutter on the
   right, and up flush against the sport-tag bar.
   Only the IMAGE bleeds — the headline below stays on the text grid.
   ------------------------------------------------------------------------- */
.right-news .rn-list > .rn-item:first-child .rn-thumb,
.right-news .rn-item:first-child .rn-thumb{
  margin-left:-7rem !important;     /* cancels .home-layout padding-left */
  margin-right:-1.5rem !important;  /* reaches across the column gutter   */
  margin-top:-1.5rem !important;    /* cancels .home-layout margin-top    */
  width:auto !important;            /* let the negative margins widen it  */
  max-width:none !important;
  border-radius:0 !important;
}

/* A soft fade at the bottom so the photo melts into the backdrop instead of
   ending on a hard line now that it has no frame. */
.right-news .rn-list > .rn-item:first-child .rn-thumb{
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
}

/* Headline keeps the normal column alignment */
.right-news .rn-list > .rn-item:first-child .rn-text{
  margin-left:0 !important;
  margin-right:0 !important;
}


/* -------------------------------------------------------------------------
   HERO: let the picture run on DOWN BEHIND the headline instead of being
   cropped short. The frame gets taller (so far less of the photo is thrown
   away), the bottom fades out, and the headline is pulled up to sit inside
   that faded zone — so the image recedes behind the text rather than
   stopping at a hard edge above it.
   ------------------------------------------------------------------------- */
.right-news .rn-list > .rn-item:first-child .rn-thumb,
.right-news .rn-item:first-child .rn-thumb{
  aspect-ratio:16/10 !important;   /* taller frame = gentler crop */
  max-height:560px !important;
  /* long fade so the photo dissolves well before the text starts */
  -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%) !important;
  mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%) !important;
}

/* Headline rides up over the faded tail of the picture */
.right-news .rn-list > .rn-item:first-child .rn-text{
  position:relative !important;
  z-index:2 !important;
  margin-top:-5.5rem !important;
  padding:0 0 .25rem !important;
}
.right-news .rn-item:first-child .rn-title{
  text-shadow:0 2px 12px rgba(0,0,0,.65);
}
.right-news .rn-item:first-child .rn-meta{
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}


/* -------------------------------------------------------------------------
   HERO AS A BACKDROP — the picture is lifted out of the document flow and
   pinned behind the whole news column, so it runs on down behind the headline
   AND the article rows underneath, fading out as it goes.

   Flow layout could not do this: .rn-thumb is a sibling ABOVE .rn-text inside
   the first item, so it can never reach past its own row. Absolutely
   positioning it inside .rn-list lets everything else stack on top.
   ------------------------------------------------------------------------- */
.right-news .rn-list{
  position:relative !important;
  isolation:isolate;               /* keep the z-index game local */
}

.right-news .rn-list > .rn-item:first-child .rn-thumb{
  position:absolute !important;
  top:-1.5rem !important;          /* still bleeds up under the sport tags */
  left:-7rem !important;           /* ...and out to the viewport edge       */
  right:-1.5rem !important;
  width:auto !important;
  height:860px !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  z-index:0 !important;
  pointer-events:none;             /* never swallow clicks on the rows      */
  /* fades away across its lower half so text stays readable over it */
  -webkit-mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.55) 68%,transparent 97%) !important;
  mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.55) 68%,transparent 97%) !important;
}

/* Reserve the space the image used to occupy, so the headline lands low on
   the picture instead of at the very top of it. */
.right-news .rn-list > .rn-item:first-child{
  padding-top:520px !important;
  position:relative !important;
  z-index:1 !important;
}
.right-news .rn-list > .rn-item:first-child .rn-text{
  margin-top:0 !important;
  padding:0 0 .4rem !important;
}

/* Every row sits in front of the picture */
.right-news .rn-item{
  position:relative;
  z-index:1;
}

/* At <=1024px .home-layout's padding-left drops from 7rem to 1.5rem, so the
   -7rem bleed would shoot off-canvas. Match the smaller padding instead. */
@media (max-width:1024px){
  .right-news .rn-list > .rn-item:first-child .rn-thumb{
    height:520px !important;
    left:-1.5rem !important;
    right:-1.5rem !important;
    top:-1.5rem !important;
  }
  .right-news .rn-list > .rn-item:first-child{
    padding-top:330px !important;
  }
}
@media (max-width:640px){
  .right-news .rn-list > .rn-item:first-child .rn-thumb{
    height:400px !important;
    left:-1rem !important;
    right:-1rem !important;
  }
  .right-news .rn-list > .rn-item:first-child{
    padding-top:250px !important;
  }
}

/* -------------------------------------------------------------------------
   Align the fixtures column with the top of the hero image.
   The image is pulled up by 1.5rem (top:-1.5rem) to cancel .home-layout's
   margin-top and sit flush under the sport tags. The right-hand column was
   still starting at the normal grid top, so it hung 1.5rem lower.
   ------------------------------------------------------------------------- */
.home-fixtures-col{
  margin-top:-1.5rem;
}

/* Below 1024px the two columns stack (see the tablet/mobile rules above), so
   there is nothing to line up with — put the spacing back. */
@media (max-width:1024px){
  .home-fixtures-col{ margin-top:0; }
}