/*
 * Strona kontaktu: dobór handlowca, dostępność działu, pułapka na boty.
 *
 * Wczytywana tylko na stronie z formularzem kontaktowym (inc/assets.php).
 * Kolory i promienie z systemu motywu — bez nowych wartości.
 */

.stalesia-kontakt {
	margin-block: var(--st-gap-lg);
}

.stalesia-kontakt__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--st-gap-lg);
	flex-wrap: wrap;
	margin-bottom: var(--st-gap-md);
}

.stalesia-kontakt__title {
	margin: 0 0 .35rem;
	font-size: var(--wp--preset--font-size--xxl);
	letter-spacing: -0.01em;
}

.stalesia-kontakt__lede {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.stalesia-kontakt__now {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .5rem;
}

/* Znacznik wypełnia skrypt; pusty nie zostawia dziury w układzie. */
.stalesia-kontakt__status:empty {
	display: none;
}

.stalesia-kontakt__status {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .9rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-radius-pill);
	font-size: var(--wp--preset--font-size--sm);
}

.stalesia-kontakt__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--muted);
	flex-shrink: 0;
}

.stalesia-kontakt__status.is-open::before {
	background: var(--wp--preset--color--buy);
}

.stalesia-kontakt__status.is-closed::before {
	background: var(--wp--preset--color--warn);
}

.stalesia-kontakt__central {
	font-family: var(--st-data);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-kontakt__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin-bottom: var(--st-gap-md);
}

.stalesia-kontakt__chip {
	min-height: 44px;
	padding: .625rem 1.125rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

.stalesia-kontakt__chip:hover {
	border-color: var(--wp--preset--color--accent);
}

.stalesia-kontakt__chip.is-active {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.stalesia-kontakt__pelna {
	margin: 0 0 var(--st-gap-sm);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

/* Mapka i regiony to jedna karta z pionowymi przegrodami, nie trzy osobne
   kafelki: mapka jest z natury wyższa od kolumny z numerami, więc osobne
   ramki nigdy nie kończyły się na tej samej wysokości. Grupa z jednym
   regionem dostaje jedną szeroką kolumnę, grupa z dwoma — dwie węższe. */
.stalesia-kontakt__grid {
	display: grid;
	grid-template-columns: 250px repeat(auto-fit, minmax(230px, 1fr));
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-radius);
	/* Przycina tła kolumn do zaokrąglonych narożników karty. */
	overflow: hidden;
}

.stalesia-kontakt__map {
	margin: 0;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .75rem;
}

.stalesia-kontakt__map img {
	display: block;
	width: 100%;
	height: auto;
}

.stalesia-kontakt__map figcaption {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* Grupa z jednym regionem: karta dostaje całą resztę szerokości, więc
   ograniczamy jej treść. Bez tego zasięg („cała Polska") odjeżdżał na drugi
   koniec ekranu, daleko od nazwy regionu. */
.stalesia-kontakt__card:nth-child(2):last-child > * {
	max-width: 34rem;
}

/* Przegroda zamiast ramki — rysuje ją każda kolumna po swojej lewej, więc
   przy jednym i przy dwóch regionach linie wypadają tam, gdzie trzeba. */
.stalesia-kontakt__card {
	border-left: 1px solid var(--wp--preset--color--line);
	padding: 1.375rem 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .625rem;
}

.stalesia-kontakt__cardhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

.stalesia-kontakt__cardhead h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
}

.stalesia-kontakt__cardhead span {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.stalesia-kontakt__tel {
	display: flex;
	align-items: center;
	gap: .625rem;
	min-height: 44px;
	font-family: var(--st-data);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.stalesia-kontakt__tel svg {
	color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

.stalesia-kontakt__mail {
	display: flex;
	align-items: center;
	gap: .625rem;
	min-height: 44px;
	padding-top: .625rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--sm);
	overflow-wrap: anywhere;
}

.stalesia-kontakt__mail svg {
	flex-shrink: 0;
}

@media (max-width: 860px) {
	.stalesia-kontakt__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Kolumny stają się wierszami, więc przegroda też musi się położyć. */
	.stalesia-kontakt__card {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	/* Na pełnej szerokości telefonu mapka zjadała pół ekranu przed pierwszym
	   numerem — a to numery są tu treścią. */
	.stalesia-kontakt__map img {
		max-width: 15rem;
		margin-inline: auto;
	}

	.stalesia-kontakt__head {
		align-items: flex-start;
	}

	.stalesia-kontakt__now {
		align-items: flex-start;
	}
}

/* ---------- pułapka na boty ----------
   Ukryta i przed wzrokiem, i przed czytnikiem ekranu — człowiek nie ma jak
   jej wypełnić. `display: none` bywa przez boty rozpoznawane, więc pole
   wychodzi poza widok zamiast znikać. */
.stalesia-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- formularz: zwijane szczegóły do wyceny ---------- */

.zf-details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-radius-btn);
	overflow: hidden;
}

.zf-details__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 56px;
	padding: .875rem 1rem;
	border: 0;
	background: var(--wp--preset--color--surface);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.zf-details__toggle b {
	font-family: var(--st-data);
	font-size: var(--wp--preset--font-size--sm);
}

.zf-details__toggle small {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.zf-details__toggle::after {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--wp--preset--color--muted);
	border-bottom: 2px solid var(--wp--preset--color--muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s ease;
	flex-shrink: 0;
}

.zf-details.is-open .zf-details__toggle::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.zf-details__body {
	display: none;
	padding: 1.125rem 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.zf-details.is-open .zf-details__body {
	display: block;
}

/* ---------- dane firmowe obok formularza ----------
   Adres to lista danych, nie tekst ciągły: domyślne odstępy między akapitami
   rozciągały go na dwa ekrany telefonu. */

.stalesia-contact__aside p {
	margin-block: 0 .35rem;
	line-height: 1.55;
}

.stalesia-contact__aside h3 {
	margin-block: var(--st-gap-md) .5rem;
	font-size: var(--wp--preset--font-size--lg);
}

.stalesia-contact__aside h2 {
	margin-block: 0 var(--st-gap-sm);
}

/* Odstęp przed przypisem i blokiem „Kontakt:", które w treści zaczynają
   kolejną grupę danych. */
.stalesia-contact__aside .wp-block-group + .wp-block-group {
	margin-top: var(--st-gap-sm);
}