/*
 * Styling khusus fmipa-riset — memakai token warna & kelas dasar tema
 * (.fmipa-container, .fmipa-section, .fmipa-grid, .fmipa-card, .fmipa-btn)
 * apa adanya; file ini hanya menambah bagian yang belum ada di tema.
 */

.fmipa-riset-pakar-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var( --fmipa-gray-50, #f3f4f6 );
	color: var( --fmipa-green-dark, #00734a );
	font-size: 2.5rem;
	font-weight: 700;
	border-radius: 8px;
}



.fmipa-riset-section-gap {
	margin-top: clamp( 2rem, 4vw, 3rem );
}

.fmipa-riset-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
}

.fmipa-riset-status--berjalan {
	background: color-mix( in srgb, var( --fmipa-green, #00b26b ) 15%, white );
	color: var( --fmipa-green-dark, #00734a );
}

.fmipa-riset-status--selesai {
	background: var( --fmipa-gray-50, #f3f4f6 );
	color: var( --fmipa-gray-500, #6b7280 );
}

.fmipa-riset-filter {
	margin-bottom: 2rem;
}
.fmipa-riset-filter select {
	padding: 6px 10px;
	border: 1px solid var( --fmipa-gray-300, #d1d5db );
	border-radius: var(--fmipa-radius, 0.5rem);
}

/* CTA "Ajak/Tertarik Berkolaborasi" — dipakai arsip pakar + detail
   pakar/penelitian, dulu tiap pemanggil pasang inline margin-top sendiri. */
.fmipa-riset-cta-block {
	margin-top: clamp( 2rem, 4vw, 3rem );
}

/* Pill bidang riset kecil — dipakai di detail pakar/penelitian/publikasi,
   varian ringkas dari .fmipa-btn--outline (bukan tombol aksi utama). */
.fmipa-riset-bidang-tag {
	margin: 0 6px 6px 0;
	padding: 4px 12px;
	font-size: 0.85em;
}

.fmipa-riset-pakar-kontak {
	list-style: none;
	padding: 0;
}

.fmipa-riset-pakar-profile__layout {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	align-items: flex-start;
}
.fmipa-riset-pakar-profile__media {
	flex: 0 0 220px;
}
.fmipa-riset-pakar-profile__body {
	flex: 1 1 320px;
}

@media ( max-width: 640px ) {
	.fmipa-riset-pakar-profile > div {
		flex-direction: column;
	}
}

/* Dua CTA ringkas berdampingan di akhir section Riset (menggantikan formulir
   penuh yang dulu terselip di tengah section). flex-wrap supaya di layar
   sempit keduanya turun rapi, bukan memaksa overflow. */
.fmipa-riset-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

/* === Bidang riset: DAFTAR, bukan grid kartu ===
 *
 * Lihat catatan di section-riset.php: tiap bidang cuma membawa nama + dua
 * angka, tapi sebelumnya dirender sebagai kotak 330×145px yang isinya empat
 * kata dan sisanya ruang kosong, lalu jatuh ragged 3+2.
 *
 * Dua kolom di desktop supaya daftarnya tidak jadi pita tipis sepanjang
 * layar, dan tetap satu kolom di ponsel.
 */
.fmipa-riset-bidang {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0 var(--fmipa-space-lg, 2.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 783px) {
	.fmipa-riset-bidang { grid-template-columns: 1fr 1fr; }
}
.fmipa-riset-bidang__tautan {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding-block: 0.85rem;
	/* Garis rambut sebagai pemisah — satu alat, bukan kotak penuh. */
	border-bottom: 1px solid var(--fmipa-band-line, rgba(255,255,255,0.09));
	text-decoration: none;
	/* color dari pita: daftar ini TIDAK memasang latarnya sendiri, jadi
	   mewarisi warna pita justru yang benar di sini — kebalikan dari kartu
	   lama, yang punya latar sendiri sehingga tidak boleh mewarisi. */
	color: var(--fmipa-band-fg, inherit);
}
.fmipa-riset-bidang__nama {
	font-family: var(--fmipa-font-headline);
	font-weight: var(--fmipa-fw-bold, 700);
	font-size: var(--fmipa-fs-card-title, 1.25rem);
	line-height: 1.3;
}
.fmipa-riset-bidang__jumlah {
	font-size: var(--fmipa-fs-2xs, 0.8125rem);
	color: var(--fmipa-band-fg-muted, inherit);
	white-space: nowrap;
}
.fmipa-riset-bidang__tautan:hover .fmipa-riset-bidang__nama,
.fmipa-riset-bidang__tautan:focus-visible .fmipa-riset-bidang__nama {
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ══ Kartu sorotan riset per departemen (beranda) ═══════════════════════════
   Delapan kartu, satu per departemen, empat kolom di layar lebar.

   Bentuknya FOTO PENUH dengan judul di atasnya, bukan foto-di-atas-teks
   seperti kartu berita/agenda. Bukan sekadar selera: kartu ini isinya cuma
   dua baris (departemen + judul), jadi pola lama menyisakan kotak teks
   setinggi separuh kartu yang panjangnya ditentukan judul terpanjang di
   barisnya — tujuh kartu lain lalu membawa ruang kosong sebesar selisihnya.
   Dengan foto sebagai bidang kartu, selisih panjang judul diserap gradien,
   bukan diubah jadi lubang putih.

   Konsekuensinya yang harus dijaga: teks putih kini duduk di atas foto yang
   tidak kita kendalikan isinya. Karena itu scrim-nya BUKAN gradien
   transparan-ke-hitam biasa, melainkan gradien yang bagian bawahnya benar-
   benar pekat (0.92) — kontras teks tidak boleh bergantung pada kebetulan
   foto mana yang diunggah admin. */

.fmipa-grid--sorotan {
	--fmipa-grid-min: 15rem;
}

/* Empat kolom ditulis EKSPLISIT, tidak lewat --fmipa-grid-min seperti modifier
   grid lain: auto-fit menghitung jumlah kolom dari sisa lebar, jadi "empat" —
   yang di sini adalah bentuk yang diminta, supaya delapan departemen jatuh
   rapi 4+4 — akan meleset jadi 3 atau 5 kolom di lebar tertentu.

   :has(> :nth-child(3)) membiarkan aturan bawaan tema untuk grid berisi 1-2
   kartu tetap berlaku: kalau baru dua departemen yang punya sorotan, keduanya
   tidak perlu dipaksa menempati seperempat lebar. */
@media ( min-width: 62rem ) {
	.fmipa-grid--sorotan:has( > :nth-child(3) ) {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

.fmipa-card--sorotan {
	position: relative;
	/* Tautan judul mewarisi putih. Tanpa baris ini ia mengambil
	   --fmipa-card-link (hijau tua) dari .fmipa-card dan jadi hijau di atas
	   foto gelap — persis lubang kontras yang dicatat tema di aturan
	   .fmipa-card. */
	--fmipa-band-link: #fff;
	isolation: isolate;
	justify-content: flex-end;
	min-height: 22rem;
	padding: var( --fmipa-space-md, 1.5rem );
	border: 0;
	border-radius: var( --fmipa-card-radius, 1rem );
	background: var( --fmipa-green-dark, #008050 );
	color: #fff;
	overflow: hidden;
	/* Cincin tipis di dalam, bukan border. Kartu ini duduk di pita ink yang
	   sama gelapnya dengan bagian bawah foto; tanpa cincin, tepi kartu
	   menghilang dan delapan kartu terbaca sebagai satu bidang gambar. */
	box-shadow: inset 0 0 0 1px rgb( 255 255 255 / 0.14 );
}

/* Slot media berhenti jadi "blok di atas teks" dan menjadi BIDANG kartu:
   menutup seluruh permukaan, di lapisan paling bawah. Semua properti bawaan
   .fmipa-card__media (aspect-ratio, margin negatif, radius atas saja) harus
   ditulis ulang di sini, bukan sebagiannya. */
.fmipa-card--sorotan .fmipa-card__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	aspect-ratio: auto;
	margin: 0;
	border-radius: inherit;
	background: var( --fmipa-green-dark, #008050 );
}

.fmipa-card--sorotan .fmipa-card__media img {
	transition: transform 0.6s var( --fmipa-ease, ease );
}

/* Scrim. Berhenti pekat di 0.92, bukan 1, supaya bagian bawah foto masih
   terbaca sebagai foto dan bukan bidang hitam mati. */
.fmipa-card--sorotan .fmipa-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		to top,
		rgb( 3 32 22 / 0.92 ) 0%,
		rgb( 3 32 22 / 0.78 ) 28%,
		rgb( 3 32 22 / 0.35 ) 55%,
		rgb( 3 32 22 / 0.05 ) 100%
	);
	transition: opacity 0.4s var( --fmipa-ease, ease );
}

/* Placeholder inisial (pakar tanpa foto) dibuat terang di atas dasar hijau —
   defaultnya memakai --fmipa-band-accent yang di pita ink justru gelap. */
.fmipa-card--sorotan .fmipa-card__media-placeholder {
	color: rgb( 255 255 255 / 0.35 );
}

/* Departemen sebagai pil kaca, bukan baris teks polos. Pil membawa kontrasnya
   sendiri, jadi label ini tetap terbaca tanpa bergantung pada seberapa gelap
   foto di belakangnya — dan sekaligus memberi kartu satu bentuk yang bukan
   teks, supaya blok bawah tidak terbaca sebagai dua paragraf beruntun.

   Posisinya DI BAWAH judul: capaian riset yang dibaca lebih dulu, departemen
   menyusul sebagai atribusi. */
.fmipa-riset-sorotan__dep {
	align-self: flex-start;
	margin: var( --fmipa-space-2xs, 0.5rem ) 0 0;
	padding: 0.3em 0.85em;
	border-radius: 999px;
	background: rgb( 255 255 255 / 0.16 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	box-shadow: inset 0 0 0 1px rgb( 255 255 255 / 0.22 );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}

/* Judul tampil UTUH, tanpa line-clamp. Panjang judul memang berselisih jauh
   (7 sampai 15 kata), tapi memotongnya membuat kartu menjanjikan kalimat yang
   tidak pernah selesai — dan justru judul terpanjang, yang capaiannya paling
   spesifik, yang paling sering kena potong. Di bentuk foto-penuh selisih itu
   tidak lagi jadi masalah tata letak: kartu tinggal tumbuh dan fotonya ikut
   meregang mengisi. */
.fmipa-card--sorotan h4 {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: #fff;
	text-shadow: 0 1px 2px rgb( 0 0 0 / 0.45 );
	text-wrap: balance;
}

/* Seluruh permukaan kartu bisa diklik lewat <a> foto yang sudah membentang
   penuh — tapi ia aria-hidden/tabindex="-1", jadi pembaca layar dan navigasi
   keyboard tetap hanya menemukan SATU tautan: judulnya. Menaikkan judul ke
   z-index 1 memastikan teksnya sendiri tetap bisa disorot dan diklik, tidak
   tertutup lapisan foto. */
.fmipa-card--sorotan .fmipa-riset-sorotan__dep,
.fmipa-card--sorotan h4 {
	position: relative;
	z-index: 1;
}

.fmipa-card--sorotan:hover {
	box-shadow: inset 0 0 0 1px rgb( 255 255 255 / 0.28 ), var( --fmipa-card-shadow-hover );
}

.fmipa-card--sorotan:hover .fmipa-card__media img,
.fmipa-card--sorotan:focus-within .fmipa-card__media img {
	transform: scale( 1.05 );
}

.fmipa-card--sorotan:hover .fmipa-card__media::after,
.fmipa-card--sorotan:focus-within .fmipa-card__media::after {
	opacity: 0.88;
}

/* Fokus keyboard ditandai di KARTU, bukan cuma di baris judul. Outline yang
   hanya melingkari teks di atas foto gelap nyaris tidak terlihat. */
.fmipa-card--sorotan:focus-within {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.fmipa-card--sorotan .fmipa-card__media img,
	.fmipa-card--sorotan .fmipa-card__media::after {
		transition: none;
	}
	.fmipa-card--sorotan:hover .fmipa-card__media img,
	.fmipa-card--sorotan:focus-within .fmipa-card__media img {
		transform: none;
	}
}