/* FBE Staff System — frontend styles (Angie snippet).
   Konteks: halaman daftar tenaga kependidikan per divisi (tanpa halaman
   profil tunggal). Kartu memakai kelas dasar bersama `.fbe-card*` dari
   frontend.css sistem dosen; berkas ini menambah varian tanpa tautan
   + judul divisi + blok daftar. */

/* ============ 1) BLOK DAFTAR PER DIVISI ============ */

/* Akar daftar (output [fbe_staff_listing]): kontainer ter-center 75rem —
   geometri kotak sama dengan kontainer loop lama (e-69174dec-f90f). */
.fbe-divisi-root { width: 100% !important; max-width: 75rem !important; margin-inline: auto !important; }

/* Wrapper widget host (elemen e-paragraph/div pembawa shortcode) — netral. */
.fbe-listing-wrap { display: block !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

/* Wrapper daftar (dipasang pada elemen body halaman). */
.fbe-divisi-list { display: flex !important; flex-direction: column !important; }

/* Satu blok divisi: judul + grid. Jarak antar-blok dari margin, bukan gap. */
.fbe-divisi-block { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; margin-block-start: 3.5rem !important; padding: 16px !important; }
.fbe-divisi-block:first-child { margin-block-start: 0 !important; }

/* Padding 16px hanya untuk wrapper dalam per blok (blok luar tetap polos). */
.fbe-divisi-block > .fbe-divisi-list { padding: 16px !important; }

/* Judul divisi sejajar dengan tepi kiri kartu. Geometri kotak mengikuti kontainer loop
   (width 100% + max-width 75rem + margin auto = kotak identik dengan loop-base, ikut
   ter-center saat layar lebar), lalu padding 32px (loop 16 + grid 16) menaruh teks tepat di tepi kartu. */
.fbe-divisi-title { font-family: var(--headingFont, Montserrat, sans-serif) !important; font-size: 1.5rem !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: #06337B !important; margin: 0 auto !important; width: 100% !important; max-width: 75rem !important; box-sizing: border-box !important; padding: 0 32px !important; }

/* Grid kartu (pengganti e-collection-loop-layout lama). */
.fbe-grid { display: grid !important; gap: 1.25rem !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; padding: 16px !important; }

/* ============ 2) KARTU TANPA TAUTAN ============ */

/* Nama kartu bukan tautan (tanpa halaman profil): teks langsung pada h3. */
.fbe-card-name:not(:has(a)) { font-family: var(--headingFont, Montserrat, sans-serif) !important; font-size: .9375rem !important; line-height: 1.4 !important; font-weight: 700 !important; color: #1C2733 !important; margin: 0 !important; }

/* Subjudul posisi/jabatan — [fbe_staff_posisi] membungkus teks dalam span. */
.fbe-card-posisi span { display: inline-block; font-family: var(--bodyFont, Roboto, sans-serif); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #06337B; }
.fbe-card-posisi:not(:has(*)) { display: none !important; }

/* Penopang renderer PHP (sebagian gaya inti sudah dari frontend.css dosen). */
.fbe-card { height: 100% !important; }
.fbe-card-body { flex: 1 1 auto !important; }
.fbe-card .fbe-card-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fbe-gelar:not(:has(*)) { display: none !important; }

/* ============ 3) RESPONSIF ============ */

@media (max-width: 1024px) {
	.fbe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 767px) {
	.fbe-divisi-block { gap: 1.25rem !important; margin-block-start: 2.5rem !important; }
	.fbe-divisi-title { font-size: 1.25rem !important; }
	.fbe-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
}