/* ============================================================
   Formularz kontaktowy 2
   Układ: po lewej tytuł + opis + dane kontaktowe, po prawej biała
   karta z formularzem. Wzór z landingu „Customizowana talia kart".

   Sekcja ma też klasę .contact-form, więc pola CF7 (form-group,
   form-label, inputy, submit, biała karta) stylują się globalnie
   z builder-contact-form.css. Ten plik ładowany jest PO tamtym,
   żeby nadpisać padding sekcji i szerokość formularza.
   ============================================================ */

.contact-form-2.contact-form {
	padding: 90px 0;
	background: var(--grey-50);
}

.contact-form-2__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 64px;
	align-items: start;
}

/* ---------- Lewa kolumna ---------- */

.contact-form-2__title {
	font-size: 3.6rem;
	line-height: 1.2;
	font-weight: var(--fw-medium);
	color: var(--grey-900);
	margin: 0 0 24px;
}

.contact-form-2__title::after {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	background: var(--primary-500);
	margin: 22px 0 0;
}

.contact-form-2__content p {
	font-size: 1.6rem;
	line-height: 1.85;
	color: var(--grey-500);
	margin: 0 0 16px;
}

.contact-form-2__content p:last-child {
	margin-bottom: 0;
}

/* Dane kontaktowe pod opisem (telefon, e-mail) */

.contact-form-2__details {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 36px;
}

.contact-form-2__details-item {
	display: flex;
	align-items: center;
	gap: 16px;
}

.contact-form-2__details-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--primary-50);
	color: var(--primary-500);
}

.contact-form-2__details-icon svg,
.contact-form-2__details-icon img {
	width: 24px;
	height: 24px;
}

.contact-form-2__details-header {
	font-size: 1.2rem;
	line-height: 1.2rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: var(--fw-medium);
	color: var(--grey-400);
	margin: 0 0 2px;
}

.contact-form-2__details-desc p {
	margin: 0;
	font-size: 1.7rem;
	line-height: 1.5;
	color: var(--grey-900);
	font-weight: var(--fw-medium);
}

.contact-form-2__details-desc a {
	color: var(--grey-900);
}

.contact-form-2__details-desc a:hover {
	color: var(--primary-500);
}

/* ---------- Prawa kolumna: karta formularza ---------- */
/* Białą kartę daje .contact-form form z builder-contact-form.css,
   tu tylko cień i szerokość na całą kolumnę. */

/* Padding ustawiamy tutaj, bo builder-contact-form.css nadpisuje go w kilku
   breakpointach pod stary układ (z nachodzącym boxem) — m.in. `padding: 0 20px`
   na 576px (zerowy góra/dół) i `padding-right: 0` na 1100px. Media queries nie
   podbijają specyficzności, więc ta reguła (ładowana później) wygrywa ze wszystkimi. */
.contact-form-2__form form {
	max-width: none;
	padding: 32px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.contact-form-2__form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* select — brak stylu w builder-contact-form.css */
.contact-form-2__form select {
	width: 100%;
	padding: 14px 20px;
	border: 1px solid var(--grey-200);
	background: var(--white);
	color: var(--grey-900);
	font-weight: var(--fw-light);
	font-size: 1.6rem;
	border-radius: 8px;
	cursor: pointer;
}

.contact-form-2__form select:focus,
.contact-form-2__form select:focus-visible {
	border: 1px solid var(--primary-500);
	outline: 1px solid var(--primary-500);
}

/* ---------- Responsywność ---------- */

@media (max-width: 992px) {
	.contact-form-2__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 768px) {
	.contact-form-2.contact-form {
		padding: 64px 0;
	}
}

@media (max-width: 576px) {
	.contact-form-2__form form {
		padding: 24px 20px;
	}

	.contact-form-2__title {
		font-size: 2.6rem;
	}

	.contact-form-2__details-icon {
		width: 40px;
		height: 40px;
	}

	.contact-form-2__details-desc p {
		font-size: 1.5rem;
	}
}