/**
 * Pattern: Obraz prawy z opisem (image-with-description), Obraz lewy z opisem (image-with-description-left)
 * Układ dwukolumnowy: tekst (h2 + akapity) + obraz. Kolejność w HTML decyduje (tekst–obraz = prawy, obraz–tekst = lewy). Flex, bez inline.
 * Szerokość sekcji = sectionWidth, bez paddingu – tekst i krawędź zdjęcia przylegają do krawędzi.
 *
 * @package nbs-theme
 */

.nbs-image-with-description-wrapper,
.nbs-image-with-description-wrapper-left {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

/* Szerokość sectionWidth, z poziomym marginesem z theme.json */
section.wp-block-group.nbs-image-with-description {
	box-sizing: border-box;
	display: flow-root; /* zapobiega margin collapse */
	max-width: var(--wp--custom--section-width, 1140px);
	margin-top: var(--wp--custom--section-top-and-bottom-margin, 2rem);
	margin-bottom: var(--wp--custom--section-top-and-bottom-margin, 2rem);
	margin-left: var(--wp--custom--horizontal-section-margin, 24px);
	margin-right: var(--wp--custom--horizontal-section-margin, 24px);
}

.nbs-image-with-description__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
	width: 100%;
}

.nbs-image-with-description__text {
	flex: 0 1 45%;
	min-width: 280px;
	box-sizing: border-box;
}

/* Nagłówek h2 – styl z style.css (Oswald, 32px) jest globalny; tylko odstępy */
.nbs-image-with-description__text h2 {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.nbs-image-with-description__text .body-default {
	margin-top: 0;
	margin-bottom: 1rem;
}

.nbs-image-with-description__text .body-default:last-of-type {
	margin-bottom: 0;
}

/* Obraz rośnie (flex-grow: 1), żeby wypełnić resztę szerokości i przylegać do prawej krawędzi; gap tylko między tekstem a obrazem */
.nbs-image-with-description__image {
	flex: 1 1 50%;
	min-width: 280px;
	margin: 0;
	box-sizing: border-box;
}

.nbs-image-with-description__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	object-fit: cover;
}

/* Brak miejsca: układ kolumnowy. Obraz prawy → opis góra, zdjęcie dół. Obraz lewy → zdjęcie góra, opis dół. */
@media (max-width: 700px) {
	.nbs-image-with-description__inner {
		flex-direction: column;
	}
	/* Domyślnie (obraz z prawej): opis pierwszy, zdjęcie pod */
	.nbs-image-with-description__text {
		order: 1;
	}
	.nbs-image-with-description__image {
		order: 2;
	}
	/* Obraz z lewej: zdjęcie pierwsze (góra), opis pod */
	.nbs-image-with-description-wrapper-left .nbs-image-with-description__text {
		order: 2;
	}
	.nbs-image-with-description-wrapper-left .nbs-image-with-description__image {
		order: 1;
	}
}