/*
 * Szczegół aktualności — pas otwierający z obrazem wyróżniającym.
 *
 * Plik ładuje się wyłącznie na pojedynczym wpisie (functions.php), bo poza nim
 * nie ma co stylować, a docs/06 §17 chce zasobów per widok, nie globalnie.
 *
 * Układ jest bliźniaczy do pasa z `/aktualnosci/` (kg.css §27): pas na pełną
 * szerokość okna, treść w kontenerze o szerokości czytelniczej. Obraz stoi
 * w kadrze `.kg-poster`, więc nic nie zostaje przycięte (docs/05 §12.2) —
 * pionowy plakat dostaje rozmyte tło po bokach zamiast ucięcia.
 */

.kg-news-page {
	display: block;
}

.kg-news-hero {
	padding-block: clamp(20px, 3.5vw, 36px) clamp(24px, 4vw, 44px);
	border-bottom: 1px solid var(--wp--preset--color--border-warm);
	background: var(--wp--preset--color--surface-warm);
}

.kg-news-hero__inner,
.kg-news-page__inner {
	box-sizing: border-box;
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: clamp(16px, 3.5vw, 40px);
}

.kg-news-page__inner {
	padding-top: clamp(28px, 4vw, 48px);
}

.kg-news-hero .kg-breadcrumb {
	margin: 0 0 18px;
}

/*
 * Wysokość kadru bierze się z realnych proporcji pliku (`--kg-poster-ratio`
 * ustawia PHP), a `max-height` pilnuje, żeby pionowe zdjęcie nie zepchnęło
 * tytułu poza ekran. Telefon dostaje niższy limit, bo tam liczy się każdy
 * piksel nad linią zgięcia.
 */
.kg-news-hero__media {
	margin-bottom: clamp(20px, 3vw, 28px);
}

.kg-news-hero__media .kg-poster {
	width: 100%;
	aspect-ratio: var(--kg-poster-ratio, 3 / 2);
	max-height: min(60vh, 560px);
	border-radius: var(--kg-radius-lg);
	box-shadow: 0 18px 44px rgba(23, 33, 43, .14);
}

.kg-news-hero__text {
	max-width: 70ch;
}

.kg-news-hero__text .kg-eyebrow {
	margin: 0 0 8px;
}

.kg-news-hero__text h1 {
	margin: 0 0 12px;
}

.kg-news-hero__text .kg-news-detail__date {
	margin: 0;
	font-size: 15px;
}

.kg-news-hero__text .kg-lead {
	margin: 14px 0 0;
}

@media (max-width: 767px) {
	.kg-news-hero__media .kg-poster {
		max-height: min(52vh, 420px);
		border-radius: var(--kg-radius-md);
	}
}

/* Wydruk nie potrzebuje rozmytego tła kadru ani cienia. */
@media print {
	.kg-news-hero {
		border-bottom: 0;
		background: none;
	}

	.kg-news-hero__media .kg-poster {
		max-height: 12cm;
		box-shadow: none;
	}
}