/* Football league pages intentionally inherit the PBA page template. */
body[data-football-league] .featured-game::before{
  content:attr(data-competition);
}
body[data-football-league] .hero-copy{max-width:590px}
body[data-football-league] .league-logo{
  width:150px;
  height:82px;
  object-fit:contain;
}
body[data-football-league] .standings-grid{
  grid-template-columns:1fr;
}
body[data-football-league] .standings-table th,
body[data-football-league] .standings-table td{
  white-space:nowrap;
}
body[data-football-league] .standings-table th:nth-child(n+3),
body[data-football-league] .standings-table td:nth-child(n+3){
  width:auto;
  min-width:48px;
  text-align:center;
  font-size:.82rem;
  letter-spacing:0;
}
body[data-football-league] .standings-table td:last-child{
  font-size:1rem;
  font-weight:950;
}
body[data-football-league] .football-table-scroll{overflow-x:auto}
body[data-football-league] .football-source-note{
  margin-top:9px;
  color:#76889b;
  font-size:.7rem;
}
body[data-football-league] .football-highlight-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
body[data-football-league] .media-card .play-button{
  color:#fff;
}
body[data-football-league] .top-player-card.no-photo{
  padding-left:18px;
}
body[data-football-league] .league-logo-fallback{
  display:none;
  font-size:2rem;
  font-weight:1000;
  letter-spacing:-.05em;
}
body[data-football-league] .league-logo-fallback.visible{display:block}
@media(max-width:720px){
  body[data-football-league] .league-logo{width:136px;height:72px}
  body[data-football-league] .standings-table{min-width:650px}
}

body[data-football-league] .football-highlight-link{
  appearance:none;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.football-highlight-dialog{
  width:min(960px,calc(100vw - 24px));
  max-width:960px;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:#000;
  color:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.72);
}
.football-highlight-dialog::backdrop{background:rgba(0,0,0,.82)}
.football-highlight-shell{position:relative;padding:42px 10px 10px}
.football-highlight-close{
  position:absolute;right:12px;top:8px;
  width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:1.35rem;line-height:1;cursor:pointer
}
.football-highlight-video{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.football-highlight-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* FINAL FOOTBALL HERO — exact UAAP 1536x512 / 3:1 rules */
#football-hero{
  --football-hero-end:#000;
  --football-hero-copy:#eef2f6;
  --football-hero-button-bg:#fff;
  --football-hero-button-fg:#07111c;
  background:var(--football-hero-end) !important;
}
#football-hero .league-logo{
  width:auto !important;
  height:170px !important;
  max-width:150px !important;
  object-fit:contain !important;
  object-position:center !important;
  image-rendering:auto !important;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.52)) !important;
  transform:translateZ(0) !important;
}
#football-hero .league-lockup{
  align-items:center !important;
  margin-bottom:8px !important;
  position:relative !important;
  display:inline-flex !important;
  isolation:isolate !important;
}
#football-hero .league-lockup::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  left:50% !important;
  top:50% !important;
  width:150px !important;
  height:150px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  pointer-events:none !important;
  background:radial-gradient(
    circle,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.16) 34%,
    rgba(255,255,255,.06) 58%,
    rgba(255,255,255,0) 76%
  ) !important;
  filter:blur(4px) !important;
}
#football-hero .league-logo{
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.42))
    drop-shadow(0 6px 16px rgba(0,0,0,.48)) !important;
}
#football-hero .league-logo-fallback{
  position:relative !important;
  z-index:2 !important;
}

:root[data-theme="light"] #football-hero{
  --football-hero-end:#f4f6f8;
  --football-hero-copy:#111827;
  --football-hero-button-bg:#111827;
  --football-hero-button-fg:#fff;
}

/* Desktop: preserve the native 1536x512 (3:1) hero composition. */
@media(min-width:901px){
  #football-hero{
    width:100% !important;
    height:33.333vw !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
    color:#fff !important;
  }
  #football-hero::before{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-image:var(--hero-image) !important;
    background-size:100% auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
  }
  #football-hero::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:1 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    height:34% !important;
    pointer-events:none !important;
    background:linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      color-mix(in srgb,var(--football-hero-end) 8%,transparent) 28%,
      color-mix(in srgb,var(--football-hero-end) 28%,transparent) 52%,
      color-mix(in srgb,var(--football-hero-end) 62%,transparent) 76%,
      var(--football-hero-end) 100%
    ) !important;
  }
  #football-hero .hero-shell{
    position:relative !important;
    z-index:2 !important;
    min-height:0 !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    padding-top:16px !important;
    padding-bottom:16px !important;
  }
  #football-hero .hero-copy{
    position:relative !important;
    width:min(430px,44%) !important;
    max-width:430px !important;
    padding:0 !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  #football-hero .league-lockup{
    margin:18px 0 8px 26px !important;
  }
  #football-hero .league-logo{
    width:auto !important;
    height:160px !important;
    max-width:144px !important;
  }
  #football-hero p{
    margin:0 !important;
    max-width:420px !important;
    color:#fff !important;
    font-weight:700 !important;
    font-size:.96rem !important;
    line-height:1.5 !important;
    text-shadow:
      0 2px 3px rgba(0,0,0,1),
      0 0 10px rgba(0,0,0,.98),
      0 0 22px rgba(0,0,0,.82) !important;
  }
  #football-hero .hero-actions{margin-top:15px !important}
  #football-hero .primary-btn{
    background:#fff !important;
    color:#07111c !important;
    box-shadow:0 9px 24px rgba(0,0,0,.34) !important;
  }
}

/* Tablet: display the entire 3:1 artwork first, then the copy below. */
@media(min-width:721px) and (max-width:900px){
  #football-hero{
    min-height:0 !important;
    height:auto !important;
    background:var(--football-hero-end) !important;
  }
  #football-hero::before{
    inset:0 0 auto 0 !important;
    width:100% !important;
    height:33.333vw !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 58%,
        color-mix(in srgb,var(--football-hero-end) 16%,transparent) 72%,
        color-mix(in srgb,var(--football-hero-end) 46%,transparent) 86%,
        var(--football-hero-end) 100%
      ),
      var(--hero-image) !important;
    background-size:100% 100%,100% auto !important;
    background-position:center center,center top !important;
    background-repeat:no-repeat !important;
  }
  #football-hero::after{
    display:none !important;
    content:none !important;
  }
  #football-hero .hero-shell{
    min-height:0 !important;
    padding-top:calc(33.333vw + 10px) !important;
    padding-bottom:22px !important;
  }
  #football-hero .hero-copy{
    width:100% !important;
    max-width:520px !important;
  }
  #football-hero .league-lockup{
    margin:22px 0 10px 18px !important;
  }
}

/* Mobile: same full-width 3:1 artwork, never stretched or cropped. */
@media(max-width:720px){
  #football-hero{
    min-height:0 !important;
    height:auto !important;
    background:var(--football-hero-end) !important;
    color:var(--football-hero-copy) !important;
  }
  #football-hero::before{
    inset:0 0 auto 0 !important;
    width:100% !important;
    height:33.333vw !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 56%,
        color-mix(in srgb,var(--football-hero-end) 10%,transparent) 67%,
        color-mix(in srgb,var(--football-hero-end) 34%,transparent) 78%,
        color-mix(in srgb,var(--football-hero-end) 68%,transparent) 89%,
        var(--football-hero-end) 100%
      ),
      var(--hero-image) !important;
    background-size:100% 100%,100% auto !important;
    background-position:center center,center top !important;
    background-repeat:no-repeat !important;
  }
  #football-hero::after{
    display:none !important;
    content:none !important;
  }
  #football-hero .hero-shell{
    position:relative !important;
    z-index:2 !important;
    min-height:0 !important;
    padding-top:calc(33.333vw + 10px) !important;
    padding-bottom:26px !important;
    align-items:flex-start !important;
  }
  #football-hero .hero-copy{
    width:100% !important;
    max-width:410px !important;
    padding-top:0 !important;
  }
  #football-hero .league-lockup{
    margin:22px 0 10px 18px !important;
  }
  #football-hero .league-lockup::before{
    width:145px !important;
    height:145px !important;
    background:radial-gradient(
      circle,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.12) 36%,
      rgba(255,255,255,.04) 60%,
      rgba(255,255,255,0) 78%
    ) !important;
  }
  #football-hero .league-logo{
    width:auto !important;
    height:160px !important;
    max-width:142px !important;
  }
  #football-hero p{
    color:var(--football-hero-copy) !important;
    text-shadow:none !important;
  }
  #football-hero .primary-btn{
    background:var(--football-hero-button-bg) !important;
    color:var(--football-hero-button-fg) !important;
  }
}
@media(max-width:520px){
  #football-hero .league-logo{
    height:150px !important;
    max-width:134px !important;
  }
}


/* Artwork-first league heroes: preserve the full 3:1 artwork on every screen. */
#football-hero.hero--artwork {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 3 / 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  --football-hero-end: #000;
}
#football-hero.hero--artwork .hero-overlay,
#football-hero.hero--artwork .hero-shell {
  display: none !important;
}
#football-hero.hero--artwork::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background-color: #000 !important;
  background-image: var(--hero-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
#football-hero.hero--artwork::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: -1px !important;
  height: 46% !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.03) 18%,
    rgba(0,0,0,.12) 36%,
    rgba(0,0,0,.32) 56%,
    rgba(0,0,0,.62) 74%,
    rgba(0,0,0,.88) 90%,
    #000 100%
  ) !important;
  box-shadow: 0 2px 0 #000 !important;
}
@media (max-width: 900px) {
  #football-hero.hero--artwork {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 3 / 1 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  #football-hero.hero--artwork::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    background-color: #000 !important;
    background-image: var(--hero-image) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #football-hero.hero--artwork::after {
    display: block !important;
    content: "" !important;
    top: auto !important;
    bottom: -1px !important;
    height: 54% !important;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.04) 16%,
      rgba(0,0,0,.14) 34%,
      rgba(0,0,0,.36) 54%,
      rgba(0,0,0,.66) 72%,
      rgba(0,0,0,.90) 89%,
      #000 100%
    ) !important;
    box-shadow: 0 2px 0 #000 !important;
  }
}


/* HERO IMAGE RENDER FIX — six football league pages */
#football-hero.hero--artwork{
  position:relative !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:3 / 1 !important;
  padding:0 !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:#000 !important;
}
#football-hero.hero--artwork::before{
  content:none !important;
  display:none !important;
  background:none !important;
}
#football-hero.hero--artwork .hero-artwork-img{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  transform:none !important;
}
#football-hero.hero--artwork .hero-overlay,
#football-hero.hero--artwork .hero-shell{
  display:none !important;
}
#football-hero.hero--artwork::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:-1px !important;
  height:42% !important;
  pointer-events:none !important;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.04) 24%,
    rgba(0,0,0,.16) 44%,
    rgba(0,0,0,.40) 64%,
    rgba(0,0,0,.72) 82%,
    #000 100%
  ) !important;
  box-shadow:0 2px 0 #000 !important;
}
@media(max-width:900px){
  #football-hero.hero--artwork{
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:3 / 1 !important;
  }
  #football-hero.hero--artwork .hero-artwork-img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
  #football-hero.hero--artwork::after{
    height:50% !important;
  }
}


/* LIGHT MODE HERO BOTTOM FADE — six football league pages */
:root[data-theme="light"] #football-hero.hero--artwork{
  background:#f4f6f8 !important;
}
:root[data-theme="light"] #football-hero.hero--artwork::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:-1px !important;
  height:46% !important;
  pointer-events:none !important;
  background:linear-gradient(
    180deg,
    rgba(244,246,248,0) 0%,
    rgba(244,246,248,.05) 18%,
    rgba(244,246,248,.14) 34%,
    rgba(244,246,248,.30) 52%,
    rgba(244,246,248,.56) 68%,
    rgba(244,246,248,.82) 84%,
    #f4f6f8 100%
  ) !important;
  box-shadow:none !important;
}
@media(max-width:900px){
  :root[data-theme="light"] #football-hero.hero--artwork::after{
    height:56% !important;
    background:linear-gradient(
      180deg,
      rgba(244,246,248,0) 0%,
      rgba(244,246,248,.06) 16%,
      rgba(244,246,248,.16) 32%,
      rgba(244,246,248,.34) 50%,
      rgba(244,246,248,.60) 68%,
      rgba(244,246,248,.84) 86%,
      #f4f6f8 100%
    ) !important;
  }
}



/* MOBILE FOOTBALL STANDINGS — fit all columns in one view */
@media(max-width:720px){
  body[data-football-league] .football-table-scroll{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  body[data-football-league] .standings-table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }
  body[data-football-league] .standings-table th,
  body[data-football-league] .standings-table td{
    padding:7px 2px !important;
    font-size:.66rem !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
  }
  body[data-football-league] .standings-table th{
    font-size:.50rem !important;
    letter-spacing:.03em !important;
  }
  body[data-football-league] .standings-table th:nth-child(1),
  body[data-football-league] .standings-table td:nth-child(1){
    width:22px !important;
    text-align:center !important;
  }
  body[data-football-league] .standings-table th:nth-child(2),
  body[data-football-league] .standings-table td:nth-child(2){
    width:auto !important;
    min-width:0 !important;
  }
  body[data-football-league] .standings-table th:nth-child(3),
  body[data-football-league] .standings-table td:nth-child(3),
  body[data-football-league] .standings-table th:nth-child(4),
  body[data-football-league] .standings-table td:nth-child(4),
  body[data-football-league] .standings-table th:nth-child(5),
  body[data-football-league] .standings-table td:nth-child(5),
  body[data-football-league] .standings-table th:nth-child(6),
  body[data-football-league] .standings-table td:nth-child(6){
    width:26px !important;
    min-width:0 !important;
    text-align:center !important;
    font-size:.68rem !important;
  }
  body[data-football-league] .standings-table th:nth-child(7),
  body[data-football-league] .standings-table td:nth-child(7){
    width:32px !important;
    min-width:0 !important;
    text-align:center !important;
    font-size:.66rem !important;
  }
  body[data-football-league] .standings-table th:nth-child(8),
  body[data-football-league] .standings-table td:nth-child(8){
    width:34px !important;
    min-width:0 !important;
    text-align:center !important;
    font-size:.74rem !important;
    font-weight:950 !important;
  }
  body[data-football-league] .standing-team{
    min-width:0 !important;
    min-height:36px !important;
    gap:5px !important;
    font-size:.66rem !important;
    font-weight:850 !important;
  }
  body[data-football-league] .standing-team img{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
  }
  body[data-football-league] .standing-team span{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}
@media(max-width:390px){
  body[data-football-league] .standings-table th,
  body[data-football-league] .standings-table td{
    padding-left:1px !important;
    padding-right:1px !important;
  }
  body[data-football-league] .standings-table th:nth-child(3),
  body[data-football-league] .standings-table td:nth-child(3),
  body[data-football-league] .standings-table th:nth-child(4),
  body[data-football-league] .standings-table td:nth-child(4),
  body[data-football-league] .standings-table th:nth-child(5),
  body[data-football-league] .standings-table td:nth-child(5),
  body[data-football-league] .standings-table th:nth-child(6),
  body[data-football-league] .standings-table td:nth-child(6){
    width:24px !important;
  }
  body[data-football-league] .standings-table th:nth-child(7),
  body[data-football-league] .standings-table td:nth-child(7){width:30px !important}
  body[data-football-league] .standings-table th:nth-child(8),
  body[data-football-league] .standings-table td:nth-child(8){width:32px !important}
  body[data-football-league] .standing-team{gap:4px !important;font-size:.62rem !important}
  body[data-football-league] .standing-team img{
    width:25px !important;
    height:25px !important;
    flex-basis:25px !important;
  }
}