/*
 * Halaman statis (Page) biasa — dipakai page.php.
 *
 * Dimuat SETELAH visual-parity.css (lihat inc/enqueue.php) karena berkas itu
 * memenangkan hampir semua konflik desktop; aturan di sini harus bisa menang
 * tanpa perlu !important.
 *
 * Seluruh selektor di-scope ke .site-main--page supaya tidak ada satu pun
 * aturan yang bocor ke homepage, arsip, artikel, atau Kirim Tulisan.
 */

.site-main--page {
	--aa-page-gutter: 40px;
	--aa-page-frame: var( --wp--style--global--wide-size, 1280px );
	--aa-page-measure: var( --reading-width, 720px );

	padding-block: 48px 80px;
	background: var( --color-ivory, #F7F4EE );

	/*
	 * `.site-main` sudah membawa padding-inline 24px dan max-width sendiri.
	 * Grid di .page-article punya gutter-nya sendiri, jadi keduanya bertumpuk:
	 * di 320px paragraf hanya mendapat 224px dari 272px yang tersedia (24px
	 * padding + 24px gutter di tiap sisi). Rima horizontal Page sepenuhnya
	 * dimiliki grid, jadi padding dan batas lebar bawaan dilepas di sini.
	 */
	padding-inline: 0;
	max-width: none;
}

/*
 * ---------- Kanvas halaman ----------
 *
 * Grid bernama dipasang pada <article>, bukan hanya pada blok konten, supaya
 * judul, featured image, dan isi Gutenberg memakai SATU sistem kolom yang sama.
 * Sebelumnya judul memakai .site-container (mulai x=80) sementara isi berada di
 * kolom baca yang terpusat (mulai x=384), sehingga keduanya terlihat terlepas
 * satu sama lain.
 *
 * Tiap track dibungkus minmax(0, …) supaya boleh menyusut sampai 0 di viewport
 * sempit — itulah yang mencegah alignwide/alignfull membuat overflow horizontal
 * di level dokumen.
 */
.site-main--page .page-article {
	display: grid;
	grid-template-columns:
		[full-start] minmax( var( --aa-page-gutter ), 1fr )
		[wide-start] minmax( 0, calc( ( var( --aa-page-frame ) - 2 * var( --aa-page-gutter ) - var( --aa-page-measure ) ) / 2 ) )
		/*
		 * Kolom baca HARUS punya ukuran pasti, bukan minmax( 0, … ).
		 * Dengan minmax( 0, 720px ) ukuran dasar track ini 0, sehingga kedua
		 * track `1fr` di tepi menyerap hampir seluruh lebar dan kolom baca
		 * runtuh ke lebar min-content — di 390px teksnya terpotong satu suku
		 * kata per baris ("Nama Leng kap"), meskipun pemeriksaan overflow
		 * dokumen tetap lolos karena tidak ada yang meluap.
		 *
		 * `min()` memberi track ini lebar pasti: sekecil-kecilnya seluruh lebar
		 * dikurangi kedua gutter, sebesar-besarnya lebar baca nyaman. Track fr
		 * hanya menerima sisa SETELAH itu.
		 */
		[content-start] min( var( --aa-page-measure ), 100% - 2 * var( --aa-page-gutter ) ) [content-end]
		minmax( 0, calc( ( var( --aa-page-frame ) - 2 * var( --aa-page-gutter ) - var( --aa-page-measure ) ) / 2 ) ) [wide-end]
		minmax( var( --aa-page-gutter ), 1fr ) [full-end];
}

.site-main--page .page-article > * {
	grid-column: content;
	min-width: 0;
}

/* ---------- Judul & media ---------- */

.site-main--page .page-article__header {
	margin-bottom: 28px;
}

.site-main--page .page-article__title {
	margin: 0;
	max-width: 20ch;
	font-family: var( --font-serif, 'Source Serif 4', serif );
	font-size: clamp( 30px, 4vw, var( --fs-display, 46px ) );
	font-weight: var( --fw-bold, 700 );
	line-height: var( --lh-tight, 1.14 );
	letter-spacing: -0.01em;
	color: var( --color-ink, #171717 );
}

.site-main--page .page-article__media {
	margin: 0 auto 36px;
}

.site-main--page .page-article__thumb {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: var( --radius-md, 8px );
}

.site-main--page .page-article__caption {
	margin-top: var( --sp-2, 8px );
	font-family: var( --font-ui, 'Inter', sans-serif );
	font-size: var( --fs-sm, 12px );
	color: var( --color-warm-gray, #6F6B65 );
}

/*
 * ---------- Kanvas konten ----------
 *
 * `display: contents` membuat pembungkus ini tidak menghasilkan kotak sendiri,
 * sehingga anak-anak blok Gutenberg menjadi item langsung dari grid
 * .page-article di atas. Itulah yang memungkinkan sebuah blok alignwide/
 * alignfull melebar melewati kolom baca — hal yang mustahil bila grid-nya
 * bersarang, karena anak grid dalam tidak bisa keluar dari kolom induknya.
 * Properti yang diwariskan (font, line-height, warna, overflow-wrap) tetap
 * mengalir ke anak seperti biasa; pembungkus ini memang tidak punya latar,
 * padding, atau margin sendiri yang bisa hilang.
 */
.site-main--page .page-article__content {
	display: contents;

	font-family: var( --font-serif, 'Source Serif 4', serif );
	font-size: var( --fs-xl, 18px );
	line-height: var( --lh-body, 1.75 );
	color: var( --color-ink, #171717 );

	/* URL panjang tanpa spasi tidak boleh mendorong lebar dokumen. */
	overflow-wrap: anywhere;
}

.site-main--page .page-article__content > * {
	grid-column: content;
	min-width: 0;
	margin-block: 0 var( --sp-6, 24px );
}

.site-main--page .page-article__content > .alignwide {
	grid-column: wide;
}

.site-main--page .page-article__content > .alignfull {
	grid-column: full;
	max-width: 100%;
}

.site-main--page .page-article__content > :last-child {
	margin-bottom: 0;
}

/* ---------- Blok Gutenberg ---------- */

.site-main--page .page-article__content :is( h2, h3, h4, h5, h6 ) {
	font-family: var( --font-serif, 'Source Serif 4', serif );
	font-weight: var( --fw-bold, 700 );
	line-height: var( --lh-snug, 1.3 );
	color: var( --color-ink, #171717 );
	margin-top: var( --sp-10, 40px );
	margin-bottom: var( --sp-3, 12px );
}

.site-main--page .page-article__content > :first-child {
	margin-top: 0;
}

.site-main--page .page-article__content h2 { font-size: var( --fs-h1, 34px ); }
.site-main--page .page-article__content h3 { font-size: var( --fs-h2, 24px ); }
.site-main--page .page-article__content h4 { font-size: var( --fs-h3, 21px ); }
.site-main--page .page-article__content h5 { font-size: var( --fs-xl, 18px ); }
.site-main--page .page-article__content h6 {
	font-family: var( --font-ui, 'Inter', sans-serif );
	font-size: var( --fs-md, 14px );
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.site-main--page .page-article__content a {
	color: var( --color-burgundy, #9F1730 );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-main--page .page-article__content a:hover,
.site-main--page .page-article__content a:focus-visible {
	color: var( --color-burgundy-dark, #741123 );
}

.site-main--page .page-article__content :is( ul, ol ) {
	padding-left: 1.4em;
}

.site-main--page .page-article__content li + li {
	margin-top: var( --sp-2, 8px );
}

.site-main--page .page-article__content blockquote {
	margin-inline: 0;
	padding-left: var( --sp-6, 24px );
	border-left: 3px solid var( --color-burgundy, #9F1730 );
	font-style: italic;
	color: var( --color-ink, #171717 );
}

.site-main--page .page-article__content blockquote cite {
	display: block;
	margin-top: var( --sp-3, 12px );
	font-family: var( --font-ui, 'Inter', sans-serif );
	font-size: var( --fs-sm, 12px );
	font-style: normal;
	color: var( --color-warm-gray, #6F6B65 );
}

.site-main--page .page-article__content :is( img, video, iframe, embed, object ) {
	max-width: 100%;
	height: auto;
}

.site-main--page .page-article__content figcaption,
.site-main--page .page-article__content .wp-element-caption {
	font-family: var( --font-ui, 'Inter', sans-serif );
	font-size: var( --fs-sm, 12px );
	line-height: var( --lh-normal, 1.5 );
	color: var( --color-warm-gray, #6F6B65 );
	text-align: left;
	margin-top: var( --sp-2, 8px );
}

/*
 * Tabel lebar digulir DI DALAM wadahnya sendiri. wp-block-table adalah <figure>,
 * jadi pembungkusnya sudah tersedia tanpa markup tambahan dari editor.
 */
.site-main--page .page-article__content .wp-block-table {
	overflow-x: auto;
	max-width: 100%;
}

.site-main--page .page-article__content table {
	width: 100%;
	border-collapse: collapse;
	font-family: var( --font-ui, 'Inter', sans-serif );
	font-size: var( --fs-md, 14px );
	line-height: var( --lh-normal, 1.5 );
}

.site-main--page .page-article__content :is( th, td ) {
	padding: var( --sp-3, 12px ) var( --sp-4, 16px );
	border: 1px solid var( --color-border, #DAD5CC );
	text-align: left;
	vertical-align: top;
}

.site-main--page .page-article__content th {
	background: var( --color-section-warm, #EFEBE2 );
	font-weight: var( --fw-semibold, 600 );
}

.site-main--page .page-article__content .wp-block-button__link {
	display: inline-block;
	padding: var( --sp-3, 12px ) var( --sp-6, 24px );
	border-radius: var( --radius-sm, 6px );
	background: var( --color-ink, #171717 );
	color: var( --dark-text, #F7F5F0 );
	font-family: var( --font-ui, 'Inter', sans-serif );
	font-size: var( --fs-md, 14px );
	font-weight: var( --fw-semibold, 600 );
	text-decoration: none;
}

.site-main--page .page-article__content .wp-block-button__link:hover,
.site-main--page .page-article__content .wp-block-button__link:focus-visible {
	background: var( --color-burgundy, #9F1730 );
	color: #FFFFFF;
}

.site-main--page .page-article__content .wp-block-separator {
	border: 0;
	border-top: 1px solid var( --color-border, #DAD5CC );
}

.site-main--page .page-article__content pre {
	overflow-x: auto;
	max-width: 100%;
	padding: var( --sp-4, 16px );
	background: var( --color-section-warm, #EFEBE2 );
	border-radius: var( --radius-sm, 6px );
	font-size: var( --fs-md, 14px );
}

/*
 * Form kata sandi bawaan WordPress.
 *
 * WordPress merender <input type="password" size="20">. Atribut `size` itu
 * memberi lebar intrinsik ~211px yang, ditambah teks label "Sandi:" pada baris
 * yang sama, melebihi lebar konten di 320px — cukup untuk melebarkan layout
 * viewport (terukur innerWidth 334, bukan 320) sehingga SELURUH halaman bisa
 * digeser horizontal. Label dijadikan flex yang boleh membungkus dan input
 * diberi min-width: 0 supaya lebar intrinsik itu tidak lagi menjadi lantai.
 */
.site-main--page .page-article__content .post-password-form label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --sp-2, 8px );
}

.site-main--page .page-article__content .post-password-form :is( input[type="password"], input[type="submit"] ) {
	padding: var( --sp-2, 8px ) var( --sp-3, 12px );
	border: 1px solid var( --color-border, #DAD5CC );
	border-radius: var( --radius-sm, 6px );
	font-family: var( --font-ui, 'Inter', sans-serif );
	font-size: var( --fs-md, 14px );
	max-width: 100%;
	box-sizing: border-box;
}

.site-main--page .page-article__content .post-password-form input[type="password"] {
	flex: 1 1 12ch;
	min-width: 0;
}

/* Paginasi <!--nextpage--> */
.site-main--page .page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var( --sp-2, 8px );
	align-items: center;
	margin-top: var( --sp-8, 32px );
	font-family: var( --font-ui, 'Inter', sans-serif );
	font-size: var( --fs-md, 14px );
}

.site-main--page .page-links > :is( a, span ) > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding-inline: var( --sp-2, 8px );
	border: 1px solid var( --color-border, #DAD5CC );
	border-radius: var( --radius-sm, 6px );
}

.site-main--page .page-links > span:not( .screen-reader-text ) > span {
	background: var( --color-ink, #171717 );
	color: var( --dark-text, #F7F5F0 );
	border-color: var( --color-ink, #171717 );
}

/* =========================================================================
 * Pola blok "Susunan Redaksi" — lihat inc/patterns.php.
 *
 * Semua nama/jabatan berasal dari blok Gutenberg yang diketik redaksi di
 * Pages → Redaksi → Edit. Tidak ada satu pun personel yang di-hardcode di
 * PHP maupun CSS.
 * ====================================================================== */

.site-main--page .aa-redaksi__intro {
	font-size: var( --fs-xl, 18px );
	color: var( --color-warm-gray, #6F6B65 );
}

.site-main--page .aa-redaksi__section {
	padding-top: var( --sp-8, 32px );
	border-top: 1px solid var( --color-border, #DAD5CC );
}

.site-main--page .aa-redaksi__section-title {
	margin-top: 0;
	font-family: var( --font-ui, 'Inter', sans-serif );
	font-size: var( --fs-sm, 12px );
	font-weight: var( --fw-semibold, 600 );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --color-burgundy, #9F1730 );
}

/*
 * Kartu personel. Dibuat dari core/group biasa supaya redaksi bisa
 * menduplikasi, memindahkan, atau menghapusnya lewat toolbar Gutenberg
 * standar tanpa blok kustom.
 */
.site-main--page .aa-redaksi__person {
	padding: var( --sp-6, 24px );
	height: 100%;
	background: var( --color-paper, #FFFDFA );
	border: 1px solid var( --color-border, #DAD5CC );
	border-radius: var( --radius-md, 8px );
}

.site-main--page .aa-redaksi__person > * {
	margin-block: 0;
}

.site-main--page .aa-redaksi__role {
	font-family: var( --font-ui, 'Inter', sans-serif );
	font-size: var( --fs-xs, 11px );
	font-weight: var( --fw-semibold, 600 );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --color-warm-gray, #6F6B65 );
}

.site-main--page .aa-redaksi__name {
	margin-top: var( --sp-2, 8px ) !important;
	font-family: var( --font-serif, 'Source Serif 4', serif );
	font-size: var( --fs-h3, 21px );
	font-weight: var( --fw-bold, 700 );
	line-height: var( --lh-snug, 1.3 );
	color: var( --color-ink, #171717 );
}

.site-main--page .aa-redaksi__note {
	margin-top: var( --sp-2, 8px ) !important;
	font-family: var( --font-ui, 'Inter', sans-serif );
	font-size: var( --fs-md, 14px );
	line-height: var( --lh-normal, 1.5 );
	color: var( --color-warm-gray, #6F6B65 );
}

/*
 * core/columns hanya menumpuk di <=781px. Di antara 782px dan 1024px tiga
 * kartu personel berdampingan menjadi terlalu sempit untuk nama panjang,
 * jadi dipaksa membungkus di rentang itu.
 */
@media ( max-width: 1024px ) {
	.site-main--page .aa-redaksi__row {
		flex-wrap: wrap;
	}

	.site-main--page .aa-redaksi__row > .wp-block-column {
		flex-basis: calc( 50% - var( --sp-4, 16px ) ) !important;
	}
}

@media ( max-width: 781px ) {
	.site-main--page .aa-redaksi__row > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ---------- Responsif umum ---------- */

@media ( max-width: 767px ) {
	.site-main--page {
		--aa-page-gutter: 24px;
		padding-block: 32px 56px;
	}

	.site-main--page .page-article__content {
		font-size: var( --fs-lg, 16px );
	}

	.site-main--page .page-article__content h2 { font-size: var( --fs-h2, 24px ); }
	.site-main--page .page-article__content h3 { font-size: var( --fs-h3, 21px ); }
	.site-main--page .page-article__content h4 { font-size: var( --fs-xl, 18px ); }
}