/* ========================================
   HOMEPAGE MOBILE OPTIMIZATION
   2-Column Layout for Mobile Devices
   ======================================== */

/* Mobile-specific optimizations (max-width: 768px) */
@media (max-width: 768px) {

    /* ===== NEWS CARDS - 2 COLUMN GRID ===== */

    /* Special Report / Berita Pilihan */
    .news-list-small {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .news-item-small {
        display: flex !important;
        flex-direction: column !important;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
        padding: 0 !important;
    }

    .news-thumb-small {
        width: 100% !important;
        height: 100px !important;
        margin: 0 !important;
    }

    .news-thumb-small img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .news-content-small {
        padding: 8px !important;
        flex: 1;
    }

    .news-content-small h4 {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }

    .news-meta-small {
        font-size: 9px !important;
    }

    .badge-blue {
        font-size: 8px !important;
        padding: 2px 6px !important;
    }

    /* ===== HOT NEWS / POPULER GRID ===== */

    .populer-grid-top {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .populer-card {
        margin-bottom: 0 !important;
    }

    .populer-thumb {
        height: 100px !important;
    }

    .populer-card h4 {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* ===== GALERI FOTO - 2x2 GRID ===== */

    .gallery-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .gallery-main {
        grid-column: 1 / -1 !important;
        /* Full width for main image */
        height: 180px !important;
    }

    .gallery-thumbs {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 8px !important;
    }

    .gallery-thumb-item {
        height: 80px !important;
    }

    /* ===== REKOMENDASI / SOROTAN UTAMA - 2 COLUMN ===== */

    .rekomendasi-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .rekomendasi-item {
        flex-direction: column !important;
        padding: 0 !important;
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
    }

    .rekomendasi-thumb {
        width: 100% !important;
        height: 100px !important;
        margin: 0 !important;
    }

    .rekomendasi-content {
        padding: 8px !important;
    }

    .rekomendasi-item h4 {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .rekomendasi-summary {
        font-size: 10px !important;
        line-height: 1.4 !important;
        display: none !important;
        /* Hide summary on mobile to save space */
    }

    .cat-pill {
        font-size: 8px !important;
        padding: 2px 6px !important;
    }

    .btn-outline-pill {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    /* ===== TRENDING LIST - 2 COLUMN ===== */

    .trending-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .trending-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 8px !important;
        border: 1px solid #eee;
        border-radius: 6px;
    }

    .trending-num {
        position: static !important;
        margin-bottom: 5px !important;
        font-size: 18px !important;
    }

    .trending-content h4 {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .trending-meta {
        font-size: 9px !important;
    }

    /* ===== PILIHAN REDAKSI - 2 COLUMN ===== */

    .redaksi-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .redaksi-item {
        flex-direction: column !important;
        padding: 0 !important;
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
    }

    .redaksi-thumb {
        width: 100% !important;
        height: 100px !important;
        margin: 0 !important;
        order: -1 !important;
        /* Image on top */
    }

    .redaksi-content {
        padding: 8px !important;
    }

    .redaksi-item h4 {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .redaksi-item p {
        display: none !important;
        /* Hide description on mobile */
    }

    .redaksi-meta {
        font-size: 9px !important;
    }

    /* ===== BERITA TERPOPULER - 2 COLUMN ===== */

    .terpopuler-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .terpopuler-item {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        border: 1px solid #eee;
        border-radius: 6px;
        position: relative;
        overflow: hidden;
    }

    .trending-number {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        font-size: 16px !important;
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 50% !important;
        text-align: center !important;
        font-weight: bold !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        z-index: 10 !important;
    }

    .tp-thumb {
        width: 100% !important;
        height: 100px !important;
        margin: 0 !important;
        order: -1 !important;
    }

    .tp-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .tp-content {
        padding: 8px !important;
    }

    .tp-content h4 {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }

    .tp-meta {
        font-size: 8px !important;
    }

    .badge-blue-dark {
        font-size: 7px !important;
        padding: 2px 4px !important;
    }

    /* ===== RECOMMENDATION CARDS (Article Page) - 2 COLUMN ===== */

    .rec-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .rec-item {
        margin-bottom: 0 !important;
    }

    .rec-img {
        height: 100px !important;
    }

    .rec-title {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .rec-cat {
        font-size: 8px !important;
        padding: 2px 6px !important;
    }

    /* ===== GALERI VIDEO - 2 COLUMN ===== */

    .video-gallery-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .video-gallery-main {
        grid-column: 1 / -1 !important;
        /* Full width for main video */
    }

    .video-gallery-thumbs {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 8px !important;
    }

    /* ===== SECTION HEADERS - RESPONSIVE ===== */

    .premium-header h2 {
        font-size: 14px !important;
    }

    .premium-header small {
        font-size: 9px !important;
    }

    /* ===== SIDEBAR ADS - CENTER ON MOBILE ===== */

    .sidebar-widget,
    .sidebar-ad,
    .sidebar-ad-left,
    .sidebar-ad-right {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .main-content,
    .left-col,
    .center-col,
    .right-col {
        overflow-x: hidden !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Extra small devices (max-width: 375px) */
@media (max-width: 375px) {

    /* Further reduce font sizes for very small screens */
    .news-content-small h4,
    .populer-card h4,
    .rekomendasi-item h4,
    .redaksi-item h4 {
        font-size: 11px !important;
    }

    .news-meta-small,
    .tp-meta,
    .trending-meta {
        font-size: 8px !important;
    }

    /* Reduce gaps */
    .news-list-small,
    .populer-grid-top,
    .rekomendasi-grid,
    .trending-list,
    .redaksi-list,
    .terpopuler-list {
        gap: 8px !important;
    }
}