@charset "UTF-8";
/**
 * =====================================================================
 * GKM26 - PENYESUAIAN TAMPILAN PUBLIK
 * =====================================================================
 * File ini dimuat SETELAH css/layout.min.css (theme asli), sehingga aturan
 * di sini menimpa theme TANPA perlu mengubah file theme itu sendiri.
 *
 * KENAPA FILE INI ADA
 * Theme asli (lihat design/news.html) hanya berisi 3 kartu berita dan semua
 * gambarnya 970x647 px (rasio sama), jadi grid-nya kelihatan rapi. Begitu
 * jumlah berita lebih dari 3 dan gambar yang di-upload rasionya berbeda,
 * muncul dua masalah pada grid float Bootstrap 3:
 *
 *   1. Tinggi gambar tiap kartu berbeda -> judul/isi tidak sebaris.
 *   2. Kartu ke-4 dan seterusnya menempel di bawah kartu yang paling pendek,
 *      bukan di bawah barisnya (istilahnya "float staircase") -> baris kedua
 *      jadi tidak rata / berantakan.
 *
 * SOLUSI
 *   a. Tinggi gambar dikunci pada rasio 3:2 lewat .gkm-card-thumb di bawah
 *      ini, sehingga gambar apa pun yang di-upload tetap satu tinggi.
 *   b. Setiap 3 kartu diberi <div class="clearfix"></div> di news.php dan
 *      index.php supaya baris berikutnya selalu mulai di bawah baris
 *      sebelumnya.
 *
 * Catatan: file ini murni tampilan. Tidak ada data / logika di dalamnya,
 * dan tidak ada satu pun aturan yang mengubah perilaku grid Bootstrap di
 * layar kecil (mobile tetap satu kartu per baris).
 * =====================================================================
 */

/* ---------------------------------------------------------------------
   Kartu berita: kotak gambar dengan rasio tetap 3:2 (sama dengan 970x647).
   Dipakai di beranda (index.php) dan daftar berita (news.php).
   --------------------------------------------------------------------- */
.gkm-card-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    padding-top: 66.6667%;      /* tinggi = 2/3 x lebar (rasio 3:2) */
    background-color: #edf0f2;  /* abu muda selagi gambar dimuat */
}

/* Gambar mengisi kotak tanpa mengubah rasionya (kelebihan dipotong di
   tengah). object-fit didukung semua browser modern. Di browser lama
   gambar tetap mengisi kotak - tetap rata, hanya sedikit terdistorsi. */
.gkm-card-thumb > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

/* ---------------------------------------------------------------------
   Tanggal pada kartu berita (contoh: "30 SEPTEMBER 2026").
   Di theme, tanggal ditulis sebaris di dalam <h4> sehingga kalau judulnya
   panjang tanggal bisa terpotong di tengah - pernah terlihat jadi
   "... Ke-31   14" lalu "AGUSTUS 2026" di baris berikutnya. Dengan nowrap,
   tanggal selalu utuh: ikut sebaris kalau muat, atau pindah satu baris
   penuh kalau tidak muat.
   --------------------------------------------------------------------- */
.gkm-card-date {
    white-space: nowrap;
}