/*
 * TheSybin — Kontakt (post 189, slug `kontakt`): templates/page.html (baner thesybin/page-hero) + treść
 * patterns/kontakt-info.php (S2 karty + dane spółki) i patterns/kontakt-form.php (S3 formularz CF7 500 + mapa po zgodzie + pasek B2B).
 * Faza LP: docs/STARE-STRONY.md §4 (K1–K3), K3 (cele przycisków B2B), K5 (mapa Google dopiero po zgodzie Cookiebot — assets/js/pages/kontakt.js).
 * Źródło: design-ref/spec/faq-kontakt.md część B; decyzje D1 (kolory, obramowanie pól), D6 (tel/mailto), D8 (mapa), D12 (formularz).
 * Komponenty bez kopiowania CSS: C1 etykieta (.is-style-ts-eyebrow), C2 nagłówek (.ts-heading), C3 przycisk (.ts-btn--plain),
 * C5 kółko ikony (.ts-icon-circle), ruch hover zdjęć (.ts-zoom, .ts-shine — motion.css), fokus i ciemny kontekst (base.css).
 * Punkty przełamania: tablet ≤1024, telefon ≤767.
 */

/* Odstępy robią kontenery (padding/gap) — bez domyślnego blockGap 20 px układu „flow” */
body.ts-page-kontakt :where(.ts-kontakt-info, .ts-kontakt-contact) :where(.is-layout-flow) > *,
body.ts-page-kontakt :where(.ts-kontakt-info, .ts-kontakt-contact):where(.is-layout-flow) > * {
	margin-block: 0;
}

/* Sekcje stoją jedna pod drugą bez odstępu układu „constrained” treści (20 px) */
.ts-page-kontakt .wp-block-post-content > .ts-kontakt-contact {
	margin-block-start: 0;
}

/* ==========================================================================
   Sekcja wspólna wzorca (padding 100/50 + kontener 1300 z kolumną 10 px): S2 góra 110/60, S2→S3 100/50, S3 dół 110/60
   ========================================================================== */

.ts-page-kontakt .wp-block-group.ts-kontakt-info {
	padding: 110px 20px 50px;
}

.ts-page-kontakt .wp-block-group.ts-kontakt-contact {
	padding: 50px 20px 110px;
}

.ts-page-kontakt :is(.ts-kontakt-info__cards, .ts-kontakt-box) {
	box-sizing: border-box;
	max-width: 1280px;
	margin-inline: auto;
}

/* ==========================================================================
   S2. Karty danych kontaktowych: zdjęcie 1/0,546 + gradient + treść na dole
   Siatka jednokomórkowa (zdjęcie i treść w tym samym polu): karta rośnie z treścią przy 320 px / odstępach tekstu (1.4.10, 1.4.12).
   ========================================================================== */

.ts-page-kontakt .ts-kontakt-info__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.ts-page-kontakt .wp-block-group.ts-contact-card {
	/* wysokość zdjęcia (1 / 0,546) i margines treści — dla gradientu zakotwiczonego w treści (::before bloku treści) */
	--ts-contact-img-h: 54.6cqw;
	--ts-contact-pad: 30px;
	container-type: inline-size;
	position: relative;
	isolation: isolate;
	display: grid;
	flex: 0 0 calc(33.33% - 20px);
	grid-template: auto / minmax(0, 1fr);
	min-width: 0;
	overflow: hidden;
	border-radius: var(--ts-radius-card);
}

/*
 * Gradient na zdjęciu (odstępstwo 1.4.3, docs/odstepstwa/kontakt.md). Wzorzec rgba(10,44,15,0) 48,11 % → .9 92,34 % dawał tytułom 1,65–2,82:1.
 * Dawniej motyw: 0 20 % → .5 45 % → .9 92,34 % wysokości zdjęcia (H) — stałe procenty nie wystarczały: gdy adres łamie się do 3–4 wierszy
 * (320–360 i 1025–1150 px), tytuł „Adres” wchodził nad ciemną strefę (1,22:1 @320, 1,25:1 @1025).
 * Teraz gradient rysuje ::before bloku treści (od dołu karty do 1000 px nad treścią, nadmiar przycina karta); H = 54,6cqw (karta = kontener).
 * Przystanki biorą wyżej położoną z dwóch pozycji (min): dawny procent H albo pozycję zakotwiczoną w górze treści
 * (.63 — 3 px nad treścią, .5 — 11 px, 0 — 63 px). Krycie ≥ .63 koloru rgba(10,44,15) daje białemu tekstowi ≥ 4,63:1 nawet na białym
 * pikselu zdjęcia — niezależnie od szerokości, liczby wierszy, metryk fontu i odstępów tekstu (1.4.12).
 */
.ts-page-kontakt .ts-contact-card__body::before {
	--ts-anchor: calc(1000px - 3px);
	content: "";
	position: absolute;
	z-index: -1;
	top: -1000px;
	right: calc(-1 * var(--ts-contact-pad) - 1px);
	bottom: calc(-1 * var(--ts-contact-pad));
	left: calc(-1 * var(--ts-contact-pad) - 1px);
	background: linear-gradient(
		180deg,
		rgba(10, 44, 15, 0) min(calc(100% - 0.8 * var(--ts-contact-img-h)), calc(var(--ts-anchor) - 60px)),
		rgba(10, 44, 15, 0.5) min(calc(100% - 0.55 * var(--ts-contact-img-h)), calc(var(--ts-anchor) - 8px)),
		rgba(10, 44, 15, 0.63) min(calc(100% - 0.3961 * var(--ts-contact-img-h)), var(--ts-anchor)),
		rgba(10, 44, 15, 0.9) calc(100% - 0.0766 * var(--ts-contact-img-h))
	);
	pointer-events: none;
}

.ts-page-kontakt .ts-contact-card .ts-contact-card__image {
	grid-area: 1 / 1;
	align-self: stretch;
	width: 100%;
	min-height: 0;
	margin: 0;
	aspect-ratio: 1 / 0.546;
}

.ts-page-kontakt .ts-contact-card .ts-contact-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ts-page-kontakt .ts-contact-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	grid-area: 1 / 1;
	align-items: center;
	align-self: end;
	gap: 20px;
	min-width: 0;
	/* margines górny działa tylko, gdy treść nie mieści się na zdjęciu (320 px, odstępy tekstu 1.4.12) — karta rośnie z odstępem od góry */
	margin: var(--ts-contact-pad);
}

.ts-page-kontakt .ts-contact-card__body .ts-icon-circle {
	transition:
		background-color 0.4s ease,
		color 0.4s ease;
}

.ts-page-kontakt .ts-contact-card__body .ts-icon-circle svg {
	width: 25px;
	height: 25px;
}

/* Hover na treści (ElementsKit): kółko białe, ikona #274A46 — odwrotnie niż C5 */
.ts-page-kontakt .ts-contact-card__body:is(:hover, :focus-within) .ts-icon-circle {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

.ts-page-kontakt .ts-contact-card__text {
	min-width: 0;
}

.ts-page-kontakt .ts-contact-card .ts-contact-card__title {
	margin: 0 0 5px;
	color: var(--wp--preset--color--white);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.ts-page-kontakt .ts-contact-card .ts-contact-card__value {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: 16px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.ts-page-kontakt .ts-contact-card__value a {
	color: inherit;
	text-decoration: none;
}

/* Adres w elemencie <address> (semantyka danych kontaktowych) — bez domyślnej kursywy przeglądarki */
.ts-page-kontakt address.ts-contact-card__value {
	font-style: normal;
}

/* Cały blok treści (ikona, tytuł, wartość) jest obszarem linku — jak wzorzec; zdjęcie nie jest klikalne */
.ts-page-kontakt .ts-contact-card__value a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 4px;
}

.ts-page-kontakt .ts-contact-card__value a:focus-visible {
	outline: none;
}

.ts-page-kontakt .ts-contact-card__value a:focus-visible::after {
	outline: 2px solid var(--ts-focus);
	outline-offset: 3px;
}

/* ---------- K2 Dane spółki (LP 260, 427) i link do deklaracji dostępności — pod kartami ---------- */

.ts-page-kontakt .wp-block-group.ts-kontakt-company {
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-sizing: border-box;
	max-width: 1280px;
	margin: 40px auto 0;
	padding-top: 30px;
	border-top: 1px solid var(--ts-divider);
}

.ts-page-kontakt .ts-kontakt-company > p {
	margin: 0;
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.ts-page-kontakt .ts-kontakt-company .ts-kontakt-company__data strong {
	color: var(--wp--preset--color--primary);
}

.ts-page-kontakt .ts-kontakt-company > .ts-kontakt-company__link {
	margin-top: 8px;
}

/* ==========================================================================
   S3. Ramka: formularz (50 %) + mapa (50 %); ≤1024 mapa pod formularzem
   ========================================================================== */

.ts-page-kontakt .wp-block-group.ts-kontakt-box {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border: 1px solid var(--ts-divider);
	border-radius: var(--ts-radius-card);
}

.ts-page-kontakt .wp-block-group.ts-kontakt-form {
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	gap: 15px;
	box-sizing: border-box;
	min-width: 0;
	padding: 40px;
	background-color: var(--wp--preset--color--white);
}

.ts-page-kontakt .ts-kontakt-form .ts-kontakt-form__title {
	margin-bottom: 25px;
}

.ts-page-kontakt .ts-kontakt-map {
	flex: 0 0 50%;
	min-width: 0;
}

.ts-page-kontakt .ts-kontakt-map__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Mapa po zgodzie (K5): ramka o wysokości kolumny, zaślepka z adresem do czasu zgody na cookies marketingowe ---------- */

.ts-page-kontakt .ts-kontakt-map > .ts-kontakt-map__frame,
.ts-page-kontakt .ts-kontakt-map__frame {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	min-height: 100%;
	background-color: var(--wp--preset--color--secondary);
}

.ts-page-kontakt .ts-kontakt-map__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	height: 100%;
	padding: 40px;
	text-align: center;
}

.ts-page-kontakt .ts-kontakt-map__placeholder > * {
	margin: 0;
}

.ts-page-kontakt .ts-kontakt-map__icon {
	margin-bottom: 10px;
}

/* Ikona lokalizacji (załącznik 447) jako maska w kółku C5 — dekoracja */
.ts-page-kontakt .ts-kontakt-map__icon::before {
	content: "";
	width: 26px;
	height: 26px;
	background-color: var(--wp--preset--color--white);
	-webkit-mask: var(--ts-mask) center / contain no-repeat;
	mask: var(--ts-mask) center / contain no-repeat;
}

.ts-page-kontakt .ts-kontakt-map__title {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--ts-fs-h3);
	font-weight: 700;
	line-height: 1.2;
}

.ts-page-kontakt .ts-kontakt-map__address {
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.7;
}

.ts-page-kontakt .ts-kontakt-map__text {
	max-width: 36em;
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 1.7;
}

.ts-page-kontakt .ts-kontakt-map__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 15px 30px;
	margin-top: 10px;
}

.ts-page-kontakt .ts-kontakt-map__frame.is-loaded .ts-kontakt-map__placeholder {
	display: none;
}

.ts-page-kontakt .ts-kontakt-map__frame .ts-kontakt-map__iframe {
	position: absolute;
	inset: 0;
}

.ts-page-kontakt .ts-kontakt-map__frame:focus-visible {
	outline: 2px solid var(--ts-focus);
	outline-offset: -4px;
}

/* ---------- Formularz Contact Form 7 (szablon formularza 500: .ts-form-grid / .ts-field) ---------- */

.ts-page-kontakt .ts-kontakt-form .wpcf7-form {
	margin: 0;
}

.ts-page-kontakt .ts-form-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px 30px;
}

.ts-page-kontakt .ts-form-grid > * {
	grid-column: 1 / -1;
	margin: 0;
}

.ts-page-kontakt .ts-form-grid > .ts-field--half {
	grid-column: auto;
}

/* CF7 dopisuje akapity (wpautop) wewnątrz pól */
.ts-page-kontakt .ts-form-grid p {
	margin: 0;
}

.ts-page-kontakt .ts-field {
	position: relative;
}

.ts-page-kontakt .ts-field .wpcf7-form-control-wrap {
	display: block;
}

/* Pole: przezroczyste, obramowanie #898C8C (D1, 3.09:1 — wzorzec rgba(39,74,70,.1) 1.18:1), radius 10, 60/50 px */
.ts-page-kontakt .ts-field :is(input, textarea) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 60px;
	margin: 0;
	padding: 17px 20px;
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: 10px;
	background-color: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--body-text);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.ts-page-kontakt .ts-field textarea {
	height: 108px;
	resize: none;
}

/* Etykieta pływająca: w spoczynku na miejscu placeholdera wzorca, po fokusie/wypełnieniu 12 px u góry pola (3.3.2) */
.ts-page-kontakt .ts-field__label {
	position: absolute;
	z-index: 1;
	top: 18px;
	left: 21px;
	max-width: calc(100% - 42px);
	overflow: hidden;
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	transition:
		top 0.2s ease,
		font-size 0.2s ease,
		line-height 0.2s ease;
}

.ts-page-kontakt .ts-field :is(input, textarea)::placeholder {
	color: transparent;
}

.ts-page-kontakt .ts-field:has(:is(input, textarea):is(:focus, :not(:placeholder-shown), :autofill)) .ts-field__label {
	top: 6px;
	font-size: 12px;
	line-height: 16px;
}

.ts-page-kontakt .ts-field :is(input, textarea):is(:focus, :not(:placeholder-shown), :autofill) {
	padding-top: 26px;
	padding-bottom: 8px;
}

.ts-page-kontakt .ts-field :is(input, textarea):focus-visible {
	border-color: var(--wp--preset--color--primary);
}

.ts-page-kontakt .ts-field :is(input, textarea)[aria-invalid="true"] {
	border-color: var(--ts-form-error);
}

/* Komunikaty CF7: błąd #D14446 (4.54:1; wzorzec #E65757 3.58:1), sukces #03881F (4.62:1; wzorzec #46B450 2.66:1) */
.ts-page-kontakt .ts-field .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--ts-form-error);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.ts-page-kontakt .ts-kontakt-form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 5px 10px;
	border: 1px solid var(--ts-form-error);
	border-radius: 30px;
	color: var(--ts-form-error);
	font-size: 16px;
	line-height: 1.4;
}

.ts-page-kontakt .ts-kontakt-form .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--ts-form-ok);
	color: var(--ts-form-ok);
}

/* Informacja o polach wymaganych: w odstępie 48 px między wiadomością a przyciskiem (bez zmiany wysokości formularza) */
.ts-page-kontakt .ts-form-grid > .ts-form-note {
	margin-block: -10.5px;
	color: var(--wp--preset--color--body-text);
	font-size: 14px;
	line-height: 21px;
}

/* Faza LP: dwie informacje pod polem wiadomości — pola wymagane i odesłanie do Polityki prywatności (RODO, STARE-STRONY §4 K3) */
.ts-page-kontakt .ts-form-grid > .ts-form-notes {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-block: -10.5px -4px;
}

.ts-page-kontakt .ts-form-notes .ts-form-note {
	margin: 0;
	color: var(--wp--preset--color--body-text);
	font-size: 14px;
	line-height: 21px;
}

.ts-page-kontakt .ts-form-notes .ts-form-note a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ts-page-kontakt .ts-form-submit .ts-btn {
	text-transform: capitalize;
}

.ts-page-kontakt .ts-form-submit .wpcf7-spinner {
	display: none;
}

/* ---------- Pasek współpracy pod ramką (C8; LP 231, 74; K3: „POROZMAWIAJMY” → formularz B2B, „WSPÓŁPRACA B2B” → strona) ---------- */

.ts-page-kontakt .wp-block-group.ts-kontakt-strip {
	box-sizing: border-box;
	max-width: 1280px;
	margin: 40px auto 0;
}

.ts-page-kontakt .ts-kontakt-strip .ts-kontakt-strip__text {
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 1.7;
}

/* Pigułka jest linkiem: tekst #102B28 na #BE8A3D (4.93:1), podkreślenie odróżnia link od etykiety (1.4.1), cel ≥ 24 px wys. (2.5.8) */
.ts-page-kontakt .ts-kontakt-strip .ts-pill a.ts-kontakt-strip__pill-link {
	display: inline-block;
	min-height: 24px;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ts-page-kontakt .ts-kontakt-strip .ts-pill a.ts-kontakt-strip__pill-link:focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

@media (hover: hover) {
	.ts-page-kontakt .ts-kontakt-strip .ts-pill a.ts-kontakt-strip__pill-link:hover {
		text-decoration-thickness: 2px;
	}
}

/* ==========================================================================
   Tablet ≤1024
   ========================================================================== */

@media (max-width: 1024px) {
	.ts-page-kontakt .wp-block-group.ts-kontakt-info {
		padding: 60px 20px 25px;
	}

	.ts-page-kontakt .wp-block-group.ts-kontakt-contact {
		padding: 25px 20px 60px;
	}

	.ts-page-kontakt .wp-block-group.ts-contact-card {
		--ts-contact-pad: 20px;
		flex-basis: calc(50% - 15px);
	}

	.ts-page-kontakt .ts-contact-card__body {
		gap: 10px;
	}

	.ts-page-kontakt .wp-block-group.ts-kontakt-form {
		flex-basis: 100%;
		gap: 10px;
		padding: 30px;
	}

	.ts-page-kontakt .ts-kontakt-form .ts-kontakt-form__title {
		margin-bottom: 20px;
	}

	.ts-page-kontakt .ts-kontakt-map {
		flex-basis: 100%;
	}

	.ts-page-kontakt .ts-kontakt-map__iframe {
		height: 450px;
	}

	.ts-page-kontakt .ts-kontakt-map__frame {
		min-height: 450px;
	}

	.ts-page-kontakt .ts-kontakt-map__frame .ts-kontakt-map__iframe {
		height: 100%;
	}

	.ts-page-kontakt .ts-kontakt-map__placeholder {
		padding: 30px;
	}

	.ts-page-kontakt .wp-block-group.ts-kontakt-company {
		margin-top: 30px;
		padding-top: 20px;
	}

	.ts-page-kontakt .wp-block-group.ts-kontakt-strip {
		margin-top: 30px;
	}

	.ts-page-kontakt .ts-field :is(input, textarea) {
		height: 50px;
		padding: 12px 15px;
	}

	.ts-page-kontakt .ts-field textarea {
		height: 98px;
	}

	.ts-page-kontakt .ts-field__label {
		top: 13px;
		left: 16px;
		max-width: calc(100% - 32px);
	}

	/* Pole jednowierszowe 50 px: placeholder wzorca leży 1 px niżej niż w textarea (pomiar pikseli 768/390) */
	.ts-page-kontakt .ts-field:not(.ts-field--textarea) .ts-field__label {
		top: 14px;
	}

	.ts-page-kontakt .ts-field:has(:is(input, textarea):is(:focus, :not(:placeholder-shown), :autofill)) .ts-field__label {
		top: 4px;
	}

	.ts-page-kontakt .ts-field :is(input, textarea):is(:focus, :not(:placeholder-shown), :autofill) {
		padding-top: 21px;
		padding-bottom: 3px;
	}
}

/* ==========================================================================
   Telefon ≤767
   ========================================================================== */

@media (max-width: 767px) {
	.ts-page-kontakt .wp-block-group.ts-contact-card {
		flex-basis: 100%;
	}

	.ts-page-kontakt .ts-contact-card .ts-contact-card__title {
		font-size: 18px;
	}

	.ts-page-kontakt .wp-block-group.ts-kontakt-form {
		padding: 20px;
	}

	.ts-page-kontakt .ts-kontakt-map__iframe {
		height: 350px;
	}

	.ts-page-kontakt .ts-kontakt-map__frame {
		min-height: 350px;
	}

	.ts-page-kontakt .ts-kontakt-map__placeholder {
		padding: 30px 20px;
	}

	.ts-page-kontakt .ts-form-grid > .ts-field--half {
		grid-column: 1 / -1;
	}
}