/*
 * Homepage styles — Aspirasi Aktual
 * Hanya dimuat di is_front_page() (lihat inc/enqueue.php). Section
 * backgrounds bersumber dari pixel sampling homepage screenshot:
 * headline+latest-news+kanal+media = paper, pilihan-editor = surface,
 * opini+footer = dark-surface, newsletter = subtle. Rasio thumbnail per
 * komponen dari label desain ("FOTO UTAMA 16:9", "FOTO BERITA 3:2") dan
 * pengukuran bounding box placeholder — lihat docs/PROJECT_STATE.md.
 */

.site-main--home {
	/* overflow-x: clip removed (G-12) */
}

/*
 * Padding sisi konten homepage di mobile (Stage 19F QA ponsel fisik) — sama
 * seperti catatan `.site-main--archive .site-container` di archive.css:
 * `.site-container` global (shell.css, token `lg`/32px) dipakai bersama
 * nav/footer yang sengaja tidak disentuh, jadi override di sini dipersempit
 * ke section homepage saja.
 */
@media ( max-width: 767px ) {
	.site-main--home .site-container {
		padding-inline: var( --wp--preset--spacing--md );
	}
}

.home-section {
	padding-block: var( --wp--preset--spacing--xl );
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.home-section--paper {
	background-color: var( --wp--preset--color--paper );
}

.home-section--surface {
	background-color: var( --wp--preset--color--surface );
}

.home-section--dark {
	background-color: var( --wp--preset--color--dark-surface );
	color: var( --wp--preset--color--on-dark );
	border-bottom-color: rgba( 247, 245, 240, 0.15 );
}

.home-section--dark a {
	color: var( --wp--preset--color--on-dark );
}

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

.home-section--subtle {
	background-color: var( --wp--preset--color--subtle );
	border-bottom: none;
}

.home-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--md );
	border-bottom: 1px solid var( --wp--preset--color--line );
	padding-bottom: var( --wp--preset--spacing--sm );
	margin-bottom: var( --wp--preset--spacing--lg );
}

.home-section--dark .home-section__header {
	border-bottom-color: rgba( 247, 245, 240, 0.25 );
}

.home-section__header h2 {
	font-size: var( --wp--preset--font-size--headline-small );
	margin: 0;
}

.home-section__more {
	flex-shrink: 0;
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--metadata );
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
	text-decoration: none;
}

.home-section--dark .home-section__more {
	color: var( --wp--preset--color--accent );
}

/*
 * Shared card title link color — thumbnail/placeholder, category label,
 * and time are now defined once in base.css (Stage 6), loaded on every
 * page. This dark-section override stays here since it's home-specific.
 */
.home-section--dark .post-card__time {
	color: var( --wp--preset--color--muted );
}

/* 1. Headline grid */
.headline-grid__inner {
	display: grid;
	grid-template-columns: minmax( 0, 0.85fr ) minmax( 0, 1.6fr ) minmax( 0, 0.85fr );
	gap: var( --wp--preset--spacing--xl );
	align-items: start;
}

.headline-grid__supporting {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--lg );
	order: 1;
}

.headline-grid__hero {
	order: 2;
}

.headline-grid__popular {
	order: 3;
}

.supporting-card__title,
.headline-hero__title,
.editor-pick-card__title,
.latest-news-item__title,
.channel-card__title,
.literature-card__title,
.opinion-card__title,
.media-card__title {
	font-size: var( --wp--preset--font-size--headline-small );
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.supporting-card__title a,
.headline-hero__title a,
.editor-pick-card__title a,
.latest-news-item__title a,
.channel-card__title a,
.literature-card__title a,
.opinion-card__title a,
.media-card__title a {
	color: inherit;
	text-decoration: none;
}

.supporting-card__title a:hover,
.headline-hero__title a:hover,
.editor-pick-card__title a:hover,
.latest-news-item__title a:hover,
.channel-card__title a:hover,
.literature-card__title a:hover,
.opinion-card__title a:hover,
.media-card__title a:hover {
	color: var( --wp--preset--color--accent );
}

.headline-hero__title {
	font-size: var( --wp--preset--font-size--headline-large );
}

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

.headline-hero__meta {
	display: flex;
	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;
}

.popular-list__title {
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--metadata );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var( --wp--preset--color--line );
	padding-bottom: var( --wp--preset--spacing--xs );
	margin: 0 0 var( --wp--preset--spacing--sm );
}

.popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.popular-list__item {
	display: flex;
	gap: var( --wp--preset--spacing--sm );
	align-items: baseline;
	padding-block: var( --wp--preset--spacing--sm );
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.popular-list__item:last-child {
	border-bottom: none;
}

.popular-list__number {
	flex-shrink: 0;
	font-family: var( --wp--preset--font-family--editorial-display );
	font-size: var( --wp--preset--font-size--lead );
	font-weight: 700;
	color: var( --wp--preset--color--accent );
}

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

.popular-list__item a:hover {
	color: var( --wp--preset--color--accent );
}

/* 2. Berita Terkini */
.latest-news-list {
	display: flex;
	flex-direction: column;
}

.latest-news-item {
	display: grid;
	/* minmax(0, 1fr) — lihat catatan .archive-grid (archive.css) untuk root
	   cause: 1fr saja tidak bisa menyusut di bawah lebar intrinsik excerpt. */
	grid-template-columns: 200px minmax( 0, 1fr );
	gap: var( --wp--preset--spacing--md );
	padding-block: var( --wp--preset--spacing--md );
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.latest-news-item:last-child {
	border-bottom: none;
}

.latest-news-item .post-thumb {
	margin-bottom: 0;
}

.latest-news-item__excerpt {
	color: var( --wp--preset--color--text-muted );
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

/* 3. Pilihan Editor */
.editor-picks-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--lg );
}

/* 4. Kanal Berita */
.news-channels-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--xl ) var( --wp--preset--spacing--lg );
}

.channel-card__header {
	border-bottom: 2px solid var( --wp--preset--color--ink );
	padding-bottom: var( --wp--preset--spacing--xs );
	margin-bottom: var( --wp--preset--spacing--sm );
}

.channel-card__header h3 {
	margin: 0;
	font-family: var( --wp--preset--font-family--editorial-display );
	font-size: var( --wp--preset--font-size--section-title );
}

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

.channel-card__header a:hover {
	color: var( --wp--preset--color--accent );
}

.channel-card__title {
	/* Clamp the primary story per channel too — same column-balance reason
	   as .channel-card__list above; a single unclamped long headline was
	   making one of three columns much taller than its siblings. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.channel-card__list {
	list-style: none;
	margin: var( --wp--preset--spacing--xs ) 0 0;
	padding: 0;
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--metadata );
}

.channel-card__list li {
	padding-block: var( --wp--preset--spacing--xs );
	border-top: 1px solid var( --wp--preset--color--line );
}

.channel-card__list a {
	color: var( --wp--preset--color--text-muted );
	text-decoration: none;
	/* Clamp to 2 lines so one long secondary headline can't make its
	   column taller/denser than sibling channel columns (Stage 17 audit). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.channel-card__list a:hover {
	color: var( --wp--preset--color--accent );
}

/* 5. Sastra */
.literature-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--lg );
}

.literature-card {
	border: 1px solid var( --wp--preset--color--line );
	padding: var( --wp--preset--spacing--md );
}

.literature-card__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--sm );
}

.literature-card__label a {
	color: inherit;
	text-decoration: none;
}

.literature-card__title {
	font-size: var( --wp--preset--font-size--lead );
}

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

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

/* 6. Opini */
.opinions-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--xl );
}

.opinion-card {
	border-top: 1px solid rgba( 247, 245, 240, 0.25 );
	padding-top: var( --wp--preset--spacing--md );
}

.opinion-card__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-dark );
	font-family: var( --wp--preset--font-family--editorial-display );
	font-size: var( --wp--preset--font-size--lead );
	margin-bottom: var( --wp--preset--spacing--sm );
}

.opinion-card__author {
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--metadata );
	margin: 0 0 var( --wp--preset--spacing--xs );
}

.opinion-card__excerpt {
	color: var( --wp--preset--color--muted );
	margin: 0;
}

/* 7. Foto & Video */
.media-grid {
	display: grid;
	grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: var( --wp--preset--spacing--lg );
}

.media-card--large {
	grid-row: span 1;
}

.media-card__media {
	position: relative;
}

/*
 * Centered circular play control, not a bare CSS triangle pinned to the
 * left edge of the thumbnail (Stage 17 audit — read as a stray artifact,
 * not a deliberate control). Decorative only (aria-hidden in media.php);
 * the card's own title link already provides the accessible name and
 * click target, so this never needs its own label.
 */
.media-card__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba( 23, 23, 23, 0.55 );
	border-radius: 50%;
	pointer-events: none;
}

.media-card__play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 4px;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 15px solid var( --wp--preset--color--on-dark );
}

.media-card--small .media-card__play {
	width: 44px;
	height: 44px;
}

.media-card--small .media-card__play::before {
	border-top-width: 7px;
	border-bottom-width: 7px;
	border-left-width: 12px;
}

.media-card__duration {
	position: absolute;
	bottom: var( --wp--preset--spacing--xs );
	left: var( --wp--preset--spacing--sm );
	font-family: var( --wp--preset--font-family--interface );
	font-size: var( --wp--preset--font-size--small );
	/*
	 * Latar solid dark-surface + teks on-dark (bukan teks ink polos di atas
	 * thumbnail) — kontras teks di atas foto/video editorial sembarang tidak
	 * bisa dijamin tanpa latar sendiri (WCAG 1.4.3). Pola sama seperti
	 * .breaking-news__label (latar solid, bukan transparan) agar rasio
	 * kontras tetap 16.45:1 terlepas dari warna gambar di baliknya.
	 */
	background-color: var( --wp--preset--color--dark-surface );
	color: var( --wp--preset--color--on-dark );
	padding: var( --wp--preset--spacing--2-xs ) var( --wp--preset--spacing--xs );
}

/* 8. Newsletter */
.newsletter__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var( --wp--preset--spacing--xl );
}

.newsletter__intro {
	background-color: var( --wp--preset--color--surface );
	padding: var( --wp--preset--spacing--lg );
}

.newsletter__kicker {
	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 );
}

.newsletter__title {
	font-size: var( --wp--preset--font-size--headline-medium );
	margin: 0 0 var( --wp--preset--spacing--xs );
}

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

.newsletter-form {
	display: flex;
	gap: 0;
}

.newsletter-form__input,
.newsletter-form__submit {
	min-height: 48px;
	font-size: var( --wp--preset--font-size--metadata );
}

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

.newsletter-form__submit {
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-dark );
	border: 1px solid var( --wp--preset--color--accent );
	padding: var( --wp--preset--spacing--sm ) var( --wp--preset--spacing--lg );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	cursor: not-allowed;
	white-space: nowrap;
}

.newsletter-form__input:disabled,
.newsletter-form__submit:disabled {
	opacity: 0.7;
}

.newsletter-form__note {
	margin: var( --wp--preset--spacing--xs ) 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--text-muted );
}

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

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

	.headline-grid__hero {
		grid-column: 1 / -1;
		order: 1;
	}

	.headline-grid__supporting {
		flex-direction: row;
		order: 2;
	}

	.headline-grid__supporting .supporting-card {
		flex: 1;
	}

	.headline-grid__popular {
		grid-column: 1 / -1;
		order: 3;
	}

	.editor-picks-grid,
	.news-channels-grid,
	.literature-grid,
	.opinions-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.media-grid {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}

	.media-card--large {
		grid-column: 1 / -1;
	}

	.newsletter__inner {
		grid-template-columns: 1fr;
	}

	.newsletter-form__input {
		min-width: 0;
		flex: 1;
	}
}

@media ( max-width: 767px ) {
	/*
	 * Stage 19F QA ponsel fisik: sebelumnya kolom tunggal (thumbnail
	 * full-width lalu teks di bawah) — sama seperti catatan .archive-card
	 * di archive.css, ini valid 100% lebar tapi thumbnail besar
	 * mendominasi tinggi kartu dan terasa boros ruang di layar sempit.
	 * Diganti jadi grid horizontal thumbnail-kiri (~34%) + teks kanan,
	 * konsisten dengan perbaikan .archive-card. minmax(0, 34%)/minmax(0,1fr)
	 * — bukan 34%/1fr biasa — supaya kedua track tetap bisa menyusut di
	 * bawah lebar intrinsik kontennya sendiri (root cause overflow yang
	 * sama dengan catatan grid archive-grid/latest-news-item di atas).
	 */
	.latest-news-item {
		grid-template-columns: minmax( 0, 34% ) minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--sm );
	}

	.latest-news-item__title {
		font-size: var( --wp--preset--font-size--section-title );
	}

	/* Excerpt disembunyikan di kartu kompak ini — lihat catatan
	   .archive-card__excerpt di archive.css, alasan sama. */
	.latest-news-item__excerpt {
		display: none;
	}

	.editor-picks-grid,
	.news-channels-grid,
	.literature-grid,
	.opinions-grid,
	.media-grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.media-card--large {
		grid-column: auto;
	}

	.headline-grid__supporting {
		flex-direction: column;
	}
}

@media ( max-width: 390px ) {
	.newsletter-form {
		flex-direction: column;
	}

	.newsletter-form__input {
		width: 100%;
		border-right: 1px solid var( --wp--preset--color--text-muted );
	}

	.newsletter-form__submit {
		width: 100%;
	}
}