/* JSN Pulse Editorial -- B3 (artikel ponsel) + B5 (area sentuh 44px).
 *
 * v3 = v2 yang disetujui, satu-satunya perubahan: area sentuh tombol
 * bagikan dinaikkan ke 44x44 tanpa mengubah ukuran visual 40px.
 *
 * B3: pengalaman baca artikel di ponsel.
 *
 * Berkas TERPISAH dan BERVERSI, bukan tambahan ke main.css: LiteSpeed
 * membuang ?ver= di situs ini, jadi menyunting berkas lama tidak pernah
 * terlihat oleh browser yang memegang cache. Saat isi berubah, ganti
 * nama ke -v2 dan perbarui inc/enqueue.php.
 *
 * Di-enqueue hanya pada is_singular('post'), dan setiap aturan di bawah
 * juga di-scope ke .jsn-article / .single-post, sehingga homepage,
 * /redaksi, halaman statis, pencarian, arsip kategori, dan arsip penulis
 * tidak mungkin ikut berubah.
 *
 * Tipografi badan artikel (17px / 1.75) SENGAJA tidak disentuh.
 */

/* ============================================================
   1. INDIKATOR PROGRES BACA
   ============================================================ */

/* position:fixed -> nol jejak layout, nol CLS, tidak menambah tinggi
   header B1. z-index 45 duduk di atas masthead B1 (35) dan nav (34)
   tetapi di bawah drawer/backdrop (50+), sehingga garis ini tidak
   pernah menimpa menu, pencarian, atau panel akun yang terbuka. */
.jsn-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 45;
	pointer-events: none;
	background: transparent;
}

.jsn-reading-progress > i {
	display: block;
	height: 100%;
	background: var(--color-red);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

/* Tanpa JS lebarnya tetap 0 dan garis tidak pernah terlihat. */
@media (prefers-reduced-motion: reduce) {
	.jsn-reading-progress > i { transition: none; }
}

/* ============================================================
   2. BARIS META ARTIKEL
   ============================================================ */

.jsn-article .jsn-article-meta-read::before {
	content: '· ';
}

/* Menu "bagikan ke aplikasi lain" -- berlaku di semua lebar. */
.jsn-article .jsn-share-more {
	position: relative;
	display: inline-flex;
}

.jsn-article .jsn-share-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 20;
	display: flex;
	gap: var(--space-2);
	padding: var(--space-2);
	background: var(--color-paper);
	border: 1px solid var(--color-rule);
	box-shadow: 0 6px 18px rgba(20, 22, 28, .12);
}

.jsn-article .jsn-share-menu[hidden] {
	display: none;
}

.jsn-article .jsn-share-more-toggle[aria-expanded='true'] {
	border-color: var(--color-red);
	color: var(--color-red);
}

/* ============================================================
   3. PONSEL (<=767px)
   ============================================================ */

@media (max-width: 767px) {

	/* 3a. Breadcrumb ringkas. Tautan dan semantiknya tidak diubah --
	   hanya jejak visualnya yang dirapatkan. */
	.single-post .jsn-breadcrumb {
		margin: var(--space-3) 0 var(--space-2) 0;
		font-size: 11.5px;
		line-height: 1.4;
	}

	/* 3b. Judul: tetap 30-36px, hierarki editorial dipertahankan. */
	.jsn-article .jsn-article-headline {
		font-size: clamp(30px, 8vw, 36px);
		line-height: 1.12;
		margin: var(--space-2) 0 var(--space-3) 0;
	}

	.jsn-article .jsn-article-standfirst {
		font-size: 16px;
		line-height: 1.5;
		margin-bottom: var(--space-3);
	}

	/* 3c. Blok meta: satu baris rapat, bukan tumpukan tiga baris.
	   Avatar 44 -> 32, share tidak lagi membungkus ke baris sendiri. */
	.jsn-article .jsn-article-meta {
		gap: var(--space-2) var(--space-3);
		padding: var(--space-3) 0;
		margin-top: 0;
		flex-wrap: nowrap;
	}

	.jsn-article .jsn-article-avatar {
		width: 32px;
		height: 32px;
		flex: 0 0 32px;
	}

	.jsn-article .jsn-article-meta-info {
		min-width: 0;
		gap: 1px;
	}

	.jsn-article .jsn-article-meta-name {
		font-size: 13.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Baris peran berbunyi "Tim Redaksi JatimSatuNews" untuk SETIAP
	   penulis -- teks tetap, bukan data per-penulis, jadi di ponsel ia
	   hanya memakan tinggi tanpa menambah informasi. Tetap tampil di
	   desktop dan tetap ada di DOM. */
	.jsn-article .jsn-article-meta-role {
		display: none;
	}

	/* Tanggal, waktu baca, dan catatan pembaruan mengalir sebagai satu
	   kalimat, bukan tiga baris flex yang masing-masing pecah di kolom
	   selebar ~184px (terukur: 33 + 17 + 33 = 83px sebelum perubahan). */
	.jsn-article .jsn-article-meta-date {
		display: block;
		font-size: 11px;
		line-height: 1.45;
	}

	.jsn-article .jsn-article-meta-date > * {
		display: inline;
	}

	.jsn-article .jsn-article-meta-read::before {
		content: ' · ';
	}

	/* Baris "Diperbarui" disembunyikan di ponsel. Pada artikel yang
	   diukur, stempelnya sama persis sampai ke menit dengan waktu terbit
	   (12:34 vs 12:34), jadi ia hanya menambah satu baris tanpa menambah
	   informasi. Tetap ada di DOM dan tetap tampil di desktop; schema
	   dateModified milik Rank Math tidak disentuh sama sekali. */
	.jsn-article .jsn-article-meta-updated {
		display: none;
	}

	/* Label "BAGIKAN" tidak diperlukan saat ikonnya sudah jelas. */
	.jsn-article .jsn-article-meta .jsn-share-label {
		display: none;
	}

	.jsn-article .jsn-article-meta .jsn-share {
		gap: var(--space-2);
		flex-wrap: nowrap;
	}

	/* Lingkaran yang TERLIHAT tetap 40px supaya blok meta tidak
	   kembali menggemuk -- itu sebabnya B3 mengecilkannya. Yang
	   dinaikkan ke 44x44 adalah AREA SENTUHnya, lewat ::after yang
	   diposisikan absolut sehingga nol pengaruh ke tata letak dan nol
	   perubahan tinggi meta. Jarak antar tombol var(--space-2) = 8px,
	   sedangkan pelebarannya hanya 2px per sisi, jadi area sentuh dua
	   tombol bersebelahan tidak pernah bertumpang tindih.
	   (B5, 2026-09-27 -- utang aksesibilitas yang dicatat saat B3.) */
	.jsn-article .jsn-share-btn {
		width: 40px;
		height: 40px;
		position: relative;
	}

	.jsn-article .jsn-share-btn::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
		border-radius: 50%;
	}

	.jsn-article .jsn-share-menu .jsn-share-btn {
		width: 44px;
		height: 44px;
	}

	/* 3d. Gambar utama + keterangan. Rasio TIDAK dipaksa 16:9:
	   object-fit:contain yang sudah ada dipertahankan supaya foto
	   dokumen, tangkapan layar, dan foto orang tidak terpotong. Ruang
	   tetap terpesan karena width/height bawaan WordPress hadir di
	   markup, jadi tidak ada CLS. */
	.jsn-article .jsn-article-featured {
		margin-top: var(--space-4);
	}

	.jsn-article .jsn-article-featured-image {
		max-height: 58vh;
	}

	.jsn-article .jsn-article-caption {
		margin-top: var(--space-2);
		font-size: 12px;
		line-height: 1.45;
	}

	/* 3e. Daftar isi Rank Math: dirapatkan lewat CSS saja.
	   Markup blok Gutenberg-nya TIDAK disentuh -- id, anchor, <nav>,
	   dan schema SiteNavigationElement tetap apa adanya, dan tidak ada
	   filter the_content yang dijalankan atas ~29 ribu artikel lama. */
	.jsn-article .wp-block-rank-math-toc-block {
		margin: 0 0 var(--space-4) 0;
		padding: var(--space-3);
		border: 1px solid var(--color-rule);
		background: var(--color-canvas);
	}

	.jsn-article .wp-block-rank-math-toc-block h2 {
		font-family: var(--font-body);
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .07em;
		color: var(--color-muted);
		margin: 0 0 var(--space-2) 0;
	}

	.jsn-article .wp-block-rank-math-toc-block ul {
		margin: 0;
		padding-left: 1.1em;
	}

	.jsn-article .wp-block-rank-math-toc-block li {
		margin: 0 0 2px 0;
		line-height: 1.4;
	}

	.jsn-article .wp-block-rank-math-toc-block a {
		font-size: 13.5px;
		text-decoration: none;
	}

	/* 3f. Ritme badan artikel. Ukuran dan line-height TIDAK diubah. */
	/* Anak LANGSUNG saja. Versi sebelumnya memakai selector turunan,
	   sehingga <h2>Sorotan</h2> di dalam blok TOC Rank Math ikut terkena
	   dan aturan TOC yang lebih dulu ditulis justru kalah -- TOC tetap
	   225px. Ini kesalahan urutan pada berkas v1, bukan pada main.css. */
	.jsn-article .jsn-article-body > h2 { font-size: 22px; margin-top: var(--space-5); }
	.jsn-article .jsn-article-body > h3 { font-size: 19px; margin-top: var(--space-4); }
}