/* ==========================================================================
   Wielkie hasło „Porozmawiajmy o Twojej marce” + moduł kontaktowy #kontakt
   (agencja/parts/kontakt.php): po lewej osoba i dane kontaktowe, po prawej
   formularz CF7 35 / EN 1104.

   Gdzie jest ładowany:
   - strony agencji (agencja/layout.php) — przed agencja.css, część siedzi w .g2c-page;
   - strona główna (front-page.php) i Referencje (page-partners.php) — sam, bez agencja.css,
     część siedzi w <div class="g2c-kontakt">.
   Dlatego ten plik ma własne podstawy: wspólny odstęp wielkich tytułów --g2c-title-gap
   (używa go też „More where that came from” w agencja.css) i siatkę .g2c-wrap.
   Motyw ma Bootstrap 3 + style.min.css, więc klasy mają prefiks g2c-, a markup CF7
   (Bootstrap for Contact Form 7) zostaje bez zmian i stylujemy go tylko wewnątrz
   .g2c-contact — JS CF7, honeypot i reCAPTCHA działają jak wszędzie. Font dziedziczony z motywu.
   ========================================================================== */

/* --- Podstawy --- */
.g2c-page,
.g2c-kontakt {
	/* Wspólny odstęp nad i pod wielkimi tytułami („More where that came from”, hasło przed modułem kontaktowym). */
	--g2c-title-gap: clamp(96px, 8.4vw, 160px);
}

/* Poza stronami agencji opakowanie daje to, co tam daje .g2c-page. */
.g2c-kontakt {
	color: #000;
	background-color: #fff;
}

.g2c-wrap {
	width: 100%;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 132px;
	padding-right: 132px;
}

@media (max-width: 1650px) {
	.g2c-wrap {
		padding-left: clamp(20px, 5vw, 132px);
		padding-right: clamp(20px, 5vw, 132px);
	}
}

/* --- Wielkie hasło (wygląd i odstępy jak „More where that came from”) --- */
.g2c-cta {
	margin-top: 0;
	margin-bottom: 0;
}

/* Odstęp liczony od tekstu, nie od pudełka linii: przy line-height 0.88 górna krawędź liter leży ok. 0,15–0,18 em
   pod pudełkiem, a ogonki (j, y) wystają ok. 0,21 em pod nie — kompensujemy to w em (zmierzone dla fontu motywu). */
.g2c-cta__title {
	--g2c-ink-top: 0.175em;
	--g2c-ink-bottom: -0.21em;
	margin: calc(var(--g2c-title-gap) - var(--g2c-ink-top)) 0 calc(var(--g2c-title-gap) - var(--g2c-ink-bottom));
	color: #000;
	font-size: clamp(72px, 10.5vw, 200px);
	font-weight: 400;
	line-height: 0.88;
	letter-spacing: -0.07em;
	text-align: center;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* Odstęp pod hasłem daje tytuł (--g2c-title-gap), więc moduł nie dokłada własnego marginesu. */
.g2c-cta + .g2c-contact {
	margin-top: 0;
}

@media (max-width: 768px) {
	/* Hasło jest dłuższe niż „More where…”: najdłuższe słowo („Porozmawiajmy” ≈ 6,5 em) musi zmieścić się
	   w szerokości siatki, więc font liczymy od niej — wychodzą 2 linie bez pojedynczego słowa na końcu. */
	.g2c-cta__title {
		font-size: min(96px, calc((100vw - 2 * max(20px, 5vw)) / 7));
		letter-spacing: -0.06em;
	}
}

/* --- Moduł kontaktowy #kontakt — w szerokości siatki (.g2c-wrap) --- */
.g2c-contact {
	margin-top: 120px;
	margin-bottom: 120px;
	scroll-margin-top: 100px; /* kotwica #kontakt nie chowa się pod stałym nagłówkiem */
}

.g2c-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	border-top: 1px solid #e9e9e9;
	border-bottom: 1px solid #e9e9e9;
}

.g2c-contact__person {
	padding: 70px clamp(40px, 5vw, 96px) 70px 0;
}

.g2c-contact__who {
	display: flex;
	align-items: center;
	gap: 28px;
}

.g2c-contact__avatar {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	filter: grayscale(100%);
}

.g2c-contact__name {
	color: #000;
	font-size: clamp(32px, 2.6vw, 52px);
	line-height: 1.1;
}

.g2c-contact__role {
	margin-top: 12px;
	color: #7a7a7a;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.g2c-contact__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 48px;
}

.g2c-contact__link,
.g2c-contact__link:visited {
	color: #000;
	font-size: clamp(22px, 1.8vw, 30px);
	line-height: 1.5;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.g2c-contact__link:hover,
.g2c-contact__link:focus {
	color: #000;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.g2c-contact__note {
	margin: 20px 0 0;
	color: #8a8a8a;
	font-size: 13px;
	line-height: 1.5;
}

.g2c-contact__form {
	padding: 70px 0 70px clamp(40px, 5vw, 96px);
	border-left: 1px solid #e9e9e9;
}

.g2c-contact__title {
	margin: 0 0 8px;
	color: #000;
	font-size: clamp(24px, 2vw, 32px);
	font-weight: 400;
	line-height: 1.2;
}

/* --- Formularz CF7 w module --- */
.g2c-contact .wpcf7-form {
	margin: 0;
	padding: 0;
}

/* Wiersze Bootstrapa (col-sm-6 / col-sm-12) jako flex: dwie kolumny z odstępem, bez ujemnych marginesów. */
.g2c-contact .wpcf7-form .row {
	display: flex;
	gap: 0 28px;
	margin: 0;
}

.g2c-contact .wpcf7-form .row::before,
.g2c-contact .wpcf7-form .row::after {
	display: none;
}

.g2c-contact .wpcf7-form .row > [class*="col-"] {
	flex: 1 1 0;
	float: none;
	width: auto;
	min-width: 0;
	padding: 0;
}

.g2c-contact .wpcf7-form .form-group {
	margin: 0;
}

.g2c-contact .wpcf7-form .form-control {
	height: auto;
	padding: 18px 0 12px;
	border: 0;
	border-bottom: 1px solid #d4d4d4;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #000;
	font-size: 17px;
	line-height: 1.4;
	transition: border-color 0.2s ease;
}

.g2c-contact .wpcf7-form .form-control::placeholder {
	color: #8a8a8a;
	opacity: 1;
}

.g2c-contact .wpcf7-form .form-control:focus {
	border-bottom-color: #000;
	outline: 0;
	box-shadow: none;
}

.g2c-contact .wpcf7-form textarea.form-control {
	height: 120px;
	resize: none;
}

/* Zgoda (label.check: kwadrat i „✓” rysuje motyw w header.php/footer.php, klasę .checked dodaje main.js). */
.g2c-contact .wpcf7-form label.check {
	display: flex;
	align-items: center;
	margin: 24px 0 0;
	color: #555;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.g2c-contact .wpcf7-form label.check a {
	color: #000;
}

/* Przycisk wysyłania jak na /kontakt/: czarny prostokąt 298 px, wersaliki, rozstrzelenie 3,6 px. */
.g2c-contact .wpcf7-form .wpcf7-submit {
	display: block;
	width: 100%;
	max-width: 298px;
	height: auto;
	margin: 28px 0 0;
	padding: 6px 12px;
	border: 1px solid #000;
	border-radius: 0;
	background: #000;
	box-shadow: none;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: all 0.5s;
}

.g2c-contact .wpcf7-form .wpcf7-submit:hover,
.g2c-contact .wpcf7-form .wpcf7-submit:focus,
.g2c-contact .wpcf7-form .wpcf7-submit:active,
.g2c-contact .wpcf7-form .wpcf7-submit:active:focus {
	border-color: #000;
	background: #fff;
	box-shadow: none;
	color: #000;
}

.g2c-contact .wpcf7-form .wpcf7-submit:focus-visible {
	outline: 2px solid #000;
	outline-offset: 3px;
}

/* CF7 blokuje przycisk, dopóki zgoda nie jest zaznaczona. Jak w reszcie motywu (opacity: 1) przycisk zostaje
   czarny — bez efektu hover i z kursorem „niedostępne”. */
.g2c-contact .wpcf7-form .wpcf7-submit:disabled,
.g2c-contact .wpcf7-form .wpcf7-submit:disabled:hover {
	border-color: #000;
	background: #000;
	color: #fff;
	opacity: 1;
	cursor: not-allowed;
}

/* Komunikat odpowiedzi CF7 (stan formularza CF7 ustawia jako klasę na <form>). */
.g2c-contact .wpcf7 .wpcf7-response-output {
	margin: 24px 0 0;
	border: 1px solid #000;
	border-radius: 0;
	background: #fff;
	color: #000;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

.g2c-contact .wpcf7 .wpcf7-response-output:not(:empty) {
	padding: 14px 18px !important;
}

.g2c-contact .wpcf7 .wpcf7-response-output:empty,
.g2c-contact .wpcf7 form.init .wpcf7-response-output,
.g2c-contact .wpcf7 form.resetting .wpcf7-response-output,
.g2c-contact .wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.g2c-contact .wpcf7 form.sent .wpcf7-response-output {
	border-color: #000;
	background: #000;
	color: #fff;
}

.g2c-contact .wpcf7 form.invalid .wpcf7-response-output,
.g2c-contact .wpcf7 form.unaccepted .wpcf7-response-output,
.g2c-contact .wpcf7 form.payment-required .wpcf7-response-output,
.g2c-contact .wpcf7 form.failed .wpcf7-response-output,
.g2c-contact .wpcf7 form.aborted .wpcf7-response-output,
.g2c-contact .wpcf7 form.spam .wpcf7-response-output {
	border-color: #b3261e;
	color: #b3261e;
}

/* Błędy pól. Ten markup nie ma .wpcf7-form-control-wrap, więc CF7 nie dopisuje dymków przy polach —
   zaznaczamy pola po nieudanej wysyłce (form.invalid) i po wyjściu z błędnie wypełnionego pola. */
.g2c-contact .wpcf7 form.invalid .form-control:invalid,
.g2c-contact .wpcf7 .form-control.wpcf7-not-valid {
	border-bottom-color: #b3261e;
}

.g2c-contact .wpcf7 .form-control:user-invalid {
	border-bottom-color: #b3261e;
}

.g2c-contact .wpcf7 form.unaccepted label.check::before {
	border-color: #b3261e;
}

.g2c-contact .wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #b3261e;
	font-size: 13px;
	line-height: 1.4;
}

/* Tablet: moduł jeden pod drugim, formularz nadal w dwóch kolumnach. */
@media (max-width: 991px) {
	.g2c-contact {
		margin-top: 70px;
		margin-bottom: 70px;
	}

	.g2c-contact__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.g2c-contact__person {
		padding: 50px 0 44px;
	}

	.g2c-contact__form {
		padding: 44px 0 50px;
		border-top: 1px solid #e9e9e9;
		border-left: 0;
	}

	.g2c-contact__links {
		margin-top: 36px;
	}
}

/* Telefon: wszystko jedno pod drugim. */
@media (max-width: 767px) {
	.g2c-contact__who {
		gap: 20px;
	}

	.g2c-contact__avatar {
		width: 72px;
		height: 72px;
	}

	.g2c-contact__name {
		font-size: 28px;
	}

	.g2c-contact .wpcf7-form .row {
		flex-direction: column;
	}

	/* W kolumnie flex-basis 0 + min-height: 1px z Bootstrapa zgniatały pola do zera. */
	.g2c-contact .wpcf7-form .row > [class*="col-"] {
		flex: 0 0 auto;
	}

	.g2c-contact .wpcf7-form .wpcf7-submit {
		max-width: none;
	}
}

/* ==========================================================================
   Wariant w szerokości siatki strony: .g2c-kontakt--contained (strona główna, Referencje).
   Część dostaje wtedy kontener motywu zamiast .g2c-wrap (parametr 'contained' w parts/kontakt.php):
   .container — Bootstrap 750 / 970 / 1170 px, motyw 1200 px od 1230 px, 15 px paddingu — a modyfikator
   strony dopasowuje go do jej siatki co do piksela:
   - .g2c-kontakt--home: jak .hp-realisations .container (front-page.php) — 1298 px od 1328 px, a poniżej
     992 px pełna szerokość z 25 px paddingu i kolumną kafli do 581 px na środku;
   - .g2c-kontakt--referencje: jak .partners .container (page-partners.php) — 1400 px od 1430 px.
   Hasło i odstępy wokół niego są wspólne dla obu stron (zmienne niżej), moduł ma ciaśniejsze wnętrze od 992 px.
   Poniżej 992 px układ jak na stronach agencji (wszystko jedno pod drugim).
   Strony agencji nie mają .g2c-kontakt--contained, więc tych reguł nie dostają.
   ========================================================================== */
.g2c-kontakt--contained {
	/* Odstęp wizualny nad i pod hasłem: od ostatniego elementu sekcji powyżej do liter i od liter do górnej
	   linii modułu (120 px przy 1440 px). */
	--g2c-title-gap: clamp(96px, 8.34vw, 128px);
	/* Rozmiar hasła: ok. 143 px przy 1440 px (+15% względem 124 px, 27.09), zawsze 2 linie (max-width niżej). */
	--g2c-contained-font: clamp(53px, 9.89vw, 143px);
	/* Ile z tego odstępu daje już sekcja powyżej, pod swoim ostatnim elementem (ustawia modyfikator strony). */
	--g2c-kontakt-above: 0px;
}

/* Strona główna: odstęp nad hasłem liczymy od dolnej krawędzi szarego tła sekcji #partners (tak go widać),
   więc sekcja nie „daje” nic z odstępu — góra i dół hasła są równe (--g2c-kontakt-above: 0, jak na Referencjach). */
.g2c-kontakt--home {
	--g2c-kontakt-above: 0px;
}

/* Clearfix kontenera Bootstrapa (::before / ::after z display: table) zatrzymywałby marginesy hasła w środku —
   tu go nie potrzeba (wewnątrz nie ma floatów), więc marginesy łączą się z sekcją powyżej jak na stronach agencji. */
.g2c-kontakt--contained .container::before,
.g2c-kontakt--contained .container::after {
	content: none;
}

@media (min-width: 1328px) {
	.g2c-kontakt--home .container {
		width: 1298px;
	}
}

@media (max-width: 991px) {
	.g2c-kontakt--home .container {
		width: auto;
		max-width: 631px; /* kolumna kafli 581 px + 2 × 25 px paddingu */
		padding-left: 25px;
		padding-right: 25px;
	}
}

@media (min-width: 1430px) {
	.g2c-kontakt--referencje .container {
		width: 1400px;
	}
}

/* max-width 10,5 em wymusza 2 linie („Porozmawiajmy” ≈ 6,4 em, całe hasło w jednej linii ≈ 12,6 em) i nie wychodzi
   poza siatkę, auto-marginesy trzymają hasło na środku siatki. Marginesy pionowe jak na stronach agencji
   (kompensacja tuszu liter w em), minus to, co zostawia sekcja powyżej. */
.g2c-kontakt--contained .g2c-cta__title {
	/* Kompensacja tuszu dostrojona do tego rozmiaru (pomiar pikseli: góra = dół ±1 px przy 375–2560 px). */
	--g2c-ink-top: 0.1755em;
	--g2c-ink-bottom: -0.2145em;
	max-width: 10.5em;
	margin: calc(var(--g2c-title-gap) - var(--g2c-kontakt-above) - var(--g2c-ink-top)) auto calc(var(--g2c-title-gap) - var(--g2c-ink-bottom));
	font-size: var(--g2c-contained-font);
}

/* Od 1446 px hasło ma już stały rozmiar (143 px), a odstęp dochodzi do 128 px — tu kompensacja tuszu
   dostrojona osobno (pomiar pikseli: góra = dół przy 1920 i 2560 px). */
@media (min-width: 1446px) {
	.g2c-kontakt--contained .g2c-cta__title {
		--g2c-ink-top: 0.172em;
		--g2c-ink-bottom: -0.211em;
	}
}

.g2c-kontakt--contained .g2c-contact {
	margin-bottom: clamp(56px, 6vw, 96px);
}

@media (min-width: 992px) {
	.g2c-kontakt--contained .g2c-contact__person {
		padding: 56px clamp(32px, 4vw, 64px) 56px 0;
	}

	.g2c-kontakt--contained .g2c-contact__form {
		padding: 56px 0 56px clamp(32px, 4vw, 64px);
	}

	.g2c-kontakt--contained .g2c-contact__name {
		font-size: clamp(30px, 2.6vw, 40px);
	}

	.g2c-kontakt--contained .g2c-contact__links {
		margin-top: 40px;
	}

	.g2c-kontakt--contained .g2c-contact__link,
	.g2c-kontakt--contained .g2c-contact__link:visited {
		font-size: clamp(20px, 1.6vw, 24px);
	}

	.g2c-kontakt--contained .g2c-contact__title {
		font-size: clamp(22px, 1.8vw, 28px);
	}
}

@media (max-width: 768px) {
	/* Na telefonach i tabletach jak na stronach agencji: najdłuższe słowo mieści się w siatce, maks. 64 px. */
	.g2c-kontakt--contained {
		--g2c-contained-font: min(64px, calc((100vw - 50px) / 7));
	}
}

/* ==========================================================================
   Zdjęcie z paralaksą (strony agencji i strona główna) — ten sam mechanizm co .branding-image w page-branding.php:
   czysty CSS (bez JS), tło przypięte do okna przez background-attachment: fixed,
   sekcja jest „oknem” o wysokości 37 px + proporcja 1920×983 (min. 310 px ≤991 px).
   Na telefonach (≤767 px) tło przewija się z sekcją (local), jak na stronie Branding.
   ========================================================================== */
.g2c-parallax {
	box-sizing: border-box;
	padding-top: 37px;
	background-color: #f5f5f5;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.g2c-parallax__spacer {
	aspect-ratio: 1920 / 983;
}

/* Minimum 310 px obrazka + 37 px paddingu. Na sekcji, nie na .g2c-parallax__spacer: min-height na elemencie
   z aspect-ratio przenosi się na szerokość (310 × 1920/983 = 605 px) i rozpychało stronę na telefonach. */
@media (max-width: 991px) {
	.g2c-parallax {
		min-height: 347px;
	}
}

@media (max-width: 767px) {
	.g2c-parallax {
		background-attachment: local;
	}
}

/* iOS/iPadOS (WebKit) nie obsługuje fixed: bez tej reguły iPad (≥768 px) pokazałby tło przeskalowane
   do wysokości całej strony (mocno powiększone). Warunek pasuje tylko do Safari/WebKit na iOS. */
@supports (-webkit-touch-callout: none) {
	.g2c-parallax {
		background-attachment: scroll;
	}
}

/* Strona główna (front-page.php, pod modułem kontaktowym): to samo zdjęcie z paralaksą, ale wczytywane dopiero,
   gdy sekcja zbliża się do ekranu — skrypt przy sekcji dodaje .is-in. Adresy zdjęcia w zmiennych
   (--g2c-parallax-img na komputerze, --g2c-parallax-img-sm na telefonie), żeby tło nie ładowało się od razu. */
.g2c-parallax--lazy.is-in {
	background-image: var(--g2c-parallax-img);
}

@media (max-width: 767px) {
	.g2c-parallax--lazy.is-in {
		background-image: var(--g2c-parallax-img-sm, var(--g2c-parallax-img));
	}
}