/* ----------------------------------------------------------------
	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: tosca tua (teks putih 5,33:1) */
#slider .button:not(.button-border),
.tombol-layanan {
	background-color: #117964;
	color: #fff;
	min-height: 44px;
}
#slider .button:not(.button-border):hover,
.tombol-layanan:hover {
	background-color: #0C5A4A;
	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: #117964; }
.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: #117964; }
.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: #117964; font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; }
.ag-link:hover { color: #0C5A4A; text-decoration: underline; }
.ag-semua { text-align: center; margin-top: 28px; }
.ag-semua a, .tombol-semua { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 8px; background: #117964; color: #fff; font-weight: 600; }
.ag-semua a:hover, .tombol-semua:hover { background: #0C5A4A; color: #fff; }
.ag-judul a:focus-visible, .ag-link:focus-visible, .ag-semua a:focus-visible, .tombol-semua:focus-visible { outline: 3px solid #117964; outline-offset: 2px; }

/* ----------------------------------------------------------------
   Palet tosca desa (satu rona, 168°). Kontras dicek dengan contrast-check.py.
     #1ABC9C  tosca terang  : hanya hiasan (blok seleksi teks), 2,41:1 di putih
     #16A186  tosca         : aksen judul besar & garis menu aktif, 3,24:1 (cukup untuk teks besar/penanda)
     #117964  tosca tua     : tautan, tombol, teks aksen biasa, putih di atasnya 5,33:1
     #0C5A4A  tosca gelap   : hover/ditekan, 8,15:1
     #50E2C5  tosca muda    : aksen di bagian berlatar gelap
     #E2F8F4  tosca pucat   : latar lembut (tosca tua di atasnya 4,81:1)
   Tosca bawaan tema (#1ABC9C) di style.css/dark.css sudah diganti tosca tua.
-----------------------------------------------------------------*/
::selection { background: #1ABC9C; color: #fff; }
h1 > span:not(.nocolor):not(.badge),
h2 > span:not(.nocolor):not(.badge),
h3.ls0 > span:not(.nocolor):not(.badge):not(.subtitle) { color: #16A186; }
.dark h1 > span:not(.nocolor):not(.badge),
.dark h2 > span:not(.nocolor):not(.badge),
.dark h3 > span:not(.nocolor):not(.badge) { color: #50E2C5; }
a:hover { color: #0C5A4A; }
.dark a:not(.button):hover { color: #50E2C5; }
.button:not(.button-border):not(.button-white):hover { background-color: #0C5A4A; }