@media screen and (max-width: 1360px){
    .site-wrap {
        width:100%;
        float:left;
        padding:0 10px;
        box-sizing:border-box;
    }

  }
.red-header .ll-scroll { position: relative; display: flex; align-items: center; min-width: 0; }
.red-header .ll-arrow { display: none; }

@media screen and (min-width: 651px) and (max-width: 1256px){
    .bottom-red-header { padding-top: 40px; }
    .red-header { gap: 10px; flex-wrap: nowrap; }
    .red-header .ll-scroll { flex: 1 1 auto; }
    .red-header .left-links {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .red-header .left-links::-webkit-scrollbar { width: 0; height: 0; display: none; }
    .red-header .left-links .home-icon { flex: 0 0 auto; }
    .red-header .left-links .header-link {
        flex: 0 0 auto;
        font-size: 14px;
        padding: 8px 11px;
        white-space: nowrap;
    }
    .search-wrap { flex: 0 0 auto; height: 40px; }
    .search-wrap .search input { width: 180px; height: 38px; }

    .red-header .ll-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        width: 30px;
        height: 30px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        color: #fff;
        background: rgba(255,255,255,0.18);
        -webkit-backdrop-filter: blur(2px);
                backdrop-filter: blur(2px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.20);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease, background .15s ease;
    }
    .red-header .ll-arrow svg { width: 18px; height: 18px; display: block; }
    .red-header .ll-arrow:hover  { background: rgba(255,255,255,0.32); }
    .red-header .ll-arrow:active { transform: translateY(-50%) scale(0.9); }
    .red-header .ll-arrow-prev { left: 2px; }
    .red-header .ll-arrow-next { right: 2px; }

    .red-header .ll-scroll::before,
    .red-header .ll-scroll::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 44px;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: opacity .18s ease;
    }
    .red-header .ll-scroll::before { left: 0;  background: linear-gradient(90deg,  rgba(216,46,16,0.9), rgba(216,46,16,0)); }
    .red-header .ll-scroll::after  { right: 0; background: linear-gradient(270deg, rgba(216,46,16,0.9), rgba(216,46,16,0)); }

    .red-header .ll-scroll.has-prev .ll-arrow-prev,
    .red-header .ll-scroll.has-next .ll-arrow-next { opacity: 1; pointer-events: auto; }
    .red-header .ll-scroll.has-prev::before,
    .red-header .ll-scroll.has-next::after { opacity: 1; }
}
@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: 1024px){
    .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:
          linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 30%),
          radial-gradient(70% 130% at 2% 0%, rgba(255,140,40,0.05) 0%, rgba(255,140,40,0) 50%),
          #fdfdfc;
        border-bottom: 3px solid transparent;
        border-image: linear-gradient(90deg, #ff7a2e 0%, #f4500f 50%, #faa31c 100%) 1;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,1),
          0 1px 2px rgba(40,20,0,0.04),
          0 8px 24px -8px rgba(40,20,0,0.10);     
    }
    .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:flex-end;
        gap:8px;
        flex:1 1 auto;
        min-width:0;
    }
    .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){
    .mh-player .njp-header-vol { display:none; }
    .mh-play-meta { max-width:108px; }
    .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;
    }
}