/* JSN Pulse Editorial -- B1: cangkang header mobile + JSN Pulse Bar.
 *
 * Berkas TERPISAH dan BERVERSI, bukan tambahan ke main.css: LiteSpeed
 * membuang ?ver= di situs ini, sehingga menyunting berkas lama tidak
 * pernah terlihat oleh browser yang memegang salinan cache. Saat isi
 * berkas ini berubah, ganti namanya ke -v2 dan perbarui baris enqueue
 * di inc/enqueue.php. main.css TIDAK disentuh sama sekali.
 *
 * Dua bagian:
 *   1. Aturan Pulse Bar -- berlaku di semua lebar, karena markup titik
 *      dan jam ikut tampil di desktop.
 *   2. Cangkang header -- dibatasi <=767px. Desktop dan tablet lebar
 *      tidak berubah sedikit pun pada B1; itu pekerjaan B4.
 */

/* ============================================================
   1. JSN PULSE BAR
   ============================================================ */

/* Titik denyut. Murni CSS -- tidak ada ticker, tidak ada JS, tidak ada
   marquee. Lebarnya tetap sehingga tidak pernah menggeser teks. */
.jsn-pulse-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-on-dark);
	animation: jsn-pulse-beat 2s ease-in-out infinite;
}

@keyframes jsn-pulse-beat {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

/* Jam terbit. font-mono dipertahankan supaya digit tidak bergoyang. */
.jsn-breaking-time {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .03em;
	color: var(--color-on-dark-muted);
	font-variant-numeric: tabular-nums;
}

/* Judul selalu satu baris: elemen di kirinya dan kanannya berlebar
   tetap, hanya tautan yang menyusut. Tinggi bar karena itu tidak
   pernah berubah -- nol CLS dari komponen ini. */
.jsn-breaking .jsn-breaking-link {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
	.jsn-pulse-dot {
		animation: none;
		opacity: 1;
	}
}

/* ============================================================
   2. CANGKANG HEADER MOBILE (<=767px)
   ============================================================ */

@media (max-width: 767px) {

	/* 2a. Strip tanggal keluar dari tumpukan atas.
	   Sebelumnya hanya disembunyikan setelah halaman di-scroll
	   (.jsn-masthead-scrolled .jsn-utility di main.css); sekarang tidak
	   pernah menempati ruang di layar pertama. Tanggal tetap tampil di
	   desktop. */
	.jsn-masthead .jsn-utility {
		display: none;
	}

	/* 2b. Bar kategori horizontal keluar dari tumpukan atas.
	   TIDAK ADA tautan yang dihapus: 45 tautan yang persis sama tetap
	   dirender di dalam .jsn-drawer, yang disembunyikan dengan
	   transform (off-canvas), bukan display:none -- jadi tautan
	   internal tetap utuh untuk pembaca maupun crawler. Diverifikasi
	   sebelum perubahan ini: himpunan tautan nav dan drawer identik. */
	.jsn-nav {
		display: none;
	}

	/* 2c. Baris brand -> tinggi pasti 56px.
	   min-height + align-items:center, bukan padding, supaya tingginya
	   deterministik dan tidak bergantung pada line-height logo. */
	.jsn-masthead .jsn-brand {
		min-height: 56px;
		padding-top: 0;
		padding-bottom: 0;
		gap: var(--space-2);
	}

	/* Tautan logo adalah kontrol "kembali ke beranda" utama, jadi area
	   ketuknya dinaikkan ke 44px penuh walau gambarnya 32px -- tetap
	   muat di baris 56px. */
	.jsn-masthead .jsn-logo a,
	.jsn-masthead .custom-logo-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.jsn-masthead .jsn-logo img {
		max-height: 32px;
	}

	.jsn-masthead .jsn-wordmark {
		font-size: 19px;
	}

	/* 2d. Pulse Bar -> satu baris 36px. */
	.jsn-breaking .jsn-breaking-inner {
		min-height: 36px;
		padding-top: 0;
		padding-bottom: 0;
		gap: var(--space-2);
	}

	.jsn-breaking .jsn-breaking-label {
		padding: 2px 6px;
		font-size: 10px;
	}

	/* Judul Pulse merentang setinggi bar supaya seluruh baris dapat
	   diketuk. 36px adalah tinggi maksimum yang mungkin di sini: tinggi
	   bar Pulse memang dikunci 36px, jadi 44px tidak dapat dicapai tanpa
	   melanggar spesifikasi tinggi itu. Trade-off disengaja. */
	.jsn-breaking .jsn-breaking-link {
		font-size: 13px;
		/* align-self:stretch membuat seluruh tinggi bar dapat diketuk.
		   display TETAP block: text-overflow:ellipsis TIDAK berlaku pada
		   container flex -- dicoba di v2 dan judulnya terpotong keras
		   tanpa elipsis. Perataan vertikal dikerjakan line-height, yang
		   sama persis dengan tinggi bar di breakpoint ini. */
		align-self: stretch;
		display: block;
		line-height: 36px;
	}
}

/* Layar sangat sempit: jam dilepas lebih dulu supaya judul tetap
   mendapat ruang baca, dan bar tetap satu baris. */
@media (max-width: 359px) {
	.jsn-breaking-time {
		display: none;
	}
}