/* Czytanie wpisu (moduł wpis-czytanie.php). */

/* Zdjęcie wyróżnione tak szerokie jak zdjęcia „szerokie” w treści. Te same -130 px, które Kadence 1.5.2
   daje .alignwide w układzie Narrow od 980 px. */
@media (min-width: 980px) {
	.single-post.content-width-narrow .article-post-thumbnail {
		margin-right: -130px;
		margin-left: -130px;
	}
}

/* Lead: pierwszy akapit wpisu albo pierwszy po karcie etapu. Przy innym bloku na początku nic się nie dzieje. */
.single-post .single-content > p:first-child,
.single-post .single-content > .mp-etap:first-child + p {
	color: var(--global-palette3);
	font-size: 21px;
	line-height: 1.6;
}

@media (max-width: 767px) {
	.single-post .single-content > p:first-child,
	.single-post .single-content > .mp-etap:first-child + p {
		font-size: 19px;
	}
}

/* Karta etapu (wzorzec „Karta etapu”): etykieta to pogrubienie na początku akapitu.
   Kadence jako motyw klasyczny owija treść grupy w .wp-block-group__inner-container, więc siatka idzie na niego. */
.mp-etap {
	margin-bottom: 40px;
	padding: 20px 0;
	border-top: 1px solid var(--global-palette7);
	border-bottom: 1px solid var(--global-palette7);
}

.mp-etap > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px 24px;
}

/* .single-content w selektorze, bo Kadence daje akapitom w treści margines 32 px silniejszą regułą. */
.single-content .mp-etap p,
.mp-etap p {
	margin: 0;
	color: var(--global-palette3);
	font-size: 16px;
	line-height: 1.4;
}

.mp-etap p strong {
	display: block;
	margin-bottom: 4px;
	color: var(--global-palette1);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Cytat „Pas na całą szerokość”: tło wychodzi do krawędzi ekranu cieniem przyciętym w pionie,
   więc nie rusza układu i nie daje przewijania w bok. */
.wp-block-quote.is-style-pas {
	margin: 64px 0;
	padding: 56px 0;
	border: 0;
	background: var(--global-palette8);
	box-shadow: 0 0 0 100vmax var(--global-palette8);
	text-align: center;
	clip-path: inset(0 -100vmax);
}

.wp-block-quote.is-style-pas p {
	color: var(--global-palette3);
	font-family: var(--global-heading-font-family);
	font-size: clamp(26px, 3vw, 34px);
	font-style: normal;
	font-weight: 600;
	line-height: 1.3;
}

.wp-block-quote.is-style-pas cite {
	display: block;
	margin-top: 16px;
	color: var(--global-palette5);
	font-size: 14px;
	font-style: normal;
}

/* Galeria „Mozaika”: pierwsze zdjęcie duże po lewej, pozostałe obok. Najlepiej przy trzech zdjęciach.
   Selektory z :not(#individual-image), bo tak WordPress liczy szerokość zdjęć w galerii. */
.wp-block-gallery.has-nested-images.is-style-mozaika {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 8px;
}

.wp-block-gallery.has-nested-images.is-style-mozaika figure.wp-block-image:not(#individual-image) {
	width: auto;
	margin: 0;
}

.wp-block-gallery.has-nested-images.is-style-mozaika figure.wp-block-image:first-child {
	grid-row: span 2;
}

.wp-block-gallery.has-nested-images.is-style-mozaika figure.wp-block-image img {
	height: 100%;
	object-fit: cover;
}

@media (max-width: 599px) {
	.wp-block-gallery.has-nested-images.is-style-mozaika {
		grid-template-columns: 1fr 1fr;
	}

	.wp-block-gallery.has-nested-images.is-style-mozaika figure.wp-block-image:first-child {
		grid-row: auto;
		grid-column: span 2;
	}
}