/**
 * Sekcja: oferta podstrony usługi – nagłówek (nadtytuł + „Tworzymy i obsługujemy:”) i bloki usług (service_row ze strony
 * głównej, CSS bloków: assets/sections/services/style.css) (tools/sections/uslugi.py → service_offer; Figma 3006:30129).
 * Na jasnym tle bloki zostają grafitowe; kd-offer--dark – czarne tło sekcji; kd-offer--arch – mniejsze zdjęcia (wizualizacje).
 */

.kd-offer .kd-offer__head .kd-section-head__title {
	font-size: var(--wp--preset--font-size--heading-3);
}

.kd-offer .kd-offer__list {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

/* Lista bloków na jasnym tle: tekst bloku jasny (blok ma własne ciemne tło). */
.kd-offer .kd-service .kd-service__list {
	color: var(--wp--preset--color--surface);
}

/* Wizualizacje: zdjęcia 411–431 px, jeden przycisk. */
.kd-offer--arch .kd-offer__list {
	max-width: 1121px;
}

.kd-offer--arch .kd-service {
	padding: 40px 32px 40px 64px;
}

.kd-offer--arch .kd-service .kd-service__media--single .kd-service__image img {
	width: 411px;
	height: auto;
	aspect-ratio: 3 / 2;
}

.kd-offer--arch {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

/* Niebieska poświata za blokami (dekoracja). */
.kd-offer--arch::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 45%;
	left: 50%;
	width: min(1900px, 140vw);
	height: 1000px;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, rgb(0 99 216 / 0.45), rgb(0 99 216 / 0.14) 55%, transparent);
	pointer-events: none;
}

@media (max-width: 1279px) and (min-width: 782px) {
	.kd-offer--arch .kd-service .kd-service__media--single .kd-service__image img {
		width: 340px;
	}
}

@media (max-width: 1023px) {
	.kd-offer--arch .kd-service {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.kd-offer--arch .kd-service .kd-service__media--single .kd-service__image img {
		width: 100%;
	}
}