/*
 * Szablon "Kontakt" (page-contact.php): lewa kolumna z kanałami i danymi adresowymi, po prawej formularz CF7.
 * Desktop od 64rem: lewa kolumna 26rem + formularz 40%; poniżej jedna kolumna (kreski 85vw od lewej krawędzi ekranu). Kolory, fonty i rozmiary z :root (tokens).
 */

.icon--mail { width: 16px; height: 16px; -webkit-mask-image: url("../img/mail.svg"); mask-image: url("../img/mail.svg"); }
.icon--phone { width: 16px; height: 16px; -webkit-mask-image: url("../img/phone.svg"); mask-image: url("../img/phone.svg"); }

.contact {
	--contact-indent: 1.25rem;
	--contact-line: var(--color-text-strong);
	--contact-field-line: var(--color-muted);
	padding-block: var(--page-top) 3rem;
}

.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

.contact__info,
.contact__form { min-width: 0; }

.contact__heading {
	margin: 0 0 0.75rem;
	font: 400 var(--fs-title) / 1.2 var(--font-heading);
	color: var(--color-text-strong);
}

.contact__section + .contact__section { margin-top: 1.5rem; }

/* Kanały: linie nad każdym wierszem i pod ostatnim. */
.contact__channels {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--contact-line);
}

.contact__channels li { border-top: 1px solid var(--contact-line); }

.contact__channel {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.625rem;
	align-items: center;
	padding: 0.875rem 0 0.875rem var(--contact-indent);
	color: var(--color-muted);
	text-decoration: none;
	transition: color var(--dur-fast) ease;
}

.contact__channel:hover,
.contact__channel:focus-visible { color: var(--color-text-strong); }

.contact__label { font: 300 var(--fs-lg) / 1.5 var(--font-body); letter-spacing: 0.02em; }

.contact__note {
	grid-column: 2;
	color: var(--color-text);
	font: 300 var(--fs-sm) / 1.5 var(--font-body);
	letter-spacing: 0.02em;
}

.contact__address {
	padding-left: var(--contact-indent);
	color: var(--color-muted);
	font: 300 var(--fs-base) / 1.75 var(--font-body);
	font-style: normal;
	letter-spacing: 0.02em;
}

.contact__address p { margin: 0 0 0.5rem; }

/* Formularz Contact Form 7 – wygląd z tokenów, bez względu na markup wtyczki. */
.contact__form form { margin: 0; }

.contact__form p { margin: 0 0 1.5rem; }

.contact__form label {
	display: block;
	color: var(--color-text-strong);
	font: 400 var(--fs-sm) / 1.5 var(--font-body);
}

.contact__form .wpcf7-form-control-wrap { display: block; }

.contact__form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea) {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0;
	border: 0;
	border-bottom: 1px solid var(--contact-field-line);
	border-radius: 0;
	background: transparent;
	color: var(--color-text-strong);
	font: 300 var(--fs-base) / 1.5 var(--font-body);
	transition: border-color var(--dur-fast) ease;
}

.contact__form textarea {
	height: 7.5rem;
	resize: vertical;
}

.contact__form :is(input, textarea):focus {
	border-bottom-color: var(--color-text-strong);
	outline: none;
}

.contact__form :is(input, textarea):focus-visible { box-shadow: 0 1px 0 var(--color-text-strong); }

/* Zgoda (acceptance): mały kwadrat i drobny tekst. */
.contact__form .wpcf7-list-item { margin: 0; }

.contact__form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: var(--color-text);
	font: 200 var(--fs-xs) / 1.3 var(--font-body);
	cursor: pointer;
}

.contact__form input[type="checkbox"] {
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	margin: 0.1rem 0 0;
	border: 1px solid var(--color-text-strong);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
}

.contact__form input[type="checkbox"]:checked {
	background: var(--color-text-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.contact__form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--color-text-strong);
	outline-offset: 2px;
}

/* Przycisk: klasy .btn .btn--filter nadaje szablon formularza; tu tylko rozmieszczenie na mobile. */
.contact__form .wpcf7-submit { width: 100%; justify-content: center; }

/* Komunikaty walidacji i wysyłki. */
.contact__form .wpcf7-not-valid-tip {
	margin-top: 0.25rem;
	color: var(--color-text-strong);
	font: 400 var(--fs-xs) / 1.4 var(--font-body);
}

.contact__form .wpcf7-not-valid { border-bottom-color: var(--color-text-strong); border-bottom-width: 2px; }

.contact__form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--contact-line);
	color: var(--color-text-strong);
	font: 300 var(--fs-sm) / 1.5 var(--font-body);
}

.contact__form .wpcf7-spinner { margin: 0 0 0 0.75rem; }

.contact__content { margin-top: 3rem; color: var(--color-muted); }

/* Mobile i tablet: kreski wychodzą poza padding strony do lewej krawędzi ekranu i mają 85% jego szerokości. */
@media (max-width: 63.999rem) {
	.contact__channels {
		width: 85vw;
		margin-inline-start: calc(var(--page-pad) * -1);
	}

	.contact__channel { padding-inline-start: calc(var(--page-pad) + var(--contact-indent)); }
}

@media (min-width: 64rem) {
	/* Lewa kolumna (kanały i adres od 40% jej szerokości) + formularz na 40% szerokości strony. */
	.contact { --contact-indent: 40%; padding-block-end: 5rem; }

	.contact__grid {
		grid-template-columns: minmax(0, 26rem) minmax(0, 40%);
		justify-content: space-between;
		gap: 3rem;
	}

	.contact__section + .contact__section { margin-top: 1.25rem; }

	.contact__form .wpcf7-submit { width: auto; }
}