/**
 * Bento Galeri Jamaah — Almira Travel
 *
 * Grid 12 kolom dengan span eksplisit, bukan masonry. Alasannya: masonry
 * (column-count / JS) menyusun item dari atas ke bawah per kolom sehingga
 * urutan baca berubah dan tinggi tile tidak bisa ditentukan. Bento butuh
 * kontrol penuh atas ukuran tiap kartu, dan grid-column/grid-row span
 * memberikannya tanpa JavaScript sama sekali.
 */

.alm-bento {
	--alm-bento-aksen: #edaf33;
	--alm-bento-panel: #0f2e40;
	--alm-bento-baris: 190px;
	--alm-bento-gap: 14px;
	--alm-bento-radius: 22px;

	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: var(--alm-bento-baris);
	gap: var(--alm-bento-gap);
	/* grid-auto-flow: dense menutup celah bila urutan span menyisakan lubang,
	   misalnya setelah pengguna menghapus satu foto dari repeater. */
	grid-auto-flow: dense;
	font-family: "Plus Jakarta Sans", sans-serif;
}

/* ---------- span ---------- */

.alm-bento__item {
	position: relative;
	overflow: hidden;
	margin: 0;
	min-width: 0;
	border-radius: var(--alm-bento-radius);
	background: #dde6ec;
	box-shadow: 0 18px 38px -26px rgba(15, 46, 64, 0.55);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.alm-bento__item.is-hero {
	grid-column: span 6;
	grid-row: span 2;
}

.alm-bento__item.is-wide {
	grid-column: span 3;
	grid-row: span 1;
}

.alm-bento__item.is-tall {
	grid-column: span 3;
	grid-row: span 2;
}

.alm-bento__item.is-sq {
	grid-column: span 3;
	grid-row: span 1;
}

/* Ring emas tipis saat hover; outline dipakai supaya tidak menggeser layout. */
.alm-bento__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 26px 52px -24px rgba(15, 46, 64, 0.68);
	outline: 2px solid var(--alm-bento-aksen);
	outline-offset: -2px;
}

/* ---------- media ---------- */

/* Absolute juga, karena <img> di dalamnya diposisikan terhadap elemen ini;
   height:100% saja tidak cukup sebab <a> adalah anak flow biasa dari figure
   yang tingginya ditentukan grid, bukan konten. */
.alm-bento .alm-bento__link {
	display: block;
	position: absolute;
	inset: 0;
	text-decoration: none;
}

/**
 * Selektor sengaja dua kelas: `.alm-bento .alm-bento__img`, bukan satu kelas.
 *
 * Elementor menerbitkan `.elementor img{height:auto}` (assets/css/
 * frontend.min.css baris 1) dan tema menerbitkan `img{height:auto}`.
 * Spesifisitas `.elementor img` adalah 0,1,1 — lebih tinggi daripada
 * `.alm-bento__img` yang hanya 0,1,0 — sehingga height:auto MENANG terlepas
 * dari urutan pemuatan stylesheet. Karena lebar tetap 100%, tinggi jadi
 * dihitung dari rasio berkas: 583px / (1600/620) = 226px di dalam figure
 * setinggi 394px, menyisakan 168px ruang kosong di tile hero. Pada tile
 * tinggi kebalikannya terjadi, gambar meluber 427px lalu terpotong.
 *
 * Menambahkan `.alm-bento` di depan menaikkan spesifisitas ke 0,2,0 sehingga
 * aturan kami menang tanpa perlu !important — pengguna tetap bisa menimpanya
 * dari panel Elementor bila perlu.
 *
 * position:absolute + inset:0 dipakai agar tinggi bersumber dari kotak
 * penampung, bukan dari properti height, sehingga object-fit punya kotak
 * pasti untuk dipotong.
 */
.alm-bento .alm-bento__img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Titik fokus sedikit di atas tengah: pada foto rombongan, wajah jamaah
	   berada di paruh atas frame sehingga center murni memotong kepala. */
	object-position: center 42%;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.alm-bento.alm-bento--zoom .alm-bento__item:hover .alm-bento__img {
	transform: scale(1.06);
}

/* Scrim gradasi supaya chip dan caption tetap terbaca di atas foto terang. */
.alm-bento__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(9, 28, 39, 0.86) 0%,
		rgba(9, 28, 39, 0.42) 32%,
		rgba(9, 28, 39, 0) 62%
	);
	opacity: 0.9;
	transition: opacity 0.3s ease;
}

.alm-bento__item:hover .alm-bento__scrim {
	opacity: 1;
}

/* ---------- chip & caption ---------- */

.alm-bento__chip {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	max-width: calc(100% - 24px);
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(9, 28, 39, 0.62);
	border: 1px solid rgba(255, 255, 255, 0.22);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alm-bento__cap {
	position: absolute;
	right: 14px;
	bottom: 13px;
	left: 14px;
	z-index: 2;
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.42;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
	/* Caption naik halus saat hover di perangkat berkursor; di layar sentuh
	   tetap terlihat karena transform awalnya 0. */
	transition: transform 0.32s ease;
}

.alm-bento__item.is-hero .alm-bento__cap {
	font-size: 16px;
}

@media (hover: hover) {
	.alm-bento__cap {
		transform: translateY(6px);
	}

	.alm-bento__item:hover .alm-bento__cap {
		transform: translateY(0);
	}
}

/* ---------- kartu label ---------- */

.alm-bento__note {
	display: flex;
	align-items: center;
	background: linear-gradient(158deg, #123a51 0%, var(--alm-bento-panel) 58%, #0b2433 100%);
	box-shadow: 0 26px 52px -30px rgba(15, 46, 64, 0.8);
}

/* Sorotan emas di sudut supaya kartu tidak terasa sebagai kotak gelap kosong. */
.alm-bento__note::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(237, 175, 51, 0.24), transparent 68%);
	pointer-events: none;
}

.alm-bento__note:hover {
	transform: none;
	outline: none;
}

.alm-bento__note-in {
	position: relative;
	z-index: 1;
	padding: 22px;
}

.alm-bento__num {
	display: block;
	margin-bottom: 4px;
	color: var(--alm-bento-aksen);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.6px;
	line-height: 1.1;
}

.alm-bento__note-h {
	margin: 0 0 7px;
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.3px;
	line-height: 1.26;
}

.alm-bento__note-p {
	margin: 0;
	color: rgba(255, 255, 255, 0.74);
	font-size: 12.8px;
	font-weight: 500;
	line-height: 1.6;
}

/* ---------- tablet ---------- */

@media (max-width: 1024px) {
	.alm-bento {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	/**
	 * Tablet: mosaik dilepas, semua tile jadi setara.
	 *
	 * Beberapa percobaan menahan span asimetris di sini (hero 3 baris lalu 4
	 * baris, tall 3 lalu 2) selalu berakhir "berundak": tinggi antar kolom
	 * tidak sinkron, grid-auto-flow: dense mengisi celah dengan tile yang
	 * urutannya jauh, dan baris terakhir menyisakan sel kosong. Grid bahkan
	 * memanjang dari 1597px ke 2850px.
	 *
	 * Pada layar selebar ini mosaik asimetris tidak lagi memberi nilai visual
	 * — tile hanya dua per baris, jadi variasi ukuran justru terbaca sebagai
	 * layout rusak. Menyetel semuanya 3x2 menghasilkan tinggi baris seragam,
	 * urutan foto persis seperti di panel Elementor, dan kotak 505x344
	 * (1.47:1) yang hampir identik dengan rasio sumber 3:2.
	 *
	 * grid-auto-rows dinaikkan agar tile tetap proporsional; span 1 baris
	 * dipakai supaya tidak ada kelipatan yang bisa berselisih.
	 */
	.alm-bento {
		grid-auto-rows: calc(var(--alm-bento-baris) * 2 + var(--alm-bento-gap));
	}

	.alm-bento__item.is-hero,
	.alm-bento__item.is-tall,
	.alm-bento__item.is-wide,
	.alm-bento__item.is-sq,
	.alm-bento__item.alm-bento__note {
		grid-column: span 3;
		grid-row: span 1;
	}

	/**
	 * `tall` tetap portrait: 2 baris, bukan 1.
	 *
	 * Dua alasan yang saling menguatkan.
	 *
	 * 1. Rasio. Pada 1 baris kotaknya 505x344 (1.47:1) padahal sumbernya
	 *    crop 2:3 (0.67) — object-fit memangkas sisi kiri-kanan sampai
	 *    2.2x, cukup untuk membuang tepi rombongan. Pada 2 baris kotaknya
	 *    505x702 (0.72:1), praktis identik dengan rasio sumber.
	 * 2. Paritas sel. Tablet memuat 2 sel per baris, jadi jumlah sel wajib
	 *    genap. Hero 6x2 = 4 sel, ditambah 11 tile 1 sel = 15 sel: ganjil,
	 *    sehingga baris terakhir SELALU menyisakan satu lubang. Dengan
	 *    `tall` memakai 2 sel totalnya menjadi 16 = 8 baris penuh, tepat
	 *    tanpa sisa.
	 */
	.alm-bento__item.is-tall {
		grid-row: span 2;
	}

	/**
	 * Hero tetap istimewa: satu-satunya yang melebar penuh, sebagai pembuka.
	 *
	 * Dua baris, karena selebar 1024px satu baris memberi kotak 1024x344
	 * alias 2.98:1 sementara sumbernya 3:2 — object-fit membuang separuh
	 * tinggi frame. Dua baris menghasilkan 1024x702 (1.46:1), praktis sama
	 * dengan rasio sumber. Kelipatan 2 aman di sini karena seluruh tile lain
	 * memakai 1 baris dengan tinggi yang sama.
	 */
	.alm-bento__item.is-hero {
		grid-column: span 6;
		grid-row: span 2;
	}
}

/* ---------- mobile ---------- */

@media (max-width: 767px) {
	.alm-bento {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.alm-bento__item.is-hero {
		grid-column: span 4;
		grid-row: span 2;
	}

	/**
	 * Mobile: dua kolom seragam, satu baris per tile — alasan yang sama
	 * seperti tablet, span campur membuat kolom saling bergeser.
	 *
	 * Kotak hasilnya 170x224, condong portrait. Untuk sumber landscape 3:2
	 * pemangkasannya masih di dalam ambang yang dijaga assert rasio pada
	 * verify_testimoni.py, dan object-position: center 42% menahan wajah
	 * jamaah tetap di dalam frame.
	 */
	.alm-bento {
		grid-auto-rows: calc(var(--alm-bento-baris) * 1.5);
	}

	.alm-bento__item.is-sq {
		grid-column: span 2;
		grid-row: span 1;
	}

	/**
	 * `tall` melebar penuh dan tinggi 2 baris di mobile.
	 *
	 * Rasio: 2 kolom x 1 baris memberi 170x225 (0.76) yang sudah dekat ke
	 * sumber 0.67, tetapi lebar 170px membuat foto rombongan terlalu kecil
	 * untuk dikenali. Selebar penuh 354x464 (0.76) mempertahankan rasio yang
	 * sama sambil menggandakan lebar tampilnya.
	 *
	 * Paritas: mobile memuat 2 sel per baris. Hero 4x1 = 2 sel, wide 3x = 6,
	 * kartu label = 2, sq 6x = 6, dan tall 1 sel → total 17, ganjil, selalu
	 * menyisakan lubang. Dengan tall 4x2 = 4 sel totalnya 20 = 10 baris
	 * penuh tanpa sisa.
	 */
	.alm-bento__item.is-tall {
		grid-column: span 4;
		grid-row: span 2;
	}

	/* Hero, tile lebar, dan kartu label melebar penuh: pada dua kolom teks
	   kartu terlalu sempit dan mudah terpotong. */
	.alm-bento__item.is-hero,
	.alm-bento__item.is-wide,
	.alm-bento__item.alm-bento__note {
		grid-column: span 4;
		grid-row: span 1;
	}

	.alm-bento__cap {
		font-size: 12.5px;
	}

	.alm-bento__item.is-hero .alm-bento__cap {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alm-bento__item,
	.alm-bento__img,
	.alm-bento__cap,
	.alm-bento__scrim {
		transition: none;
	}

	.alm-bento--zoom .alm-bento__item:hover .alm-bento__img {
		transform: none;
	}
}