/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
	Lensa Kegiatan: grid rapi 3:2
	- foto lanskap dipotong otomatis dari tengah (object-fit: cover)
	- poster / foto potret / panorama ditampilkan utuh di atas latar buram
-----------------------------------------------------------------*/
.lensa-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	padding: 0 8px;
}
@media (max-width: 991.98px) {
	.lensa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
	.lensa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 6px; }
}
.lensa-item[hidden] { display: none !important; }
.lensa-item { position: static !important; width: auto !important; margin: 0; }

.lensa-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 8px;
	background: #e5e7eb;
	cursor: zoom-in;
}
.lensa-tile::before { content: ""; display: block; padding-top: 66.6667%; } /* rasio 3:2 */

.lensa-img,
.lensa-blur {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
.lensa-img {
	object-fit: cover;
	object-position: center;
	transition: transform .5s ease;
	z-index: 1;
}
.lensa-blur {
	display: none;
	background-size: cover;
	background-position: center;
	filter: blur(16px) brightness(.8);
	transform: scale(1.2);
}
.lensa-tile.is-contain .lensa-blur { display: block; }
.lensa-tile.is-contain .lensa-img { object-fit: contain; }

.lensa-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	padding: 28px 10px 8px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.78));
}
/* maksimal 2 baris lalu "..." (clamp di elemen dalam agar padding tidak ikut menampilkan baris ke-3) */
.lensa-caption-teks {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
/* Latar tampilan foto penuh lebih gelap agar halaman di belakang tidak terlihat */
.mfp-bg { background: #0b0b0b; }
.mfp-bg.mfp-ready { opacity: .92 !important; }
.mfp-title { font-size: 13px; line-height: 1.4; padding-right: 64px; }
/* Perangkat dengan mouse: judul muncul saat kursor di atas foto */
@media (hover: hover) and (pointer: fine) {
	.lensa-caption { opacity: 0; transition: opacity .25s ease; }
	.lensa-tile:hover .lensa-caption,
	.lensa-tile:focus-visible .lensa-caption { opacity: 1; }
	.lensa-tile:hover .lensa-img { transform: scale(1.05); }
	.lensa-tile.is-contain:hover .lensa-img { transform: none; }
}
@media (max-width: 767.98px) {
	.lensa-caption { font-size: 11px; padding: 22px 8px 6px; }
}
.lensa-filter li { cursor: pointer; }

/* ----------------------------------------------------------------
	Banner slider: gradien hitam dari bawah agar teks putih terbaca
	- tingkat 0.75 diukur pada foto slider asli: subjudul >= 4.5:1, judul >= 3:1
	  (foto "Agenda Desa" berlatar dinding & layar putih adalah kasus terberat)
	- bagian atas foto (+-20%) tetap bersih agar wajah & suasana kegiatan terlihat
-----------------------------------------------------------------*/
#slider .swiper-slide-bg::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	pointer-events: none;
	background: linear-gradient(to top,
		rgba(0, 0, 0, .75) 0%,
		rgba(0, 0, 0, .56) 35%,
		rgba(0, 0, 0, .22) 60%,
		rgba(0, 0, 0, 0) 80%);
}
/* Teks diturunkan sedikit agar berada di area gradien dan tidak menutupi wajah di tengah foto */
#slider .slider-caption.slider-caption-center { padding-top: 22vh; }
@media (max-width: 767.98px) {
	#slider .slider-caption.slider-caption-center { padding-top: 16vh; }
	/* Di HP slider lebih pendek, teks jatuh lebih tinggi pada foto: gradien diperpanjang */
	#slider .swiper-slide-bg::after {
		background: linear-gradient(to top,
			rgba(0, 0, 0, .78) 0%,
			rgba(0, 0, 0, .66) 40%,
			rgba(0, 0, 0, .40) 65%,
			rgba(0, 0, 0, .10) 85%,
			rgba(0, 0, 0, 0) 100%);
	}
}
#slider .slider-caption h2,
#slider .slider-caption p { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

/* Tombol slider & ajakan layanan: hijau desa (teks putih 5,02:1; toska bawaan 2,41:1 tidak terbaca) */
#slider .button:not(.button-border),
.tombol-layanan {
	background-color: #15803d;
	color: #fff;
	min-height: 44px;
}
#slider .button:not(.button-border):hover,
.tombol-layanan:hover {
	background-color: #166534;
	color: #fff;
}
#slider .button:focus-visible,
.tombol-layanan:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* ----------------------------------------------------------------
	Agenda Kegiatan: 3 kartu bertinggi seragam
	- foto 3:2 dipotong dari tengah, tanggal lengkap (hari bulan tahun)
	- judul maks. 2 baris, ringkasan maks. 3 baris; isi lengkap di halaman detail portal
	- label tipe: Wajib merah, Terbatas oranye, Umum abu (teks putih >= 4,5:1)
-----------------------------------------------------------------*/
.ag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 991.98px) { .ag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .ag-grid { grid-template-columns: 1fr; gap: 16px; } }
.ag-card { background: #fff; border: 1px solid #e3e8e5; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.ag-card:hover { border-color: #15803d; }
.ag-foto { position: relative; display: block; aspect-ratio: 3 / 2; background: #e5e7eb; overflow: hidden; }
.ag-foto img { position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; max-width: none; object-fit: cover; }
.ag-tgl { position: absolute; left: 12px; top: 12px; background: #fff; color: #1f2937; border-radius: 8px; padding: 6px 10px; text-align: center; line-height: 1.1; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.ag-tgl .d { display: block; font-size: 22px; font-weight: 700; }
.ag-tgl .m { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.ag-isi { padding: 16px 18px 12px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ag-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ag-badge { font-size: 12px; font-weight: 600; color: #fff; border-radius: 999px; padding: 3px 10px; line-height: 1.5; }
.ag-wajib { background: #b4232f; }
.ag-terbatas { background: #b45309; }
.ag-umum { background: #4b5563; }
.ag-lewat { background: #e9ecea; color: #4b5563; }
.ag-judul { font-size: 17px; font-weight: 600; line-height: 1.35; margin: 0 0 8px; letter-spacing: 0; text-transform: none; }
.ag-judul a { color: #1f2937; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ag-judul a:hover { color: #15803d; }
.ag-meta { font-size: 14px; color: #4b5563; margin-bottom: 10px; line-height: 1.6; }
.ag-meta div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ringkas { font-size: 14px; color: #4b5563; line-height: 1.6; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ag-link { margin-top: auto; font-weight: 600; color: #15803d; font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; }
.ag-link:hover { color: #166534; text-decoration: underline; }
.ag-semua { text-align: center; margin-top: 28px; }
.ag-semua a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 8px; background: #15803d; color: #fff; font-weight: 600; }
.ag-semua a:hover { background: #166534; color: #fff; }
.ag-judul a:focus-visible, .ag-link:focus-visible, .ag-semua a:focus-visible { outline: 3px solid #15803d; outline-offset: 2px; }