/* ============================================
   RESPONSIVE – DIKSI.co
   Mobile-first breakpoints
============================================ */

/* ─── Large Desktop ──────────────────────── */
@media (max-width: 1280px) {
    :root { --container-max: 1100px; }
    .hero-grid { grid-template-columns: 4fr 3fr 3fr; }
    .kategori-pilihan-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-main { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 28px; }
}

/* ─── Tablet Landscape (1024px) ──────────── */
@media (max-width: 1024px) {
    :root { --container-pad: 16px; }

    .topbar { display: none; }

    .hero-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .hero-main {
        grid-column: 1 / 3;
        grid-row: 1;
        min-height: 380px;
    }

    .hero-sub:nth-child(2) { grid-column: 1; grid-row: 2; }
    .hero-sub:nth-child(3) { grid-column: 2; grid-row: 2; }

    .hero-sidebar {
        grid-column: 1 / 3;
        grid-row: 3;
        flex-direction: row;
        min-height: auto;
    }

    .hero-sidebar__tabs { flex-direction: column; min-width: 120px; border-bottom: none; border-right: 1px solid var(--color-border); }
    .hero-sidebar__tab { text-align: left; border-bottom: 1px solid var(--color-border); border-right: none; border-left: 2px solid transparent; }
    .hero-sidebar__tab.active { border-left-color: var(--color-primary); border-bottom: 1px solid var(--color-border); }
    .hero-sidebar__panel { padding: 10px; }
    .kategori-pilihan-grid { grid-template-columns: repeat(4, 1fr); }

    .berita-video-grid { grid-template-columns: 1fr; }
    .single-layout { grid-template-columns: 1fr 280px; gap: 24px; }

    .footer-main { grid-template-columns: 1fr 1fr; gap: 28px; }
    .baca-juga__grid { grid-template-columns: repeat(2, 1fr); }
    .archive-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Tablet Portrait (768px) ────────────── */
@media (max-width: 768px) {
    /* Show mobile header */
    .header-search { display: none; }
    .live-update-btn { display: none; }
    .hamburger { display: flex; }
    .header-mobile-actions { display: flex; }

    .primary-nav { display: none; }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hero-main { grid-column: 1; min-height: 300px; }
    .hero-main__title { font-size: 20px; }
    .hero-sub:nth-child(2), .hero-sub:nth-child(3) { grid-column: 1; }
    .hero-sidebar { grid-column: 1; grid-row: auto; }

    .berita-utama-grid { grid-template-columns: 1fr; }
    .event-grid { grid-template-columns: 1fr; }
    .bottom-grid { grid-template-columns: 1fr; }

    .single-layout { grid-template-columns: 1fr; }
    .sidebar-single { display: none; }

    .post-header__title { font-size: 22px; }
    .post-meta-row { gap: 12px; }

    .share-btn span { display: none; }
    .share-btn { padding: 7px 10px; }

    .post-navigation { grid-template-columns: 1fr; }

    .footer-main { grid-template-columns: 1fr; gap: 20px; }
    .bottom-nav { display: block; }
    .scroll-top { bottom: 72px; }
    /* Ensure content/footer not hidden behind fixed bottom nav */
    #page { padding-bottom: 64px; }
    .site-footer {
        position: relative;
        z-index: 10;
        background: var(--color-footer-bg);
        margin-bottom: 0;
    }
    /* Ensure the ad banner stays below page content and footer */

    .archive-grid { grid-template-columns: 1fr; }
    .baca-juga__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Mobile (480px) ─────────────────────── */
@media (max-width: 480px) {
    :root { --container-pad: 14px; }

    .hero-main { min-height: 260px; }
    .hero-main__title { font-size: 17px; }
    .hero-main__excerpt { display: none; }

    .kategori-pilihan-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .section-title { font-size: 16px; }
    .featured-card__title { font-size: 17px; }
    .baca-juga__grid { grid-template-columns: 1fr; }

    .post-header__title { font-size: 20px; }
    .post-navigation { grid-template-columns: 1fr; }

    .newsletter-form { flex-direction: column; }
    .newsletter-form__btn { width: 100%; text-align: center; justify-content: center; }

    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links { justify-content: center; }
}

/* ─── Very Small Mobile (375px) ─────────── */
@media (max-width: 375px) {
    .hero-main { min-height: 220px; }
    .kategori-pilihan-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .share-buttons { gap: 4px; }
    .share-btn { padding: 6px 8px; }
}

/* ─── Accessibility ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    /* Not enabled by default – can be toggled via JS class */
}

/* Editorial mobile composition: hero first, then a compact popular feed. */
@media (max-width: 768px) {
    .hero-section { padding: 12px 0 16px; }
    .hero-grid { gap: 14px; }
    .hero-main { min-height: 338px; border-radius: 10px; }
    .hero-main__content { padding: 18px; }
    .hero-main__title { font-size: clamp(21px, 5.7vw, 26px); line-height: 1.18; }
    .hero-main__excerpt { display: -webkit-box; font-size: 13px; margin-bottom: 12px; }
    .hero-main__cta { padding: 8px 14px; }
    .hero-sub { display: none; }
    .hero-sidebar { display: block; grid-column: 1; border-radius: 10px; }
    .hero-sidebar__tabs { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--color-border); }
    .hero-sidebar__tab { min-width: 0; text-align: center; border-left: 0; border-right: 0; border-bottom: 2px solid transparent; padding: 12px 10px; font-size: 13px; }
    .hero-sidebar__tab.active { border-left-color: transparent; border-bottom-color: var(--color-primary); }
    .hero-sidebar__panel { max-height: 420px; overflow-y: auto; padding-right: 4px; }
    /* Custom scrollbar for mobile sidebar */
    .hero-sidebar__panel::-webkit-scrollbar { width: 4px; }
    .hero-sidebar__panel::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
    .sidebar-news-item { padding: 10px 12px; }
    .home-section { padding: 22px 0; }
    .berita-video-grid { gap: 24px; }
    .bottom-grid { gap: 28px; }
}
@media (max-width: 480px) {
    .hero-main { min-height: 310px; }
    .hero-main__title { font-size: 21px; }
    .hero-main__excerpt { -webkit-line-clamp: 2; line-clamp: 2; }
    .section-title-bar { margin-bottom: 14px; }
    .article-list-item { gap: 10px; }
    .article-list-item__img { width: 106px; min-width: 106px; height: 72px; }
}