/*
 * Tekst i obraz — układ dwóch kolumn. Nagłówek, kontener, przycisk i warianty tła w tokens.css.
 * Wymiary z sekcji „Kilka słów o nas" (672:234–285) i podstron (690:997–1001): dwie kolumny
 * po 670 px z odstępem 30 px (275–945 i 975–1645), obraz zaczyna się na wysokości nagłówka.
 */

.wa-tekst-obraz__grid {
	display: grid;
	gap: var(--wa-space-xl);
}

.wa-tekst-obraz__text {
	max-width: 644px; /* 690:997 — tekst łamie się węziej niż kolumna */
	margin-top: 15px; /* 723 − (660 + 48), tyle samo na stronie głównej */
	font-size: var(--wa-font-body);
	line-height: var(--wa-line-normal);
}

.wa-tekst-obraz__text > * + * {
	margin-top: 20px; /* 672:280, 690:997 — odstęp akapitów */
}

/* Lead zamiast nagłówka (SKD 690:682): Ubuntu Bold 18/27, tekst 25 px niżej (690:675)
   i w pełnej szerokości kolumny 670, nie 644. */
.wa-tekst-obraz__lead {
	max-width: 664px;
	font-family: var(--wa-family-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wa-color-heading);
}

/* Lead zastępuje H2, więc w wariancie „Ciemny” bieleje jak nagłówek (tokens.css). */
.wa-section--ciemny .wa-tekst-obraz__lead {
	color: var(--wa-color-white);
}

.wa-tekst-obraz__lead + .wa-tekst-obraz__text {
	max-width: none;
	margin-top: 25px;
}

/* Ramki „Stałym” i „Doraźnym” (Obsługa teleinformatyczna 694:2430–2440, 2479, 2490):
   wstęp Lato Bold 20/24 18 px pod tekstem, ramki 670 px co 16 px, przycisk 40 px niżej.
   W ramce ikona 24 px od lewej i 25 od góry, tytuł i opis od 88 px (558 px szerokości),
   pierwsza linia 22 px od góry, 18 px pod ostatnią. Tło i tekst ramki własne, więc
   wariant „Ciemny” jej nie przebarwia; wstęp dziedziczy kolor sekcji. */
.wa-tekst-obraz__wstep {
	margin-top: 18px;
	font-size: var(--wa-font-lead);
	font-weight: 700;
	line-height: 24px;
}

/* (0,2,0) — przebija wcięcie list `.entry-content ul` Astry (0,1,1). */
.wa-tekst-obraz .wa-tekst-obraz__ramki {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.wa-tekst-obraz__ramka {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 21px 23px 17px; /* minus 1 px ramki */
	color: var(--wa-color-text);
	background-color: var(--wa-color-bg);
	border: 1px solid var(--wa-color-border);
	border-radius: 18px;
}

.wa-tekst-obraz__ramka + .wa-tekst-obraz__ramka {
	margin-top: 16px;
}

.wa-tekst-obraz__ramka-ikona {
	flex: none;
	align-self: flex-start; /* bez tego flex rozciąga ikonę na wysokość ramki */
	width: 48px;
	margin-top: 3px;
}

.wa-tekst-obraz__ramka-tytul {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 24px;
}

.wa-tekst-obraz__ramka-opis {
	line-height: var(--wa-line-normal);
}

/* Kroki (Wypożyczanie mierników 672:1157–1166): wstęp Lato Bold 16/24 25 px pod tekstem,
   kroki bez ramek, akapity co 30 px, tekst od 330 (kwadrat 39 + 16). Kwadrat 39×39 z promieniem 8
   stoi na środku tekstu kroku, w Figmie 1–2 px niżej. Kwadrat nie wpływa na wysokość kroku:
   jednowierszowy krok ma 24 px, jak w projekcie (1091 → 1145). */
.wa-tekst-obraz__wstep--kroki {
	margin-top: 25px;
	font-size: var(--wa-font-body);
}

.wa-tekst-obraz__ramki--kroki .wa-tekst-obraz__ramka {
	position: relative;
	display: block;
	padding: 0 0 0 55px;
	color: inherit;
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

.wa-tekst-obraz__ramki--kroki .wa-tekst-obraz__ramka + .wa-tekst-obraz__ramka {
	margin-top: 30px;
}

/* Ikona 2x w połowie wielkości (do 23 px) na środku kwadratu, bez powiększania. */
.wa-tekst-obraz__ramki--kroki .wa-tekst-obraz__ramka-ikona {
	position: absolute;
	top: calc(50% + 2px);
	left: 0;
	box-sizing: border-box;
	width: 39px;
	height: 39px;
	margin: 0;
	padding: 8px;
	object-fit: scale-down;
	background-color: var(--wa-color-primary);
	border-radius: 8px;
	transform: translateY(-50%);
}

.wa-tekst-obraz__ramki--kroki .wa-tekst-obraz__ramka-tytul {
	max-width: 612px; /* 672:1158 — te same łamania linii */
	font-size: var(--wa-font-body);
	font-weight: 400;
}

/* Z krokami tekst w pełnej kolumnie 670 (672:1153), nie 644 jak na podstronach usług. */
.wa-tekst-obraz__tresc:has(> .wa-tekst-obraz__ramki--kroki) > .wa-tekst-obraz__text {
	max-width: none;
}

/* „Możesz również skorzystać z linku…” (672:1156): pole 589 px, 32 px pod ostatnim krokiem. */
.wa-tekst-obraz__text--po-ramkach {
	margin-top: 32px;
}

/* (0,3,0) — po regule „max-width: none” wyżej, więc wygrywa. Tylko z krokami. */
.wa-tekst-obraz__tresc:has(> .wa-tekst-obraz__ramki--kroki) > .wa-tekst-obraz__text--po-ramkach {
	max-width: 589px;
}

/* Kod QR (672:1201) leży na dolnej krawędzi kolażu, 103 px od lewej, 164 px z 670 kolumny.
   Procenty od szerokości obrazu, więc kod skaluje się razem z kolażem.
   ponytail: położenie pasuje do kolażu z wolnym miejscem w lewym dolnym rogu; inna kompozycja
   potrzebowałaby pól na położenie kodu. */
.wa-tekst-obraz__media {
	position: relative;
}

.wa-tekst-obraz__qr {
	position: absolute;
	bottom: 0;
	left: 15.373%; /* 103 / 670 */
	width: 24.478%; /* 164 / 670 */
}

.wa-tekst-obraz__qr img {
	display: block;
	width: 100%;
	height: auto;
}

.wa-tekst-obraz__qr:focus-visible {
	outline: 3px solid var(--wa-color-primary-hover);
	outline-offset: 2px;
}

/* Akapity na całą szerokość pod kolumnami (672:1154–1155): 20 px pod niższą kolumną. */
.wa-tekst-obraz__pod {
	margin-top: 20px;
	line-height: var(--wa-line-normal);
}

.wa-tekst-obraz__pod > * + * {
	margin-top: 18px; /* 1371 + 24 → 1413 */
}

/* Podstrony: 34 px od ostatniej linii do przycisku (690:997 → 690:999). */
.wa-tekst-obraz__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 21px; /* 694:635 → 694:637: 502 → 523 */
	margin-top: 34px;
}

.wa-tekst-obraz__ramki + .wa-tekst-obraz__actions {
	margin-top: 40px; /* 1139 → 1179 */
}

.wa-tekst-obraz__image {
	display: block;
	width: 100%;
	height: auto;
}

/* Styl „kadr” (690:998): zdjęcie 670×512 z promieniem 22. Plik jest przycięty według kadru
   z Figmy, więc object-fit tylko dopasowuje go, gdy kolumna jest węższa niż 670. */
.wa-tekst-obraz__media--kadr .wa-tekst-obraz__image {
	aspect-ratio: 670 / 512;
	object-fit: cover;
	border-radius: var(--wa-radius-l);
}

/* Strona główna (672:280–284): nagłówek na 276, tekst na 277 i 647 px szeroki, przycisk
   37 px pod ostatnią linią (ramka tekstu w Figmie jest 3 px niższa niż 20 wierszy po 24 px
   z akapitami co 20). Tylko tam — CR 5a M5. */
.home .wa-tekst-obraz__tresc > .wa-section__title {
	margin-left: 1px;
}

.home .wa-tekst-obraz__text {
	max-width: 647px;
	margin-left: 2px;
}

.home .wa-tekst-obraz__actions {
	margin-top: 37px;
}

@media (min-width: 1200px) {
	/* Nad nagłówkiem „o nas" projekt ma 109 px (2173 → 2282), nie 100. Na podstronach
	   nagłówek stoi 100 px pod hero (560 → 660). */
	.home .wa-section.wa-tekst-obraz {
		padding-top: calc(var(--wa-space-section) + 9px);
	}

	/* Podstrony: nagłówek i przycisk na 272, tekst na 273 — 3 i 2 px przed siatką (690:1001, 690:997, 690:999),
	   w ramkach wzorca B2. Na węższych ekranach wszystko trzyma siatkę. */
	body:not(.home) .wa-tekst-obraz__tresc > .wa-section__title {
		margin-left: -3px;
	}

	body:not(.home) .wa-tekst-obraz__text {
		margin-left: -2px;
	}

	body:not(.home) .wa-tekst-obraz__actions {
		margin-left: -3px; /* przycisk na 272 (690:999) */
	}

	/* Z ramkami (Obsługa 694:2441, 694:2430): nagłówek i tekst na 275, równo z ramkami;
	   cofnięty zostaje tylko przycisk (694:2439 na 272). */
	body:not(.home) .wa-tekst-obraz__tresc:has(> .wa-tekst-obraz__ramki) > :is(.wa-section__title, .wa-tekst-obraz__text) {
		margin-left: 0;
	}

	/* Obraz po lewej (SKD 690:675, 690:682): tekst i lead dokładnie na 975, bez cofnięcia. */
	body:not(.home) .wa-tekst-obraz__grid--obraz-lewa .wa-tekst-obraz__text {
		margin-left: 0;
	}
}

@media (min-width: 60rem) {
	.wa-tekst-obraz__grid {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		align-items: start;
	}

	/* Z krokami (mierniki 672:1159, 672:1153): pole nagłówka 700 px wchodzi w odstęp między
	   kolumnami (dwie linie zamiast trzech), tekst 18 px pod nagłówkiem zamiast 15. Tylko tu,
	   żeby nie zmienić łamania nagłówków innych podstron. */
	/* Tylko z obrazem po prawej: po lewej nagłówek wyszedłby poza kontener. */
	.wa-tekst-obraz__grid--obraz-prawa .wa-tekst-obraz__tresc:has(> .wa-tekst-obraz__ramki--kroki) > .wa-section__title {
		margin-right: -30px;
	}

	.wa-tekst-obraz__tresc:has(> .wa-tekst-obraz__ramki--kroki) > .wa-section__title + .wa-tekst-obraz__text {
		margin-top: 18px;
	}

	/* „Od tekstu” (O firmie 672:577–578): obraz na 723, równo z pierwszą linią tekstu,
	   czyli o wiersz nagłówka (48/40) i 15 px odstępu niżej niż nagłówek na 660. */
	.wa-tekst-obraz__grid--od-tekstu:has(.wa-section__title) .wa-tekst-obraz__media {
		margin-top: calc(var(--wa-font-h2) * 1.2 + 15px);
	}
}

/* Obraz po lewej: media przed tekstem w kolejności wizualnej, na telefonie obraz nad tekstem
   (plan bramek B3, SKD). */
.wa-tekst-obraz__grid--obraz-lewa .wa-tekst-obraz__media {
	order: -1;
}

/* „Kilka słów o nas” na telefonie: dwa akapity i „Rozwiń tekst” (PM, Z12). Klasę is-clamped
   i przycisk dokłada rozwin-tekst.js; bez JS cały tekst widoczny. */
.wa-rozwin {
	display: none;
}

@media (max-width: 599px) {
	.wa-tekst-obraz__text.is-clamped > p:nth-of-type(n+3) {
		display: none;
	}

	.wa-tekst-obraz .wa-rozwin {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		margin: 0 0 12px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: var(--wa-color-text);
		font: inherit;
		font-weight: 600;
		line-height: 1.4;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.wa-tekst-obraz .wa-rozwin::after {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform .2s;
	}

	.wa-tekst-obraz .wa-rozwin[aria-expanded="true"]::after {
		transform: rotate(-135deg) translateY(-1px);
	}

	/* Telefon, e-mail i „linku” w krokach mierników (PM, Z15): pole dotyku 44 px,
	   adres e-mail bez łamania w środku. Klasa wa-link-dotyk w treści strony. */
	.wa-tekst-obraz a.wa-link-dotyk {
		position: relative;
		white-space: nowrap;
	}

	.wa-tekst-obraz a.wa-link-dotyk::after {
		content: "";
		position: absolute;
		inset: -14px -8px;
	}
}