/**
 * Halaman Berita — layout & responsif mobile (scoped .news-page).
 * Desktop: tidak mengubah layout utama di style.css.
 */

@media (max-width: 860px) {
    .news-page .news-item {
        grid-template-columns: 1fr;
        padding: 0;
        overflow: hidden;
        gap: 0;
    }

    .news-page .news-item > a:first-child {
        display: block;
    }

    .news-page .news-item > a:first-child img {
        height: min(220px, 52vw);
        border-radius: 12px 12px 0 0;
    }

    .news-page .news-item > div {
        padding: 14px 16px 16px;
    }

    .news-page .news-item h3 {
        font-size: 17px;
        line-height: 1.4;
    }

    .news-page .news-meta {
        gap: 12px;
    }

    .news-page .read-more {
        min-height: 44px;
        align-items: center;
    }
}

@media (max-width: 620px) {
    .news-page {
        width: min(1320px, calc(100vw - 32px));
        padding-bottom: 24px;
    }

    .news-page .hero-news::after {
        display: none;
    }

    .news-page .hero-news {
        min-height: 180px;
        border-radius: 10px 10px 20px 10px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%),
            url('../images/hero.jpg') center/cover no-repeat;
    }

    .news-page .hero-news h1 {
        font-size: clamp(1.45rem, 6.5vw, 1.75rem);
    }

    .news-page .hero-news p {
        font-size: 14px;
        max-width: none;
    }

    .news-page .search-panel {
        width: 100%;
        margin-top: -18px;
        padding: 12px;
        border-radius: 12px;
    }

    .news-page .popular-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .news-page .popular-tags::-webkit-scrollbar {
        display: none;
    }

    .news-page .popular-tags a {
        flex-shrink: 0;
    }

    .news-page .list-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .news-page .list-top label {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .news-page .list-top select {
        flex: 1;
        max-width: 180px;
        min-height: 40px;
    }

    .news-page .news-list {
        gap: 14px;
    }

    .news-page .news-item > a:first-child img {
        height: min(200px, 48vw);
    }

    .news-page .news-item p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-page .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    .news-page .page-btn {
        min-width: 40px;
        height: 40px;
    }
}