/* ============================================================
   KATEGORI-NEW.CSS - Seksi Kategori Halaman Depan
   Dipakai oleh: Kesehatan, Keuangan, Kompetensi, Komunitas
   (semuanya lewat kategori-section.php)
   Dibangun ulang 17 Juli 2026
   ============================================================

   >>> BREAKPOINT FILE INI <<<
     (tanpa media query)         Desktop, 992px ke atas
     @media (max-width: 991px)   Tablet - sidebar sudah turun,
                                 kolom artikel jadi selebar layar
     @media (max-width: 767px)   HP
     @media (max-width: 480px)   HP kecil
   Definisi lengkap & alasannya ada di global-new.css bagian atas.

   ------------------------------------------------------------
   >>> KENAPA NAMA KELASNYA MASIH ".kesehatan-" <<<
   Aneh, saya tahu - file ini dipakai empat kategori, bukan cuma
   kesehatan. Nama yang benar mestinya ".kat-".

   BELUM diganti karena saya belum melihat kategori.php. Halaman
   itu kemungkinan besar juga memakai nama ".kesehatan-". Kalau
   saya ganti sekarang tanpa melihatnya, halaman itu kehilangan
   seluruh gayanya - dan kamu baru sadar beberapa hari kemudian.
   Ganti nama = langkah terpisah, setelah kategori.php diperiksa.

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

   [A] "padding-top: -1rem 0" DIHAPUS.
       Dua kesalahan sekaligus: padding tidak boleh negatif, dan
       padding-top hanya menerima SATU nilai (ditulis dua).
       Browser membuang seluruh baris itu. Jadi selama ini kamu
       mengira sudah mengatur jarak, padahal tidak terjadi apa-apa
       - dan seksi-seksi jadi berdempetan.
       Gantinya: margin-bottom yang benar di [1].
       (Kalau maksudmu memang menarik ke atas, yang benar
        "margin-top: -1rem" - margin boleh negatif, padding tidak.)

   [B] ".kesehatan-header::before" DIHAPUS.
       Dia tidak punya "content", jadi tidak pernah muncul.
       Kode mati sejak lahir.

   [C] ".kesehatan-header::after" DIGABUNG.
       Dulu ditulis dua kali (satu berisi gambar garis, satu lagi
       cuma "bottom: 0"). Sekarang satu blok utuh.

   [D] "text-align: center" di .kesehatan-header DIHAPUS.
       Bertentangan dengan "text-align: left" di .kesehatan-title.
       Yang menang tetap left, jadi baris center itu cuma bikin
       bingung pembaca kode.

   [E] max-width 1200px & 850px DIHAPUS.
       Seksi ini hidup di dalam .primary-content, yang lebarnya
       sekitar 760px di layar desktop. Membatasi ke 1200px atau
       850px tidak pernah berpengaruh apa pun. Kode mati.

   [F] BREAKPOINT DISERAGAMKAN.
       Dulu: min-768&max-991, max-767, max-480, min-1025.
       Angka 1025 tidak nyambung dengan file mana pun (semua yang
       lain pakai 991/992). Sekarang ikut standar situs.

   [G] TATA LETAK 2 KOLOM DI TABLET DIHAPUS.
       Dulu di 768-991px artikel berubah jadi kartu 2 kolom
       bertumpuk - bentuk yang sama sekali beda dari desktop
       maupun HP. Itu salah satu sumber "berubah-ubah".
       Sekarang: SATU kolom di semua ukuran, persis Psychology
       Today. Yang berubah hanya ukuran gambar dan huruf.

   [H] CUPLIKAN TIDAK LAGI DISEMBUNYIKAN DI HP.
       Dulu ada "display: none !important" di TIGA blok berbeda.
       Psychology Today menampilkan cuplikan di semua ukuran
       (lihat screenshot 599px yang kamu kirim), dan kamu minta
       ditiru. Struktur yang sama di semua layar = tidak
       "berubah-ubah".
       >> Kalau kamu tetap ingin cuplikan hilang di HP, ada satu
          blok siap pakai di bagian [9], tinggal buka komentarnya.

   [I] EFEK HOVER YANG MENGGESER TATA LETAK DIHAPUS.
       Dulu ".kesehatan-item:hover" mengubah margin jadi -1rem lalu
       menambah padding. Setiap kali kursor lewat, browser menghitung
       ulang letak - kelihatan seperti "loncat" tipis.
       Sekarang cuma warna latar yang berubah.
   ============================================================ */


/* ============================================================
   [1] KERANGKA SEKSI
   ============================================================ */
.kesehatan-section {
    /* Jarak antar seksi (Kesehatan -> Keuangan -> dst).
       Inilah pengganti "padding-top: -1rem 0" yang dulu dibuang
       browser diam-diam. */
    margin-bottom: 2.5rem;
}

.kesehatan-section:last-child {
    margin-bottom: 0;
}


/* ============================================================
   [2] JUDUL SEKSI + GARIS BIRU
   ============================================================ */
.kesehatan-header {
    position: relative;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
}

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

/* Garis gradasi biru di bawah judul. Memudar di kedua ujung. */
.kesehatan-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 ARTIKEL
   Satu kolom di SEMUA ukuran layar - ala Psychology Today.
   ============================================================ */
.kesehatan-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}


/* ============================================================
   [4] SATU ARTIKEL - gambar kiri, teks kanan
   ============================================================ */
.kesehatan-item {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid #e8e8e8;
    transition: background 0.2s ease;
}

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

/* Hanya warna latar yang berubah saat disentuh kursor.
   Tidak ada perubahan ukuran/jarak, jadi tidak ada "loncat". */
.kesehatan-item:hover {
    background: #fafafa;
}


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

.kesehatan-item-image {
    width: 8.75rem;      /* 140px */
    height: 8.75rem;
    object-fit: cover;   /* isi penuh kotak tanpa gepeng */
    border-radius: 0.25rem;
    display: block;
    transition: transform 0.3s ease;
}

.kesehatan-item:hover .kesehatan-item-image {
    transform: scale(1.03);
}


/* ============================================================
   [6] ISI TEKS
   ============================================================ */
.kesehatan-item-content {
    flex: 1;
    min-width: 0;        /* izinkan menyusut - kunci anti-meluber */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* --- Baris atas: SUBMENU | Penulis, Penulis Kedua --- */
.kesehatan-author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: #666;
}

.kesehatan-submenu {
    font-size: 0.75rem;
    font-weight: 700;
    color: #023549;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.author-separator {
    color: #bbb;
}

.author-name,
.author-co {
    color: #666;
}

.kesehatan-author a,
.author-co {
    text-decoration: none;
}

.kesehatan-author a:hover {
    color: #0e9bd3;
    text-decoration: underline;
}

/* --- Judul artikel --- */
.kesehatan-item-title {
    margin: 0.125rem 0 0;
    font-family: var(--mp-font);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    color: #252626;
}

.kesehatan-item-title a {
    color: #1a1a1a;
    text-decoration: none;
}

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

/* --- Cuplikan --- */
.kesehatan-excerpt {
    margin: 0;
    padding-top: 0.25rem;
    font-family: var(--mp-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
    color: #413f3f;

    /* ===== BATAS BARIS CUPLIKAN (DESKTOP) =====
       Semua kartu dipotong di jumlah baris yang SAMA, lalu browser
       menambahkan "..." sendiri. Inilah yang bikin kartu rata -
       menghitung KATA tidak pernah bisa rata, karena lebar huruf
       berbeda-beda ("Manajemen" jauh lebih lebar dari "ia").

       Empat baris di bawah WAJIB berbarengan - kalau salah satu
       hilang, pemotongannya tidak jalan sama sekali. */
    display: -webkit-box;
    -webkit-line-clamp: 3;    /* <-- UBAH DI SINI (jumlah baris, desktop) */
    line-clamp: 3;            /* <-- samakan angkanya dengan baris di atas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Kalau kategori belum punya artikel --- */
.kesehatan-empty {
    padding: 1.5rem;
    text-align: center;
    color: #999;
}


/* ============================================================
   [7] LINK "LIHAT SEMUA"
   ============================================================ */
.lihat-semua-container {
    margin-top: 1.5rem;
    text-align: right;
}

/* ============================================================
   TOMBOL "LIHAT SEMUA" - dipercantik 19 Juli 2026
   Dulu teks abu polos + panah. Sekarang tombol PIL bergaris tepi
   (outline) warna merek - saat kursor menyentuh, terisi penuh biru
   & panah bergeser. Bersih & jelas sebagai ajakan, mirip PT.
   Dipakai keempat kategori sekaligus karena semua include
   kategori-section.php. */
.lihat-semua-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: 1.5px solid #0e9bd3;
    border-radius: 2rem;
    font-family: var(--mp-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: #0e9bd3;
    background: transparent;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.lihat-semua-link:hover {
    background: #0e9bd3;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(14, 155, 211, 0.25);
}

.lihat-semua-link .arrow {
    transition: transform 0.2s ease;
}

.lihat-semua-link:hover .arrow {
    transform: translateX(0.25rem);
}


/* ============================================================
   RESPONSIVE
   Bentuknya TIDAK berubah - tetap satu kolom, gambar kiri, teks
   kanan. Yang menyesuaikan hanya ukuran. Itu inti "tidak
   berubah-ubah".
   ============================================================ */

/* ====== [8] TABLET (max-width: 991px) =========================
   Di titik ini sidebar Trending turun ke bawah (lihat
   index-new.css [7]), jadi kolom artikel jadi selebar layar.
   Ruangnya lebih lega -> gambar & judul boleh sedikit lebih besar.
   ============================================================== */
@media (max-width: 991px) {
    .kesehatan-item-image {
        width: 10rem;    /* 160px */
        height: 10rem;
    }

    .kesehatan-item-title {
        font-size: 1.5rem;
    }
}


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

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

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

    .kesehatan-list {
        gap: 1.5rem;
    }

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

    .kesehatan-item-image {
        width: 6.875rem;   /* 110px */
        height: 6.875rem;
    }

    .kesehatan-submenu {
        font-size: 0.6875rem;
    }

    .kesehatan-author {
        font-size: 0.75rem;
    }

    .kesehatan-item-title {
        font-size: 1.15rem;
    }

    .kesehatan-excerpt {
        font-size: 0.9375rem;
        -webkit-line-clamp: 2;   /* <-- UBAH DI SINI (jumlah baris, HP) */
        line-clamp: 2;           /* <-- samakan angkanya dengan baris di atas */
    }

    /* ---- SAKLAR: sembunyikan cuplikan di HP ----
       Psychology Today menampilkan cuplikan di semua ukuran, dan
       kamu minta ditiru - jadi bawaannya TAMPIL.
       Kalau kamu berubah pikiran, hapus tanda komentar di bawah
       ini. Cukup di sini saja - versi lama menuliskannya di tiga
       blok berbeda, itu sebabnya sulit dilacak.

    .kesehatan-excerpt {
        display: none;
    }
    ---- akhir saklar ---- */
}


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

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

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

    .kesehatan-excerpt {
        font-size: 0.875rem;
    }
}