/**
 * CSS khusus fmipa-prodi — memakai token warna & kelas bersama tema
 * (.fmipa-container, .fmipa-section, .fmipa-grid, .fmipa-card, .fmipa-btn,
 * var(--fmipa-green-dark) dst.), TIDAK meredefinisikan token tersebut.
 */

/* === Arsip: filter departemen×jenjang === */
.fmipa-prodi-filter {
	margin-bottom: 2rem;
}
.fmipa-prodi-filter__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
}
.fmipa-prodi-filter__row label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-weight: 600;
	font-size: 0.9rem;
}
.fmipa-prodi-filter__row select {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--fmipa-gray-300, #ccc);
	border-radius: var(--fmipa-radius, 0.5rem);
	min-width: 200px;
}
#fmipa-prodi-grid[aria-busy="true"] {
	opacity: 0.5;
}

/* === Kartu overlay (teaser beranda) ===
 *
 * REFERENSI-PSIKOLOGI.md §5: kartu foto vertikal berjajar satu baris, foto
 * full-bleed, overlay warna solid dari atas, teks di ATAS kartu, kartu itu
 * sendiri yang jadi link — dan secara eksplisit "bukan card putih standar
 * dengan padding+shadow".
 *
 * Satu BARIS yang bisa digeser, bukan grid 2D. Grid 2D dengan 6 entri di
 * lebar 4 kolom menyisakan baris kedua berisi 2 kartu dan ruang kosong
 * selebar 2 kolom — persis yang terjadi sebelumnya.
 */
.fmipa-prodi-jajar {
	display: grid;
	grid-auto-flow: column;
	/*
	 * 180px minimum dipilih dengan hitungan, bukan dikira: 6 kartu × 180px +
	 * 5 celah × 16px = 1160px, masuk ke container 1200px. Jadi di desktop
	 * keenam kartu TAMPAK SEKALIGUS dan tidak ada isi yang tersembunyi di
	 * balik geseran horizontal. Di bawah itu barisnya baru menggeser.
	 */
	grid-auto-columns: minmax(180px, 1fr);
	gap: var(--fmipa-space-sm, 1rem);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline proximity;
	/* Ruang untuk cincin fokus kartu tepi supaya tidak terpotong saat Tab. */
	padding-block: 3px;
	scrollbar-width: thin;
}
/*
 * Di desktop baris ini BUKAN penggeser: kolom dibiarkan mengisi lebar yang
 * tersedia sehingga seluruh kartu tampak sekaligus dan tidak ada isi yang
 * tersembunyi. auto-fit dipakai (bukan repeat(6)) supaya baris tetap penuh
 * kalau admin menandai kurang dari enam prodi sebagai unggulan — repeat(6)
 * akan meninggalkan kolom kosong menganga di kanan.
 */
@media (min-width: 1250px) {
	.fmipa-prodi-jajar {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		overflow-x: visible;
	}
}
/*
 * Saat baris MEMANG menggeser (viewport sempit), tepi kanan dipudarkan supaya
 * kartu yang terpotong terbaca sebagai "masih ada lagi", bukan sebagai salah
 * render. Mask dipakai, bukan gradient berwarna, supaya ikut warna pita apa
 * pun yang sedang dipakai section.
 */
@media (max-width: 1249px) {
	.fmipa-prodi-jajar {
		mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent 100%);
	}
	/* Saat digeser sampai ujung, pudarnya tidak lagi relevan. */
	.fmipa-prodi-jajar:focus-within {
		mask-image: none;
	}
}
.fmipa-prodi-kartu {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: clamp(320px, 30vw, 400px);
	padding: var(--fmipa-space-sm, 1.25rem);
	border-radius: var(--fmipa-radius, 0.5rem);
	overflow: hidden;
	scroll-snap-align: start;
	text-decoration: none;
	color: #fff;
	background: var(--fmipa-ink, #071912);
	isolation: isolate;
}
.fmipa-prodi-kartu__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.fmipa-prodi-kartu__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/*
 * Overlay: pekat di ATAS (tempat teks duduk) lalu memudar ke bawah, sesuai
 * §5 "gradient overlay warna solid dari atas". Nada bersumber dari token
 * gelap tema yang sudah ada — tidak ada hex baru diperkenalkan di sini —
 * sehingga teks putih di atasnya selalu lolos kontras.
 */
.fmipa-prodi-kartu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		var(--fmipa-prodi-nada, var(--fmipa-ink, #071912)) 0%,
		color-mix(in srgb, var(--fmipa-prodi-nada, var(--fmipa-ink, #071912)) 82%, transparent) 45%,
		color-mix(in srgb, var(--fmipa-prodi-nada, var(--fmipa-ink, #071912)) 62%, transparent) 100%
	);
}
/*
 * Empat nada, bukan tiga. Dengan tiga nada dan enam departemen, tabrakan
 * modulo terukur menghasilkan tiga kartu bersebelahan bernada sama — yang
 * terbaca sebagai kesalahan, bukan sebagai pola. Nada ke-4 tidak menambah hex
 * baru: ia dicampur dari dua token gelap yang sudah ada, jadi tetap di dalam
 * palet dan tetap cukup gelap untuk teks putih.
 */
.fmipa-prodi-kartu--nada-1 { --fmipa-prodi-nada: var(--fmipa-ink, #071912); }
.fmipa-prodi-kartu--nada-2 { --fmipa-prodi-nada: var(--fmipa-green-dark, #008050); }
.fmipa-prodi-kartu--nada-3 { --fmipa-prodi-nada: var(--fmipa-ink-soft, #0F2A1F); }
.fmipa-prodi-kartu--nada-4 {
	--fmipa-prodi-nada: color-mix(in srgb, var(--fmipa-green-dark, #008050) 45%, var(--fmipa-ink, #071912));
}

.fmipa-prodi-kartu__isi {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.fmipa-prodi-kartu__jenjang {
	font-size: var(--fmipa-fs-xs, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}
.fmipa-prodi-kartu__nama {
	margin: 0;
	font-size: var(--fmipa-fs-card-title, 1.25rem);
	line-height: 1.25;
	color: inherit;
	text-wrap: balance;
}
/* Seluruh kartu adalah tautan, jadi umpan balik hover/fokus mengenai kartu
   utuh — bukan hanya judulnya. */
.fmipa-prodi-kartu:hover .fmipa-prodi-kartu__nama,
.fmipa-prodi-kartu:focus-visible .fmipa-prodi-kartu__nama {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.fmipa-prodi-kartu:hover .fmipa-prodi-kartu__media img {
	transform: scale(1.04);
}
.fmipa-prodi-kartu__media img {
	transition: transform 320ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
	.fmipa-prodi-kartu__media img { transition: none; }
	.fmipa-prodi-kartu:hover .fmipa-prodi-kartu__media img { transform: none; }
}

/* === Kartu prodi ringkas (arsip + AJAX) === */
.fmipa-prodi-card {
	position: relative;
}
/*
 * Rasio thumbnail DIPAKSA seragam. Selama semua prodi memakai satu foto
 * yang sama hal ini tidak kelihatan; begitu tiap departemen membawa foto
 * sendiri (4:3, 2:1, 5:2 — apa adanya dari kamera/kurasi), tinggi gambar
 * berbeda-beda dan seluruh baris kartu jadi ragged: judul kartu bertetangga
 * tidak lagi sebaris, dan mata kehilangan garis baca horizontal.
 * object-fit: cover memotong, bukan menggepengkan — proporsi objek di foto
 * tetap benar.
 */
.fmipa-prodi-card img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--fmipa-radius, 8px);
}
.fmipa-prodi-card__badge {
	display: inline-block;
	background: var(--fmipa-green-dark);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	margin-block: 0.5rem 0.25rem;
}
/*
 * Fakta pembanding (akreditasi + gelar). Dibuat list tanpa bullet, bukan dua
 * <p>, supaya dibacakan sebagai satu kelompok berisi dua butir — dan supaya
 * jaraknya rapat, karena dua baris pendek yang dipisahkan jarak paragraf
 * penuh terbaca sebagai dua bagian berbeda padahal satu blok fakta.
 */
.fmipa-prodi-card__fakta {
	list-style: none;
	margin: 0.35rem 0 0.6rem;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.45;
}
.fmipa-prodi-card__fakta li + li {
	margin-top: 0.15rem;
	color: var(--fmipa-text-muted, #55605a);
}

/* === Hero detail prodi === */
.fmipa-prodi-hero {
	position: relative;
	background: var(--fmipa-gray-50, #f5f5f5);
	padding-block: clamp(2rem, 5vw, 4rem);
	overflow: hidden;
}
.fmipa-prodi-hero.has-image {
	color: #fff;
}
.fmipa-prodi-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.fmipa-prodi-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/*
 * Scrim hero. Nilai lama (0.35 → 0.65 hitam) cukup selama TIDAK ADA prodi
 * yang benar-benar punya foto hero — jalur `.has-image` praktis mati. Begitu
 * foto departemen dipasang, teks putih jatuh di atas tembok gedung yang
 * terang benderang dan rasio kontrasnya turun ke ~3:1: di bawah ambang
 * WCAG AA 4.5:1, dan terlihat langsung pada foto Fisika/Kimia/Statistika.
 *
 * Basis (juga dipakai layar sempit tempat teks selebar layar) = scrim rata
 * yang cukup gelap untuk menjamin kontras di mana pun teks jatuh.
 */
.fmipa-prodi-hero.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(3, 24, 15, 0.72), rgba(3, 24, 15, 0.86));
	/*
	 * z-index 1, bukan 0. `::before` adalah anak PERTAMA, `__media` anak
	 * berikutnya — pada z-index yang sama, yang belakangan menang, sehingga
	 * scrim tertimbun di bawah fotonya sendiri dan tidak pernah terlihat.
	 * Selama belum ada prodi berfoto hero, bug ini tidak punya gejala.
	 */
	z-index: 1;
}
/*
 * Di layar lebar teks berhenti di ~60ch, jadi separuh kanan bingkai tidak
 * pernah ditimpa teks. Di sana scrim boleh menipis supaya fotonya benar-benar
 * terbaca sebagai foto — gelap penuh hanya di pita kiri tempat teks berada.
 */
@media (min-width: 60rem) {
	.fmipa-prodi-hero.has-image::before {
		background:
			linear-gradient(90deg, rgba(3, 24, 15, 0.92) 0%, rgba(3, 24, 15, 0.88) 55%, rgba(3, 24, 15, 0.45) 100%),
			linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45));
	}
}
.fmipa-prodi-hero__inner {
	position: relative;
	z-index: 2; /* Di atas scrim (1), yang sendiri di atas foto (0). */
}
.fmipa-prodi-hero__breadcrumb {
	font-size: 0.85rem;
	opacity: 0.85;
}
.fmipa-prodi-hero__breadcrumb a {
	color: inherit;
}
.fmipa-prodi-hero__dept {
	font-weight: 600;
	margin-top: -0.25rem;
}
.fmipa-prodi-hero__tagline {
	font-size: 1.1rem;
	max-width: 60ch;
}
/*
 * Fakta hero dibuat mengalir menyamping (bukan dua baris <dl> default), jadi
 * di layar lebar ia jadi satu pita ringkas di bawah tagline, dan membungkus
 * sendiri ke bawah di ponsel tanpa media query.
 */
.fmipa-prodi-hero__fakta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	margin: 1rem 0 0;
}
.fmipa-prodi-hero__fakta dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/*
	 * 0.85, bukan 0.75. Label ini teks kecil (12px) — kelas yang justru
	 * paling ketat ambang kontrasnya — dan di atas foto ia sudah kehilangan
	 * sebagian kontras ke scrim. Meredupkannya lebih jauh membuat "AKREDITASI"
	 * hilang duluan sebelum nilainya terbaca.
	 */
	opacity: 0.85;
}
.fmipa-prodi-hero__fakta dd {
	margin: 0.1rem 0 0;
	font-weight: 600;
}
.fmipa-prodi-cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

/* === Layout dua kolom: sidebar sticky + konten === */
.fmipa-prodi-layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
.fmipa-prodi-sidenav {
	position: sticky;
	top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-left: 3px solid var(--fmipa-gray-200, #e5e5e5);
	padding-left: 1rem;
}
.fmipa-prodi-sidenav a {
	font-weight: 600;
	color: var(--fmipa-gray-700, #444);
	text-decoration: none;
}
.fmipa-prodi-sidenav a:hover,
.fmipa-prodi-sidenav a:focus {
	color: var(--fmipa-green-dark);
}

/* Konten dijaga tidak terlalu sempit maupun terlalu lebar untuk keterbacaan
   teks existing (Visi/Misi/Tujuan Pendidikan) — lihat catatan
   REFERENSI-DESAIN.md soal reflow sidebar. */
.fmipa-prodi-content {
	max-width: 75ch;
}
.fmipa-prodi-content :is(h2, h3) {
	margin-top: 1.75rem;
}

.fmipa-prodi-block {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.fmipa-prodi-block__cta {
	margin-top: 1rem;
}

.fmipa-prodi-semester {
	margin-top: 1.5rem;
}
.fmipa-prodi-mk-table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 1rem;
}
.fmipa-prodi-mk-table th,
.fmipa-prodi-mk-table td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--fmipa-gray-200, #e5e5e5);
	text-align: left;
}

.fmipa-prodi-prospek-grid {
	margin-top: 1rem;
}

.fmipa-prodi-jadwal-list {
	display: grid;
	gap: 0.75rem;
	margin: 1rem 0;
}
.fmipa-prodi-jadwal-item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--fmipa-gray-200, #e5e5e5);
	border-radius: var(--fmipa-radius, 0.5rem);
}
.fmipa-prodi-jadwal-item dt { font-weight: 700; margin: 0; }
.fmipa-prodi-jadwal-item dd { margin: 0; color: var(--fmipa-gray-500, #6b7280); }
.fmipa-prodi-dokumen-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.fmipa-prodi-pengajar-list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.fmipa-prodi-pengajar-list li {
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--fmipa-gray-200, #e5e5e5);
	border-radius: var(--fmipa-radius, 0.5rem);
}

.fmipa-prodi-faq-item {
	border-bottom: 1px solid var(--fmipa-gray-200, #e5e5e5);
	padding-block: 0.85rem;
}
.fmipa-prodi-faq-item summary {
	cursor: pointer;
	font-weight: 600;
}
.fmipa-prodi-faq-item p {
	margin-top: 0.6rem;
}

.fmipa-prodi-cta-final {
	text-align: center;
	background: var(--fmipa-gray-50, #f5f5f5);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: 12px;
}
.fmipa-prodi-cta-final .fmipa-prodi-cta-group {
	justify-content: center;
}

/* === Mobile: sidebar jadi nav pill horizontal, bukan hilang/accordion
   tersembunyi, supaya semua tautan tetap ada di DOM tanpa JS. === */
@media (max-width: 782px) {
	.fmipa-prodi-layout {
		grid-template-columns: 1fr;
	}
	.fmipa-prodi-sidenav {
		position: static;
		flex-direction: row;
		overflow-x: auto;
		border-left: none;
		border-bottom: 2px solid var(--fmipa-gray-200, #e5e5e5);
		padding: 0 0 0.75rem;
		gap: 1rem;
	}
	.fmipa-prodi-sidenav a {
		white-space: nowrap;
	}
}

/* === Meta box admin repeater === */
.fmipa-prodi-repeater input,
.fmipa-prodi-repeater textarea {
	width: 100%;
}


/* === Kartu departemen (section "Program Studi" di beranda) ===
 *
 * Pola sama dengan kartu prodi overlay (§5 REFERENSI-PSIKOLOGI: foto
 * full-bleed, veil warna, teks putih di atasnya) — tapi dengan satu tuntutan
 * yang tidak dimiliki kartu prodi: di sini teks bukan cuma judul dua kata,
 * melainkan sampai empat prodi lengkap dengan akreditasi dan gelar pada
 * ukuran 13px. Karena itu veil-nya jauh lebih pekat dan arahnya DIBALIK,
 * bukan gradient yang memudar ke 62% seperti .fmipa-prodi-kartu: bagian yang
 * memudar di sana persis tempat baris akreditasi duduk di sini, dan foto
 * sarpras yang terang di bagian bawah akan langsung menelannya.
 */
.fmipa-dept-grid {
	display: grid;
	/*
	 * 250px minimum dihitung mundur dari dua batasan sekaligus:
	 *
	 *   Batas atas — departemennya ada DELAPAN. Di lebar isi container
	 *   (1200px dikurangi padding sekitar 1136px), minimum 280px hanya memuat
	 *   tiga kolom, sehingga baris terakhir berisi 2 kartu dan menyisakan
	 *   lubang selebar sepertiga baris. Dengan 250px muat empat kolom
	 *   (4x250 + 3x24 = 1072 <= 1136), dan 8 kartu jatuh rapi jadi 4x2.
	 *
	 *   Batas bawah — baris terpanjang di dalam kartu adalah nilai akreditasi
	 *   ("Unggul (BAN-PT), ASIIN"). Pada kolom 250px, lebar teks setelah
	 *   padding kartu sekitar 194px; nilai itu sekitar 150px pada 13px, jadi
	 *   masih satu baris. Di bawah sekitar 230px ia mulai pecah dua baris.
	 */
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--fmipa-space-md, 1.5rem);
	/*
	 * Kartu DIBIARKAN meregang setinggi barisnya (stretch bawaan grid). Jumlah
	 * prodi per departemen berbeda-beda (1 sampai 3), jadi dengan
	 * align-items:start dasar kartu dalam satu baris mendarat di tiga
	 * ketinggian berbeda — pola "grid ragged" yang sudah pernah diperbaiki di
	 * grid lain repo ini.
	 *
	 * grid-auto-rows:1fr melanjutkan itu SATU LANGKAH LAGI: stretch hanya
	 * menyamakan kartu di dalam satu baris, sementara tinggi tiap baris masih
	 * dihitung sendiri-sendiri dari isi terpanjangnya. Pada data sekarang baris
	 * pertama (Biologi, Fisika, Geofisika, Ilmu Komputer — terpanjang 3 prodi)
	 * dan baris kedua (Kimia, Matematika, Statistika, Teknik Elektro —
	 * terpanjang 3 prodi) kebetulan hampir sama tinggi, tapi "kebetulan" itu
	 * pecah begitu satu departemen bertambah prodi: barisnya ikut memanjang
	 * sendirian dan kedua baris tidak lagi sepadan.
	 *
	 * Dengan 1fr, semua baris berbagi tinggi yang sama, jadi kedelapan kartu
	 * berukuran identik berapa pun isinya — dan tetap begitu saat grid meluruh
	 * jadi 2 kolom atau 1 kolom. Isi yang lebih pendek tidak merusak apa pun:
	 * panel teks memang didorong ke dasar kartu (margin-top:auto), sisanya
	 * jatuh ke foto.
	 */
	grid-auto-rows: 1fr;
}
.fmipa-dept-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(260px, 22vw, 320px);
	/*
	 * Padding samping & bawah pindah ke .__isi: panel teks perlu menyentuh
	 * ketiga tepi kartu supaya veil-nya berhenti persis di tepi, bukan
	 * menyisakan bingkai foto setipis 1,5rem yang membuat panel terlihat
	 * seperti kotak tertempel.
	 *
	 * Yang tersisa di kartu cuma padding ATAS, dan itu bukan sisa — itu yang
	 * MENJAMIN setiap kartu punya pita foto. Panel didorong ke dasar dengan
	 * margin-top:auto, jadi pada departemen dengan prodi terbanyak (Kimia, 4
	 * prodi — yang juga menentukan tinggi barisnya) panel akan tepat setinggi
	 * kartu dan fotonya habis tak bersisa. Padding atas ini ruang yang tidak
	 * bisa direbut panel, berapa pun isinya.
	 */
	padding: 4.5rem 0 0;
	border-radius: var(--fmipa-radius-lg, 1rem);
	overflow: hidden;
	color: #fff;
	/* Latar padat sebagai dasar: kalau foto belum ada atau gagal dimuat,
	   kartu tetap gelap dan teks putih tetap terbaca — bukan putih di atas
	   putih. */
	background: var(--fmipa-dept-nada, var(--fmipa-ink, #071912));
	isolation: isolate;
}
.fmipa-dept-card__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.fmipa-dept-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/*
	 * Foto sumbernya foto dokumentasi sarpras apa adanya, dan sebagian besar
	 * interior (working space Biologi, ruang diskusi Geofisika, lab Ilmu
	 * Komputer) terekam gelap. Di bawah veil gelap, foto-foto itu jatuh jadi
	 * bidang hitam rata — kartunya "berfoto" hanya di dalam berkas, tidak di
	 * mata pembaca. Sedikit angkat kecerahan membuatnya kembali terbaca.
	 *
	 * Ini TIDAK menggerus perhitungan kontras di ::before: kasus terburuk
	 * yang dipakai di sana adalah piksel putih, dan menaikkan kecerahan
	 * piksel putih tetap putih (terpotong di 255). Yang berubah cuma sisi
	 * gelapnya.
	 */
	filter: brightness(1.22) saturate(1.05);
}
/*
 * Tint tipis sekartu-penuh — tugasnya BUKAN menjaga kontras teks (itu urusan
 * gradient di .__isi), melainkan menarik foto apa adanya ke dalam palet
 * supaya delapan foto dari delapan kamera/kondisi cahaya berbeda tidak
 * terbaca sebagai delapan gaya yang bertabrakan dalam satu baris.
 */
.fmipa-dept-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--fmipa-dept-nada, var(--fmipa-ink, #071912)) 26%, transparent);
}
/*
 * Keempat nada SEMUANYA gelap — berbeda dari .fmipa-prodi-kartu yang memakai
 * --fmipa-green-dark mentah sebagai nada-2. Hijau itu (#008050) cukup terang
 * sehingga teks 13px putih di atasnya hanya mencapai sekitar 3,9:1, di bawah
 * ambang 4,5:1. Di kartu prodi ia lolos karena teksnya besar dan tebal; di
 * sini tidak. Jadi hijau dipakai sebagai CAMPURAN ke arah ink, bukan sebagai
 * nada utuh — warnanya tetap terbaca hijau, kontrasnya tetap aman.
 */
/*
 * Tidak ada nada yang memakai --fmipa-ink mentah. Ink (#071912) praktis
 * hitam, dan pada dua kartu yang kebagian nada itu (Biologi dan Teknik
 * Elektro pada susunan sekarang) fotonya hilang sama sekali — kartunya
 * terbaca sebagai kotak hitam polos, bukan sebagai kartu berfoto. Nada
 * paling gelap sekarang bertumpu pada ink-soft yang diberi sedikit hijau,
 * jadi foto tetap punya ruang untuk terlihat.
 */
.fmipa-dept-card--nada-1 { --fmipa-dept-nada: color-mix(in srgb, var(--fmipa-green-dark, #008050) 18%, var(--fmipa-ink-soft, #0F2A1F)); }
.fmipa-dept-card--nada-2 { --fmipa-dept-nada: color-mix(in srgb, var(--fmipa-green-dark, #008050) 45%, var(--fmipa-ink, #071912)); }
.fmipa-dept-card--nada-3 { --fmipa-dept-nada: var(--fmipa-ink-soft, #0F2A1F); }
.fmipa-dept-card--nada-4 { --fmipa-dept-nada: color-mix(in srgb, var(--fmipa-green-dark, #008050) 28%, var(--fmipa-ink, #071912)); }

/*
 * Panel teks didorong ke DASAR kartu dan membawa veil-nya sendiri.
 *
 * Ini menggantikan veil sekartu-penuh yang dipasang sebelumnya. Masalahnya
 * bukan kontras, melainkan bahwa tinggi ISI dan tinggi KARTU tidak sama dan
 * tidak bisa disamakan: departemen berisi 1 prodi (Geofisika, Ilmu Komputer,
 * Teknik Elektro) hanya memakai seperempat tinggi kartu, sementara kartu
 * tetap diregangkan setinggi barisnya oleh grid. Veil sekartu-penuh lalu
 * menggelapkan tiga perempat bidang yang tidak berisi teks apa pun — foto
 * hilang, dan yang tersisa cuma ruang kosong gelap.
 *
 * Dengan veil menempel pada panel, tingginya ikut isi dengan sendirinya:
 * kartu berisi 1 prodi memperlihatkan foto lebih banyak, kartu berisi 4
 * prodi lebih sedikit. Tidak ada angka yang perlu disetel per kartu.
 *
 * padding-top 2,75rem menjaga baris teks pertama tidak mendarat di 1,5rem
 * pertama gradient, bagian yang sengaja masih tembus pandang supaya panel
 * menyatu dengan foto alih-alih berbatas garis lurus.
 */
.fmipa-dept-card__isi {
	display: flex;
	flex-direction: column;
	gap: var(--fmipa-space-sm, 1rem);
	margin-top: auto;
	padding: 2.75rem var(--fmipa-space-md, 1.5rem) var(--fmipa-space-md, 1.5rem);
	background: linear-gradient(
		to bottom,
		transparent 0,
		color-mix(in srgb, var(--fmipa-dept-nada, var(--fmipa-ink, #071912)) 90%, transparent) 2.25rem,
		color-mix(in srgb, var(--fmipa-dept-nada, var(--fmipa-ink, #071912)) 94%, transparent) 100%
	);
}
.fmipa-dept-card__nama {
	margin: 0;
	font-size: var(--fmipa-fs-card-title, 1.25rem);
	line-height: 1.2;
	color: inherit;
	text-wrap: balance;
}
.fmipa-dept-card__daftar {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fmipa-space-xs, 0.75rem);
}
/*
 * Pemisah antar prodi memakai putih transparan, bukan token garis kartu
 * terang: di atas veil gelap, --fmipa-card-line praktis tak terlihat.
 */
.fmipa-dept-card__prodi + .fmipa-dept-card__prodi {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	padding-top: var(--fmipa-space-xs, 0.75rem);
}
.fmipa-dept-card__tautan {
	color: #fff;
	font-weight: var(--fmipa-fw-bold, 700);
	text-decoration: none;
}
.fmipa-dept-card__tautan:hover,
.fmipa-dept-card__tautan:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/*
 * Cincin fokus ditulis eksplisit: cincin bawaan tema dihitung untuk teks
 * gelap di atas latar terang, dan di kartu gelap ini ia nyaris tak terlihat.
 */
.fmipa-dept-card__tautan:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 2px;
}
/*
 * Gelar sebagai baris kedua polos di bawah nama — tanpa label "Gelar:".
 *
 * Waktu masih ada dua fakta (akreditasi + gelar), label memang perlu: tanpa
 * itu "Unggul (BAN-PT), ASIIN" dan "Sarjana Sains (S.Si.)" terbaca sebagai
 * dua kalimat lepas yang tidak jelas menjawab apa. Dengan tinggal satu
 * fakta, labelnya justru jadi ongkos: ia menambah kolom, koma, dan lebar
 * baris untuk menerangkan sesuatu yang sudah terbaca sendiri dari isinya —
 * "Sarjana Sains (S.Si.)" tidak bisa dikira apa pun selain gelar.
 *
 * display:block, bukan inline setelah tautan: nama prodi dan gelar
 * dua-duanya bisa panjang, dan kalau digabung satu baris, pembungkusannya
 * membuat awal gelar mendarat di tengah-tengah, sejajar potongan nama.
 */
.fmipa-dept-card__gelar {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	/* 0.85, bukan 0.7: pada 13px di atas veil gelap, 0.7 turun ke sekitar
	   4,1:1 — di bawah ambang. */
	color: rgba(255, 255, 255, 0.85);
}
/* Zoom halus saat kursor ada di kartu — foto satu-satunya lapisan yang
   bergerak; teks tetap diam supaya tidak ada yang bergeser saat dibaca. */
.fmipa-dept-card__media img {
	transition: transform 320ms ease-out;
}
.fmipa-dept-card:hover .fmipa-dept-card__media img {
	transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
	.fmipa-dept-card__media img { transition: none; }
	.fmipa-dept-card:hover .fmipa-dept-card__media img { transform: none; }
}