/* ------------------------------------------------------------------
   Penyesuaian tampilan milik situs ini.
   Dipisahkan dari style.css bawaan tema supaya tema tetap bisa
   diperbarui tanpa menimpa perubahan di sini.
   ------------------------------------------------------------------ */

/* Dropdown menu terakhir ("Lainnya") berada di ujung kanan navbar.
   Tanpa ini menunya melewati tepi layar dan memunculkan scroll
   horizontal di seluruh halaman. */
.navbar-nav > .nav-item:last-child > .dropdown-menu {
  left: auto;
  right: 0;
}

/* Penanda submenu yang mengarah ke situs luar. */
.dropdown-item[target="_blank"]::after {
  content: "↗";
  margin-left: 0.35rem;
  font-size: 0.85em;
  opacity: 0.55;
}

/* ---------- Kenyamanan gerak ----------
   Tema memakai scrollCue: elemen mulai dari opacity 0 lalu dimunculkan
   saat masuk layar. Bagi pengunjung yang mematikan animasi di
   perangkatnya, semua itu harus langsung tampil - bukan ikut menunggu,
   karena tanpa animasi elemen tersebut tidak akan pernah muncul. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-cue],
  [data-cues] > *,
  .shape.rellax {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Gulir halus untuk tautan dalam halaman. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Interaksi ringan pada kartu dan thumbnail: cukup terasa untuk
   memberi umpan balik, tanpa memindahkan tata letak. */
@media (prefers-reduced-motion: no-preference) {
  .daftar-ringkas__gambar,
  .project.item .card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .daftar-ringkas__item:hover .daftar-ringkas__gambar {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.25rem rgba(30, 34, 40, 0.12);
  }

  .project.item:hover .card {
    transform: translateY(-3px);
  }

  .dropdown-item {
    transition: padding-left 0.18s ease;
  }

  .dropdown-item:hover {
    padding-left: 1.75rem;
  }
}

/* Judul pada daftar ringkas ikut berubah warna saat kartunya disentuh. */
.daftar-ringkas__item h5 {
  transition: color 0.2s ease;
}

.daftar-ringkas__item:hover h5 {
  color: #54a8c7;
}

/* ---------- Tampilan bagian yang belum ada datanya ---------- */
.keadaan-kosong {
  max-width: 30rem;
}

.keadaan-kosong__ikon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 247, 236, 0.12);
  color: #4dabf7;
}

.keadaan-kosong__ikon i {
  font-size: 2rem;
  line-height: 1;
}

/* ---------- Daftar ringkas (Kegiatan & Berita di beranda) ----------
   Sebelumnya tiap gambar memakai object-fit: contain dengan tinggi
   bebas, sehingga tinggi tiap baris berbeda-beda dan kolom kiri/kanan
   tidak sejajar. Rasio dikunci supaya iramanya rapi. */
.daftar-ringkas__item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.daftar-ringkas__media {
  flex: 0 0 38%;
  max-width: 38%;
}

.daftar-ringkas__gambar {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
}

.daftar-ringkas__isi {
  flex: 1 1 auto;
  min-width: 0;
}

.daftar-ringkas__isi h5 {
  margin-bottom: 0.35rem;
}

.daftar-ringkas__isi p {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .daftar-ringkas__media {
    flex-basis: 42%;
    max-width: 42%;
  }
}

/* ---------- Kepadatan kartu ----------
   Judul dibatasi maksimal 3 baris, tetapi TIDAK memesan tinggi tetap.
   Sebelumnya judul selalu menyisakan ruang 3 baris walau isinya satu
   baris, sehingga muncul jarak menganga antara judul dan garis footer. */
.post-header h5 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ringkasan dua baris untuk mengisi badan kartu. */
.kartu-ringkas {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #60697b;
}

/* Kartu unggulan (item pertama, selebar penuh) punya ruang lebih. */
.kartu-ringkas--utama {
  -webkit-line-clamp: 3;
}

/* Jarak tetap antara blok judul dan ringkasan, berapa pun kelas margin
   yang dipakai judulnya. */
.card-body .post-header + .post-content {
  margin-top: 0.75rem;
}

/* Kartu dalam satu baris carousel disamakan tingginya, dan badan kartu
   yang memanjang membuat footer tanggal selalu rata di bawah. */
.swiper-wrapper {
  align-items: stretch;
}

.swiper-slide {
  height: auto;
}

.swiper-slide > .item-inner,
.swiper-slide > article,
.swiper-slide .item-inner > article {
  height: 100%;
}

.swiper-slide .card {
  height: 100%;
}

.swiper-slide .card .card-body {
  flex: 1 1 auto;
}

/* Hal yang sama untuk kartu bergrid (halaman Kegiatan, Publikasi,
   Lainnya): tinggi kartu dalam satu baris disamakan. */
.blog .row > article.item {
  display: flex;
}

.blog .row > article.item > .card {
  width: 100%;
  height: 100%;
}

.blog .row > article.item > .card > .card-body {
  flex: 1 1 auto;
}

/* Padding bawaan tema cukup longgar untuk kartu berisi ringkasan. */
.blog .card .card-body,
.swiper-slide .card .card-body {
  padding: 1.5rem 1.5rem 1rem;
}

.blog .card .card-footer,
.swiper-slide .card .card-footer {
  padding-top: 0.75rem;
  padding-bottom: 1rem;
}