/* ============================================================
   KATEGORI-TERKAIT.CSS - Grid artikel di halaman kategori.php
   File BARU, dibuat 18 Juli 2026
   Berpasangan dengan kategori_terkait.php
   ============================================================

   >>> BREAKPOINT <<<  (standar situs, lihat global-new.css)
     (tanpa media query)   Desktop >= 992px  - 3 kolom
     max-width: 991px      Tablet            - 2 kolom
     max-width: 767px      HP                - 1 kolom

   ------------------------------------------------------------
   ISINYA DIPINDAH DARI <style> yang menempel di kategori_terkait.php.
   Alasannya bukan sekadar rapi:

   [A] Blok itu mengandung
           button.load-more-btn { ... !important }
       Nama ".load-more-btn" terlalu umum. Dengan !important, dia
       menyetir SEMUA tombol load-more di halaman mana pun yang
       kebetulan memuat file ini. Persis penyakit yang kita temukan
       di keuangan_new.php kemarin.
       Sekarang tombolnya bernama .kat-more-btn - tidak ada file
       lain yang tahu nama itu.

   [B] Breakpoint lamanya 1024 & 767. Angka 1024 tidak nyambung
       dengan file mana pun (semua yang lain pakai 991).

   [C] Font 'Lato' diminta, tapi kategori.php tidak pernah
       memuatnya - jadi browser terjun ke cadangan. Sekarang ikut
       Trebuchet MS, sama dengan seluruh situs.

   [D] Judul seksi sekarang memakai garis gradasi biru yang SAMA
       dengan Kesehatan/Keuangan/Trending di halaman depan. Satu
       bahasa desain.

   ⚠️ CATATAN: assets/css/kategori.css adalah KODE MATI - tidak ada
   satu file pun yang memuatnya. Aman dihapus.
   ============================================================ */


/* ====== [1] JUDUL SEKSI ====== */
.kat-header {
    position: relative;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
}

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

/* Sama persis dengan .kesehatan-header::after & .trending-header::after */
.kat-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%);
}


/* ====== [2] GRID ARTIKEL ====== */
.kategori-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}


/* ====== [3] KARTU ARTIKEL ====== */
.kategori-news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kategori-news-card:hover {
    transform: translateY(-0.375rem);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.card-image-wrapper {
    position: relative;
    width: 100%;
    height: 11rem;      /* 176px */
    overflow: hidden;
}

.kategori-news-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* isi penuh tanpa gepeng */
    display: block;
    transition: transform 0.3s ease;
}

.kategori-news-card:hover img {
    transform: scale(1.05);
}

.kategori-news-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.875rem;
}

.kategori-news-meta {
    margin-bottom: 0.5rem;
    font-family: var(--mp-font);
    font-size: 0.8125rem;
    color: #777;
}

.kategori-news-title {
    margin: 0;
    font-family: var(--mp-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0b2b41;
}

/* ⚠️ Warna disetel TEGAS, bukan "inherit".
   Kalau pakai inherit, dia akan mewarisi body { color: #ffffff }
   dari global-new.css - putih di atas putih, judul lenyap. Itu
   persis yang terjadi pada tombol Komentar tadi pagi. */
.kategori-news-title a {
    display: block;
    color: #0b2b41;
    text-decoration: none;
    transition: color 0.2s ease;
}

.kategori-news-title a:hover {
    color: #0e9bd3;
}


/* ====== [4] KALAU TIDAK ADA ARTIKEL ====== */
.kat-kosong {
    grid-column: 1 / -1;
    padding: 2.5rem 1rem;
    text-align: center;
    font-family: var(--mp-font);
    color: #777;
}

.kat-kosong i {
    display: block;
    margin-bottom: 0.9375rem;
    font-size: 3rem;
    color: #ccc;
}


/* ====== [5] TOMBOL LOAD MORE / SHOW LESS ==================== 
   Dulu bernama .load-more-btn dengan 12 baris !important. Nama
   seumum itu + !important = menyetir tombol load-more milik file
   lain. Sekarang .kat-more-btn, dan tanpa satu pun !important -
   karena tidak ada lagi yang perlu dilawan.
   ============================================================== */
.kat-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.875rem;
    margin: 1.5rem 0 2rem;
}

.kat-more-btn {
    padding: 0.5rem 1.75rem;
    border: 2px solid #0e9bd3;
    border-radius: 3.125rem;
    background: #ffffff;
    color: #0e9bd3;
    font-family: var(--mp-font);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kat-more-btn:hover {
    background: #e8f4fc;
    border-color: #0b7fb8;
    color: #0b7fb8;
}

.kat-more-btn:disabled {
    background: #f5f5f5;
    border-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Dipakai JavaScript untuk menyembunyikan tombol */
.kat-more-btn[hidden] {
    display: none;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ====== [6] TABLET (max-width: 991px) - 2 kolom ====== */
@media (max-width: 991px) {
    .kategori-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}


/* ====== [7] HP (max-width: 767px) - 1 kolom ====== */
@media (max-width: 767px) {
    .kategori-grid {
        grid-template-columns: 1fr;
        gap: 1.125rem;
    }

    .card-image-wrapper {
        height: 12rem;   /* lebih tinggi - satu kolom, ruangnya lega */
    }

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

    .kategori-news-title {
        font-size: 1.05rem;
    }
}