/*
 * Sekcja CTA Kontakt (uproszczona)
 * Wersja dla podstron - bez mapy, grid 2x2 z danymi kontaktowymi
 * Version: 1.0.0
 */

/* ==========================================================================
   LAYOUT GŁÓWNY
   ========================================================================== */

.contact-cta {
	padding: 100px 50px 50px;
	background-image: url('/wp-content/uploads/2026/02/bg-lines.svg');
	background-repeat: repeat-y;
}

.contact-cta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}

/* ==========================================================================
   LEWA KOLUMNA - INFORMACJE
   ========================================================================== */

.contact-cta-info {
	display: flex;
	flex-direction: column;
	max-width: 800px;
}

.contact-cta-heading {
	font-size: var(--h-xl);
	font-weight: 500;
	color: var(--black);
	margin: 0 0 25px 0;
	line-height: 1.2;
	max-width: 440px;
	letter-spacing: var(--letter-spacing);
}

.contact-cta-subtitle {
	font-size: var(--b-m);
	line-height: 1.75;
	color: var(--grey);
	margin: 0 0 50px 0;
	max-width: 85%;
}

/* ==========================================================================
   GRID 2x2 - DANE KONTAKTOWE
   ========================================================================== */

.contact-cta-boxes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 60px;
}

.contact-cta-box-title {
	font-size: var(--h-s);
	font-weight: 500;
	color: var(--black);
	margin: 0 0 15px 0;
}

.contact-cta-box-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.contact-cta-link {
	font-size: var(--b-m);
	color: var(--grey);
	text-decoration: none;
	transition: color 0.2s ease, font-weight 0.2s ease;
	line-height: 1.75;
}

.contact-cta-link:hover {
	color: var(--mid-navy);
	font-weight: 600;
}

.contact-cta-text {
	font-size: var(--b-m);
	color: var(--grey);
	margin: 0;
	line-height: 1.75;
}

/* Social icons */
.contact-cta-social {
	display: flex;
	gap: 15px;
	margin-top: 5px;
}

.contact-cta-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background-color: var(--ultra-lite-grey);
	color: var(--black);
	transition: all 0.3s ease;
	text-decoration: none;
}

.contact-cta-social-link:hover {
	background-color: var(--black);
	color: #ffffff;
	transform: translateY(-2px);
}

.contact-cta-social-link svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   PRAWA KOLUMNA - FORMULARZ
   ========================================================================== */

.contact-cta-form {
	position: sticky;
	top: 100px;
}

/* Override padding formularza - 5vw na wszystkich breakpointach */
.contact-cta .contact-form-box {
	padding: 7vw;
	border-radius: 20px;
}

/* ==========================================================================
   RESPONSIVE - 1536px
   ========================================================================== */

@media (max-width: 1536px) {
	.contact-cta {
		padding: 80px 40px 40px;
	}

	.contact-cta-grid {
		gap: 100px;
	}

	.contact-cta-subtitle {
		margin-bottom: 40px;
	}

	.contact-cta-boxes {
		gap: 35px 50px;
	}

}

/* ==========================================================================
   RESPONSIVE - 1366px
   ========================================================================== */

@media (max-width: 1366px) {
	.contact-cta .container-wide-content {
		width: calc(100% - 120px);
	}

	.contact-cta {
		padding: 70px 20px 30px;
	}

	.contact-cta-grid {
		gap: 40px;
	}

	.contact-cta-subtitle {
		margin-bottom: 35px;
	}

	.contact-cta-boxes {
		gap: 30px 40px;
	}

}

/* ==========================================================================
   RESPONSIVE - 1024px
   ========================================================================== */

@media (max-width: 1024px) {
	.contact-cta .container-wide-content {
		width: 100%;
	}

	.contact-cta {
		padding: 60px 20px 30px;
		background-image: none;
	}

	.contact-cta-info {
		padding-left: 30px;
	}

	.contact-cta-grid {
		gap: 35px;
	}

	.contact-cta-subtitle {
		margin-bottom: 30px;
	}

	.contact-cta-boxes {
		grid-template-columns: 1fr;
		gap: 25px;
		padding-left: 20px;
	}

	.contact-cta-box-title {
		margin: 0 0 5px 0;
	}

	.contact-cta-box-content {
		gap: 0;
	}

}

/* ==========================================================================
   RESPONSIVE - 768px
   ========================================================================== */

@media (max-width: 768px) {
	.contact-cta {
		padding: 50px 20px 20px;
	}

	.contact-cta-info {
		padding: 0 20px;
	}

	.contact-cta-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.contact-cta-heading {
		font-size: var(--h-m);
		max-width: 100%;
	}

	.contact-cta-subtitle {
		margin-bottom: 30px;
	}

	.contact-cta-boxes {
		grid-template-columns: 1fr 1fr;
		gap: 25px;
		padding-left: 5vw;
	}

	.contact-cta-form {
		position: static;
	}
}

/* ==========================================================================
   RESPONSIVE - 480px
   ========================================================================== */

@media (max-width: 480px) {
	.contact-cta {
		padding: 140px 15px 15px;
	}

	.contact-cta .contact-form-box {
		padding: 8vw 7vw;
		border-radius: 20px;
	}

	.contact-cta-boxes {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.contact-cta-heading {
		font-size: var(--h-l);
		max-width: 100%;
		font-weight: 600;
		letter-spacing: var(--letter-spacing);
	}

	.contact-cta-subtitle {
		margin-bottom: 25px;
	}
}

/* ==========================================================================
   RESPONSIVE - 360px
   ========================================================================== */

@media (max-width: 359px) {
	.contact-cta {
		padding: 30px 10px 10px;
	}

	.contact-cta-boxes {
		gap: 20px;
	}
}