/* ============================================
   RESPONSIVE – Kaltim Newsroom
   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; }

    .category-icons__grid { grid-template-columns: repeat(4, 1fr); }
    .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; }

    .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; }

    .category-icons__grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .category-icon-item { padding: 10px 6px; }
    .category-icon-item__icon { width: 40px; height: 40px; font-size: 18px; }
    .category-icon-item__name { font-size: 10px; }

    .banner-kaltim__title { font-size: 20px; }
    .banner-kaltim__content { flex-direction: column; align-items: flex-start; gap: 14px; }

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

    .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; }
    .category-icons__grid { grid-template-columns: repeat(4, 1fr); }
    .kategori-pilihan-grid { grid-template-columns: repeat(2, 1fr); }
    .share-buttons { gap: 4px; }
    .share-btn { padding: 6px 8px; }
}

/* ─── Print ──────────────────────────────── */
.print-only-logo { display: none; text-align: center; margin-bottom: 20px; border-bottom: 2px solid #000; padding-bottom: 15px; }

@media print {
    .print-only-logo { display: block !important; }
    .topbar, .site-header, .primary-nav, .live-ticker,
    .sidebar, .bottom-nav, .scroll-top, .reading-progress,
    .share-bar, .post-navigation, .baca-juga, .comments-section,
    .site-footer { display: none !important; }

    .single-layout { grid-template-columns: 1fr; }
    .post-content { font-size: 12pt; line-height: 1.6; }
    a { color: #000; text-decoration: underline; }
    img { max-width: 100%; }
}

/* ─── 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; }
    .hero-sidebar__tab.active { border-left-color: transparent; border-bottom-color: var(--color-primary); }
    .hero-sidebar__panel { max-height: 360px; overflow: hidden; }
    .sidebar-news-item { padding: 10px 12px; }
    .category-icons { padding: 14px 0; }
    .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; }
    .section-title-bar { margin-bottom: 14px; }
    .article-list-item { gap: 10px; }
    .article-list-item__img { width: 106px; min-width: 106px; height: 72px; }
}