/**
 * Sekcja: usługi – czarne tło, 5 bloków usług (wzorzec patterns/section-services.php, blok: patterns/service-row.php;
 * Figma 951:11626). Blok: grafitowe tło, tekst 422 px + zdjęcia 266×395 (dwa) albo 556×395 (jedno);
 * wariant kd-service--reverse – zdjęcia po lewej.
 */

.kd-services .kd-services__title {
	margin: 0;
}

.kd-services .kd-services__list {
	width: 100%;
	max-width: 1205px;
	margin-inline: auto;
}

.kd-service {
	box-sizing: border-box;
	width: 100%;
	padding: 16px 16px 16px 64px;
	border-radius: var(--wp--preset--border-radius--medium);
}

.kd-service.kd-service--reverse {
	padding: 16px 64px 16px 16px;
}

.kd-service .kd-service__text {
	flex: 0 1 450px;
	min-width: 0;
}

.kd-service .kd-service__title {
	margin: 0;
	color: inherit;
}

.kd-service .kd-service__list {
	line-height: 1.4;
}

.kd-service .kd-service__text .wp-block-buttons {
	gap: 13px;
}

.kd-service .kd-service__media {
	flex: 0 1 auto;
	gap: 24px;
	min-width: 0;
}

.kd-service .kd-service__image {
	margin: 0;
	line-height: 0;
}

.kd-service .kd-service__image img {
	width: 266px;
	height: 395px;
	border-radius: var(--wp--preset--border-radius--medium);
	object-fit: cover;
}

.kd-service .kd-service__media--single .kd-service__image img {
	width: 556px;
}

@media (max-width: 1279px) and (min-width: 782px) {
	.kd-service .kd-service__image img {
		width: 200px;
		height: 320px;
	}

	.kd-service .kd-service__media--single .kd-service__image img {
		width: 424px;
	}
}

@media (max-width: 1023px) {
	.kd-service,
	.kd-service.kd-service--reverse {
		flex-direction: column;
		align-items: stretch;
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	/* Zdjęcia zawsze pod tekstem. */
	.kd-service.kd-service--reverse .kd-service__media {
		order: 2;
	}

	.kd-service .kd-service__text {
		flex: 0 0 auto;
	}

	.kd-service .kd-service__media {
		justify-content: stretch;
	}

	.kd-service .kd-service__image {
		flex: 1 1 0;
	}

	.kd-service .kd-service__image img,
	.kd-service .kd-service__media--single .kd-service__image img {
		width: 100%;
		height: auto;
		aspect-ratio: 266 / 395;
	}

	.kd-service .kd-service__media--single .kd-service__image img {
		aspect-ratio: 556 / 395;
	}
}

@media (max-width: 599px) {
	.kd-service .kd-service__media {
		gap: var(--wp--preset--spacing--20);
	}

	.kd-service .kd-service__image img {
		aspect-ratio: 3 / 4;
	}
}