/* Strona indeksowa "Problemy i szkody": Sekcja 1 (hero). Renderowana przez
   page-problemy-i-szkody.php, ladowana wylacznie przez
   odwolai_v2_is_problems_damages_page(). Wszystkie selektory izolowane pod
   .oai-site .oai-problems-damages-hero, oddzielna przestrzen klas od
   pozostalych osmiu podstron klastra, bez wycieku stylow. Sekcje 2-5 tej
   strony nie zostaly jeszcze wdrozone - ten plik zawiera wylacznie CSS
   Sekcji 1, zgodnie z zakresem biezacego zadania.

   Koncepcja: "Dwie drogi, jeden punkt wyboru". Brak fotografii, grafiki AI,
   ikon i numeracji - zamiast modulu wizualnego z obrazem (jak na pozostalych
   osmiu podstronach), prawa strefa hero zawiera dwie rownorzedne funkcjonalnie
   sciezki wyboru jako pelne obszary klikalne (<a>), zawsze ulozone pionowo
   jedna nad druga (na kazdej szerokosci) - "dwie czesci jednego modulu",
   zgodnie z planem. Sciezka 1 ma pelne granatowe tlo i biala typografie,
   sciezka 2 jasne tlo z delikatnym cyjanowym odcieniem i granatowa
   typografie - celowe zroznicowanie kolorystyczne zamiast dwoch identycznych
   kart z tym samym cieniem, tak jak wymaga plan. Maly dekoracyjny znak
   kierunkowy (strzalka wykonana czysto w CSS, ta sama technika co istniejace
   szewrony w .oai-nav__trigger/.oai-mobile-nav__trigger) jest wylacznie
   pseudo-elementem ::after - nie wchodzi do drzewa dostepnosci, nie zastepuje
   tekstu linku i nie sugeruje kolejnosci chronologicznej.

   Uklad dwukolumnowy (tresc po lewej, modul dwoch sciezek po prawej) wlacza
   sie od 1024px, ten sam prog co hero pozostalych osmiu podstron klastra.
   Ponizej tego progu (w tym caly tablet) hero jest w pelni jednokolumnowe:
   tresc nad modulem sciezek, sciezka 1 nad sciezka 2 - dokladnie kolejnosc
   DOM wymagana rowniez na mobile. Prog dwoch sciezek obok siebie na tablecie
   zostal celowo pominiety (plan dopuszcza to wylacznie warunkowo, "na
   szerokosci, na ktorej tekst nie jest sciskany") - bez dostepu do
   rzeczywistego renderu nie da sie bezpiecznie potwierdzic braku sciskania
   opisow sciezek na typowym tablecie, wiec zastosowano bezpieczny,
   jednokolumnowy wariant az do 1024px, zgodnie z ta sama ostrozna zasada
   stosowana konsekwentnie w calym projekcie. Breadcrumb ma tu wylacznie dwa
   poziomy (Strona glowna, biezaca "Problemy i szkody") - w odroznieniu od
   trzypoziomowego breadcrumba na pozostalych osmiu podstronach - bo ta
   strona jest samym wezlem "Problemy i szkody" w hierarchii, nie jej
   dzieckiem. Breadcrumby pozostalych osmiu, juz zaakceptowanych podstron nie
   zostaly zmienione w tym zadaniu (poza zakresem). */

.oai-site .oai-problems-damages-hero {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-problems-damages-hero__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

/* Breadcrumb (dwa poziomy: strona glowna, biezaca) */

.oai-site .oai-problems-damages-hero__breadcrumb {
	width: 100%;
	margin: 0 0 32px;
}

.oai-site .oai-problems-damages-hero__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-problems-damages-hero__breadcrumb-item {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 1.4;
}

.oai-site .oai-problems-damages-hero__breadcrumb-item + .oai-problems-damages-hero__breadcrumb-item > .oai-problems-damages-hero__breadcrumb-current::before {
	content: "/\00A0";
	margin: 0 8px 0 8px;
	font-size: 14px;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-problems-damages-hero__breadcrumb-current {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-problems-damages-hero__breadcrumb-link {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
	text-decoration: none;
	transition: color var(--oai-transition-fast), text-decoration-color var(--oai-transition-fast);
}

.oai-site .oai-problems-damages-hero__breadcrumb-link:hover {
	color: var(--oai-color-navy);
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-problems-damages-hero__breadcrumb-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Uklad: tresc + modul dwoch sciezek */

.oai-site .oai-problems-damages-hero__layout {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-problems-damages-hero__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-problems-damages-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-problems-damages-hero__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.22;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-hero__lead {
	margin: 0;
	max-width: 560px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-hero__paths {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-problems-damages-hero__path {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 28px 52px 28px 28px;
	border-radius: var(--oai-radius-l);
	text-decoration: none;
	transition: box-shadow var(--oai-transition-fast), background-color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-problems-damages-hero__path::after {
	content: "";
	position: absolute;
	top: 30px;
	right: 28px;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.7;
}

.oai-site .oai-problems-damages-hero__path--primary {
	background-color: var(--oai-color-navy);
	color: var(--oai-color-white);
}

.oai-site .oai-problems-damages-hero__path--primary:hover {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

.oai-site .oai-problems-damages-hero__path--secondary {
	background-color: rgba(33, 225, 253, 0.06);
	border: 1px solid var(--oai-color-border);
	color: var(--oai-color-navy);
}

.oai-site .oai-problems-damages-hero__path--secondary:hover {
	border-color: var(--oai-color-cyan);
	background-color: rgba(33, 225, 253, 0.12);
}

html[data-oai-input="keyboard"] .oai-site .oai-problems-damages-hero__path:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
}

.oai-site .oai-problems-damages-hero__path-title {
	display: block;
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-hero__path--primary .oai-problems-damages-hero__path-desc {
	color: rgba(255, 255, 255, 0.82);
}

.oai-site .oai-problems-damages-hero__path--secondary .oai-problems-damages-hero__path-desc {
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-problems-damages-hero__path-desc {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.55;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Tablet od 768px: wieksza typografia, modul sciezek wciaz w jednej
   kolumnie pod trescia (patrz uzasadnienie na poczatku bloku) */

@media (min-width: 768px) {
	.oai-site .oai-problems-damages-hero {
		padding: 72px 40px;
	}

	.oai-site .oai-problems-damages-hero__title {
		font-size: 1.875rem;
	}

	.oai-site .oai-problems-damages-hero__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-problems-damages-hero__path {
		padding: 32px 56px 32px 32px;
	}
}

/* Desktop od 1024px: dwie strefy hero obok siebie, tresc po lewej (ok. 44%),
   modul dwoch sciezek po prawej (ok. 56%) - sciezki nadal ulozone pionowo
   wewnatrz swojego modulu, "dwie czesci jednego modulu" zgodnie z planem */

@media (min-width: 1024px) {
	.oai-site .oai-problems-damages-hero__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 56px;
	}

	.oai-site .oai-problems-damages-hero__content {
		flex: 0 1 44%;
		padding-top: 4px;
	}

	.oai-site .oai-problems-damages-hero__paths {
		flex: 1 1 56%;
		max-width: 100%;
	}

	.oai-site .oai-problems-damages-hero__title {
		font-size: 2.125rem;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-problems-damages-hero {
		padding: 40px 16px;
	}

	.oai-site .oai-problems-damages-hero__path {
		padding: 22px 44px 22px 20px;
	}

	.oai-site .oai-problems-damages-hero__path::after {
		top: 24px;
		right: 20px;
	}
}

/* Sekcja 2: "Problem z decyzja lub wycena". Otwarty indeks, nie siatka kart -
   zadna z czterech pozycji nie ma wlasnego tla, ramki ani cienia. Jedna
   wspolna lista <ul> z cienkimi separatorami (border-bottom na kazdym
   <a>, usuniety na ostatniej pozycji), a nie cztery osobne kafelki. Cala
   nazwa, opis i znak kierunkowy kazdej pozycji siedza wewnatrz jednego
   <a>, wiec caly wiersz jest klikalny i dostepny z klawiatury bez
   dodatkowych atrybutow.

   Znak kierunkowy uzywa dokladnie tej samej techniki co strzalka w
   sciezkach Hero tej samej strony (border-right + border-top,
   rotate(45deg), position:absolute z ustalonym przesunieciem top/right,
   a nie procentowe centrowanie przez transform:translateY, zeby uniknac
   laczenia dwoch wartosci transform) - ta sama, spojna technika w calej
   stronie. Hover: delikatne podbicie tla wiersza, zmiana koloru separatora
   i znaku na cyjan oraz niewielkie przesuniecie znaku w prawo - dokladnie
   w granicach dopuszczonych przez plan, bez unoszenia wiersza, cieni,
   skalowania ani animacji sprezynowych. Globalna regula
   prefers-reduced-motion (main.css, .oai-site * { transition: none }) juz
   wylacza to przejscie automatycznie, bez potrzeby osobnej reguly tutaj.

   Uklad 30/70 (intro / lista) wlacza sie od 1024px, tego samego progu co
   dwukolumnowy uklad Hero na tej stronie - spojne, jedno miejsce decyzji
   o przejsciu do wielu kolumn. scroll-margin-top ustawiony zgodnie z
   rzeczywistymi zmiennymi i progiem sticky headera z main.css (1201px,
   patrz .oai-header / @media (max-width: 1200px) tamze), tak samo jak w
   juz zaakceptowanych sekcjach page-underpayment.css i
   page-document-examples.css - kotwica #problem-z-decyzja z Hero nigdy
   nie chowa sie pod headerem. */

.oai-site .oai-problems-damages-decision {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
	scroll-margin-top: calc(var(--oai-header-height-mobile) + 24px);
}

.oai-site .oai-problems-damages-decision__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-problems-damages-decision__layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.oai-site .oai-problems-damages-decision__intro {
	min-width: 0;
	max-width: 560px;
}

.oai-site .oai-problems-damages-decision__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-problems-damages-decision__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-decision__lead {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-decision__list {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-problems-damages-decision__link {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 22px 44px 22px 4px;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--oai-color-border);
	transition: background-color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-problems-damages-decision__link:hover {
	background-color: rgba(1, 2, 66, 0.03);
	border-bottom-color: var(--oai-color-cyan);
}

.oai-site .oai-problems-damages-decision__name {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-decision__desc {
	margin: 0;
	max-width: 560px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-decision__mark {
	position: absolute;
	top: 26px;
	right: 4px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--oai-color-navy-muted);
	border-top: 2px solid var(--oai-color-navy-muted);
	transform: rotate(45deg);
	transition: border-color var(--oai-transition-fast), transform var(--oai-transition-fast);
}

.oai-site .oai-problems-damages-decision__link:hover .oai-problems-damages-decision__mark {
	border-color: var(--oai-color-cyan);
	transform: translateX(3px) rotate(45deg);
}

html[data-oai-input="keyboard"] .oai-site .oai-problems-damages-decision__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: -2px;
}

@media (min-width: 768px) {
	.oai-site .oai-problems-damages-decision {
		padding: 64px 40px;
	}

	.oai-site .oai-problems-damages-decision__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-problems-damages-decision__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-problems-damages-decision__link {
		padding: 26px 48px 26px 8px;
	}

	.oai-site .oai-problems-damages-decision__mark {
		top: 30px;
		right: 8px;
	}
}

/* Desktop od 1024px: intro w waskiej lewej kolumnie (ok. 30%), lista w
   szerszej prawej czesci (ok. 70%), zgodnie z proporcja z planu - ten sam
   prog co dwukolumnowy uklad Hero tej samej strony */

@media (min-width: 1024px) {
	.oai-site .oai-problems-damages-decision__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 64px;
	}

	.oai-site .oai-problems-damages-decision__intro {
		flex: 0 1 30%;
		padding-top: 4px;
	}

	.oai-site .oai-problems-damages-decision__list {
		flex: 1 1 70%;
		max-width: 100%;
	}
}

@media (min-width: 1201px) {
	.oai-site .oai-problems-damages-decision {
		scroll-margin-top: calc(var(--oai-header-height-desktop) + 24px);
	}
}

@media (max-width: 360px) {
	.oai-site .oai-problems-damages-decision {
		padding: 40px 16px;
	}

	.oai-site .oai-problems-damages-decision__link {
		padding: 18px 36px 18px 0;
	}

	.oai-site .oai-problems-damages-decision__mark {
		top: 22px;
		right: 0;
	}
}

/* Sekcja 3: "Rodzaj szkody". Ta sama logika nawigacyjna co Sekcja 2 (otwarty
   indeks, pelny klikalny wiersz, jedna wspolna lista, cienkie separatory,
   znak kierunkowy), ale swiadomie NIE jest kopia Sekcji 2 z odwroconymi
   kolorami - rozni sie konstrukcyjnie, nie tylko kolorem tla:

   1) Tlo calej sekcji jest pelnym granatem (var(--oai-color-navy)), wiec
      wszystkie tokeny tekstu i separatorow sa tu inne niz w Sekcji 2:
      var(--oai-color-navy-muted) i var(--oai-color-border) sa granatowymi
      odcieniami przeznaczonymi do jasnych tel i na granacie byłyby prawie
      niewidoczne. Zamiast nich uzyto tego samego, juz zaakceptowanego w
      motywie wzorca jasnego tekstu/separatora na granatowym tle co w
      Sekcji 4 strony /zanizone-odszkodowanie/ (.oai-underpayment-causes,
      assets/css/page-underpayment.css): naglowki w bieli, lead i opisy w
      rgba(255,255,255,0.85), separatory w rgba(255,255,255,0.16).

   2) Od 1280px (prog celowo szerszy niz 1024px uzywany dla ukladu
      intro/lista, wybrany z ostroznosci - patrz punkt 3 nizej) kazdy
      wiersz listy dzieli sie dodatkowo na dwie wewnetrzne kolumny: nazwa
      w waskiej stalej kolumnie (~200px) i opis w szerszej kolumnie obok
      niej, ze znakiem kierunkowym przy prawej krawedzi calego wiersza.
      To jest rzeczywista roznica konstrukcyjna wzgledem Sekcji 2, gdzie
      nazwa zawsze siedzi nad opisem. Ponizej 1280px (caly tablet i wezszy
      desktop) nazwa wraca nad opis, dokladnie jak w Sekcji 2 - bez
      dostepu do rzeczywistego renderu nie da sie bezpiecznie potwierdzic,
      ze opis nie byłby sciskany w dwoch kolumnach na wezszych szerokosciach
      desktopa (np. 1024-1279px), wiec przyjeto bezpieczny, szerszy prog
      zamiast wymuszania dwoch kolumn wszedzie tam, gdzie w ogole jest
      miejsce na uklad 30/70.

   3) Intro otrzymuje subtelny pionowy cyjanowy akcent (border-left) na
      desktopie - jedyny dodatkowy element odroznienia od plaskiego intro
      Sekcji 2, celowo nie karta.

   Uklad 30/70 (intro/lista) wlacza sie od tego samego progu 1024px co w
   Sekcji 2 i Hero tej samej strony - jedno spojne miejsce decyzji o
   przejsciu do wielu kolumn w calej stronie. scroll-margin-top zbudowany
   dokladnie tym samym wzorcem co w Sekcji 2 (i jak w juz zaakceptowanych
   page-underpayment.css / page-document-examples.css), zeby kotwica
   #rodzaj-szkody z Hero nigdy nie chowala sie pod sticky headerem.

   Znak kierunkowy i mechanizm hover uzywaja dokladnie tej samej techniki
   co Sekcja 2 (border-right + border-top, rotate(45deg), stale przesuniecie
   top/right), z jedynymi zmianami: kolor bazowy jasny (zamiast
   navy-muted) i tlo hover jasne, niskiej krycia (zamiast ciemnego), bo
   dzialaja na granatowym, nie bialym tle. Przejscie krotkie
   (var(--oai-transition-fast)), wylaczane automatycznie przez juz
   istniejaca globalna regule prefers-reduced-motion w main.css - nie
   utworzono nowego systemu animacji. */

.oai-site .oai-problems-damages-damage-types {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-navy);
	scroll-margin-top: calc(var(--oai-header-height-mobile) + 24px);
}

.oai-site .oai-problems-damages-damage-types__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-problems-damages-damage-types__layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.oai-site .oai-problems-damages-damage-types__intro {
	min-width: 0;
	max-width: 560px;
}

.oai-site .oai-problems-damages-damage-types__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-problems-damages-damage-types__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-damage-types__lead {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-damage-types__list {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.oai-site .oai-problems-damages-damage-types__link {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 22px 44px 22px 4px;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	transition: background-color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-problems-damages-damage-types__link:hover {
	background-color: rgba(255, 255, 255, 0.04);
	border-bottom-color: var(--oai-color-cyan);
}

.oai-site .oai-problems-damages-damage-types__name {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-damage-types__desc {
	margin: 0;
	max-width: 560px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-damage-types__mark {
	position: absolute;
	top: 26px;
	right: 4px;
	width: 9px;
	height: 9px;
	border-right: 2px solid rgba(255, 255, 255, 0.6);
	border-top: 2px solid rgba(255, 255, 255, 0.6);
	transform: rotate(45deg);
	transition: border-color var(--oai-transition-fast), transform var(--oai-transition-fast);
}

.oai-site .oai-problems-damages-damage-types__link:hover .oai-problems-damages-damage-types__mark {
	border-color: var(--oai-color-cyan);
	transform: translateX(3px) rotate(45deg);
}

html[data-oai-input="keyboard"] .oai-site .oai-problems-damages-damage-types__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: -2px;
}

@media (min-width: 768px) {
	.oai-site .oai-problems-damages-damage-types {
		padding: 64px 40px;
	}

	.oai-site .oai-problems-damages-damage-types__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-problems-damages-damage-types__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-problems-damages-damage-types__link {
		padding: 26px 48px 26px 8px;
	}

	.oai-site .oai-problems-damages-damage-types__mark {
		top: 30px;
		right: 8px;
	}
}

/* Desktop od 1024px: intro w waskiej lewej kolumnie (ok. 30%), lista w
   szerszej prawej czesci (ok. 70%) - ten sam prog i proporcja co Sekcja 2
   i dwukolumnowy Hero tej samej strony. Subtelny pionowy cyjanowy akcent
   przy intro - jedyny dodatkowy element odroznienia od Sekcji 2 poza
   ukladem wiersza. */

@media (min-width: 1024px) {
	.oai-site .oai-problems-damages-damage-types__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 64px;
	}

	.oai-site .oai-problems-damages-damage-types__intro {
		flex: 0 1 30%;
		padding-top: 4px;
		padding-left: 20px;
		border-left: 2px solid rgba(33, 225, 253, 0.4);
	}

	.oai-site .oai-problems-damages-damage-types__list {
		flex: 1 1 70%;
		max-width: 100%;
	}
}

@media (min-width: 1201px) {
	.oai-site .oai-problems-damages-damage-types {
		scroll-margin-top: calc(var(--oai-header-height-desktop) + 24px);
	}
}

/* Od 1280px: rzeczywista roznica konstrukcyjna wzgledem Sekcji 2 - nazwa i
   opis tworza dwie wewnetrzne kolumny wewnatrz kazdego wiersza (nazwa w
   waskiej stalej kolumnie, opis w szerszej kolumnie obok), zamiast nazwy
   nad opisem. Prog celowo szerszy niz 1024px uzyte dla ukladu intro/lista -
   patrz uzasadnienie na poczatku bloku. */

@media (min-width: 1280px) {
	.oai-site .oai-problems-damages-damage-types__link {
		display: flex;
		align-items: flex-start;
		gap: 32px;
	}

	.oai-site .oai-problems-damages-damage-types__name {
		flex: 0 0 200px;
		margin: 0;
		padding-top: 2px;
	}

	.oai-site .oai-problems-damages-damage-types__desc {
		flex: 1 1 auto;
		max-width: 100%;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-problems-damages-damage-types {
		padding: 40px 16px;
	}

	.oai-site .oai-problems-damages-damage-types__link {
		padding: 18px 36px 18px 0;
	}

	.oai-site .oai-problems-damages-damage-types__mark {
		top: 22px;
		right: 0;
	}
}

/* Sekcja 4: "Punkt wyjscia". Trzecia, wyraznie odrebna konstrukcja na tej
   stronie - ani uklad Sekcji 2 (intro po lewej, otwarta lista po prawej),
   ani uklad Sekcji 3 (granatowe tlo, lista po prawej). Koncepcja: "Jeden
   punkt wyboru, trzy dokumenty".

   1) Intro (eyebrow + H2, bez leadu - zadanie tego wprost zakazuje) siedzi
      NAD wspolna konstrukcja segmentowa, nie obok niej - odwrotnie niz w
      Sekcji 2/3, gdzie intro jest kolumna przy liscie.

   2) Tlo calej sekcji jest biale (var(--oai-color-white)) - jasne, jak
      Sekcja 2, ale odrozniajace od bezposrednio poprzedzajacej granatowej
      Sekcji 3 przez naturalny kontrast jasne/ciemne, bez wprowadzania
      nowego, przypadkowego koloru.

   3) Trzy sytuacje (decyzja, odmowa, kosztorys) tworza jedno wspolne
      pasmo <ul> z gorna I dolna linia (border-top + border-bottom) oraz
      bardzo subtelnym wlasnym tlem (rgba(1,2,66,0.02), oparte na
      istniejacym granatowym tokenie) - w odroznieniu od otwartych,
      "niedomknietych" list Sekcji 2/3 (majacych wylacznie border-top,
      bo prowadza do dalszej tresci), to pasmo jest samodzielnym,
      zamknietym blokiem, co wizualnie podkresla "jeden wspolny punkt
      wyboru". Segmenty NIE tworza kart - brak wlasnego tla, ramki i
      cienia kazdego segmentu z osobna, tylko wspolne pasmo i separatory
      miedzy segmentami.

   4) Ponizej 1200px trzy sytuacje sa uloznone pionowo (jedna kolumna),
      oddzielone poziomymi liniami - dokladnie ten sam mechanizm co
      separatory Sekcji 2/3. Od 1200px (prog celowo szerszy niz progi
      dwoch kolumn uzyte gdzie indziej na tej stronie - 1024px - bo tutaj
      trzy kolumny musza pomiescic wyraznie dluzsze zdania niz krotkie
      opisy Sekcji 2/3, np. "Zacznij od strony (...) jezeli potrzebujesz
      szerszego kontekstu.") trzy sytuacje ukladaja sie w jednym rzedzie
      obok siebie, oddzielone pionowymi liniami zamiast poziomych. Bez
      dostepu do rzeczywistego renderu przyjeto ten szerszy, ostrozny
      prog, zeby unikanc sciskania tekstu w trzech waskich kolumnach na
      typowym, wezszym desktopie/laptopie.

   Znak kierunkowy i hover uzywaja dokladnie tej samej techniki co
   Sekcja 2 (jasne tlo, wiec te same tokeny co Sekcja 2, nie Sekcja 3):
   border-right + border-top, rotate(45deg), stale przesuniecie top/right,
   podbicie tla segmentu i zmiana koloru separatora/znaku na cyjan przy
   hover. Przejscie krotkie, wylaczane automatycznie przez juz istniejaca
   globalna regule prefers-reduced-motion w main.css.

   Sekcja nie ma wlasnej kotwicy Hero (zadanie tego nie wymaga), wiec nie
   ma tez wlasnego scroll-margin-top. */

.oai-site .oai-problems-damages-starting-point {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-problems-damages-starting-point__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-problems-damages-starting-point__intro {
	margin: 0 0 32px;
	max-width: 560px;
	min-width: 0;
}

.oai-site .oai-problems-damages-starting-point__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-problems-damages-starting-point__heading {
	margin: 0;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-starting-point__list {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	background-color: rgba(1, 2, 66, 0.02);
	border-top: 1px solid var(--oai-color-border);
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-problems-damages-starting-point__link {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 24px 44px 24px 20px;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--oai-color-border);
	transition: background-color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-problems-damages-starting-point__item:last-child .oai-problems-damages-starting-point__link {
	border-bottom: none;
}

.oai-site .oai-problems-damages-starting-point__link:hover {
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-problems-damages-starting-point__name {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-starting-point__text {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-starting-point__mark {
	position: absolute;
	top: 26px;
	right: 20px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--oai-color-navy-muted);
	border-top: 2px solid var(--oai-color-navy-muted);
	transform: rotate(45deg);
	transition: border-color var(--oai-transition-fast), transform var(--oai-transition-fast);
}

.oai-site .oai-problems-damages-starting-point__link:hover .oai-problems-damages-starting-point__mark {
	border-color: var(--oai-color-cyan);
	transform: translateX(3px) rotate(45deg);
}

html[data-oai-input="keyboard"] .oai-site .oai-problems-damages-starting-point__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: -2px;
}

@media (min-width: 768px) {
	.oai-site .oai-problems-damages-starting-point {
		padding: 64px 40px;
	}

	.oai-site .oai-problems-damages-starting-point__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-problems-damages-starting-point__link {
		padding: 28px 48px 28px 28px;
	}

	.oai-site .oai-problems-damages-starting-point__mark {
		top: 30px;
		right: 24px;
	}
}

/* Od 1200px: trzy sytuacje w jednym rzedzie, wewnatrz tego samego pasma
   <ul>, oddzielone pionowymi liniami zamiast poziomych. Prog celowo
   szerszy niz 1024px uzyty dla dwoch kolumn Sekcji 2/3 - patrz uzasadnienie
   na poczatku bloku. */

@media (min-width: 1200px) {
	.oai-site .oai-problems-damages-starting-point__list {
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-problems-damages-starting-point__item {
		flex: 1 1 33.333%;
		min-width: 0;
	}

	.oai-site .oai-problems-damages-starting-point__item + .oai-problems-damages-starting-point__item {
		border-left: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-problems-damages-starting-point__link {
		height: 100%;
		border-bottom: none;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-problems-damages-starting-point {
		padding: 40px 16px;
	}

	.oai-site .oai-problems-damages-starting-point__link {
		padding: 20px 36px 20px 16px;
	}

	.oai-site .oai-problems-damages-starting-point__mark {
		top: 22px;
		right: 16px;
	}
}

/* ==========================================================================
   Sekcja 5: Analiza Decyzji
   Krotki, spokojny modul zamykajacy strone: wyrownana do srodka,
   pojedyncza kolumna tresci (bez listy, bez zdjecia w tle, bez ukladu
   dwukolumnowego). Tlo w cieplym, jasnym odcieniu innym niz biale tlo
   Sekcji 4 - ten sam zabieg co w --oai-fire-decision-analysis-bg na
   stronie pozarowej, celowo powtorzony jako spojny jezyk wizualny dla
   modulow typu "Analiza Decyzji", ale jako lokalna zmienna tej strony.
   ========================================================================== */

.oai-site .oai-problems-damages-analysis {
	--oai-problems-damages-analysis-bg: #F7F6F3;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-problems-damages-analysis-bg);
	text-align: center;
}

.oai-site .oai-problems-damages-analysis__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-problems-damages-analysis__content {
	max-width: 560px;
	min-width: 0;
	margin: 0 auto;
}

.oai-site .oai-problems-damages-analysis__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-problems-damages-analysis__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	line-height: 1.28;
	font-weight: 700;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-analysis__text {
	margin: 0 0 28px;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-problems-damages-analysis__cta {
	margin: 0 0 16px;
}

.oai-site .oai-problems-damages-analysis__microcopy {
	margin: 0;
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (max-width: 600px) {
	.oai-site .oai-problems-damages-analysis__cta {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.oai-site .oai-problems-damages-analysis {
		padding: 64px 40px;
	}

	.oai-site .oai-problems-damages-analysis__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-problems-damages-analysis__text {
		font-size: 1.0625rem;
	}

	.oai-site .oai-problems-damages-analysis__cta {
		width: auto;
		min-width: 260px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-problems-damages-analysis {
		padding: 40px 16px;
	}
}