/* Strona "Kontakt": Sekcja 1 (hero). Renderowana przez page-kontakt.php,
   ladowana wylacznie przez odwolai_v2_is_contact_page(). Wszystkie
   selektory izolowane pod .oai-site .oai-contact-hero, osobna przestrzen
   klas od pozostalych podstron. Sekcja 2 ("W czym mozemy pomoc?") nie
   zostala jeszcze wdrozona - ten plik zawiera wylacznie CSS Sekcji 1
   (Hero), zgodnie z zakresem biezacego zadania.

   Uklad dwukolumnowy (tresc kontaktowa / modul pomocniczy) wlacza sie od
   1024px, ten sam prog dwukolumnowy uzywany konsekwentnie na pozostalych
   podstronach projektu (np. .oai-about-hero). Ponizej tego progu (caly
   tablet i mobile) hero jest w pelni jednokolumnowe: tresc nad modulem
   pomocniczym.

   Modul pomocniczy (".oai-contact-hero__help") to jedna wspolna, otwarta
   ramka (border + radius-l, ten sam mechanizm co ".oai-about-hero__dossier")
   zawierajaca dokladnie dwa "otwarte wiersze"-linki. Kazdy wiersz to
   pojedynczy <a>, ktory obejmuje caly klikalny obszar (ten sam wzorzec co
   juz zaakceptowany ".oai-problems-damages-starting-point__link": strzalka
   ::before nie jest uzywana, zamiast tego znak kierunkowy zbudowany z
   border-right + border-top + rotate(45deg), z wlasnym focus-visible i bez
   agresywnego hover). Nagle "Jak dziala OdwolAI?" i "Nie wiesz, od czego
   zaczac?" sa stylizowane jako pogrubiony tekst (span), nie jako naglowki
   H3 - zgodnie z planem, ktory rezerwuje H2/H3 wylacznie dla przyszlej
   Sekcji 2 i wprost okresla, ze Hero nie ma zaburzac glownej hierarchii
   naglowkow strony (dokladnie jeden H1 na stronie). */

.oai-site .oai-contact-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-contact-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-contact-hero__breadcrumb {
	width: 100%;
	margin: 0 0 32px;
}

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

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

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

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

.oai-site .oai-contact-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-contact-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-contact-hero__breadcrumb-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Uklad: tresc kontaktowa + modul pomocniczy (jednokolumnowo do 1024px) */

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

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

.oai-site .oai-contact-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-contact-hero__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

/* Modul kontaktowy: etykieta E-MAIL + adres + jeden przycisk CTA */

.oai-site .oai-contact-hero__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.oai-site .oai-contact-hero__contact-label {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-contact-hero__contact-email {
	margin: 0 0 4px;
	max-width: 100%;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
	word-break: break-word;
	transition: text-decoration-thickness var(--oai-transition-fast);
}

.oai-site .oai-contact-hero__contact-email:hover {
	text-decoration-thickness: 2px;
}

html[data-oai-input="keyboard"] .oai-site .oai-contact-hero__contact-email:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

.oai-site .oai-contact-hero__cta {
	margin-top: 8px;
	width: 100%;
}

/* Modul pomocniczy: jedna wspolna otwarta ramka + dwa klikalne wiersze */

.oai-site .oai-contact-hero__help {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	padding: 24px 24px 4px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-contact-hero__help-label {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-contact-hero__help-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oai-site .oai-contact-hero__help-link {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 20px 36px 20px 0;
	color: inherit;
	text-decoration: none;
	transition: background-color var(--oai-transition-fast);
}

.oai-site .oai-contact-hero__help-item + .oai-contact-hero__help-item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-contact-hero__help-link:hover {
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-contact-hero__help-name {
	display: block;
	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-contact-hero__help-text {
	display: block;
	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-contact-hero__help-mark {
	position: absolute;
	top: 24px;
	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-contact-hero__help-link:hover .oai-contact-hero__help-mark {
	border-color: var(--oai-color-cyan);
	transform: translateX(3px) rotate(45deg);
}

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

/* Tablet od 768px: wieksza typografia, CTA szerokosci wlasnej */

@media (min-width: 768px) {
	.oai-site .oai-contact-hero {
		padding: 64px 40px;
	}

	.oai-site .oai-contact-hero__title {
		font-size: 2rem;
	}

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

	.oai-site .oai-contact-hero__cta {
		width: auto;
	}
}

/* Desktop od 1024px: dwie kolumny okolo 55/45 (zgodnie z planem sekcji
   Hero strony "Kontakt"), ten sam prog dwukolumnowy co pozostale
   podstrony projektu */

@media (min-width: 1024px) {
	.oai-site .oai-contact-hero__layout {
		display: grid;
		grid-template-columns: 55fr 45fr;
		align-items: start;
		gap: 48px;
	}

	.oai-site .oai-contact-hero__content {
		max-width: 100%;
	}

	.oai-site .oai-contact-hero__lead {
		max-width: 100%;
	}
}

@media (min-width: 1280px) {
	.oai-site .oai-contact-hero {
		padding: 80px 40px;
	}

	.oai-site .oai-contact-hero__title {
		font-size: 2.25rem;
	}
}

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

	.oai-site .oai-contact-hero__title {
		font-size: 1.5rem;
	}

	.oai-site .oai-contact-hero__contact-email {
		font-size: 1.125rem;
	}

	.oai-site .oai-contact-hero__help {
		padding: 20px 16px 4px;
	}

	.oai-site .oai-contact-hero__help-link {
		padding: 16px 30px 16px 0;
	}

	.oai-site .oai-contact-hero__help-mark {
		top: 18px;
		right: 0;
	}
}

/* ==========================================================================
   Sekcja 2: W czym mozemy pomoc

   Ostatnia planowana sekcja strony /kontakt/. Celowo inny rytm wizualny
   niz Hero: Hero uzywa dwukolumnowego gridu z zamknieta, obramowana ramka
   (radius-l) po prawej; Sekcja 2 uzywa ukladu "intro + otwarta lista
   dzielona cienkimi liniami", bez ramki, bez radius, bez tla-karty -
   dokladnie ten sam, juz zaakceptowany mechanizm co
   ".oai-about-principles" (intro po lewej ~36%, lista po prawej ~62% od
   1024px, jednokolumnowo ponizej tego progu). Wiersze NIE sa klikalne jako
   calosc - to sa akapity tresci z naturalnymi linkami tekstowymi w srodku
   (esc_html_e + <a> sklejone bez bialych znakow w kodzie PHP, cala spacja
   trzymana w literalach), nie linki-wiersze jak w module pomocniczym Hero.
   Lista jest <ul> (nie <ol>), bo trzy obszary nie tworza kolejnosci ani
   procesu.

   Nota o formularzu posprzedazowym (".oai-contact-help__item-note") ma
   celowo mniejszy ciezar: mniejszy font, subtelnie jasniejsze tlo
   (rgba navy 0.02, ten sam token uzywany jako delikatne tlo gdzie indziej
   w projekcie), cienka lewa linia w kolorze standardowego border-tokenu
   (nie cyjan, nie czerwony) - wyraznie inna od ostrzezenia/errora/CTA. */

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

.oai-site .oai-contact-help__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.oai-site .oai-contact-help__intro {
	min-width: 0;
	max-width: 480px;
}

.oai-site .oai-contact-help__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-contact-help__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-contact-help__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-contact-help__item {
	box-sizing: border-box;
	padding: 24px 0;
}

.oai-site .oai-contact-help__item + .oai-contact-help__item {
	border-top: 1px solid var(--oai-color-border);
}

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

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

.oai-site .oai-contact-help__link {
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	color: var(--oai-color-navy);
	font-weight: 600;
	text-decoration-line: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness var(--oai-transition-fast);
}

.oai-site .oai-contact-help__link:hover {
	text-decoration-thickness: 2px;
}

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

.oai-site .oai-contact-help__item-note {
	margin: 12px 0 0;
	max-width: 100%;
	padding: 10px 14px;
	border-left: 2px solid var(--oai-color-border);
	background-color: rgba(1, 2, 66, 0.02);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (min-width: 768px) {
	.oai-site .oai-contact-help {
		padding: 64px 40px;
	}

	.oai-site .oai-contact-help__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-contact-help__item {
		padding: 28px 0;
	}

	.oai-site .oai-contact-help__item-text {
		font-size: 1rem;
	}
}

/* Od 1024px: intro po lewej (~36%), lista po prawej (~62%) - ten sam,
   juz ugruntowany prog dwukolumnowy i te same proporcje co
   ".oai-about-principles", zeby zachowac spojny jezyk wizualny sekcji
   "intro + otwarta lista" w calym motywie. */

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

	.oai-site .oai-contact-help__intro {
		flex: 0 1 36%;
		max-width: 36%;
	}

	.oai-site .oai-contact-help__list {
		flex: 0 1 62%;
		max-width: 62%;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-contact-help {
		padding: 40px 16px;
	}

	.oai-site .oai-contact-help__item {
		padding: 20px 0;
	}

	.oai-site .oai-contact-help__item-note {
		padding: 8px 12px;
	}
}