/* ============================================================
   INDEX-NEW.CSS - Layout Utama Halaman Depan
   Media Positif | direvisi 17 Juli 2026
   ============================================================

   >>> STANDAR BREAKPOINT SITUS <<<
     (tanpa media query)         = Desktop, 992px ke atas
     @media (max-width: 991px)   = Tablet ke bawah
     @media (max-width: 767px)   = HP ke bawah
     @media (max-width: 480px)   = HP kecil
   Definisi lengkap ada di global-new.css. Jangan pakai angka lain.

   ------------------------------------------------------------
   CATATAN PERUBAHAN 17 Juli 2026:
   [A] BLOK .container DIHAPUS TOTAL dari file ini.
       Dulu bentrok dengan .container di global-new.css
       (1400px di sini vs 1200px di global). Karena global-new.css
       dimuat DUA KALI dan yang kedua datang belakangan, angka 1400
       di sini tidak pernah menang - selalu kalah jadi 1200px.
       Sekarang .container hanya hidup di global-new.css.
       >> Mau ubah lebar konten? Ubah --container-max di global-new.css.

   [B] Breakpoint 1024px -> 991px. Ini PERUBAHAN PERILAKU:
       Sidebar dulu turun ke 1 kolom mulai layar <=1024px.
       Sekarang turun mulai <=991px, sama dengan titik munculnya
       hamburger di header. Sebelumnya di rentang 992-1024px header
       masih mode desktop tapi layout sudah 1 kolom - itu salah satu
       sumber "tidak konsisten" yang kamu keluhkan.

   [C] Breakpoint 768px -> 767px (ikut standar).

   [D] "align-items: center" di .container dihapus (ikut hapusnya
       blok .container). Properti itu memang tidak berefek apa-apa
       karena .container bukan flex/grid.
   ============================================================ */


/* ====== [1] PAGE WRAPPER ====== */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* ====== [2] MAIN CONTENT ====== */
.main-content {
    flex: 1;
    padding: 2rem 0;
}


/* ====== [3] CONTENT GRID - 2 kolom: konten + sidebar ====== */
.content-grid {
    display: grid;

    /* Kolom kanan (Trending dkk) DIPATOK 360px & menempel tepi kanan.
       Kolom kiri (Kesehatan, Keuangan, dst) mengisi sisanya. */
    grid-template-columns: minmax(0, 1fr) 360px;

    /* ===== JARAK ANTARA KATEGORI (kiri) DAN TRENDING (kanan) =====
       Dinaikkan 2rem -> 3rem pada 23 Juli 2026: kolom kategori terasa
       terlalu menempel ke Trending.

       CARA KERJANYA (penting supaya tidak salah duga):
       Karena kolom kanan lebarnya TETAP 360px, memperbesar angka ini
       TIDAK menggeser Trending dan TIDAK mengubah tepi luar halaman.
       Yang terjadi: kolom kategori menyempit, jadi tepi kanannya
       bergeser ke kiri - menjauh dari Trending. Persis itu tujuannya.

       HANYA BERLAKU DI DESKTOP. Tablet (bagian [7]) dan HP (bagian [8])
       menuliskan angkanya sendiri, jadi tidak ikut terpengaruh.

       Ancar-ancar: 2.5rem = beda tipis · 3rem = terasa pas ·
                    3.5rem = lega · 4rem = mulai terlalu jauh. */
    gap: 5rem;          /* <-- UBAH DI SINI (jarak kategori <-> trending) */

    align-items: start;
}


/* ====== [4] PRIMARY CONTENT (kolom kiri) ====== */
.primary-content {
    min-width: 0;   /* cegah kolom melar gara-gara isi yang lebar */
}


/* ====== [5] SECONDARY CONTENT / SIDEBAR (kolom kanan) ====== */
.secondary-content {
    min-width: 0;
}

.sidebar {
    position: relative;
    top: 0.025rem;
    height: fit-content;
}


/* ====== [6] HEADLINE SECTION (pembungkus slider) ====== */
.headline-section {
    margin-bottom: 0.5rem;
}


/* ============================================================
   RESPONSIVE - mengikuti standar breakpoint
   ============================================================ */

/* ====== [7] TABLET KE BAWAH (max-width: 991px) ====== */
/* Sidebar berhenti jadi kolom kanan, pindah ke bawah konten.
   Titik ini sengaja disamakan dengan header-new.css - di lebar
   yang sama, header berganti ke hamburger. */
@media (max-width: 991px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;

        /* ⚠️ INI PENTING - jangan dihapus.
           Begitu sidebar turun, kolom artikel mewarisi SELURUH lebar
           container. Di layar 991px itu ~943px, padahal sedetik
           sebelumnya (di 992px) dia cuma ~550px karena berbagi
           tempat dengan sidebar 360px.
           Tanpa batas ini, memperkecil layar justru bikin teks
           MELEBAR mendadak - persis kebalikan dari yang orang
           harapkan, dan salah satu sumber rasa "tidak enak dilihat".

           46rem (736px) juga batas nyaman membaca: baris yang lebih
           panjang dari ~75 huruf bikin mata sulit menemukan awal
           baris berikutnya. Psychology Today memakai batas serupa. */
        max-width: 46rem;
        margin: 0 auto;
    }

    .sidebar {
        position: static;
    }
}


/* ====== [8] HP KE BAWAH (max-width: 767px) ====== */
@media (max-width: 767px) {
    .main-content {
        padding: 1.5rem 0;
    }

    .content-grid {
        gap: 1.5rem;
    }
}


/* ====== [9] HP KECIL (max-width: 480px) ====== */
/* Sengaja dikosongkan. Padding .container di HP kecil sekarang
   diurus oleh global-new.css bagian [11]. */