/*
 * Halaman baca artikel (Hari 4, disusun ulang 16 Oktober 2026 dengan sidebar).
 * Nilai diambil dari sistem-desain.css. HP lebih dulu, layar lebar di bawah.
 *
 * HP dan tablet: satu kolom selebar 720px paling lebar, sidebar di bawah artikel.
 * Desktop 1024px ke atas: kolom artikel 720px dan sidebar 320px.
 */

/* Blocksy memberi jarak atas pada isi halaman. Template ini mengatur jaraknya sendiri. */
.lz-halaman-artikel #main { padding: 0; }

.lz-artikel { padding-top: var(--lz-jarak-4); background: var(--lz-latar); }
.lz-artikel__tata { display: grid; gap: var(--lz-jarak-8); padding-bottom: var(--lz-bagian); }
.lz-artikel__utama,
.lz-samping { width: 100%; max-width: var(--lz-lebar-baca); margin-inline: auto; min-width: 0; }

/* Breadcrumb */
.lz-remah { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: var(--lz-teks-kecil); color: var(--lz-teks-redup); }
.lz-remah a { display: inline-flex; align-items: center; min-height: var(--lz-sentuh); color: var(--lz-teks-redup); text-decoration: none; }
.lz-remah a:hover { color: var(--lz-hijau); text-decoration: underline; }

.lz-artikel__judul { font-size: 28px; line-height: 1.25; margin: var(--lz-jarak-1) 0 0; }

.lz-artikel__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
	margin: var(--lz-jarak-4) 0 var(--lz-jarak-3);
	font-size: var(--lz-teks-kecil); color: var(--lz-teks-redup);
}
.lz-artikel__penulis { display: flex; align-items: center; gap: 8px; color: var(--lz-teks); font-weight: var(--lz-tebal-tebal); }
.lz-artikel__kategori { display: flex; flex-wrap: wrap; gap: var(--lz-jarak-2); }

.lz-avatar {
	display: grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover;
	background: var(--lz-hijau); color: #fff; font-weight: var(--lz-tebal-judul); font-size: 13px;
}

/* Foto utama selebar kolom teks, sudut membulat. Rasio asli dipertahankan
   supaya poster bergambar teks tidak terpotong. */
.lz-artikel__foto { margin: var(--lz-jarak-5) 0 28px; }
.lz-artikel__foto img {
	display: block; width: 100%; height: auto; max-height: 80vh; object-fit: cover;
	border-radius: var(--lz-sudut); background: var(--lz-latar-abu);
}
.lz-artikel__foto figcaption { padding-top: 8px; font-size: var(--lz-teks-mini); color: var(--lz-teks-redup); }

/* Isi artikel. Ukuran dari editor (has-*-font-size, warna teks) dinetralkan
   supaya semua artikel terbaca sama. */
.lz-artikel__isi { font-size: var(--lz-teks-besar); line-height: var(--lz-baris-artikel); color: var(--lz-teks); overflow-wrap: break-word; }
.lz-artikel__isi > *:first-child { margin-top: 0; }
.lz-artikel__isi p,
.lz-artikel__isi li { font-size: inherit !important; color: inherit !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.lz-artikel__isi p { margin: 0 0 1.1em; }
.lz-artikel__isi h2,
.lz-artikel__isi h3,
.lz-artikel__isi h4 { font-family: var(--lz-fon); color: var(--lz-teks); line-height: 1.3; letter-spacing: -.01em; margin: 1.6em 0 .6em; }
.lz-artikel__isi h2 { font-size: 23px; font-weight: var(--lz-tebal-judul); }
.lz-artikel__isi h3 { font-size: 20px; font-weight: var(--lz-tebal-tebal); }
.lz-artikel__isi h4 { font-size: var(--lz-teks-besar); font-weight: var(--lz-tebal-tebal); }
.lz-artikel__isi a { color: var(--lz-hijau); text-decoration: underline; text-underline-offset: 3px; }
.lz-artikel__isi a:hover { color: var(--lz-hijau-tua); }
.lz-artikel__isi ul,
.lz-artikel__isi ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.lz-artikel__isi li { margin-bottom: .4em; }
.lz-artikel__isi img { max-width: 100%; height: auto; border-radius: var(--lz-sudut); }
.lz-artikel__isi figure { margin: 1.6em 0; max-width: 100%; }
.lz-artikel__isi figcaption,
.lz-artikel__isi .wp-element-caption { margin-top: 8px; font-size: var(--lz-teks-mini); line-height: 1.5; color: var(--lz-teks-redup); text-align: left; }
/* Kutipan: dirapikan Hari 13, semula 20px tebal hijau yang berat untuk kutipan panjang */
.lz-artikel__isi blockquote {
	margin: 1.6em 0; padding: 16px 20px; border: 0; border-left: 4px solid var(--lz-emas);
	border-radius: 0 var(--lz-sudut-kecil) var(--lz-sudut-kecil) 0; background: var(--lz-emas-muda);
	font-size: var(--lz-teks-besar); line-height: var(--lz-baris-artikel); font-weight: var(--lz-tebal-biasa); font-style: normal; color: var(--lz-teks);
}
.lz-artikel__isi blockquote p { margin: 0; }
.lz-artikel__isi blockquote p + p { margin-top: .8em; }
.lz-artikel__isi blockquote cite { display: block; margin-top: 8px; font-size: var(--lz-teks-kecil); font-style: normal; color: var(--lz-teks-redup); }
.lz-artikel__isi table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.lz-artikel__isi th,
.lz-artikel__isi td { padding: 10px 12px; border: 1px solid var(--lz-garis); text-align: left; }
.lz-artikel__isi iframe,
.lz-artikel__isi video { max-width: 100%; }
.lz-artikel__isi iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--lz-sudut); }

/* Ajakan donasi */
.lz-ajak { margin: var(--lz-jarak-8) 0; padding: 22px; border-radius: 18px; background: var(--lz-hijau-muda); }
.lz-ajak .lz-h3 { font-size: 20px; margin: 0 0 6px; }
.lz-ajak p { margin: 0 0 var(--lz-jarak-4); color: var(--lz-teks-redup); }
.lz-ajak .lz-tombol { width: 100%; }

/* Bagikan */
.lz-bagikan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lz-jarak-2); margin: 28px 0; }
.lz-bagikan__judul { width: 100%; margin: 0; font-size: 15px; font-weight: var(--lz-tebal-tebal); }
.lz-bagikan a,
.lz-bagikan button[type="button"] {
	display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
	background: var(--lz-latar-abu); color: var(--lz-teks); cursor: pointer; transition: background-color .15s, color .15s;
}
.lz-bagikan a:hover,
.lz-bagikan button[type="button"]:hover { background: var(--lz-hijau-muda); color: var(--lz-hijau); }
.lz-bagikan a:focus-visible,
.lz-bagikan button:focus-visible { outline: 3px solid var(--lz-fokus); outline-offset: 2px; }
.lz-bagikan svg { width: 22px; height: 22px; }
.lz-bagikan__pesan { font-size: var(--lz-teks-kecil); color: var(--lz-hijau); font-weight: var(--lz-tebal-sedang); }

/* Kotak penulis */
.lz-penulis { display: flex; gap: var(--lz-jarak-4); padding: var(--lz-jarak-5); margin: 28px 0 0; border: 1px solid var(--lz-garis); border-radius: 18px; }
.lz-penulis .lz-avatar { font-size: 20px; }
.lz-penulis__nama { margin: 0 0 4px !important; font-size: var(--lz-teks-h3); font-weight: var(--lz-tebal-tebal); color: var(--lz-teks) !important; }
.lz-penulis p { margin: 0; font-size: 15px; color: var(--lz-teks-redup); }

/* Tag artikel dan tag di sidebar */
.lz-tag { display: flex; flex-wrap: wrap; gap: var(--lz-jarak-2); margin: 28px 0 0; }
.lz-tag a {
	display: inline-flex; align-items: center; min-height: var(--lz-sentuh); padding: 0 14px;
	border-radius: var(--lz-sudut-bulat); background: var(--lz-latar-abu);
	color: var(--lz-teks-redup); font-size: var(--lz-teks-kecil); font-weight: var(--lz-tebal-sedang); text-decoration: none;
}
.lz-tag a:hover { background: var(--lz-hijau-muda); color: var(--lz-hijau); }

/* Sidebar */
.lz-samping { display: grid; gap: var(--lz-jarak-4); align-content: start; }
.lz-samping__kotak { padding: var(--lz-jarak-5); border: 1px solid var(--lz-garis); border-radius: var(--lz-sudut); background: #fff; }
.lz-samping__judul { margin: 0 0 var(--lz-jarak-3); font-family: var(--lz-fon); font-size: var(--lz-teks-h3); font-weight: var(--lz-tebal-tebal); line-height: 1.3; color: var(--lz-teks); }
.lz-samping .lz-cari { margin: 0; }
.lz-samping .lz-cari .lz-tombol { min-height: 52px; padding: 0 18px; }
.lz-samping .lz-tag { margin: 0; }

.lz-samping__kategori { list-style: none; margin: 0; padding: 0; }
.lz-samping__kategori li + li { border-top: 1px solid var(--lz-garis); }
.lz-samping__kategori a {
	display: flex; align-items: center; justify-content: space-between; gap: var(--lz-jarak-3);
	min-height: 48px; color: var(--lz-teks); text-decoration: none; font-size: 15px;
}
.lz-samping__kategori a:hover { color: var(--lz-hijau); }
.lz-samping__anak a { padding-left: var(--lz-jarak-4); color: var(--lz-teks-redup); }
.lz-samping__jumlah {
	flex: none; min-width: 32px; padding: 2px 8px; border-radius: var(--lz-sudut-bulat); text-align: center;
	background: var(--lz-latar-abu); color: var(--lz-teks-redup); font-size: var(--lz-teks-mini); font-weight: var(--lz-tebal-sedang);
}

.lz-samping__populer { list-style: none; margin: 0; padding: 0; counter-reset: populer; }
.lz-samping__populer li { counter-increment: populer; display: flex; gap: var(--lz-jarak-3); align-items: flex-start; }
.lz-samping__populer li + li { border-top: 1px solid var(--lz-garis); }
.lz-samping__populer li::before {
	content: counter(populer); flex: none; width: 28px; height: 28px; margin-top: 10px; border-radius: 50%;
	display: grid; place-items: center; background: var(--lz-hijau-muda); color: var(--lz-hijau);
	font-size: var(--lz-teks-mini); font-weight: var(--lz-tebal-judul);
}
.lz-samping__populer a {
	display: block; padding: 12px 0; min-height: var(--lz-sentuh);
	color: var(--lz-teks); font-size: 15px; font-weight: var(--lz-tebal-sedang); line-height: 1.4; text-decoration: none;
}
.lz-samping__populer a:hover { color: var(--lz-hijau); }

/* Artikel terkait */
.lz-artikel__terkait { gap: var(--lz-jarak-5); }
.lz-artikel__terkait .lz-h3 { display: block; }

@media (min-width: 768px) {
	.lz-artikel { padding-top: var(--lz-jarak-6); }
	.lz-artikel__judul { font-size: 36px; }
	.lz-ajak .lz-tombol { width: auto; }
	.lz-artikel__terkait { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.lz-artikel__tata {
		grid-template-columns: minmax(0, var(--lz-lebar-baca)) 320px;
		justify-content: space-between; gap: var(--lz-jarak-12);
	}
	.lz-artikel__utama,
	.lz-samping { max-width: none; margin: 0; }
}