/*
 * Article Detail styles — Aspirasi Aktual
 * Hanya dimuat di is_singular('post'). Dua measure berbeda dari pixel
 * sampling Article Detail — Desktop 1440.png: kolom header/featured-media
 * ~1037px (--article-media-width, bounding box gambar utama x201-1238),
 * kolom paragraf isi ~720px (memakai token contentSize yang sudah ada,
 * hasil pengukuran teks paragraf ~737px cocok dalam toleransi pengukuran).
 * Placeholder featured image beraspek 2:1 (bounding box 1037x517).
 */

.single-article {
	/*
	 * Kolom lebar khusus AREA JUDUL (breadcrumb + header). Sejak Stage 19H
	 * token ini tidak lagi dipakai oleh share/featured media/tabel — semuanya
	 * pindah ke --article-column di bawah.
	 */
	--article-media-width: 1037px;

	/*
	 * Satu kolom editorial bersama untuk seluruh elemen artikel yang harus
	 * sejajar (Stage 19H). Memakai token contentSize theme.json yang sudah
	 * ada (720px) — bukan angka baru — karena token itulah yang sejak awal
	 * menyatakan measure paragraf artikel.
	 */
	--article-column: var( --wp--style--global--content-size, 720px );
	--article-gutter: var( --wp--preset--spacing--lg );
}

/*
 * ATURAN LEBAR BERSAMA — root cause fix Stage 19H.
 *
 * Sebelumnya halaman artikel memakai EMPAT tepi teks berbeda sekaligus
 * (terukur pada viewport 1366px):
 *   - judul/meta/breadcrumb .... 973px, tepi kiri 196.5px
 *   - featured image ........... 973px, tepi kiri 196.5px
 *   - lead/excerpt ............. 720px, tepi kiri 323px
 *   - isi artikel + tags ....... 656px, tepi kiri 355px  (720px max-width
 *                                       DIKURANGI padding-inline lg 2x32px)
 * Selisih 158.5px antara gambar utama dan paragraf itulah yang membuat
 * gambar tampak jauh lebih lebar dari badan artikel dan transisi
 * gambar → teks terlihat terputus.
 *
 * Penyebabnya bukan satu deklarasi tunggal melainkan dua sistem lebar yang
 * hidup berdampingan: --article-media-width (1037px, hasil pixel sampling
 * komp desain 1440px) untuk share/featured media, dan contentSize (720px)
 * untuk prosa — ditambah padding-inline yang hanya dipasang di sebagian
 * komponen sehingga dua komponen ber-max-width 720px pun tetap berbeda tepi.
 *
 * `width: min( 100% - gutter*2, --article-column )` menggantikan pasangan
 * `max-width` + `padding-inline`: kotak elemen KINI adalah kolom teks itu
 * sendiri, jadi tepi kiri/kanan setiap komponen identik tanpa perlu
 * menyamakan padding satu per satu. Di viewport sempit suku `100% - 64px`
 * yang menang, menghasilkan gutter 32px persis seperti padding-inline lama
 * (mis. 296px pada 360px — tidak ada perubahan perilaku mobile).
 *
 * Area judul (.breadcrumb/.article-header) sengaja DIBIARKAN lebih lebar:
 * judul terpusat yang kuat adalah bagian identitas editorial yang dipakai
 * di komp desain, dan hanya tepi teks yang harus sejajar.
 */
.article-header__lead,
.article-header__meta,
.article-featured-media,
.single-article__content,
.page-links,
.article-tags,
.author-box {
	width: min( 100% - ( var( --article-gutter ) * 2 ), var( --article-column ) );
	margin-inline: auto;
	box-sizing: border-box;
}

/*
 * Lead dan meta adalah anak .article-header, yang SUDAH memasang gutter yang
 * sama sebagai padding-inline. Tanpa override ini gutter terhitung dua kali:
 * pada 360px keduanya berhenti di 64px sementara featured image/isi artikel
 * berada di 32px — kolom kembali tidak sejajar, hanya di viewport sempit
 * (di desktop cacatnya tak terlihat karena suku 720px yang menang). Menimpa
 * token gutter-nya, bukan menulis aturan lebar kedua, supaya rumus lebar
 * artikel tetap hanya ada di satu tempat.
 */
.article-header__lead,
.article-header__meta {
	--article-gutter: 0px;
}

/*
 * The byline row spans the header, not the 720px body measure — its two rules
 * are the header's own top and bottom edges, so a narrower centred row would
 * leave them floating inside the title column. Deliberately excluded from the
 * shared width formula above.
 */
.article-meta-bar {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.site-main--single {
	padding-block: 96px 0;
}

/*
 * Breadcrumb — item/link/separator styling lives in base.css (Stage 6,
 * shared with archive/search/author). This is the article-specific
 * container: narrower, centered column (archive.css uses a wider,
 * left-aligned container for the same .breadcrumb markup).
 */
/*
 * Left-aligned, not centred. The article header was centred when the design
 * still used a centred title block; it now uses the left-aligned editorial
 * header (breadcrumb → kicker → title → lead → ruled byline row), so a
 * centred breadcrumb floated away from the column's left edge and read as
 * detached from the kicker sitting beside it.
 */
.breadcrumb {
	max-width: var( --article-media-width );
	margin-inline: auto;
	/* The article header already supplies the space above; the breadcrumb owns
	   only the gap down to the kicker. Previously it carried a 24px top pad and
	   nothing below, so the trail sat hard against the category kicker. */
	padding: 0 0 var( --wp--preset--spacing--sm );
	text-align: left;
}

.breadcrumb__list {
	justify-content: flex-start;
}

/* Article header. No bottom padding — the byline row's own margin-bottom is
   the single source of the gap down to the featured image, so the two do not
   stack into a large empty band. */
.article-header {
	max-width: var( --article-media-width );
	margin-inline: auto;
	padding: var( --wp--preset--spacing--lg ) 0 0;
	text-align: left;
}

.article-header__kicker {
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --wp--preset--color--accent );
	margin: 0 0 var( --wp--preset--spacing--sm );
}

/*
 * headline-large (article-title scale), not display (masthead scale) —
 * reusing the masthead's own font-size token for article H1s made very
 * long editorial titles read as oversized relative to the ~1037px header
 * column (Stage 17 audit: a 10+ word title filled 6 full lines at the old
 * size). headline-large is already the theme's dedicated "big article
 * title" step below display.
 */
.article-header__title {
	font-size: var( --wp--preset--font-size--headline-large );
	line-height: 1.15;
	margin: 0 0 var( --wp--preset--spacing--md );
	overflow-wrap: break-word;
}

/*
 * Left-aligned within a prose-width measure, not centered at the full
 * header-column width — centering a multi-line paragraph forces the eye
 * to hunt for the start of each line, fine for a one-line kicker but not
 * for reading-length text (Stage 17 audit).
 */
.article-header__lead {
	text-align: left;
	font-family: var( --wp--preset--font-family--editorial-body );
	font-size: var( --wp--preset--font-size--lead );
	color: var( --wp--preset--color--text-muted );
	margin-bottom: var( --wp--preset--spacing--md );
}

.article-header__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --wp--preset--spacing--sm );
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--text-muted );
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.article-header__author a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var( --wp--preset--color--line );
}

/* Share buttons */
/*
 * Share controls. These used to be a wide row of rectangular text buttons
 * rendered between the article header and the featured image. They are now
 * compact circular icon controls living inside the byline row
 * (.article-meta-bar), which is what the design specifies — the geometry is
 * declared here, in the article's own stylesheet, rather than left to the
 * compatibility layer.
 *
 * 34px is the visual size; the 44px touch minimum is met on coarse pointers
 * via the media query below without inflating the visible circle on desktop
 * (docs/11-seo-performance-accessibility.md).
 */
.share-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var( --wp--preset--spacing--xs );
	margin: 0;
}

.share-buttons__copy,
.share-buttons__link {
	width: 34px;
	height: 34px;
	min-width: 34px;
	min-height: 34px;
	padding: 0;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 50%;
	background: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--ink );
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		border-color var( --t-fast, 140ms ) var( --ease-out, ease ),
		color var( --t-fast, 140ms ) var( --ease-out, ease );
}

@media ( pointer: coarse ) {
	.share-buttons__copy,
	.share-buttons__link {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
	}
}

.share-buttons__copy:hover,
.share-buttons__link:hover {
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
	/*
	 * background eksplisit — tanpa ini, button:hover (base.css) menang lewat
	 * specificity dan mengecat chip outline ini dengan latar accent-dark
	 * solid (teks/border accent di atas latar accent-dark, kontras buruk).
	 * Ditemukan Stage 16 audit, sama root cause seperti .submenu-toggle/
	 * .mobile-menu-toggle di shell.css.
	 */
	background: var( --wp--preset--color--surface );
}

.share-buttons__copy:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.share-buttons__status {
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--text-muted );
}

/* Featured media */
.article-featured-media {
	margin-bottom: var( --wp--preset--spacing--xl );
}

.article-featured-media__figure {
	margin: 0;
}

.article-featured-media__figure img {
	width: 100%;
	height: auto;
}

/* Same branded-fallback treatment as .post-thumb__placeholder (base.css). */
.article-featured-media__placeholder {
	aspect-ratio: 2 / 1;
	position: relative;
	background:
		repeating-linear-gradient(
			135deg,
			rgba( 23, 23, 23, 0.04 ) 0px,
			rgba( 23, 23, 23, 0.04 ) 2px,
			transparent 2px,
			transparent 14px
		),
		linear-gradient(
			135deg,
			var( --wp--preset--color--muted ) 0%,
			var( --wp--preset--color--placeholder ) 100%
		);
}

.article-featured-media__placeholder::after {
	content: "AA";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --wp--preset--font-family--editorial-display );
	font-weight: 700;
	letter-spacing: 0.08em;
	font-size: var( --wp--preset--font-size--headline-large );
	color: rgba( 23, 23, 23, 0.18 );
}

/*
 * Caption sits directly under the image, sharing its left edge, and closes
 * with a hairline that separates the media block from the body copy — the
 * treatment shown in the design reference. Wraps naturally on long captions;
 * never clamped or clipped, so a two-line credit simply grows the block.
 */
.article-featured-media__caption {
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.5;
	color: var( --wp--preset--color--text-muted );
	padding: var( --wp--preset--spacing--xs ) 0 var( --wp--preset--spacing--sm );
	border-bottom: 1px solid var( --wp--preset--color--line );
	text-align: left;
}

.article-featured-media__caption a {
	color: inherit;
}

/* Article body content */
.single-article__content {
	font-size: var( --wp--preset--font-size--body );
	line-height: 1.75;
}

.single-article__content h2 {
	font-size: var( --wp--preset--font-size--headline-small );
	margin-top: var( --wp--preset--spacing--xl );
}

.single-article__content h3 {
	font-size: var( --wp--preset--font-size--section-title );
	margin-top: var( --wp--preset--spacing--lg );
}

.single-article__content > *:first-child {
	margin-top: 0;
}

.single-article__content a {
	color: var( --wp--preset--color--accent );
	text-decoration: underline;
	text-decoration-color: var( --wp--preset--color--line );
}

.single-article__content a:hover {
	color: var( --wp--preset--color--accent-dark );
}

.single-article__content blockquote,
.single-article__content .wp-block-quote,
.single-article__content .wp-block-pullquote {
	position: relative;
}

.single-article__content blockquote p:first-child::before {
	content: "\201C";
}

.single-article__content blockquote p:last-child::after {
	content: "\201D";
}

.single-article__content figure {
	margin-block: var( --wp--preset--spacing--lg );
}

.single-article__content figure img {
	width: 100%;
	height: auto;
}

.single-article__content figcaption {
	margin-top: var( --wp--preset--spacing--xs );
}

/*
 * Tabel — Stage 19H.
 *
 * Perlakuan lama membocorkan tabel keluar dari kolom prosa sampai selebar
 * --article-media-width (1037px) memakai margin-inline negatif. Itu tidak
 * pernah benar-benar terpusat: containing block-nya adalah
 * <figure class="wp-block-table"> yang saat itu hanya 656px, sehingga tabel
 * 1037px melewati sisa ruangnya 64px ke kanan — terukur pada viewport
 * 1920px tepi kiri 473.5px vs tepi kanan 409.5px. Tabel tampak melenceng
 * dari kolom artikel, persis keluhan "tabel keluar dari kolom baca".
 *
 * Sekarang <figure> pembungkus milik core Table block yang menjadi area
 * scroll, dan tabelnya tetap tabel sungguhan (display: table) selebar
 * isinya. Konsekuensinya: tepi tabel = tepi kolom artikel, scroll horizontal
 * hanya terjadi DI DALAM figure dan hanya bila isi tabel memang lebih lebar
 * dari kolom — halaman sendiri tidak pernah ikut menggeser.
 */
.single-article__content .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

/*
 * `.single-article__content .wp-block-table table` (tiga segmen selector,
 * bukan dua) — wp-includes/blocks/table/style.min.css milik core memasang
 * `.wp-block-table table { width: 100% }` dan dimuat SETELAH stylesheet ini;
 * pada specificity sama urutan muat yang menang (dikonfirmasi lewat computed
 * style, verifikasi Stage 17). Segmen .wp-block-table tambahan memutus seri
 * itu tanpa perlu !important.
 *
 * width: auto + min-width: 100% (BUKAN max-content) — tabel merentang penuh
 * selebar kolom bila isinya muat, dan bila tidak muat berhenti tepat di
 * lebar minimum yang masih tidak memotong kata. Terukur pada tabel 14 kolom
 * di staging: `auto` menghasilkan 770.7px — persis sama dengan min-content,
 * artinya tidak ada satu kata pun yang terpenggal — sehingga scroll di dalam
 * figure hanya 51px. `max-content` menghasilkan 1250.9px dan memaksa 531px
 * scroll semata-mata agar header tetap satu baris; itu menggulung jauh lebih
 * jauh daripada yang benar-benar perlu.
 */
.single-article__content .wp-block-table table {
	display: table;
	width: auto;
	min-width: 100%;
	max-width: none;
	margin-inline: 0;
}

/*
 * Cadangan untuk tabel klasik/impor yang TIDAK punya <figure> pembungkus:
 * di sana tidak ada elemen lain yang bisa jadi area scroll, jadi tabelnya
 * sendiri yang menggulung. Tetap dipertahankan supaya konten lama tidak
 * bisa membuat halaman menggeser horizontal.
 */
.single-article__content > table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

/*
 * `.single-article__content` (visual-parity.css) sets `overflow-wrap:
 * anywhere` for the "long unbroken URL in prose" case — but unlike
 * `overflow-wrap: break-word`, `anywhere` explicitly counts toward
 * min-content/intrinsic sizing (that's the entire difference between the two
 * per spec). Inherited into every <td>/<th>, it let the table's auto layout
 * treat every ordinary word as a valid break point when computing column
 * widths, collapsing each of the 7 columns above to a near-zero min-content
 * width and wrapping ordinary words one letter per line instead of the
 * min-content-sized columns + horizontal scroll the rule above this one is
 * built to produce ("Tahun" rendered as seven single-letter lines, table
 * height 1160px at 390px wide — reproduced live before this fix).
 * `overflow-wrap: break-word` still lets a genuinely unbroken token (a long
 * URL/value with no spaces) wrap safely without affecting column sizing;
 * `word-break: normal` stops the browser from breaking between two ordinary
 * letters that already had a real space to break at. Covers both the
 * Gutenberg-wrapped table above and the unwrapped classic/imported one.
 */
.single-article__content .wp-block-table th,
.single-article__content .wp-block-table td,
.single-article__content > table th,
.single-article__content > table td {
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
}

/* Code: monospace, local overflow. Verse (Puisi): keep editorial serif + line breaks intact */
.single-article__content pre,
.single-article__content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var( --wp--preset--font-size--small );
}

.single-article__content pre {
	background-color: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--line );
	padding: var( --wp--preset--spacing--sm );
	overflow-x: auto;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.single-article__content .wp-block-verse {
	font-family: var( --wp--preset--font-family--editorial-body );
	font-size: inherit;
	background: none;
	border: none;
	padding: 0;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.single-article__content iframe {
	max-width: 100%;
}

.single-article__content .wp-block-embed__wrapper {
	position: relative;
}

/* Puisi: line-height lebih lega (docs/06-content-model.md) */
.category-puisi .single-article__content {
	line-height: 2;
}

.page-links {
	margin-block: var( --wp--preset--spacing--lg ) 0;
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--metadata );
}

.page-links span {
	display: inline-block;
	margin-right: var( --wp--preset--spacing--xs );
}

/* Tags */
/*
 * padding-inline: 0 — base.css memberi setiap <ul>/<ol> padding-left 1.25em
 * untuk bullet, dan daftar tag (list-style: none, tidak punya bullet) ikut
 * kena: tag tergeser 21.3px ke kanan dari kolom artikel meski lebar kotaknya
 * sudah benar (terukur Stage 19H). Dulu tidak terlihat karena komponen ini
 * memang belum sejajar dengan apa pun.
 */
.article-tags {
	margin-block: var( --wp--preset--spacing--xl ) 0;
	padding-inline: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--xs );
}

.article-tags a {
	display: inline-block;
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--small );
	text-transform: uppercase;
	border: 1px solid var( --wp--preset--color--line );
	padding: var( --wp--preset--spacing--2-xs ) var( --wp--preset--spacing--sm );
	color: var( --wp--preset--color--text-muted );
	text-decoration: none;
}

.article-tags a:hover {
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
}

/* Author box */
/*
 * padding-block saja (bukan padding di keempat sisi): sisi kiri/kanan dulu
 * memberi inset 32px sehingga isi author box tidak pernah lurus dengan
 * paragraf di atasnya. Kini kotaknya sudah persis selebar kolom artikel,
 * jadi avatar/nama/bio langsung sejajar dan garis border-top membentang
 * tepat selebar teks. Jarak vertikalnya dipertahankan apa adanya.
 */
.author-box {
	margin-block: var( --wp--preset--spacing--xl ) 0;
	padding-block: var( --wp--preset--spacing--lg );
	border-top: 1px solid var( --wp--preset--color--line );
	display: flex;
	gap: var( --wp--preset--spacing--md );
	align-items: flex-start;
}

.author-box__avatar {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-dark );
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --wp--preset--font-family--editorial-display );
	font-size: var( --wp--preset--font-size--lead );
}

.author-box__label {
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.author-box__name {
	font-family: var( --wp--preset--font-family--editorial-display );
	font-size: var( --wp--preset--font-size--headline-small );
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.author-box__name a {
	color: var( --wp--preset--color--ink );
	text-decoration: none;
}

.author-box__name a:hover {
	color: var( --wp--preset--color--accent );
}

.author-box__bio {
	color: var( --wp--preset--color--text-muted );
	margin: 0;
}

/* Related posts (Baca Juga) */
.related-posts {
	background-color: var( --wp--preset--color--surface );
	border-top: 1px solid var( --wp--preset--color--line );
	padding-block: var( --wp--preset--spacing--xl );
	margin-top: var( --wp--preset--spacing--xl );
}

/* ============ Responsive ============ */

@media ( max-width: 767px ) {
	.article-header__title {
		font-size: var( --wp--preset--font-size--headline-large );
	}

	.author-box {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media ( max-width: 390px ) {
	.share-buttons {
		justify-content: flex-start;
	}
}