@media screen and (max-width: 1360px){
    .site-wrap {
        width:100%;
        float:left;
        padding:0 10px;
        box-sizing:border-box; 
    }
    
  }  
@media screen and (max-width: 1140px){
    .rankings-wrap {
        flex-wrap:wrap;
    }
    .left-ranking-wrap {
        width:100%;
    }
    .right-ranking-wrap {
        width: 100%;
        float: left;
        display: flex;
        justify-content: center;
    }
    .right-ranking-wrap a {
        width: 400px;
        float: left;
    }
}
@media screen and (max-width: 1080px){
    .view-page-column {
        flex-wrap:wrap;
    }
    .is-contact-page .map {
        width: calc(100% - 300px);
        float: left;
    }
    .view-page-column .left-container {
        width:100%;
    }
}
@media screen and (max-width: 1060px){
    .broadcasts-wrap .live-slide {
        width: calc(50% - 10px);
        float: left;
    }
}
@media screen and (max-width: 980px){
    .logo-njoy {
        width:100px;
        float:left;
    }
    .now-go .name {
        font-size:15px;
    }
    .left-btn-part .img img {
        width:60px;
        height: 60px;
    }
    .info-song .song {
        font-size:15px;
    }
    .right-btn-part .icon{
        width:40px;
        height: 40px;
    }
    .right-btn-part .icon img{
        width:100%;
        height: 100%;
    }
    .info-song .more-info {
        font-size:13px;
    }
    .logo-njoy img {
        float:left;
        width:100%;
    }
    .left-live-part {
        width:100%;
    }
    .live-section {
        flex-wrap:wrap;
    }
    .right-live-part {
        width:100%;
    }
    .is-scroll {
    overflow-x: auto;
    width: 100%;
  }

  .all-podcasts {
    display: inline-flex;
    gap: 16px;
  }

  .all-podcasts > * {
    flex: 0 0 auto;
  }
}
@media screen and (max-width: 850px){
    .left-container .all-news-l .live-slide {
        width: calc(50% - 10px);
    }
    .is-contact-page .bottom-box {
        width: 100%;
    } 
    .is-contact-page .map {
        width:100%;
    } 
    .map img {
        width:100%;
        float:left;
    }     
}
@media screen and (max-width: 650px){
    .is-games .news-box {
        width:100%;
    }
    .bottom-boxes {
        flex-wrap:wrap;
    }
    .bottom-boxes .bottom-box {
        width:100%;
    }
    .broadcasts-wrap .live-slide {
        width: 100%;
        float: left;
    }
    .broadcasts-wrap .live-slide img {
        height: auto;
    }
    .live-info .title {
        font-size:22px;
    }
    .live-info {
        padding:10px;
        box-sizing:border-box;
        width:100%;
    }
    .big-news {
        width:100% !important;
    }
    .left-live-part .live-image {
        display:none;
    }
    
    .left-links {
        display:none !important;
    }
    .search-wrap {
        display:none;
    }  
    .bottom-red-header {
        min-height: 230px;
    }
    .top-header, .middle-header {
        display:none;
    }
    .mobile-header-wrap {
        display:block;
        float:left;
        width:100%;
        padding:10px 0px;
        box-sizing:border-box;
        position:relative;
        overflow:hidden;
        background:
            radial-gradient(circle at 14% 50%, rgba(239,125,0,0.10) 0%, rgba(239,125,0,0) 55%),
            radial-gradient(circle at 92% 50%, rgba(250,163,28,0.09) 0%, rgba(250,163,28,0) 55%),
            #fff;
    }
    .mobile-header-wrap::before {
        content:"";
        position:absolute;
        left:-40px;
        top:50%;
        width:160px;
        height:160px;
        border-radius:50%;
        transform:translateY(-50%);
        background: radial-gradient(circle, rgba(82,177,83,0.08) 0%, rgba(82,177,83,0) 65%);
        pointer-events:none;
        z-index:0;
    }
    .mobile-header-wrap::after {
        content:"";
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        height:1px;
        background: linear-gradient(90deg, rgba(233,84,14,0) 0%, rgba(233,84,14,0.55) 30%, rgba(250,163,28,0.55) 70%, rgba(250,163,28,0) 100%);
        box-shadow: 0 0 8px rgba(239,125,0,0.25);
        pointer-events:none;
    }
    .mobile-header-wrap > .site-wrap { position:relative; z-index:1; }
    .mobile-header {
        float:left;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }
    .right-mobile-btns {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        flex:0 0 auto;
    }
    .mobile-logo-box {
        width:120px;
        flex:0 0 120px;
    }
    .mobile-logo-box img {
        display:block;
        width:100%;
    }
    .left-img {
        display:none;
    }
    .right-info {
        width:100%;
    }
    .section-title {
        font-size:18px;
        padding-left:44px;
    }
    .all-headings .heading-box .image {
        width:130px;
    }
    .all-headings .heading-box .information {
        width:calc(100% - 130px);
    }
    .all-headings .heading-box .image img {
        height: 130px;
    }
    .section-title:before {
        width:35px;
        height: 35px;
    }
    .games-wrap {
        flex-wrap:wrap;
    }
    .games-wrap .news-box {
        width:100%;
    }
    .all-cats {
        flex-wrap:wrap;
    }
    .cat-column {
        width:100%;
    }
    .galleries-wrap {
        flex-wrap:wrap;
    }
    .galleries-wrap .gall-box {
        width:100%;
    }
    .all-headings {
        flex-wrap:wrap;
    }
    .all-headings .heading-box {
        width:100%;
    } 
    .green-footer-info {
        flex-wrap:wrap;
        gap:24px;
    }
    .left-logo-part {
        width:100%;
        gap:12px;
    }
    .right-colums-info {
        width:100%;
        display:block;
        column-count:2;
        column-gap:24px;
    }
    .f-column {
        width:auto;
        display:block;
        gap:0;
        margin:0 0 20px;
        break-inside:avoid;
        -webkit-column-break-inside:avoid;
        page-break-inside:avoid;
    }
    .f-column.is-all-links {
        margin-bottom:0;
    }
    .f-column .f-title {
        display:block;
        margin-bottom:10px;
    }
    .f-column .f-link {
        display:block;
        margin-bottom:8px;
        line-height:1.3;
    }
    .f-column .f-link:last-child {
        margin-bottom:0;
    }
    .f-logo {
        width:calc(50% - 10px);
    }
    .f-logo img {
        width:100%;
    }
    .footer-logos {
        flex-wrap:wrap;
    }
    .footer-links {
        flex-wrap:wrap;
        gap:10px;
        padding:20px 0;
    }
    .red-f-link {
        width:100%;
    }
    .all-news {
        flex-wrap:wrap;
    }
    .big-news {
        width:100%;
    }
    .small-news {
        width:100%;
    }
}
@media screen and (max-width: 760px){
    .face-wrap {
        width:calc(50% - 10px);
    }
}
@media screen and (max-width: 600px){
    .left-container .all-news-l .live-slide {
        width: 100%;
    }
    .view-page-column .right-container {
        width:100%;
    }
    .face-wrap {
        width:100%;
    }
    .big-section-title {
        font-size:22px;
    }
}
@media screen and (max-width: 400px){
    .all-headings .heading-box .information .title {
        font-size:14px;
    }
    .cats-inner .title {
        font-size:15px;
    }
    .small-news .info-part .news-title, .games-wrap .info-part .news-title {
        font-size:16px;
    }
    .small-news .info-part .date, .games-wrap .info-part .date {
        font-size:13px;
    }
    .see-all {
        width: 130px;
        height: 35px;
        line-height: 35px;
        padding-right: 20px;
        box-sizing: border-box;
        background: #E9E9E9;
        border-radius: 50px;
        color: #1D1929;
        font-size: 13px;
        position: relative;
        text-align: center;
    }
    .see-all:after {
        position: absolute;
        content: "";
        right: 15px;
        top: 11px;
        width: 12px;
        height: 12px;
        background: url(../img/see-more-icon.svg) no-repeat center;
        background-size: cover;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Mobile fine-tuning (≤640px) — added 2026-04-21
   - Rankings songs: one per row (was two squished columns)
   - Cat-column news cards: line-clamp titles + equal column widths
     so the two cards in .smaller-image-wrap sit level
   - Rubrics (headings): image fits the frame, the waveform graphic
     is hidden so the listen button isn't squashed
   - Section breathing room
   ══════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 640px) {

    /* --- Rankings: single column --- */
    .right-info {
        display: block;
    }
    .right-info .ranking-box {
        width: 100%;
        float: none;
        margin: 0 0 10px;
        box-sizing: border-box;
    }

    /* --- Cat-column news cards: image left, info right, title above date --- */
    .smaller-image-wrap {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .smaller-image-wrap .small-box {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    .smaller-image-wrap .small-box .img,
    .smaller-image-wrap .small-box .img img {
        width: 110px;
        height: 70px;
        flex: 0 0 110px;
    }
    .smaller-image-wrap .small-box .info {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .smaller-image-wrap .small-box .info .title { order: 1; }
    .smaller-image-wrap .small-box .info .date  { order: 2; }
    .smaller-image-wrap .small-box .title,
    .big-img-wrap .news-title,
    .news-box .news-title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
                line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- Section breathing --- */
    .all-cats,
    .rankings-wrap,
    .headings-wrap,
    .games,
    .guests-wrap,
    .galleries-wrap,
    .podcasts-wrap { margin-top: 20px; }

    .cat-column + .cat-column {
        margin-top: 18px;
    }

    /* --- Rubrics / headings: fix stretched image + drop waveform --- */
    .heading-box {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: stretch;
    }
    .heading-box .image {
        flex: 0 0 110px;
        max-width: 110px;
        display: block;
    }
    .heading-box .image img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        display: block;
        border-radius: 6px;
    }
    .heading-box .information {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .heading-box .information .title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
                line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Hide the decorative waveform graphic — the Слушай button alone
       is enough on a narrow screen. */
    .heading-box .sound span,
    .heading-box .sound > img,
    .heading-box .sound-wave,
    .heading-box .sound .wave { display: none; }
    .heading-box .sound {
        gap: 0;
        margin-top: auto;
    }
    .heading-box .sound .listen {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}