/* ============================================================
   Agru-Frank — contact.css (Kontakt, §1.2.9)
   Wariant 2 (formularz w hero) — pierwsza wersja, do dyskusji.
   ============================================================ */

/* .site-main--contact bez wlasnego bg — dziedziczy z base .site-main (kratka + bg-page).
   Byl tu "background: var(--bg-page)" shorthand, zerowal background-image (kratka) z base — usuniety. */
.site-main--contact {
	isolation: isolate;   /* lokalny stacking context — .kontakt-divider z-index:-1 chowa sie
	                         za KAZDA sekcja-siostra (contact-main I contact-details), nie tylko
	                         za tym co po niej w DOM. Bez tego z-index:-1 spadlby do root contextu
	                         i schowalby sie za oplyw tlem .site-main (var(--bg-page), opaque). */
}

/* Kotwica #kontakt — link z karty produktu (CTA "Zapytaj o produkt", ?produkt=…#kontakt). */
.contact-main[id] {
	scroll-margin-top: calc(var(--header-height) + var(--space-64));
}

/* --- Hero — migrowany do .u-hero/.u-hero--medium/.u-split (utilities.css), 1:1 z industry-hero. --- */

/* --- Główny blok: dane firmy | formularz --- */

.contact-main__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-24) var(--space-96);
	align-items: stretch;
}

/* min-width:0 — bez tego content formularza (textarea/input) rozpycha kolumnę
   powyżej 1fr (grid item domyślnie min-width:auto), łamiąc równy podział 50/50. */
.contact-main__grid > * {
	min-width: 0;
}

/* Sekcja pod formularzem: karty + mapa jedno pod drugim. */
.contact-details__stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
}
/* Mapa donosi wolne miejsce w lewej kolumnie do wysokosci formularza (align-items:stretch, kontener) */
.contact-main__grid .contact-map {
	display: flex;
	flex: 1;
}

@media (max-width: 767px) {
	.contact-main__grid {
		grid-template-columns: 1fr;
	}
	/* Formularz na górze — na telefonie to on jest celem strony, dane firmy pod nim.
	   Kolejność w DOM zostaje (adres przed formularzem = sensowna kolejność czytania). */
	.contact-main__grid .contact-form-wrap {
		order: -1;
	}
}

/* --- Divider: line-art w tle na szwie miedzy contact-main a contact-details.
   Zero-height — nie rusza section--tight paddingu. Obraz bleeduje w obie sekcje,
   za WSZYSTKIMI kartami (z-index -1 w kontekscie .site-main--contact — patrz isolation
   tam wyzej — chowa sie za contact-main I contact-details, nie tylko za tym co po nim w DOM). */
.kontakt-divider {
	position: relative;
	height: 0;
	overflow: visible;
	z-index: -1;
}
.kontakt-divider__img {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 100vw;
	height: auto;
	object-fit: contain;
	opacity: 0.4;   /* kanon cta-contact/industry-faq__art */
	pointer-events: none;
}

.contact-form-wrap {
	position: relative;   /* kotwiczy krzyżyki + ramkę (::before/::after, utilities.css) */
	background: var(--white);
	box-shadow: var(--shadow-mega);
	padding: var(--space-24);
}
.contact-form-wrap::after {
	opacity: 1;   /* nadpisuje hover-reveal rodziny elevated — stała ramka, jak contact-tile */
}

/* CF7 renderuje <form class="wpcf7-form"> — łapiemy dowolny form we wrapie. */
.contact-form-wrap form {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

/* Przycisk Wyślij — flex column stretch rozciągał go na całą szerokość; wracamy do auto. */
.contact-form-wrap .wpcf7-submit {
	align-self: flex-start;
	width: auto;
}

/* CF7 spinner jest zawsze w DOM (visibility, nie display) — jako flex item dokładał
   40px pod przyciskiem. Wypada z flow do czasu wysyłki. Prefiks .contact-form-wrap,
   bo arkusz CF7 ładuje się PO naszym. */
.contact-form-wrap .wpcf7-spinner {
	display: none;
}

.contact-form-wrap form.submitting .wpcf7-spinner {
	display: block;
}

/* CF7 owija każdy input w <span class="wpcf7-form-control-wrap"> — rozpuszczamy,
   żeby input był bezpośrednim dzieckiem .contact-form__field (flex column). */
.contact-form__field .wpcf7-form-control-wrap {
	display: contents;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
}

@media (max-width: 480px) {
	.contact-form__row { grid-template-columns: 1fr; }
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.contact-form__label {
	font-size: var(--text-caption);
	color: var(--graphite);
}

.contact-form__field input,
.contact-form__field textarea {
	width: 100%;              /* CF7 input ma własną szerokość — bez tego rozpycha kolumnę grid */
	box-sizing: border-box;
	border: 1px solid var(--border);
	padding: var(--space-8) var(--space-16);
	font-size: var(--text-body);
	line-height: 1.4;
	font-family: inherit;
}

.contact-form__field textarea {
	height: 110px;   /* nadpisuje CF7 rows (~10) — skrót o połowę; resize pozwala rozciągnąć */
	resize: vertical;
}

.contact-form__consent {
	display: flex;
	gap: var(--space-8);
	align-items: flex-start;
	font-size: var(--text-caption);
	color: color-mix(in srgb, var(--graphite) 70%, transparent);
}

.contact-form__consent input {
	flex-shrink: 0;
	margin-top: var(--space-4);
}

/* CF7 daje pozycji listy margin-left: 1em — checkbox zgody odjeżdżał od krawędzi.
   Prefiks .contact-form-wrap, bo arkusz CF7 ładuje się PO naszym. */
.contact-form-wrap .wpcf7-list-item {
	margin-left: 0;
}

/* Honeypot — poza ekranem, nie display:none (prostsze boty pomijają ukryte pola,
   a te czytające DOM i tak je znajdą). Walidacja: inc/forms.php filtr wpcf7_spam. */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Działy + magazyn + administracja: grid kart (wzorem node 5:207) --- */

.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;   /* wszystkie karty równej wysokości niezależnie od liczby telefonów */
	gap: var(--space-32);
}

@media (max-width: 640px) {
	.contact-grid { grid-template-columns: 1fr; }
}

.contact-tile {
	position: relative;   /* kotwiczy krzyżyki + ramkę (::before/::after, utilities.css) */
	height: 100%;   /* wypełnia grid track — równa wysokość wszystkich kart */
	background: var(--white);
	box-shadow: var(--shadow-mega);
	padding: var(--space-24);
	display: flex;
	flex-direction: column;
}
.contact-tile::after {
	opacity: 1;   /* nadpisuje hover-reveal rodziny elevated — tile nie jest linkiem, ramka stała */
}

.contact-tile__title {
	font-size: var(--text-h4);
	font-weight: 600;
	color: var(--graphite);
	margin: 0 0 var(--space-16);
}

.contact-tile__body {
	margin: auto 0 0;   /* top:auto → dociąga <address> do dołu karty */
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.contact-tile__body p {
	margin: 0;
}

/* NIP / REGON / KRS — na desktopie jedna linia rozdzielona kropką, na mobile
   każdy numer w osobnym wierszu (w jednej linii nie mieszczą się czytelnie). */
.contact-tile__regs span + span::before {
	content: " · ";
}

@media (max-width: 767px) {
	.contact-tile__regs {
		display: flex;
		flex-direction: column;
		gap: var(--space-8);   /* ten sam rytm co reszta .contact-tile__body */
	}
	.contact-tile__regs span + span::before {
		content: none;
	}
}

@media (min-width: 768px) {
	.contact-tile {
		max-height: 180px;
	}
}

/* --- Mapa: click-to-load (consent gesture RODO) --- */

.contact-map__load {
	position: relative;   /* kotwiczy krzyżyki + ramkę (::before/::after, utilities.css) */
	width: 100%;
	flex: 1;
	min-height: 320px;
	background: color-mix(in srgb, var(--graphite) 6%, var(--white));   /* opaque (nie transparent) — inaczej kontakt-divider bledowal przez ten box */
	border: 0;   /* reset UA default <button> border (2px outset) — dublowal sie z ramka krzyzykow */
	box-shadow: var(--shadow-mega);
	padding: var(--space-48) var(--space-24);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	color: var(--blue);
	font-family: inherit;
	font-size: var(--text-body);
	cursor: pointer;
}
.contact-map__load::after {
	opacity: 1;   /* nadpisuje hover-reveal rodziny elevated — stała ramka, jak contact-tile */
}

.contact-map__load:hover {
	background: color-mix(in srgb, var(--graphite) 10%, var(--white));
}

.contact-map__pin {
	width: var(--space-24);
	height: var(--space-24);
	border-radius: 50%;
	background: var(--blue);
}

.contact-map__label {
	text-align: center;
}

.contact-map__note {
	display: block;
	font-size: var(--text-caption);
	color: color-mix(in srgb, var(--graphite) 60%, transparent);
	font-weight: 400;
}

/* .contact-map__frame = wrapper <div> (contact-map.js), NIE iframe — iframe jest "replaced
   element", przegladarka nie maluje na nim ::before/::after (krzyzyki by znikly). */
.contact-map__frame {
	position: relative;   /* kotwiczy krzyżyki + ramkę (::before/::after, utilities.css) */
	display: block;
	width: 100%;
	flex: 1;
	min-height: 400px;
	box-shadow: var(--shadow-mega);
}
.contact-map__frame::after {
	opacity: 1;   /* nadpisuje hover-reveal rodziny elevated — stała ramka, jak contact-map__load */
}
.contact-map__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}