/* KARAGO Sportaki Frontend Repair Hotfix 1.2.0 */

/* =========================================================
   HERO — desktop: one large story + vertically scrolling list
   Every side story keeps BOTH thumbnail + title.
   ========================================================= */
.sportaki-hero-v120 .sportaki-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(300px,1fr);
  gap:16px;
  align-items:stretch;
}

.sportaki-hero-v120 .sportaki-hero-main,
.sportaki-hero-v120 .sportaki-hero-link,
.sportaki-hero-v120 .sportaki-hero-media{
  min-width:0;
}

.sportaki-hero-v120 .sportaki-hero-media{
  aspect-ratio:16 / 8.8;
}

.sportaki-hero-v120 .sportaki-hero-side{
  display:flex;
  flex-direction:column;
  min-width:0;
  max-height:100%;
  overflow:hidden;
}

.sportaki-hero-v120 .sportaki-hero-side-head{
  flex:0 0 auto;
  padding:12px 14px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.sportaki-hero-v120 .sportaki-hero-side-list{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  overflow-y:hidden;
  scroll-behavior:smooth;
}

.sportaki-hero-v120 .sportaki-hero-item{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  min-width:0;
  padding:7px;
  border-radius:11px;
  text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.sportaki-hero-v120 .sportaki-hero-item.is-active{
  background:rgba(50,125,210,.16);
  border-color:rgba(120,195,255,.38);
}

.sportaki-hero-v120 .sportaki-hero-thumb{
  width:92px;
  aspect-ratio:16 / 9;
  border-radius:8px;
  background-color:#0b1420;
  background-size:cover;
  background-position:center;
}

.sportaki-hero-v120 .sportaki-hero-item-title{
  min-width:0;
  font-size:13px;
  line-height:1.25;
  font-weight:800;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

@media (max-width:1200px) and (min-width:768px){
  .sportaki-hero-v120 .sportaki-hero-grid{
    grid-template-columns:minmax(0,3fr) minmax(280px,1fr);
  }
  .sportaki-hero-v120 .sportaki-hero-item{
    grid-template-columns:78px minmax(0,1fr);
  }
  .sportaki-hero-v120 .sportaki-hero-thumb{width:78px;}
}

/* Mobile = one clean hero; side list is intentionally removed. */
@media (max-width:767px){
  .sportaki-fw-zone.sportaki-hero-v120{
    margin-top:12px;
    margin-bottom:12px;
  }
  .sportaki-hero-v120 .sportaki-fw-inner{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
  }
  .sportaki-hero-v120 .sportaki-hero-grid{
    display:block;
  }
  .sportaki-hero-v120 .sportaki-hero-side{
    display:none !important;
  }
  .sportaki-hero-v120 .sportaki-hero-media{
    aspect-ratio:16 / 9;
    border-radius:14px;
    overflow:hidden;
  }
  .sportaki-hero-v120 .sportaki-hero-caption{
    min-height:0;
    height:42%;
    padding:12px 14px;
  }
  .sportaki-hero-v120 .sportaki-hero-title{
    font-size:clamp(17px,5vw,23px);
    line-height:1.16;
    max-width:96%;
  }
}

/* =========================================================
   COVERNEWS MOBILE MENU — compatibility, not replacement.
   The site's old custom CSS forces #primary-menu to flex !important.
   We only neutralize that on mobile, then mirror CoverNews' own hamburger
   state. CoverNews keeps control of submenu +/- behavior.
   ========================================================= */
@media (max-width:991px){
  #site-navigation.main-navigation{
    z-index:1000 !important;
    overflow:visible !important;
  }

  #site-navigation.main-navigation .navigation-container{
    width:100% !important;
  }

  #site-navigation.main-navigation .toggle-menu{
    display:block !important;
    position:relative !important;
    z-index:10002 !important;
  }

  /* Defeat old global display:flex!important + left logo padding. */
  body #site-navigation.main-navigation .menu > ul#primary-menu.menu-mobile,
  body #site-navigation.main-navigation ul#primary-menu.menu-mobile{
    display:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:0 !important;
  }

  body #site-navigation.main-navigation.sportaki-covernews-menu-open .menu > ul#primary-menu.menu-mobile,
  body #site-navigation.main-navigation.sportaki-covernews-menu-open ul#primary-menu.menu-mobile{
    display:block !important;
  }

  #site-navigation.main-navigation .menu .menu-mobile li{
    width:100% !important;
    float:none !important;
  }

  #site-navigation.main-navigation .menu .menu-mobile li > a{
    width:100% !important;
    white-space:normal !important;
    box-sizing:border-box !important;
  }

  /* Keep CoverNews' own +/- button visible and usable. */
  #site-navigation.main-navigation .menu .menu-mobile li a button.covernews-icon-angle-down{
    display:block !important;
    z-index:2 !important;
  }
}

/* =========================================================
   MOBILE POLLS CTA — small, discreet, below menu and never above dropdowns.
   Desktop remains unchanged.
   ========================================================= */
@media (max-width:767px){
  #sportaki-polls-bar.sportaki-polls-bar{
    width:max-content !important;
    max-width:calc(100vw - 24px) !important;
    margin:8px 12px 10px auto !important;
    border:1px solid rgba(120,190,255,.30) !important;
    border-radius:999px !important;
    box-shadow:0 4px 12px rgba(0,0,0,.22) !important;
    overflow:hidden !important;
    position:relative !important;
    z-index:2 !important;
  }

  #sportaki-polls-bar .container{
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  #sportaki-polls-bar .sportaki-polls-link{
    width:auto !important;
    min-height:36px !important;
    padding:7px 12px !important;
    flex-direction:row !important;
    gap:6px !important;
    white-space:nowrap !important;
  }

  #sportaki-polls-bar .sportaki-polls-icon{
    font-size:15px !important;
  }

  #sportaki-polls-bar .sportaki-polls-text{
    font-size:11px !important;
    line-height:1 !important;
    letter-spacing:.25px !important;
  }

  #sportaki-polls-bar .sportaki-polls-sub{
    display:none !important;
  }
}