/* ============================================================
   TRENDING-NEW.CSS - Sidebar Trending Media Positif
   Berpasangan dengan trending-new.php & load-more-trending-new.php
   Dibangun ulang 17 Juli 2026
   ============================================================

   >>> BREAKPOINT FILE INI <<<
     (tanpa media query)         Desktop >= 992px - Trending ada di
                                 sidebar kanan, lebar ~360px
     @media (max-width: 991px)   Sidebar turun ke bawah konten,
                                 Trending jadi selebar layar
     @media (max-width: 767px)   HP
     @media (max-width: 480px)   HP kecil
   Definisi lengkap ada di global-new.css bagian atas.

   ------------------------------------------------------------
   YANG DIBERESKAN 17 Juli 2026:

   [A] BUG KURUNG TERTUTUP TERLALU CEPAT - INI YANG PALING LICIK.
       Di bagian [12] versi lama:

           @media (max-width: 480px) {
               ...
               .trending-item-title { ... }
               }          <- kurung DOBEL: @media tutup di sini
               .trending-item-excerpt { -webkit-line-clamp: 2; }
               .trending-category { font-size: 0.625rem; }
               .trending-date { font-size: 0.6875rem; }
           }

       Tiga aturan terakhir jadi berlaku di SEMUA ukuran layar,
       bukan cuma HP kecil. Jadi .trending-category yang di bagian
       [6] diatur 0.6875rem, diam-diam ditimpa jadi 0.625rem di
       desktop.
       Yang bikin susah ketahuan: JUMLAH KURUNGNYA TETAP SEIMBANG.
       Tidak ada error, tidak ada peringatan. Cuma hasil yang
       "entah kenapa beda".

   [B] "padding-top: -3rem" DIHAPUS.
       Padding tidak boleh negatif. Browser membuang seluruh baris
       itu, jadi tidak pernah terjadi apa-apa. Kalau maksudmu
       menarik ke atas, yang benar "margin-top: -3rem".

   [C] ".trending-header::before" DIHAPUS - tidak punya "content",
       jadi tidak pernah muncul. Kode mati sejak lahir.
       ".trending-header::after" DIGABUNG - dulu ditulis dua kali.

   [D] BREAKPOINT DARI 6 JADI 3.
       Dulu: 374, 480, 599, 767, 600-900, dan 768-900.
       Dua yang terakhir SALING TUMPANG TINDIH - di lebar 768-900
       keduanya aktif sekaligus, yang ditulis belakangan menang.
       Persis penyakit zona 900-991px di header tadi pagi.
       Sekarang ikut standar situs: 991 / 767 / 480.

   [E] ".trending-item-excerpt" DIHAPUS TOTAL.
       CSS-nya ada lengkap dengan grid-area "excerpt", tapi
       elemennya TIDAK PERNAH ADA di HTML - trending-new.php tidak
       pernah mencetaknya. Menata sesuatu yang tidak pernah lahir.

   [F] ".trending-item" DARI GRID JADI FLEX.
       Grid dipakai karena ada baris "excerpt excerpt" di bawah.
       Excerpt-nya tidak ada, jadi gridnya tidak perlu. Flex lebih
       sederhana untuk "gambar kiri, teks kanan".

   [G] "max-width: 50rem" DIHAPUS.
       Seksi ini hidup di sidebar 360px. Membatasi ke 800px tidak
       pernah berpengaruh. Kode mati.

   [H] NAMA TOMBOL DIGANTI: .load-more-btn -> .trending-more-btn
       Nama lama terlalu umum. keuangan_new.php punya <style>
       sendiri berisi "button.load-more-btn { ... !important }"
       yang ikut menyetir tombol di sini. Sekarang tidak ada file
       lain yang tahu nama .trending-more-btn.

   [I] KOMENTAR YANG BOHONG DIPERBAIKI.
       Dulu: "width: 4rem;  /* 130px - gambar kotak */"
       4rem itu 64px, bukan 130px. Komentar yang salah lebih
       berbahaya daripada tidak ada komentar - kamu jadi percaya
       pada sesuatu yang tidak benar.

   ------------------------------------------------------------
   BAHASA DESAIN SENGAJA DISAMAKAN DENGAN kategori-new.css:
   judul seksi 1.35rem + garis gradasi biru yang sama, gambar di
   kiri, teks di kanan, garis pemisah antar artikel yang sama.
   Jadi kolom kiri dan kolom kanan terasa satu keluarga - itu yang
   bikin Psychology Today terlihat tenang.
   ============================================================ */


/* ============================================================
   [1] KERANGKA SEKSI
   ============================================================ */
.trending-section {
    /* Pengganti "padding-top: -3rem" yang dulu dibuang browser. */
    margin-bottom: 2.5rem;
}


/* ============================================================
   [2] JUDUL SEKSI + GARIS BIRU
   Sengaja sama persis dengan .kesehatan-header di kategori-new.css.
   ============================================================ */
.trending-header {
    position: relative;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
}

.trending-title {
    margin: 0;
    font-family: var(--mp-font);
    font-size: 1.35rem;
    font-weight: 700;
    color: #02273f;
    text-align: left;
}

.trending-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.125rem;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #0e9bd3 20%,
        #0e9bd3 80%,
        transparent 100%
    );
}


/* ============================================================
   [3] DAFTAR
   ============================================================ */
.trending-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem;
}


/* ============================================================
   [4] SATU ARTIKEL - gambar kiri, teks kanan
   ============================================================ */
.trending-item {
    display: flex;
    gap: 0.75rem;
    padding-bottom: 1.125rem;
    border-bottom: 1px solid #e8e8e8;
    align-items: flex-start;
}

.trending-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}


/* ============================================================
   [5] GAMBAR
   ============================================================ */
.trending-item-link {
    flex: 0 0 auto;      /* gambar tidak ikut menyusut */
    display: block;
    line-height: 0;
}

.trending-item-image-wrapper {
    margin: 0;
    width: 4.5rem;       /* 72px - dan kali ini komentarnya benar */
    height: 4.5rem;
    overflow: hidden;
    border-radius: 0.25rem;
}

.trending-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* isi penuh kotak tanpa gepeng */
    display: block;
    transition: transform 0.3s ease;
}

.trending-item:hover .trending-item-image {
    transform: scale(1.06);
}


/* ============================================================
   [6] TEKS
   ============================================================ */
.trending-item-content {
    flex: 1;
    min-width: 0;        /* izinkan menyusut - kunci anti-meluber */
}

.trending-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}

.trending-category {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #023549;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.trending-meta-sep {
    color: #ccc;
    font-size: 0.75rem;
}

.trending-date {
    font-size: 0.75rem;
    color: #888;
}

.trending-item-title {
    margin: 0;
    font-family: var(--mp-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: #201f1f;
}

.trending-item-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.trending-item-title a:hover {
    color: #0e9bd3;
}

.trending-empty {
    padding: 1.5rem;
    text-align: center;
    color: #999;
}


/* ============================================================
   [7] TOMBOL LOAD MORE / SHOW LESS
   Dibuat seperti link, bukan tombol berwarna - supaya tidak
   berebut perhatian dengan judul artikel. Psychology Today pakai
   pendekatan yang sama.
   ============================================================ */
.trending-more {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.25rem;
}

.trending-more-btn {
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    color: #0e9bd3;
    font-family: var(--mp-font);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.trending-more-btn:hover {
    color: #0b7fb8;
    text-decoration: underline;
}

.trending-more-btn:disabled {
    color: #aaa;
    cursor: not-allowed;
    text-decoration: none;
}

/* Atribut hidden bawaan HTML - dipakai JavaScript untuk
   menyembunyikan tombol. Ditulis eksplisit supaya tidak kalah
   dari aturan lain. */
.trending-more-btn[hidden] {
    display: none;
}


/* ============================================================
   RESPONSIVE
   Bentuknya TIDAK berubah - selalu gambar kiri, teks kanan, satu
   kolom. Yang menyesuaikan hanya ukuran. Sama seperti
   kategori-new.css, dan itu memang tujuannya: tidak "berubah-ubah".
   ============================================================ */

/* ====== [8] TABLET (max-width: 991px) =========================
   Di titik ini sidebar turun ke bawah konten (lihat index-new.css
   bagian [7]), jadi Trending mendapat lebar penuh - sekitar 870px
   di layar 918px.

   ⚠️ DAN DI SITU MASALAHNYA (diperbaiki 17 Juli 2026, malam):

   Kategori di atas punya CUPLIKAN yang mengisi ruang. Trending
   TIDAK - cuma gambar kecil + judul. Jadi begitu diberi lebar
   870px, judulnya melar jadi satu baris panjang yang kesepian,
   dengan ruang kosong melompong di sebelah kanannya. Terlihat
   seperti tabel, bukan daftar berita.

   Solusinya: batasi lebarnya, lalu tengahkan dengan margin auto.
   Sisa ruang otomatis terbagi rata jadi jarak kiri-kanan.

   >> KENAPA max-width, BUKAN padding kiri-kanan?
      Padding itu angka mati. "padding: 0 12rem" pas di layar 918px,
      tapi di layar 760px justru bikin kolomnya cuma 100px - gepeng.
      max-width bilang "jangan lebih lebar dari ini" - di layar
      sempit dia mengalah sendiri dan tidak berbuat apa-apa. Aman
      di semua ukuran tanpa perlu blok tambahan.

   >> KENAPA 32rem (512px)?
      Gambar 96px + jarak 16px = 112px, sisa 400px untuk judul.
      Judul 18px kira-kira 22-24 huruf per baris, jadi judul berita
      pada umumnya patah jadi 2 baris - persis yang kamu minta.
      Mau lebih sempit lagi? Turunkan angkanya, misal 28rem.
      Mau lebih lebar? Naikkan, misal 36rem. Satu angka saja.

   >> Di bawah 512px (HP), max-width ini otomatis tidak berlaku
      karena layarnya memang sudah lebih sempit dari itu. Tidak
      perlu diapa-apakan.
   ============================================================== */
@media (max-width: 991px) {

    .trending-section {
        max-width: 32rem;      /* 512px - lihat penjelasan di atas */
        margin-left: auto;     /* auto + auto = sisa ruang dibagi rata */
        margin-right: auto;    /* kiri-kanan -> blok jadi di tengah */
    }

    .trending-item {
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .trending-list {
        gap: 1.5rem;
    }

    /* Gambar & judul dikecilkan dari ukuran sebelumnya (120px / 1.25rem).
       Dulu dibesarkan karena Trending selebar layar. Sekarang kolomnya
       cuma 512px, jadi ukuran segitu terlalu gemuk. */
    .trending-item-image-wrapper {
        width: 6rem;      /* 96px */
        height: 6rem;
    }

    .trending-item-title {
        font-size: 1.125rem;
    }
}


/* ====== [9] HP (max-width: 767px) ====== */
@media (max-width: 767px) {
    .trending-section {
        margin-bottom: 2rem;
    }

    .trending-header {
        margin-bottom: 1.25rem;
    }

    .trending-title {
        font-size: 1.25rem;
    }

    .trending-item {
        gap: 0.875rem;
        padding-bottom: 1.25rem;
    }

    .trending-list {
        gap: 1.25rem;
    }

    .trending-item-image-wrapper {
        width: 5.5rem;    /* 88px */
        height: 5.5rem;
    }

    .trending-item-title {
        font-size: 1.05rem;
    }
}


/* ====== [10] HP KECIL (max-width: 480px) ====== */
@media (max-width: 480px) {
    .trending-item {
        gap: 0.75rem;
    }

    .trending-item-image-wrapper {
        width: 4.5rem;    /* 72px */
        height: 4.5rem;
    }

    .trending-category {
        font-size: 0.625rem;
    }

    .trending-date {
        font-size: 0.6875rem;
    }

    .trending-item-title {
        font-size: 1rem;
    }
}


/* ====== [11] SAFE AREA (iPhone berponi / layar melengkung) ==== */
@supports (padding: max(0px)) {
    @media (max-width: 767px) {
        .trending-section {
            padding-left: max(0rem, env(safe-area-inset-left));
            padding-right: max(0rem, env(safe-area-inset-right));
        }
    }
}