/* Gaya khusus Kepengurusan.
 * Primitif bersama (.page, .header, .title, .section, .grid, .empty, .error)
 * ada di src/styles/page.module.css — jangan disalin ulang ke sini.
 *
 * FOTO DIBUAT MENONJOL. Halaman ini memegang 53 pasfoto resmi — satu-satunya
 * aset visual sungguhan yang dimiliki situs ini saat logo belum ada. Versi
 * sebelumnya menampilkannya sebagai lingkaran 3,25rem di samping teks,
 * sehingga wajahnya nyaris tidak terlihat. Kartu potret membuat halaman ini
 * berwibawa tanpa perlu tambahan hiasan apa pun.
 */

/* ---------- Kepala bidang I–VIII ---------- */

.divisionHead {
  display: flex;
  align-items: center;
  gap: 1rem;
  /*
    Bidang PERTAMA menempel lebih dekat ke kepala anak-babnya; yang berikutnya
    diberi jarak penuh supaya kedelapan bidang terbaca sebagai deret terpisah.
    Lihat aturan `.divisionBlok + .divisionBlok` di bawah.
  */
  margin: 1.75rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
}

.divisionBlok + .divisionBlok .divisionHead {
  margin-top: 3rem;
}

.roman {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 2.9rem;
  height: 2.9rem;
  padding: 0 0.6rem;
  background: var(--primary-isi);
  color: #fff;
  border-radius: var(--r-kartu);
  font-weight: 800;
  font-size: var(--t-isi);
  letter-spacing: 0.02em;
}

.divisionName {
  margin: 0;
  font-size: var(--t-sedang);
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ---------- Kartu pengurus (potret) ---------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-300);
  box-shadow: var(--naik-angkat);
}

/*
  Pimpinan diberi penekanan lewat GARIS ATAS, bukan latar berwarna.
  Latar berwarna pada sebagian kartu membuat kisi terlihat belang; garis atas
  menonjolkan tanpa memecah keselarasan.
*/
.cardLead {
  border-top: 3px solid var(--primary);
}

/*
  Latar bingkai foto TAMPAK, bukan sekadar cadangan.

  Foto pengurus disimpan tanpa latar (webp beralfa), jadi warna inilah yang
  terlihat di belakang setiap orang. Alasan lengkap kenapa ia tidak sekadar
  mengikuti mode gelap ada pada definisi `--foto-well` di globals.css.
*/
.fotoBungkus {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--foto-well);
  overflow: hidden;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
    Berkasnya sudah dipotong bujur sangkar saat diimpor, sehingga nilai ini
    tidak berpengaruh pada foto pengurus sekarang. Dipertahankan sebagai
    pengaman bila kelak ada foto potret yang diunggah langsung lewat /admin:
    wajah biasanya di sepertiga atas, dan ini mencegah dahi terpotong.
  */
  object-position: center 22%;
  display: block;
  transition: transform 0.4s ease;
}

.card:hover .avatar {
  transform: scale(1.04);
}

/* Tanpa foto: inisial di atas bidang merah tua */
.initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--brand-600), var(--brand-800));
  color: #fff;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.04em;
}

.cardBody {
  padding: 1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.name {
  margin: 0;
  font-size: var(--t-isi);
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: break-word;
}

.titles {
  margin: 0.15rem 0 0;
  font-size: var(--t-kecil);
  color: var(--text-muted);
  line-height: 1.45;
  overflow-wrap: break-word;
}

.position {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.75rem;
}

/*
  Lencana jabatan ADALAH `.badge`, bukan kembarannya.

  Sebelum ini kedelapan propertinya ditulis ulang di sini dengan dua nilai yang
  meleset tipis (0,18rem dan 0,75rem) — cukup dekat untuk terlihat sama, cukup
  jauh untuk tidak pernah bisa dirawat bersama. Yang tersisa di bawah hanya
  satu baris yang memang khas halaman ini: nama jabatan pengurus kerap pecah
  ke dua baris, dan lencana lain di situs ini tidak pernah begitu.
*/
.positionTeks {
  /* Gabungan: pasang juga kelas "badge" pada elemennya di Blade. */
  line-height: 1.4;
}

:root[data-theme='dark'] .positionTeks,
:root:not([data-theme='light']) .positionTeks {
  background: transparent;
  border-color: rgb(210 106 111 / 0.45);
}

/* Kisi khusus halaman ini: kartu lebih sempit karena berbentuk potret. */
.kisiPengurus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .avatar {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
  .card:hover .avatar {
    transform: none;
  }
}

/*
  Jarak aman saat dituju lewat tautan berjangkar.

  Kepala situs menempel di atas layar. Tanpa aturan ini, mengklik kartu bidang
  di beranda membuat judul bidangnya berhenti PERSIS di bawah kepala situs —
  tertutup separuh, dan pengunjung mengira tautannya salah.
*/
.divisionBlok {
  scroll-margin-top: var(--jangkar-atas, 9rem);
}

/*
  KERANGKA MUAT.

  Halaman ini TERUKUR paling lambat di seluruh situs: 1,38 detik hangat,
  sementara halaman daftar lain berkisar 0,21–0,42 detik. Sebabnya wajar —
  53 pengurus dengan foto dan bidang masing-masing, diambil pada `depth: 1` —
  tetapi selama detik itu pengunjung yang mengklik "Kepengurusan" masih melihat
  halaman lamanya, tanpa tanda apa pun bahwa kliknya diterima.

  Kerangkanya sengaja MENIRU UKURAN kartu aslinya, bukan sekadar kotak abu,
  supaya tata letak tidak melompat saat isinya tiba.

  Tanpa animasi berdenyut. Dua belas bidang yang berkedip bersamaan menarik
  perhatian ke tempat yang justru belum berisi apa-apa.
*/
.kerangka {
  min-height: 15.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg-alt);
}