/*
 * Breadcrumb, kartu tulisan, sidebar (Terpopuler, Laporan Mendalam, nawala, Ikuti rubrik), dan label
 * verdikt. Dipakai halaman artikel dan arsip (kategori, tag, penulis).
 */

/* ---------- Breadcrumb Yoast ---------- */

.kalawaca-remah {
	font-size: 13px;
	color: var(--wp--preset--color--abu);
}

.kalawaca-remah > span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
}

.kalawaca-remah a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--wp--preset--color--abu);
}

.kalawaca-remah a:hover {
	color: var(--wp--preset--color--ungu);
}

.kalawaca-remah .kalawaca-remah__kapsul {
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ungu-lembut);
	color: var(--wp--preset--color--ungu);
	font-weight: 700;
}

/* ---------- Kartu ---------- */

/* Pemisah "·" sebelum waktu baca dan tanggal di baris meta. */
.kalawaca-waktu-baca::before,
.kalawaca-kartu__meta .kalawaca-kartu__tanggal::before {
	content: "·";
	margin-inline-end: 6px;
}


/* Gambar kartu: rasio dipasang di <figure> dan gambar mengisinya secara absolut, agar ruang
   sudah tersedia sebelum gambar dimuat (CLS). Rasio <img> dari atribut blok saja tidak cukup. */
:is(.kalawaca-terpopuler__gambar, .kalawaca-feature-samping .wp-block-post-featured-image, .kalawaca-terkait .wp-block-post-featured-image) {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--latar-lembut);
}

:is(.kalawaca-terpopuler__gambar, .kalawaca-feature-samping .wp-block-post-featured-image, .kalawaca-terkait .wp-block-post-featured-image) :is(a, img) {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important;
}

:is(.kalawaca-terpopuler__gambar, .kalawaca-feature-samping .wp-block-post-featured-image, .kalawaca-terkait .wp-block-post-featured-image) img {
	aspect-ratio: auto !important;
	object-fit: cover;
}

.kalawaca-terpopuler__gambar {
	aspect-ratio: 1;
}

.kalawaca-feature-samping .wp-block-post-featured-image {
	aspect-ratio: 16 / 10;
}

.kalawaca-terkait .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
}

.kalawaca-avatar {
	flex: none;
}

.kalawaca-avatar img {
	display: block;
	border-radius: 50%;
}


.kalawaca-kartu__judul {
	margin: 0;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.kalawaca-kartu__judul a {
	color: var(--wp--preset--color--tinta);
}

.kalawaca-kartu__judul a:hover {
	color: var(--wp--preset--color--ungu);
}

.kalawaca-kartu__kategori {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.4;
}

/* Area sentuh minimal 24 px untuk tautan kategori kecil (WCAG 2.5.8). */
.kalawaca-kartu__kategori a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Satu kategori per kartu. */
.kalawaca-kartu__kategori a ~ a,
.kalawaca-kartu__kategori .wp-block-post-terms__separator {
	display: none;
}

/* ---------- Sidebar ---------- */

.kalawaca-samping {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--32);
	min-width: 0;
	max-width: 780px;
}

.kalawaca-samping__judul {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Terpopuler: bernomor, gambar kecil membulat. */
.kalawaca-terpopuler {
	padding: 22px;
	border: 1px solid var(--wp--preset--color--garis);
	border-radius: var(--wp--custom--radius--l);
}

.kalawaca-terpopuler .kalawaca-samping__judul {
	margin-block-end: var(--wp--preset--spacing--8);
}

.kalawaca-terpopuler__daftar {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: terpopuler;
}

.kalawaca-terpopuler__daftar > li {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 0;
	padding-block: var(--wp--preset--spacing--12);
	border-top: 1px solid var(--wp--preset--color--garis);
	counter-increment: terpopuler;
}

.kalawaca-terpopuler__daftar > li::before {
	content: counter(terpopuler);
	position: absolute;
	left: -6px;
	top: 6px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 2px solid var(--wp--preset--color--putih);
	border-radius: 50%;
	background: var(--wp--preset--color--oranye);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
}

.kalawaca-terpopuler__daftar > li:not(:has(.wp-block-post-featured-image)) {
	padding-inline-start: 32px;
}

.kalawaca-terpopuler__gambar {
	flex: none;
	width: 76px;
	margin: 0;
}

.kalawaca-terpopuler__gambar {
	border-radius: 14px;
}

.kalawaca-terpopuler__teks {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	min-width: 0;
}

.kalawaca-terpopuler__teks > * {
	margin: 0;
}

.kalawaca-terpopuler .kalawaca-kartu__judul {
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.4;
}

.kalawaca-terpopuler .kalawaca-kartu__kategori a {
	font-weight: 400;
	color: var(--wp--preset--color--abu);
}

/* Laporan Mendalam terbaru */
.kalawaca-feature-samping > * + *,
.kalawaca-feature-samping li > * + * {
	margin-block: 10px 0;
}

.kalawaca-feature-samping .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kalawaca-kartu__meta {
	gap: 0 6px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.4;
}

.kalawaca-kartu__meta > * {
	margin: 0;
}

.kalawaca-kartu__meta--feature,
.kalawaca-kartu__meta--feature a {
	color: var(--wp--preset--color--oranye-tua);
}

.kalawaca-kartu__meta .kalawaca-kartu__kategori {
	font-weight: 700;
}

.kalawaca-kartu__judul--besar {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 800;
}

/* Nawala */
.kalawaca-nawala-samping {
	padding: 22px;
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--preset--color--latar-lembut);
}

.kalawaca-nawala-samping > * {
	margin-block: 0;
}

.kalawaca-nawala-samping > * + * {
	margin-block-start: var(--wp--preset--spacing--12);
}

.kalawaca-samping > * {
	margin-block: 0;
}

@media (max-width: 599px) {
	.kalawaca-terpopuler {
		padding: 18px;
	}
}

/* ---------- Label verdikt Cek Fakta (warna dari Pengaturan › Artikel) ---------- */

.kalawaca-verdikt {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 3px 10px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}

.kalawaca-verdikt--artikel {
	padding: 5px 12px;
}
