/*
 * Gaya halaman direktori.
 *
 * Dua kelas diberi nama lain: `grid` menjadi `kisiAnggota`, `tagline` menjadi
 * `taglinePakar`. Keduanya bentrok dengan berkas yang selalu ikut dimuat —
 * `.grid` di page.css adalah kisi kartu bersama dengan jarak atas 2,5rem,
 * `.tagline` di kaki.css berwarna redup untuk latar gelap. Karena
 * direktori.css dimuat belakangan, tanpa penggantian nama kaki halaman akan
 * memakai warna teks terang di atas latar hitamnya.
 *
 * Nilainya tidak berubah. Tabrakan dicari `npm run cek-css`.
 */
/* Direktori Guru Besar. Primitif bersama ada di page.module.css. */

.layout {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62rem) {
  .layout {
    grid-template-columns: 16rem 1fr;
    gap: 2.5rem;
  }
}

/* ---------- Panel filter ---------- */

.filters {
  padding: 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-kartu);
}

.filterGroup {
  margin-bottom: 1rem;
}

.filterLabel {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--t-kecil);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary);
}

.input,
.select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--t-dasar);
}

.input:focus-visible,
.select:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 1px;
}

.actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.apply {
  flex: 1;
  /*
    Tombol ini `flex: 1`, jadi ia melar mengikuti lebar barisnya sementara
    tulisannya tetap pendek. Aturan global membuatnya `inline-flex` tanpa
    `justify-content`, sehingga "Terapkan" menempel ke tepi kiri: terukur
    0px di kiri dan 86px di kanan pada lebar 390px.
  */
  justify-content: center;
  padding: 0.6rem 1rem;
  background: var(--primary-isi);
  color: #fff;
  border: 0;
  border-radius: var(--r-kartu);
  font: inherit;
  font-weight: 700;
  font-size: var(--t-dasar);
  cursor: pointer;
}

.apply:hover {
  background: var(--primary-isi-hover);
}

.reset {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font-size: var(--t-dasar);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.reset:hover {
  border-color: var(--brand-300);
  color: var(--primary);
}

/* ---------- Hasil ---------- */

.resultBar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
}

.resultCount {
  margin: 0;
  font-size: var(--t-dasar);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.kisiAnggota {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.card {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-kartu);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

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

/* Seluruh kartu dapat diklik lewat ::after pada tautan namanya, tanpa
   membungkus <a> di sekeliling elemen blok — struktur tetap benar bagi
   pembaca layar. */
.name a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.avatar {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
}

.initials {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--primary-isi);
  color: #fff;
  font-weight: 700;
  font-size: var(--t-dasar);
}

.cardBody {
  min-width: 0;
}

.name {
  margin: 0;
  font-size: var(--t-isi);
  font-weight: 700;
  line-height: 1.35;
}

.name a {
  color: var(--text);
  text-decoration: none;
  display: inline;
  min-height: auto;
}

.name a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.affil {
  margin: 0.15rem 0 0.4rem;
  font-size: var(--t-kecil);
  color: var(--text-muted);
}

.expertise {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font-size: var(--t-kecil);
  font-weight: 600;
}

.tags {
  margin: 0.5rem 0 0;
  font-size: var(--t-kecil);
  color: var(--text-muted);
  overflow-wrap: break-word;
}

/* ---------- Profil ---------- */

.profileHead {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.profilePhoto {
  flex: none;
  width: 8rem;
  height: 8rem;
  border-radius: var(--r-kartu);
  object-fit: cover;
  background: var(--surface-2);
}

.profileInitials {
  flex: none;
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  border-radius: var(--r-kartu);
  background: var(--primary-isi);
  color: #fff;
  font-weight: 800;
  font-size: 2rem;
}

.taglinePakar {
  margin: 0.6rem 0 0;
  font-size: var(--t-isi);
  color: var(--text-muted);
  max-width: 42rem;
}

.detailLayout {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62rem) {
  .detailLayout {
    grid-template-columns: 1fr 18rem;
    gap: 3rem;
  }
}

.body {
  max-width: 46rem;
  font-size: var(--t-isi);
  line-height: 1.75;
}

.blockTitle {
  /* Gabungan: pasang juga kelas "judulSeksi" pada elemennya di Blade. */
  margin: 2.25rem 0 0.75rem;
}

.blockTitle:first-of-type {
  margin-top: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: var(--t-kecil);
}

.serviceList {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.serviceItem {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.serviceItem:last-child {
  border-bottom: 0;
}

.serviceName {
  font-weight: 600;
}

.serviceTopics {
  margin: 0.15rem 0 0;
  font-size: var(--t-dasar);
  color: var(--text-muted);
}

.sideCard {
  padding: 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-kartu);
}

.sideTitle {
  margin: 0 0 0.75rem;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
}

.sideList {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-dasar);
}

.sideRow {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.sideRow:last-child {
  border-bottom: 0;
}

.sideLabel {
  display: block;
  color: var(--text-muted);
  font-size: var(--t-mikro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.15rem;
}

.contactNote {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg);
  color: var(--text-muted);
  font-size: var(--t-kecil);
  line-height: 1.55;
}

.contactBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-top: 0.9rem;
  background: var(--primary-isi);
  color: #fff;
  border-radius: var(--r-kartu);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-dasar);
}

.contactBtn:hover {
  background: var(--primary-isi-hover);
  color: #fff;
}

@media (max-width: 30rem) {
  .card {
    flex-direction: column;
  }
}


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

  .card:hover {
    transform: none;
  }
}

/*
  Kerangka kartu untuk keadaan muat.

  Tingginya dipatok agar sama dengan kartu anggota yang sebenarnya, supaya
  halaman tidak melompat ketika hasil pencarian tiba. Tanpa itu, isi di
  bawahnya bergeser setiap kali penyaring diubah.

  Tanpa animasi kilau. Dial MOTION situs ini 1, dan gerakan berdenyut di enam
  bidang sekaligus justru menarik perhatian ke tempat yang belum punya isi.
  Bidang tenang dengan teks yang menjelaskan lebih berguna.
*/
.kerangkaKartu {
  min-height: 12rem;
  border: 1px solid var(--border);
  border-radius: var(--r-kartu);
  background: var(--bg-alt);
}

/*
  Dua gaya sebaris dari situs lama, dipindahkan jadi kelas. Nilainya sama
  persis; gaya sebaris tidak terjangkau media query maupun keadaan tema.
*/
.judulProfil {
  margin-top: 0;
}

.sideTitleTautan {
  margin-top: 1.25rem;
}