/**
 * Elibrary Test - GIP 2045 Progress Card
 * ---------------------------------------------------------------------
 * V0.1.6.8 -- VISUAL ISOLATION.
 *
 * Audit forensik V0.1.6.8 membuktikan TIDAK ADA tabrakan CSS dengan
 * Question Impact: nol aturan dari stylesheet mana pun yang menyentuh
 * elemen milik yang lain (diverifikasi lewat CSSOM di harness
 * side-by-side). Penyebab kedua kartu tampak kembar adalah DESAIN yang
 * memang dibuat serupa, bukan selector yang bocor.
 *
 * Karena itu perbaikan di sini adalah IDENTITAS VISUAL, bukan tambal
 * specificity:
 *   Question Impact -> permukaan putih, informatif, gaya dashboard
 *   GIP 2045        -> permukaan gelap institusional, satu angka fokus
 *
 * Seluruh selector diikat ke .el-gip-card (§9), memakai prefix .el-gip-
 * tanpa kecuali, dan TIDAK ADA satu pun !important (§10).
 * Nol dependensi eksternal: nol font, nol gambar, nol CDN.
 */

.el-gip-card {
	box-sizing: border-box;
	width: 100%;
	/* min() dipakai supaya max-width kartu tidak menghapus klem terhadap
	   lebar container -- pelajaran dari overflow modul Impact. */
	max-width: min(340px, 100%);
	/* Sebagai flex/grid item, min-width:auto akan menahan kartu tetap
	   selebar isinya dan memicu geser horizontal di layar sempit. */
	min-width: 0;
	margin: 0 auto;
	padding: 26px 22px 20px;
	border: 1px solid #14532d;
	border-radius: 20px;
	/* Permukaan gelap: pembeda paling tegas terhadap kartu Question
	   Impact yang berlatar putih. Warnanya mengikuti identitas sampul
	   Elibrary TKA. */
	background: linear-gradient(165deg, #0f3d2e 0%, #14532d 55%, #166534 100%);
	box-shadow: 0 14px 34px rgba(15, 61, 46, 0.28);
	color: #eaf5ef;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.5;
	text-align: center;
	overflow-wrap: break-word;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.el-gip-card * {
	box-sizing: border-box;
}

/* Micro-interaction hanya untuk perangkat berpenunjuk halus; di ponsel
   tidak ada yang bergantung pada hover. */
@media ( hover: hover ) and ( pointer: fine ) {
	.el-gip-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 18px 42px rgba(15, 61, 46, 0.34);
	}
}

/* ------------------------------ JUDUL ------------------------------ */

.el-gip-card .el-gip-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(234, 245, 239, 0.16);
}

.el-gip-card .el-gip-title-line {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9fd8b8;
}

.el-gip-card .el-gip-title-year {
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	color: #ffffff;
}

/* --------------------------- ANGKA UTAMA --------------------------- */

.el-gip-card .el-gip-main {
	padding: 20px 0 18px;
}

.el-gip-card .el-gip-icon {
	font-size: 1.6rem;
	line-height: 1;
	margin-bottom: 6px;
}

.el-gip-card .el-gip-number {
	margin: 0;
	/* 42-48px sesuai spesifikasi, menyusut mulus di layar sempit. */
	font-size: clamp(2.65rem, 11vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
}

.el-gip-card .el-gip-label {
	margin-top: 8px;
	font-size: 0.9rem;
	color: #bfe3cf;
}

/* ----------------------------- TARGET ----------------------------- */

.el-gip-card .el-gip-target {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 0.84rem;
	font-weight: 600;
	color: #ffffff;
}

.el-gip-card .el-gip-target-icon {
	font-size: 0.9em;
	line-height: 1;
}

/* ---------------------------- PROGRESS ---------------------------- */

.el-gip-card .el-gip-progress-track {
	height: 10px;
	margin-bottom: 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	overflow: hidden;
}

.el-gip-card .el-gip-progress-fill {
	display: block;
	height: 100%;
	min-width: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, #4ade80 0%, #86efac 100%);
	transition: width 0.8s ease;
}

.el-gip-card .el-gip-percent {
	margin-bottom: 16px;
	font-size: 0.88rem;
	font-weight: 700;
	color: #86efac;
}

/* ------------------------------ META ------------------------------ */

.el-gip-card .el-gip-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 8px;
	font-size: 0.78rem;
	color: #a7cfba;
}

.el-gip-card .el-gip-meta-sep {
	color: rgba(167, 207, 186, 0.6);
}

.el-gip-card .el-gip-updated {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(234, 245, 239, 0.14);
	font-size: 0.72rem;
	color: #8fbda6;
}

/* --------------------------- DATA KOSONG --------------------------- */

.el-gip-card.el-gip-card-empty {
	padding-bottom: 24px;
}

.el-gip-card .el-gip-empty-note {
	margin-top: 14px;
	padding: 10px 12px;
	border: 1px solid rgba(253, 230, 138, 0.5);
	border-radius: 12px;
	background: rgba(253, 230, 138, 0.12);
	color: #fde68a;
	font-size: 0.84rem;
	font-weight: 600;
}

/* Pengguna yang meminta gerakan minimal tidak mendapat animasi apa pun.
   Hitung-naik dimatikan di sisi JS. */
@media ( prefers-reduced-motion: reduce ) {
	.el-gip-card,
	.el-gip-card .el-gip-progress-fill {
		transition: none;
	}
}