/* JSN Pulse Editorial -- beranda: B2 (ponsel) + B4 (tablet/desktop).
 *
 * v7 = berkas B2 v3 yang DISETUJUI, ditambah blok B4 di bagian bawah.
 * Iterasi lokal v7-v11 selama pengerjaan B4 dipadatkan menjadi satu
 * berkas terpasang: home-pulse-v7.css (v6 adalah versi live sebelumnya).
 *
 * JAMINAN PEMBEKUAN B2: pita @media (max-width: 767px) di berkas ini
 * IDENTIK byte-per-byte dengan v3 yang disetujui -- diperiksa dengan
 * hash: c076d6e28015b427 pada v3, v6, dan v7. Seluruh 50 selector baru
 * B4 berada di dalam media query min-width, sehingga ponsel tidak
 * mungkin tersentuh.
 *
 * (catatan asal berkas B2 di bawah tetap berlaku)
 * B2: beranda mobile.
 *
 * Berkas TERPISAH dan BERVERSI, bukan tambahan ke main.css: LiteSpeed
 * membuang ?ver= di situs ini. Saat isi berubah, ganti nama ke -v2 dan
 * perbarui inc/enqueue.php.
 *
 * Di-enqueue hanya pada is_front_page(). Tidak ada JS baru pada B2
 * maupun B4.
 * Header/Pulse (B1) dan artikel (B3) tidak disentuh sama sekali.
 */

/* ============================================================
   1. REGIONAL RAIL  -- elemen tanda tangan
   Berlaku di semua lebar; ini komponen baru, bukan penimpaan.
   ============================================================ */

/* Kelas diberi awalan "region": article-rail.php yang sudah ada
   memakai .jsn-rail-list, .jsn-rail-block, .jsn-rail-rank, dan
   .jsn-rail-title untuk daftar "Most Read" di artikel. Versi pertama
   B2 memakai nama yang sama; keduanya kebetulan tidak pernah bentrok
   karena berkas CSS-nya tidak pernah dimuat di halaman yang sama,
   tetapi itu keberuntungan, bukan desain. Diberi nama sendiri, dan
   di-scope ke .home. */
.home .jsn-region-rail {
	border-bottom: 1px solid var(--color-rule);
	background: var(--color-paper);
}

.home .jsn-region-rail-list {
	display: flex;
	/* flex-direction WAJIB eksplisit: main.css menetapkan column pada
	   daftar di dalam konten, dan v1 hanya menyetel display:flex --
	   akibatnya rail menumpuk vertikal setinggi 495px, bukan bergulir
	   mendatar. Diukur di produksi sebelum perbaikan ini. */
	flex-direction: row;
	gap: var(--space-4);
	align-items: stretch;
	margin: 0 auto;
	padding: 0 var(--container-pad);
	max-width: var(--container-max);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.home .jsn-region-rail-list::-webkit-scrollbar { display: none; }

.home .jsn-region-rail-item {
	flex: 0 0 auto;
	width: auto;
	scroll-snap-align: start;
	list-style: none;
}

.home .jsn-region-rail-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 2px;
	border-bottom: 2px solid transparent;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-ink-soft);
	white-space: nowrap;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.home .jsn-region-rail-link:hover,
.home .jsn-region-rail-link:focus-visible { color: var(--color-red); }

.home .jsn-region-rail-link.is-active {
	color: var(--color-red);
	border-bottom-color: var(--color-red);
}

.home .jsn-region-rail-link--all {
	color: var(--color-muted);
	font-weight: 500;
}

/* ============================================================
   2. JSN EDITORIAL DIVIDER
   Menata ULANG judul seksi yang sudah ada -- H2 tetap H2, tidak ada
   div-yang-berlagak-heading, tidak ada markup baru.
   ============================================================ */

.home .jsn-home-economy-header,
.home .jsn-kanal-lain > .jsn-kanal-lain-title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.home .jsn-home-economy-title,
.home .jsn-latest-news > .jsn-section-title,
.home .jsn-topics > .jsn-section-title,
.home .jsn-kanal-lain-title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--color-ink);
	white-space: nowrap;
}

/* Penanda merah kecil -- isyarat brand, bukan garis bawah merah tebal. */
.home .jsn-home-economy-title::before,
.home .jsn-latest-news > .jsn-section-title::before,
.home .jsn-topics > .jsn-section-title::before,
.home .jsn-kanal-lain-title::before {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	background: var(--color-red);
}

/* Garis netral tipis mengisi sisa lebar. */
.home .jsn-home-economy-title::after,
.home .jsn-latest-news > .jsn-section-title::after,
.home .jsn-topics > .jsn-section-title::after,
.home .jsn-kanal-lain-title::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-rule);
}

.home .jsn-home-economy-link {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-red);
}

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

@media (max-width: 767px) {

	/* 3a. HERO -- satu berita dominan.
	   Gambar mendapat rasio tetap supaya ruangnya terpesan sebelum
	   unduhan selesai (nol CLS) dan hero tidak lagi setinggi 996px. */
	.home .jsn-home-hero-main-image-link {
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}

	.home .jsn-home-hero-main-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.home .jsn-home-hero-headline {
		font-size: clamp(28px, 7.4vw, 32px);
		line-height: 1.15;
		margin: var(--space-2) 0;
	}

	/* Dek/ringkasan disembunyikan di ponsel -- pola yang SUDAH dipakai
	   tema ini untuk .jsn-latest-excerpt. Teksnya tetap di DOM. */
	.home .jsn-home-hero-dek {
		display: none;
	}

	/* 3b. Berita pendukung hero -> baris ringkas, bukan kartu 190px.
	   Tidak ada berita yang dibuang; hanya bentuk tampilannya berubah. */
	.home .jsn-home-hero-support-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	/* v1 memakai gambar 104x68 + padding 12px dan justru membuat blok
	   pendukung LEBIH tinggi (392 -> 414px) daripada grid dua kolom
	   yang digantikannya. Dirapatkan: gambar 92x58, padding 8px. */
	.home .jsn-home-hero-support-card {
		display: grid;
		grid-template-columns: 92px 1fr;
		grid-template-rows: auto auto;
		column-gap: var(--space-3);
		align-items: start;
		padding: var(--space-2) 0;
		border-bottom: 1px solid var(--color-rule);
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.home .jsn-home-hero-support-card-image {
		grid-row: 1 / 3;
		width: 92px;
		height: 58px;
		object-fit: cover;
		border-radius: var(--radius-sm);
	}

	.home .jsn-home-hero-support-card .jsn-eyebrow {
		grid-column: 2;
		font-size: 10.5px;
	}

	.home .jsn-home-hero-support-card-title {
		grid-column: 2;
		font-size: 14.5px;
		line-height: 1.3;
		margin: 1px 0 0 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* 3c. LATEST -- baris pemindaian cepat, tanpa kartu berbayang. */
	.home .jsn-latest-item {
		padding: var(--space-3) 0;
		border-bottom: 1px solid var(--color-rule);
		background: none;
		box-shadow: none;
		border-radius: 0;
	}

	.home .jsn-latest-thumb {
		width: 104px;
		height: 68px;
		object-fit: cover;
	}

	.home .jsn-latest-title {
		font-size: 17px;
		line-height: 1.35;
	}

	/* 3d. LIVING ASSISTANCE -- utilitas, dirapatkan, fungsi utuh. */
	.home .jsn-la {
		border-top: 1px solid var(--color-rule);
		border-bottom: 1px solid var(--color-rule);
	}

	.home .jsn-la-inner {
		padding-top: var(--space-2);
		padding-bottom: var(--space-2);
	}

	.home .jsn-la-chip {
		padding: var(--space-2) var(--space-3);
	}

	/* 3e. KANAL LAIN -- empat kanal, masing-masing utuh dengan H2,
	   query, dan tautan kategorinya, tetapi dipadatkan supaya tidak
	   lagi menjadi empat blok ~819px yang nyaris identik.
	   Kartu samping ke-3 dan ke-4 disembunyikan SECARA VISUAL; keduanya
	   tetap di DOM dan tetap dapat dirayapi. */
	.home .jsn-kanal-lain {
		display: block;
		padding-top: var(--space-5);
	}

	.home .jsn-kanal-lain > .jsn-home-economy {
		padding-top: var(--space-4);
		padding-bottom: 0;
	}

	.home .jsn-kanal-lain .jsn-home-economy-title {
		font-size: 11px;
		color: var(--color-muted);
	}

	.home .jsn-kanal-lain .jsn-home-economy-title::before {
		width: 5px;
		height: 5px;
	}

	/* Kartu utama kanal: gambar dilepas, tinggal judul kuat. */
	.home .jsn-kanal-lain .jsn-home-economy-card--main .jsn-home-economy-card-image {
		display: none;
	}

	.home .jsn-kanal-lain .jsn-home-economy-headline {
		font-size: 17px;
		line-height: 1.35;
	}

	.home .jsn-kanal-lain .jsn-home-economy-card--main .jsn-home-economy-headline {
		font-size: 19px;
	}

	.home .jsn-kanal-lain .jsn-home-economy-side .jsn-home-economy-card-image {
		display: none;
	}

	.home .jsn-kanal-lain .jsn-home-economy-side .jsn-home-economy-card {
		padding: var(--space-2) 0;
		border-bottom: 1px solid var(--color-rule);
	}

	.home .jsn-kanal-lain .jsn-home-economy-side .jsn-home-economy-card:nth-child(n + 3) {
		display: none;
	}

	.home .jsn-kanal-lain .jsn-home-economy-side .jsn-home-economy-headline {
		font-size: 15px;
		font-weight: 600;
	}

	.home .jsn-kanal-lain .jsn-home-economy-category {
		display: none;
	}

	/* 3f. DAERAH, POLITIK, NASIONAL -- tetap seksi penuh dengan gambar,
	   inilah identitas editorial utama. Hanya ritmenya dirapikan. */
	.home > .jsn-home-economy .jsn-home-economy-headline {
		font-size: 17px;
		line-height: 1.35;
	}

	.home > .jsn-home-economy .jsn-home-economy-card--main .jsn-home-economy-headline {
		font-size: 21px;
		line-height: 1.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jsn-region-rail-link { transition: none; }
}


/* ============================================================
   4. B4 -- TABLET (768-1023px)
   ------------------------------------------------------------
   Pita ini adalah zona mati yang ditemukan audit B4: aturan
   pemadatan mobile berhenti di 767px, sedangkan aturan multi-kolom
   main.css baru mulai di 1025px. Akibatnya tablet justru menjadi
   tampilan TERPANJANG dari semuanya -- terukur di produksi sebelum
   perubahan ini: 13.287px di 768 dan 15.386px di 1024, dibanding
   7.460px di ponsel dan 7.721px di 1440.
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

	/* Berita pendukung hero: baris ringkas dua kolom, bukan kartu
	   bertumpuk penuh lebar. */
	.home .jsn-home-hero-support-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--space-5);
	}

	.home .jsn-home-hero-support-card {
		display: grid;
		grid-template-columns: 104px 1fr;
		grid-template-rows: auto auto;
		column-gap: var(--space-3);
		align-items: start;
		padding: var(--space-3) 0;
		border-bottom: 1px solid var(--color-rule);
		background: none;
		box-shadow: none;
	}

	.home .jsn-home-hero-support-card-image {
		grid-row: 1 / 3;
		width: 104px;
		height: 66px;
		object-fit: cover;
	}

	.home .jsn-home-hero-support-card .jsn-eyebrow { grid-column: 2; }

	.home .jsn-home-hero-support-card-title {
		grid-column: 2;
		font-size: 15px;
		line-height: 1.35;
		margin: 2px 0 0 0;
	}

	/* Daftar Latest dua kolom -- 720px satu kolom membuat baris judul
	   terlalu panjang dan seksi ini setinggi 870px. */
	.home .jsn-latest-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-6);
	}

	/* Kanal kategori: grid dalamnya masih satu kolom di pita ini, jadi
	   dipadatkan seperti di ponsel. */
	.home .jsn-kanal-lain .jsn-home-economy-card--main .jsn-home-economy-card-image,
	.home .jsn-kanal-lain .jsn-home-economy-side .jsn-home-economy-card-image {
		display: none;
	}

	.home .jsn-kanal-lain .jsn-home-economy-side .jsn-home-economy-card {
		padding: var(--space-2) 0;
		border-bottom: 1px solid var(--color-rule);
	}

	.home .jsn-kanal-lain .jsn-home-economy-side .jsn-home-economy-card:nth-child(n + 4) {
		display: none;
	}

	.home .jsn-kanal-lain .jsn-home-economy-category { display: none; }
}

/* ============================================================
   5. B4 -- DESKTOP (>=1024px)
   ============================================================ */

@media (min-width: 1024px) {

	/* 5a. Header lebih ringkas. Baris utility dan navigasi kategori
	   TETAP ADA -- keduanya berguna di desktop dan tidak disembunyikan
	   hanya karena ponsel menyembunyikannya. Hanya kepadatannya
	   dirapikan. Tidak ada baris header baru. */
	.home #jsn-masthead .jsn-utility,
	.single #jsn-masthead .jsn-utility,
	#jsn-masthead .jsn-utility {
		padding-top: var(--space-1);
		padding-bottom: var(--space-1);
	}

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

	/* 5b. Rel daerah: saat muat, seluruh daerah terlihat tanpa
	   digulir. Gulir mendatar tetap menjadi cadangan bila tidak muat. */
	.home .jsn-region-rail-list {
		justify-content: flex-start;
		gap: var(--space-6);
	}

	/* 5c. Latest dua kolom -- satu kolom selebar 1280px membuat baris
	   judul jauh melewati panjang baca yang nyaman. */
	.home .jsn-latest-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-7);
	}

	.home .jsn-latest-item {
		padding: var(--space-3) 0;
		border-bottom: 1px solid var(--color-rule);
	}

	.home .jsn-latest-title { font-size: 18px; line-height: 1.35; }

	.home .jsn-latest-excerpt { display: none; }

	/* 5d. Kanal Lain: kisi editorial 2 x 2. Empat kanal tetap utuh --
	   query, H2, dan tautan kategorinya masing-masing tidak berubah,
	   hanya disusun berdampingan agar tidak lagi menjadi empat modul
	   panjang yang berulang. Tanpa tab JS. */
	.home .jsn-kanal-lain {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-7);
		row-gap: var(--space-6);
		max-width: var(--container-max);
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--container-pad);
		padding-right: var(--container-pad);
	}

	.home .jsn-kanal-lain > .jsn-kanal-lain-title {
		grid-column: 1 / -1;
	}

	.home .jsn-kanal-lain > .jsn-home-economy {
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
	}

	/* Di dalam sel, kanal memakai susunan tegak yang ringkas. */
	.home .jsn-kanal-lain .jsn-home-economy-grid {
		display: block;
	}

	.home .jsn-kanal-lain .jsn-home-economy-card--main {
		display: block;
		margin-bottom: var(--space-3);
	}

	.home .jsn-kanal-lain .jsn-home-economy-card--main .jsn-home-economy-card-image {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.home .jsn-kanal-lain .jsn-home-economy-card--main .jsn-home-economy-headline {
		font-size: 19px;
		line-height: 1.3;
		margin-top: var(--space-2);
	}

	.home .jsn-kanal-lain .jsn-home-economy-side .jsn-home-economy-card-image {
		display: none;
	}

	.home .jsn-kanal-lain .jsn-home-economy-side .jsn-home-economy-card {
		display: block;
		padding: var(--space-2) 0;
		border-bottom: 1px solid var(--color-rule);
	}

	.home .jsn-kanal-lain .jsn-home-economy-side .jsn-home-economy-headline {
		font-size: 15px;
		font-weight: 600;
		line-height: 1.35;
	}

	.home .jsn-kanal-lain .jsn-home-economy-side .jsn-home-economy-card:nth-child(n + 4) {
		display: none;
	}

	.home .jsn-kanal-lain .jsn-home-economy-category { display: none; }

	/* 5e. Tipografi editorial desktop. Hero tetap terukur -- bukan
	   tipografi poster majalah. */
	.home .jsn-home-hero-headline { font-size: clamp(34px, 2.7vw, 42px); line-height: 1.12; }
	.home > #jsn-content .jsn-home-economy-card--main .jsn-home-economy-headline { font-size: 24px; line-height: 1.25; }
}

@media (min-width: 1280px) {
	/* Berita utama mendapat bobot visual jelas dominan (~59% lebar
	   konten), bukan tiga kolom setara.
	   Dibatasi >=1280 dengan sengaja: pada 1024-1279 main.css memberi
	   .jsn-home-hero-main rentang lebih dari satu kolom, sehingga
	   memaksa template tiga kolom di sana justru tidak memperbaiki
	   tinggi hero (diukur: 1.834px -> 1.869px). Pita itu dibiarkan
	   memakai tata letak main.css; yang membantu di sana adalah
	   pembatasan rasio gambar di bagian 6. */
	.home .jsn-home-hero {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.3fr) minmax(0, 0.8fr);
	}

	.home .jsn-home-hero-headline { font-size: clamp(38px, 2.9vw, 46px); }
}

/* Layar sangat lebar: jaga panjang baris tetap terkendali. */
@media (min-width: 1600px) {
	.home .jsn-region-rail-list,
	.home .jsn-kanal-lain {
		padding-left: var(--space-8);
		padding-right: var(--space-8);
	}
}


/* ============================================================
   6. B4 -- HERO BERJENJANG
   ------------------------------------------------------------
   EMPAT tingkat, bukan satu ambang:

     <=767      ponsel                (blok B2, BEKU -- tidak disentuh)
     768-959    tablet ringkas        satu kolom + baris ringkas
     960-1279   tablet lebar          dua kolom asimetris
     >=1280     desktop editorial     tiga kolom (komposisi lama, utuh)

   Mengapa 768-1279 TIDAK pernah memakai tiga kolom: di 900-1024 tiga
   kolom 0.8/2.3/0.8 menyisakan kolom samping hanya ~175px. Judul
   berita di lebar itu pecah menjadi baris satu-dua kata -- itu
   "desktop yang dijejalkan ke tablet", persis yang harus dihindari.

   Mengapa 768-959 TIDAK memakai dua kolom: diukur pada mirror lokal,
   dua kolom asimetris menyisakan judul pendukung selebar 133px di
   768px dan 183px di 900px, keduanya pada 15,5px -- terlalu sempit.
   Ambang dinaikkan ke 960px karena di situ judul pendukung mencapai
   ~242px, sebanding dengan 231px di 1024px yang sudah terbukti
   terbaca. Di bawah 960px berita pendukung karena itu turun menjadi
   baris selebar penuh, dan judulnya naik ke 17px -- ambang
   keterbacaan yang sama dengan Latest.

   Ini juga yang menghapus gambar setinggi 354px: penyebabnya bukan
   rasio, melainkan kolom selebar 472px. Rasio 4:3 dari 472px memang
   354px. Mengubahnya menjadi baris dengan thumbnail 120x80 membuat
   masalahnya hilang tanpa memotong gambar secara agresif.
   ============================================================ */

/* ---- 6a. Berlaku di SELURUH pita tablet (768-1279) ---- */
@media (min-width: 768px) and (max-width: 1279px) {

	/* Berita utama: dominan, kotak 16:9 supaya ruang TERPESAN sebelum
	   unduhan selesai (nol CLS) -- tetapi isinya contain, bukan cover.
	   Alasannya diukur, bukan selera: foto utama hari ini berukuran
	   asli 312x467 (potret). Dipaksa cover ke kotak 16:9 ia terpotong
	   62% pada sumbu tegak dan kepala narasumber hilang. Di ponsel
	   (blok B2, beku) pemotongan itu berlaku pada kotak setinggi
	   201px; di tablet kotaknya 387px, sehingga cacatnya jauh lebih
	   mencolok. contain tidak pernah memotong: foto lanskap 16:9 --
	   mayoritas foto berita -- tetap memenuhi kotak tanpa celah, dan
	   hanya foto potret/persegi yang menyisakan ruang di kiri-kanan.
	   Pola yang sama sudah dipakai gambar utama artikel (B3). */
	.home .jsn-home-hero-main-image-link {
		display: block;
		aspect-ratio: 16 / 9;
		background: var(--color-canvas);
	}

	.home .jsn-home-hero-main-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Berita pendukung -> baris ringkas.
	   object-fit:cover pada thumbnail 3:2 selebar 120px: pemotongan
	   ringan di sisi panjang saja, bukan crop agresif. */
	.home .jsn-home-hero-left-feature,
	.home .jsn-home-hero-right-feature {
		display: grid;
		grid-template-columns: 120px 1fr;
		grid-template-rows: auto auto;
		column-gap: var(--space-3);
		align-items: start;
		padding: var(--space-3) 0;
		border-bottom: 1px solid var(--color-rule);
	}

	.home .jsn-home-hero-left-feature-image,
	.home .jsn-home-hero-right-feature-image {
		grid-row: 1 / 3;
		width: 120px;
		height: 80px;
		object-fit: cover;
		border-radius: var(--radius-sm);
	}

	.home .jsn-home-hero-left-feature .jsn-eyebrow,
	.home .jsn-home-hero-right-feature .jsn-eyebrow {
		grid-column: 2;
		font-size: 10.5px;
	}

	.home .jsn-home-hero-left-feature-title,
	.home .jsn-home-hero-right-feature-title {
		grid-column: 2;
		line-height: 1.32;
		margin: 2px 0 0 0;
	}

	/* Kartu pendukung bawah mengikuti bahasa yang sama. */
	.home .jsn-home-hero-support-card-image {
		width: 104px;
		height: 68px;
		object-fit: cover;
	}
}

/* ---- 6b. TABLET RINGKAS (768-959): satu kolom ---- */
@media (min-width: 768px) and (max-width: 959px) {

	/* Tidak ada kolom samping sama sekali: berita utama selebar penuh,
	   berita pendukung mengalir sebagai baris di bawahnya. Lebar judul
	   pendukung naik dari 133px (dua kolom) menjadi ~550px. */
	.home .jsn-home-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.home .jsn-home-hero-main,
	.home .jsn-home-hero-left,
	.home .jsn-home-hero-right,
	.home .jsn-home-hero-support {
		grid-column: 1;
	}

	/* Ruang selebar penuh -> judul pendukung memenuhi ambang 17px. */
	.home .jsn-home-hero-left-feature-title,
	.home .jsn-home-hero-right-feature-title {
		font-size: 17px;
	}
}

/* ---- 6c. TABLET LEBAR (960-1279): dua kolom asimetris ---- */
@media (min-width: 960px) and (max-width: 1279px) {

	/* Berita utama ~57% di kolom kiri, berita pendukung menumpuk di
	   kolom kanan yang jelas subordinat. Diukur pada 1024: berita
	   utama 57% bobot visual, tinggi hero 737px. */
	.home .jsn-home-hero {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		align-items: start;
	}

	.home .jsn-home-hero-main {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.home .jsn-home-hero-left {
		grid-column: 2;
		grid-row: 1;
	}

	.home .jsn-home-hero-right {
		grid-column: 2;
		grid-row: 2;
	}

	.home .jsn-home-hero-support {
		grid-column: 1 / -1;
	}

	.home .jsn-home-hero-left-feature-title,
	.home .jsn-home-hero-right-feature-title {
		font-size: 15.5px;
	}
}

/* ---- 6d. Desktop: gambar utama tetap 16:9 dengan ruang terpesan.
   Komposisi tiga kolom main.css TIDAK disentuh. ---- */
@media (min-width: 1280px) {
	.home .jsn-home-hero-main-image-link {
		display: block;
		aspect-ratio: 16 / 9;
		background: var(--color-canvas);
	}

	.home .jsn-home-hero-main-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}


/* ============================================================
   7. B5 -- KEAMANAN GAMBAR POTRET PADA HERO
   ------------------------------------------------------------
   Masalah yang diperbaiki, terukur bukan dikira: foto utama yang
   sumbernya POTRET dipaksa masuk kotak 16:9 dengan object-fit:cover.
   Pada foto 312x467 hanya 37% bagian tengah yang tampil, dan kepala
   narasumber hilang. Audit 60 artikel terbaru: 9 (15%) bergambar
   rasio < 1,2, serendah 0,562.

   Penandanya datang dari PHP (template-parts/hero.php membaca dimensi
   asli dari metadata lampiran dan menambahkan kelas --tall). Tidak ada
   deteksi lewat JavaScript, tidak ada tebakan per-artikel, tidak ada
   perubahan database, dan foto LANSKAP sama sekali tidak tersentuh --
   keduanya tetap object-fit:cover seperti sebelumnya.

   Mengapa perlakuannya berbeda per lebar:

   <=767  Kotak 16:9 DIPERTAHANKAN. Mengubah rasio kotak di ponsel akan
          mengubah tinggi hero B2 yang sudah dibekukan dan berisiko
          CLS. Yang diubah hanya titik jangkar: 50% 0 membuat pita yang
          tampil diambil dari ATAS gambar, sehingga kepala selalu masuk
          frame. Bingkai tetap terisi penuh -- tidak ada bilah kosong.

   >=768  Ada ruang mendatar, jadi bingkai penuh ditampilkan dengan
          contain. Hanya berlaku untuk gambar potret; foto lanskap
          mengisi kotak dengan cover tanpa celah.
   ============================================================ */

@media (max-width: 767px) {
	.home .jsn-home-hero-main-image--tall {
		object-position: 50% 0;
	}
}

@media (min-width: 768px) {
	.home .jsn-home-hero-main-image--tall {
		object-fit: contain;
	}
}