/* ====================================================================== */
/* SECTION WRAPPER — holds the white "LIVE SPORTS EVERY DAY" heading        */
/* above the ticker box, and on tablet/mobile the external CTA below.      */
/* ====================================================================== */
.alst-section{width:100%;max-width:1332px;margin:0 auto;padding:0 24px;box-sizing:border-box;}

/* Header above the ticker bar — centred title + optional intro paragraph, with
   a generous gap between them so they read as a clear pair. Mirrors the .aspa-header
   pattern used on the Play At section. */
.alst-section__header{display:flex;flex-direction:column;align-items:center;gap:24px;margin:0 auto 40px;max-width:900px;text-align:center;}
.alst-section-heading{margin:0;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:64px;line-height:0.9;color:#FFFFFF;text-transform:uppercase;letter-spacing:0.5px;}
.alst-section-intro{margin:0;font-family:'Montserrat',"Montserrat Fallback",sans-serif;font-weight:400;font-size:16px;line-height:1.4;color:#FFFFFF;max-width:640px;}

/* ====================================================================== */
/* TICKER CONTAINER                                                         */
/* Flex column with 3 children: stars-top, row, stars-bottom.               */
/* justify-content:space-between pins stars to top + bottom and centres     */
/* the row in between — works at every breakpoint without absolute hacks.   */
/* min-height keeps the box tall enough that the stars never crash into     */
/* the row content when fixtures happen to be short.                        */
/* ====================================================================== */
.allstars-livesports-ticker{
  position:relative;
  box-sizing:border-box;
  width:100%;
  max-width:1332px;
  margin:0 auto;
  min-height:227px;
  padding:20px 60px 20px 80px;
  background:#000000;
  border:2px solid #4d5358;
  border-radius:15px;
  color:#fff;
  font-family:'Montserrat',"Montserrat Fallback",'Helvetica Neue',Arial,sans-serif;
  font-weight:600;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  gap:14px;
}
.allstars-livesports-ticker *,
.allstars-livesports-ticker *::before,
.allstars-livesports-ticker *::after{box-sizing:border-box;}

/* ====================================================================== */
/* GHOSTED LEFT-SIDE IMAGE — fills the entire left edge of the container,    */
/* rounded left corners, sits BEHIND the stars + row via z-index. Opacity   */
/* dimmed enough that the white text reads cleanly on top.                  */
/* ====================================================================== */
.allstars-livesports-ticker.has-bg-image::before{
  content:"";
  position:absolute;
  top:-2px;
  bottom:-2px;
  left:-2px;
  width:338px;
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:1;
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  pointer-events:none;
  z-index:0;
}

/* ====================================================================== */
/* STARS (in-flow flex items, NOT absolutely positioned).                   */
/* justify-content:space-between spreads them evenly across the full        */
/* inner width. nth-child rules at smaller breakpoints hide some so the     */
/* visual spacing stays roughly consistent across viewports.                */
/* ====================================================================== */
.allstars-livesports-ticker .alst-stars{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  color:#c53322;
  pointer-events:none;
}
.allstars-livesports-ticker .alst-star{
  width:27px;
  height:27px;
  flex-shrink:0;
  display:block;
}

/* ====================================================================== */
/* MIDDLE ROW — fixtures + SEE MORE button.                                 */
/* ====================================================================== */
.allstars-livesports-ticker .alst-row{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:64px;
  width:100%;
}

.allstars-livesports-ticker .alst-fixtures{
  flex:1 1 0;
  min-width:0;
  max-width:937px;
  min-height:101px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.allstars-livesports-ticker .alst-fixture{
  display:none;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:0;
  padding-right:30px;
  opacity:0;
  transition:opacity .4s ease;
}
.allstars-livesports-ticker .alst-fixture.is-active{display:flex;opacity:1;}

.allstars-livesports-ticker .alst-col{
  text-align:center;
  font-weight:700;
  color:#fff;
  line-height:1.4;
}
.allstars-livesports-ticker .alst-col p{margin:0;}
.allstars-livesports-ticker .alst-col-sport{font-size:21px;}
.allstars-livesports-ticker .alst-col-date{font-size:18px;}
.allstars-livesports-ticker .alst-col-event{
  display:flex;
  align-items:center;
  gap:29px;
  font-size:19px;
}
.allstars-livesports-ticker .alst-col-event > p{line-height:1.2;}
.allstars-livesports-ticker .alst-team-logo{
  width:73px;
  height:73px;
  object-fit:contain;
  flex-shrink:0;
  background:transparent;
}
.allstars-livesports-ticker .alst-event-name{min-width:160px;}

.allstars-livesports-ticker .alst-divider-inner{
  width:2px;
  height:87px;
  background:#4d5358;
  flex-shrink:0;
  align-self:center;
}

/* SEE MORE button — in-bar, desktop only */
.allstars-livesports-ticker .alst-see-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:155px;
  height:48px;
  border:2px solid #c53322;
  border-radius:10px;
  padding:0;
  color:#fff;
  font-family:'Montserrat',"Montserrat Fallback",sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-decoration:none !important;
  line-height:1;
  flex-shrink:0;
  background:transparent;
  transition:background .2s ease,color .2s ease;
}
/* Defeat theme link-underlines, but DO NOT clear border-bottom (that would wipe out the 4th side of the button's red outline). */
.allstars-livesports-ticker a.alst-see-more,
.allstars-livesports-ticker a.alst-see-more:hover,
.allstars-livesports-ticker a.alst-see-more:focus,
.allstars-livesports-ticker a.alst-see-more:visited{text-decoration:none !important;}
.allstars-livesports-ticker .alst-see-more:hover,
.allstars-livesports-ticker .alst-see-more:focus{background:#c53322;color:#fff;}

.allstars-livesports-ticker .alst-empty{color:#c8ccd0;font-size:14px;}

/* External "See All Live Sports" button — tablet/mobile only */
.alst-see-all{
  display:none;
  width:fit-content;
  align-items:center;
  justify-content:center;
  margin:28px auto 0;
  padding:14px 32px;
  border:2px solid #c53322;
  border-radius:10px;
  background:transparent;
  color:#fff;
  font-family:'Montserrat',"Montserrat Fallback",sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-decoration:none !important;
  line-height:1;
  transition:background-color .2s ease,color .2s ease;
}
a.alst-see-all{text-decoration:none !important;}
.alst-see-all:hover,.alst-see-all:focus-visible{background:#c53322;color:#fff;outline:none;}

/* ====================================================================== */
/* RESPONSIVE — TABLET + smaller (<=1199px)                                  */
/* Layout stays HORIZONTAL like desktop (sport | divider | date | divider  */
/* | event). The in-bar SEE MORE button drops out and is replaced by the   */
/* external "See All Live Sports" CTA below the ticker — that frees up the */
/* whole bar width for the fixture content.                                */
/* ====================================================================== */
@media (max-width:1199px){
  .alst-section-heading{font-size:44px;margin-bottom:20px;}

  .allstars-livesports-ticker{
    padding:28px 32px;
    min-height:auto;        /* let the (shorter) horizontal row drive height */
    gap:18px;
  }

  /* Bg image is decorative — kill it entirely on small screens */
  .allstars-livesports-ticker.has-bg-image::before{display:none;}

  /* Tablet shows the full 21-star row — the every-2nd hide rule has been
     moved down to the mobile-only block so tablet reads denser, matching
     desktop rhythm. */

  /* Hide the in-bar SEE MORE; show external See All Live Sports below.
     display:flex (block-level) NOT inline-flex — inline-level elements don't honour margin:auto,
     so the inherited `margin:28px auto 0` only centres horizontally on block-level boxes. */
  .allstars-livesports-ticker .alst-see-more{display:none;}
  .alst-see-all{display:flex;}

  /* Row only contains .alst-fixtures now — give it the full inner width. */
  .allstars-livesports-ticker .alst-row{gap:0;}
  .allstars-livesports-ticker .alst-fixtures{
    flex:1 1 0;
    width:100%;
    min-width:0;
    max-width:none;
  }

  /* Fixture keeps horizontal layout. The desktop rule uses
     justify-content:space-between which pins cols to the edges — fine on
     desktop where the SEE MORE button anchors the right side, but on tablet
     it leaves Sport hard-left and Event hard-right. Switch to flex-grow so
     each col owns an equal share of the bar AND its content centres inside
     that share. The event col gets extra weight (1.6) because team names +
     badges genuinely need more horizontal room than the sport / date cols. */
  .allstars-livesports-ticker .alst-fixture{
    padding-right:0;
    gap:14px;
    justify-content:stretch;
  }
  .allstars-livesports-ticker .alst-col{
    flex:1 1 0;
    min-width:0;
  }
  .allstars-livesports-ticker .alst-col-event{
    flex:1.6 1 0;
    justify-content:center;       /* centre the logo|text|logo group inside the col */
    gap:14px;
    font-size:16px;
  }
  .allstars-livesports-ticker .alst-col-sport{font-size:18px;}
  .allstars-livesports-ticker .alst-col-date{font-size:15px;}
  .allstars-livesports-ticker .alst-team-logo{width:48px;height:48px;}
  .allstars-livesports-ticker .alst-divider-inner{
    width:2px;
    height:70px;
    align-self:center;
  }
  /* Trailing divider after the event col is visually redundant. */
  .allstars-livesports-ticker .alst-fixture > .alst-divider-inner:last-child{display:none;}
}

/* ====================================================================== */
/* RESPONSIVE — MOBILE only (<=767px)                                       */
/* THIS is where the fixture finally collapses to a vertical stack         */
/* (sport → horizontal rule → date → horizontal rule → teams).             */
/* Tablet stays horizontal courtesy of the block above.                     */
/* ====================================================================== */
@media (max-width:767px){
  .allstars-livesports-ticker{padding:24px 16px;gap:18px;}
  /* Halve the star count on mobile to keep visual spacing comfortable —
     small-mobile (<=640px) further narrows this to 9 specific stars. */
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(2n){display:none;}
  .allstars-livesports-ticker .alst-row{flex-direction:column;gap:24px;}
  .allstars-livesports-ticker .alst-fixture{
    flex-direction:column;
    gap:18px;
    width:100%;
    align-items:stretch;
  }
  .allstars-livesports-ticker .alst-col{width:100%;}
  .allstars-livesports-ticker .alst-col-sport{font-size:20px;}
  .allstars-livesports-ticker .alst-col-date{font-size:17px;}
  .allstars-livesports-ticker .alst-col-event{
    flex-direction:row;
    justify-content:center;
    gap:16px;
    font-size:17px;
    flex-wrap:wrap;
  }
  .allstars-livesports-ticker .alst-team-logo{width:54px;height:54px;}
  /* Dividers become full-width horizontal rules in the stacked layout. */
  .allstars-livesports-ticker .alst-divider-inner{
    width:80%;
    height:1px;
    align-self:center;
  }
}

/* ====================================================================== */
/* RESPONSIVE — SMALL MOBILE (<=640px)                                      */
/* Even fewer stars (~7 visible), tighter padding, smaller logos.           */
/* ====================================================================== */
@media (max-width:640px){
  .alst-section{padding:0 16px;}
  .alst-section-heading{font-size:36px;}
  .allstars-livesports-ticker{padding:28px 16px;min-height:380px;}
  /* Star count target: 9 visible.
     The tablet rule above (max-width:1199px) hides every 2nd star (11 visible).
     Without resetting that, both rules would cascade and leave only 4 visible.
     Step 1: re-show every star to clear the tablet rule.
     Step 2: hide the 12 positions that aren't in our keep list (1,3,5,8,10,12,15,17,19). */
  .allstars-livesports-ticker .alst-stars .alst-star{display:block;}
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(2),
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(4),
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(6),
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(7),
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(9),
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(11),
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(13),
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(14),
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(16),
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(18),
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(20),
  .allstars-livesports-ticker .alst-stars .alst-star:nth-child(21){display:none;}
  .allstars-livesports-ticker .alst-col-sport{font-size:18px;}
  .allstars-livesports-ticker .alst-col-date{font-size:15px;}
  .allstars-livesports-ticker .alst-col-event{font-size:16px;}
  .allstars-livesports-ticker .alst-team-logo{width:44px;height:44px;}
}
/*# sourceURL=allstars-livesports-ticker-inline-css */