/* JSN -- house ad (iklan internal), beranda + artikel.
 *
 * v2 (2026-10-05): mendukung LEBIH DARI SATU materi dalam satu blok.
 * Berkas BERVERSI karena LiteSpeed membuang ?ver= di situs ini; saat
 * isinya berubah, ganti nama ke -v3 dan perbarui inc/house-ad.php.
 * Jangan menyunting berkas ini di tempat.
 *
 * Tidak menyentuh main.css, tidak menyentuh jsn-ads-v1/v2.css
 * (keduanya milik AdSense dan artikel), tanpa JS.
 *
 * RASIO TIDAK DIPATOK DI SINI. Tiap materi menulis aspect-ratio-nya
 * sendiri sebagai inline style dari width/height aslinya, karena dua
 * materi yang tayang berbeda bentuk (3:4 dan 4:5). Mematoknya di CSS
 * akan membuat salah satu kotak meleset dan memicu CLS.
 */

.jsn-house-ad {
	max-width: var(--container-max);
	margin: var(--space-6) auto;
	padding: 0 var(--container-pad);
	background: none;
	border: 0;
	box-shadow: none;
}

/* Satu label untuk seluruh blok -- bukan satu label per materi.
   Nilainya disamakan dengan .jsn-ad-label milik jsn-ads-v2.css
   (11px, 0.08em, uppercase, muted) supaya penanda iklan di beranda
   dan di artikel terbaca sebagai satu bahasa. Bukan gaya kategori
   berita: tanpa merah, tanpa bold tebal, tanpa kotak. */
.jsn-house-ad-label {
	display: block;
	margin: 0 auto 6px auto;
	max-width: 460px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted, #6B6E76);
	text-align: left;
}

.jsn-house-ad-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	justify-items: center;
}

.jsn-house-ad-item {
	width: 100%;
	max-width: 460px;
}

.jsn-house-ad-link {
	display: block;
	text-decoration: none;
}

/* TIDAK ada object-fit:cover: poster ini padat teks dan logo, jadi
   tidak boleh dipotong sedikit pun. Warna latar hanya mengisi kotak
   yang sudah dipesan sebelum gambar turun -> nol CLS. */
.jsn-house-ad-image {
	display: block;
	width: 100%;
	height: auto;
	background: var(--color-canvas, #FAFAF8);
}

/* ---- Satu materi: persis seperti v1 ---- */
@media (min-width: 768px) {
	.jsn-house-ad-item,
	.jsn-house-ad-label {
		max-width: 460px;
	}

	.jsn-house-ad {
		margin-top: var(--space-7);
		margin-bottom: var(--space-7);
	}
}

/* ---- Dua materi atau lebih ----
   Di ponsel tetap bertumpuk selebar konten supaya teks jadwal yang
   halus tidak mengecil. Dari 768px ke atas berdampingan dua kolom:
   hasilnya blok iklan justru LEBIH PENDEK daripada satu poster 460px,
   sekaligus tidak merentang selebar kontainer 1280px. */
@media (min-width: 768px) {
	.jsn-house-ad--multi .jsn-house-ad-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5);
		align-items: start;
		max-width: 824px;
		margin: 0 auto;
	}

	.jsn-house-ad--multi .jsn-house-ad-item {
		max-width: 400px;
	}

	.jsn-house-ad--multi .jsn-house-ad-label {
		max-width: 824px;
	}
}