/*
 * Archive/Search/Author/404 styles — Aspirasi Aktual
 * Hanya dimuat di is_archive() || is_search() || is_author() || is_404()
 * (lihat inc/enqueue.php). Tidak ada screenshot desain khusus untuk halaman
 * ini (docs/02-design-analysis.md, Gap Desain Kritis #3) — seluruh nilai di
 * bawah adalah derivasi konservatif dari token/component language yang
 * sudah ada di base.css/shell.css/home.css/single.css, bukan sistem desain
 * baru. .post-thumb / .post-card__category / .post-card__time / .breadcrumb
 * (item-level) dipakai apa adanya dari base.css, tidak didefinisikan ulang.
 */

/*
 * Ruang bernapas antara kartu terakhir dan footer hitam.
 *
 * Akar masalah: baris ini sebelumnya berbunyi
 *   padding-block: var( --wp--preset--spacing--lg ) var( --wp--preset--spacing--2xl );
 * dan TIDAK PERNAH berlaku sama sekali. WordPress meng-kebab-case slug
 * spacing yang diawali angka saat menghasilkan custom property-nya, jadi slug
 * "2xl" di theme.json terbit sebagai --wp--preset--spacing--2-xl (diverifikasi
 * di global-styles-inline-css). Referensi ke --2xl karena itu tidak
 * terdefinisi; pada shorthand dua nilai, satu nilai invalid membatalkan
 * SELURUH deklarasi — sehingga padding atas maupun bawah jatuh ke 0 dan
 * metadata kartu terakhir menempel persis 0px di atas footer (terukur di
 * 1920/1366/768/390 pada Berita, seluruh kategori, search, dan 404).
 * Beranda (48-80px, dari .home-section--subtle) dan artikel tunggal (49px,
 * dari .related-posts) tidak terdampak dan sengaja tidak diubah.
 *
 * Hanya padding-bawah yang dipulihkan. padding-atas juga selama ini 0, tapi
 * memulihkannya akan menggeser breadcrumb/H1 setiap halaman arsip ke bawah —
 * perubahan visual tersendiri yang tidak diminta, jadi dibiarkan apa adanya.
 *
 * Nilainya bertingkat memakai token yang sudah ada, bukan satu nilai desktop
 * yang terlalu longgar di ponsel: lg 32px (mobile), xl 48px (tablet),
 * 2-xl 64px (desktop). Latar tetap paper/cream milik body — tidak ada elemen
 * kosong, tinggi footer tidak disentuh.
 */
.site-main--archive,
.site-main--404 {
	padding-bottom: var( --wp--preset--spacing--lg );
}

@media ( min-width: 391px ) {
	.site-main--archive,
	.site-main--404 {
		padding-bottom: var( --wp--preset--spacing--xl );
	}
}

@media ( min-width: 1366px ) {
	.site-main--archive,
	.site-main--404 {
		padding-bottom: var( --wp--preset--spacing--2-xl );
	}
}

/*
 * Padding sisi konten arsip/search/author/404 di mobile (Stage 19F QA
 * ponsel fisik) — `.site-container` global (shell.css) memakai token `lg`
 * (32px) di semua lebar, dipakai bersama oleh nav/footer/header yang TIDAK
 * bermasalah dan sengaja tidak disentuh di sini. Selector ini dipersempit
 * ke `.site-main--archive .site-container`/`.site-main--404 .site-container`
 * saja (bukan menimpa `.site-container` secara global) supaya nav dan
 * footer tetap seperti semula. `md` (20px) dipilih dari skala spacing yang
 * sudah ada, bukan angka baru — pas di rentang 20-24px yang diminta,
 * memberi kartu kompak sedikit lebih banyak ruang di layar sempit.
 */
@media ( max-width: 767px ) {
	.site-main--archive .site-container,
	.site-main--404 .site-container {
		padding-inline: var( --wp--preset--spacing--md );
	}
}

/* Breadcrumb: container lebar penuh, rata kiri (beda dari single.css yang sempit + center) */
.archive-header .breadcrumb {
	max-width: none;
	margin: 0 0 var( --wp--preset--spacing--md );
	padding: 0;
	text-align: left;
}

/* Header */
.archive-header {
	margin-bottom: var( --wp--preset--spacing--xl );
	padding-bottom: var( --wp--preset--spacing--lg );
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.archive-header__title {
	font-size: var( --wp--preset--font-size--headline-large );
	margin: 0 0 var( --wp--preset--spacing--xs );
	overflow-wrap: break-word;
}

.archive-header__description {
	max-width: var( --wp--style--global--content-size, 720px );
	color: var( --wp--preset--color--text-muted );
}

.archive-header__description :last-child {
	margin-bottom: 0;
}

/* Author archive header */
.author-archive__identity {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--md );
}

.author-archive__avatar {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	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--headline-small );
}

.author-archive__body .archive-header__title {
	margin-bottom: var( --wp--preset--spacing--2-xs );
}

.author-archive__bio {
	color: var( --wp--preset--color--text-muted );
	margin: 0;
	max-width: var( --wp--style--global--content-size, 720px );
}

/* 404 header */
.archive-header--404 .archive-header__title {
	font-size: var( --wp--preset--font-size--display );
}

/* Search form */
.search-form {
	display: flex;
	gap: 0;
	max-width: 390px;
	margin-top: var( --wp--preset--spacing--md );
}

.search-form__input {
	flex: 1;
	min-width: 0;
	/* text-muted, bukan line — kontras border UI component, lihat base.css. */
	border: 1px solid var( --wp--preset--color--text-muted );
	background-color: var( --wp--preset--color--surface );
	padding: var( --wp--preset--spacing--sm );
}

.search-form__submit {
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-dark );
	border: none;
	padding: var( --wp--preset--spacing--sm ) var( --wp--preset--spacing--md );
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
}

.search-form__submit:hover {
	background-color: var( --wp--preset--color--accent-dark );
}

.search-results-count {
	margin: var( --wp--preset--spacing--xs ) 0 0;
	color: var( --wp--preset--color--text-muted );
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--small );
}

.search-result-filters {
	display: flex;
	gap: var( --wp--preset--spacing--2-xs );
	margin-top: var( --wp--preset--spacing--md );
	padding-bottom: 2px;
	overflow-x: auto;
	border-bottom: 1px solid var( --wp--preset--color--line );
	font-family: var( --wp--preset--font-family--interface );
	scrollbar-width: thin;
}

.search-result-filters a {
	flex: 0 0 auto;
	padding: var( --wp--preset--spacing--xs ) var( --wp--preset--spacing--sm );
	border-bottom: 2px solid transparent;
	color: var( --wp--preset--color--text-muted );
	font-size: var( --wp--preset--font-size--metadata );
	font-weight: 600;
	text-decoration: none;
}

.search-result-filters a:hover,
.search-result-filters a.is-active {
	border-bottom-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
}

.site-main--404 .search-form {
	margin-block: var( --wp--preset--spacing--lg ) var( --wp--preset--spacing--md );
}

/* Card grid */
.archive-grid {
	display: grid;
	/* minmax(0, 1fr), bukan 1fr — 1fr saja punya min-width:auto tersirat,
	   jadi track tidak bisa menyusut di bawah lebar intrinsik konten
	   (mis. excerpt berisi URL panjang tanpa spasi), memaksa grid melebihi
	   container di viewport sempit. Root cause overflow 404/arsip, Stage 16. */
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--xl ) var( --wp--preset--spacing--lg );
}

.archive-card__thumb-link {
	display: block;
}

.archive-card__title {
	font-size: var( --wp--preset--font-size--headline-small );
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.archive-card__title a {
	color: inherit;
	text-decoration: none;
}

.archive-card__title a:hover {
	color: var( --wp--preset--color--accent );
}

.archive-card__excerpt {
	color: var( --wp--preset--color--text-muted );
	margin: 0 0 var( --wp--preset--spacing--xs );
}

.archive-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--xs );
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--text-muted );
}

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

.archive-card__author a:hover {
	color: var( --wp--preset--color--accent );
}

.archive-card__meta .post-card__time {
	margin: 0;
	display: inline;
}

/* Empty state */
.archive-empty {
	padding: var( --wp--preset--spacing--xl ) 0;
	border-top: 1px solid var( --wp--preset--color--line );
}

.archive-empty__message {
	font-size: var( --wp--preset--font-size--lead );
	margin: 0 0 var( --wp--preset--spacing--xs );
}

.archive-empty__suggestion {
	color: var( --wp--preset--color--text-muted );
	margin: 0 0 var( --wp--preset--spacing--md );
}

.archive-empty__home-link a,
.not-found__home-link a {
	color: var( --wp--preset--color--accent );
}

/* 404 recent posts */
.not-found__recent {
	margin-top: var( --wp--preset--spacing--xl );
	padding-top: var( --wp--preset--spacing--lg );
	border-top: 1px solid var( --wp--preset--color--line );
}

.not-found__recent h2 {
	font-size: var( --wp--preset--font-size--headline-small );
	margin-bottom: var( --wp--preset--spacing--lg );
}

/* Pagination — markup dari the_posts_pagination() bawaan WordPress */
.pagination {
	margin-top: var( --wp--preset--spacing--xl );
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--xs );
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--metadata );
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px — target sentuh minimum, docs/11-seo-performance-accessibility.md */
	min-width: 44px;
	min-height: 44px;
	padding: 0 var( --wp--preset--spacing--xs );
	border: 1px solid var( --wp--preset--color--line );
	color: var( --wp--preset--color--ink );
	text-decoration: none;
}

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

.pagination .page-numbers.current {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-dark );
}

.pagination .page-numbers.dots {
	border: none;
	min-width: auto;
}

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

@media ( max-width: 1365px ) {
	.archive-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.archive-grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.archive-header__title {
		font-size: var( --wp--preset--font-size--headline-medium );
	}

	.archive-header--404 .archive-header__title {
		font-size: var( --wp--preset--font-size--headline-large );
	}

	/*
	 * Stage 19F QA ponsel fisik: kartu single-column di atas (baris 302)
	 * sebelumnya menumpuk thumbnail full-width lalu teks di bawahnya —
	 * secara teknis sudah 100% lebar, tapi thumbnail besar itu sendiri yang
	 * memakan mayoritas tinggi, memberi kesan kolom sempit/boros ruang (mirip
	 * pola kartu berita horizontal standar yang justru TIDAK dipakai di
	 * mobile, kebalikan dari desktop yang sudah horizontal lewat grid 3
	 * kolom). Diganti jadi baris horizontal thumbnail-kiri (~34%) + teks
	 * kanan supaya lebar layar 360-767px dipakai efisien, konsisten dengan
	 * pola kartu editorial media umum. min-width:0 pada kedua sisi wajib —
	 * tanpa itu flex item punya min-width:auto tersirat (root cause yang
	 * sama seperti catatan grid archive-grid di atas), yang bisa membuat
	 * kolom teks menolak menyusut di bawah lebar intrinsik judul/excerpt.
	 */
	.archive-card {
		display: flex;
		align-items: flex-start;
		gap: var( --wp--preset--spacing--sm );
		width: 100%;
		min-width: 0;
	}

	.archive-card__thumb-link {
		flex: 0 0 34%;
		width: 34%;
		min-width: 0;
	}

	.archive-card__body {
		flex: 1;
		min-width: 0;
	}

	/*
	 * --headline-small (20-24px fluid) pas untuk kartu selebar penuh; di
	 * kolom teks yang sekarang hanya ~66% lebar konten, ukuran itu membuat
	 * judul pecah jadi banyak baris pendek (satu-dua kata per baris).
	 * --section-title (17-20px fluid) tetap dari skala tipografi yang sama,
	 * hanya satu tingkat lebih kecil, supaya kembali ke 2-4 baris yang mudah
	 * dibaca sesuai spesifikasi.
	 */
	.archive-card__title {
		font-size: var( --wp--preset--font-size--section-title );
	}

	/*
	 * Excerpt bukan bagian dari kolom yang wajib tetap terlihat (kategori/
	 * judul/tanggal) menurut spesifikasi kartu kompak — disembunyikan supaya
	 * kartu tetap ringkas dan tidak membuat kolom thumbnail 34% terlihat
	 * jangkung dibanding kolom teks. Judul dan metadata (penulis/tanggal/
	 * estimasi baca) tetap tampil penuh, tidak ada info yang hilang untuk
	 * mencapai keputusan pengguna klik-atau-tidak.
	 */
	.archive-card__excerpt {
		display: none;
	}
}

@media ( max-width: 390px ) {
	.author-archive__identity {
		align-items: flex-start;
	}

	.search-form {
		max-width: none;
		flex-direction: column;
	}

	.search-form__submit {
		width: 100%;
	}

	.pagination .nav-links {
		justify-content: center;
	}
}