/* Contact (Figma "Contact", "Contact_Mobile"). */

.contact {
	display: grid;
	grid-template-columns: minmax(0, 368px) minmax(0, 560px);
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 60px;
}

.contact__intro {
	display: grid;
	align-content: start;
	gap: 32px;
}

.contact__heading {
	font-size: var(--t-display);
	line-height: var(--lh-display);
}

.contact__whatsapp {
	color: var(--c-text-2);
}

.contact__whatsapp a {
	text-underline-offset: 3px;
}

.contact__whatsapp span {
	white-space: nowrap;
}

.contact__whatsapp a:hover {
	color: var(--c-accent);
}

.contact__form-heading {
	margin-bottom: 40px;
	font-size: var(--t-title);
	line-height: var(--lh-title);
}

.contact-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 16px;
}

.contact-form__regarding,
.contact-form__message,
.contact-form__send {
	grid-column: 1 / -1;
}

.contact-form__regarding {
	padding: 12px 16px;
	background: var(--c-beige);
	font-size: var(--t-body-s);
	line-height: var(--lh-body-s);
}

.contact-form .field {
	gap: 16px;
}

.contact-form .field label {
	color: var(--c-text-2);
}

.contact-form .field :is(input, textarea, select) {
	padding: 10px 12px 10px 4px;
	border-bottom-color: var(--c-text);
	font-size: var(--t-body);
	line-height: var(--lh-body);
}

.contact-form .field :is(input, textarea)::placeholder {
	color: var(--c-muted);
	opacity: 1;
}

.contact-form textarea {
	height: 96px;
	resize: vertical;
}

.contact-form__select {
	position: relative;
}

.contact-form .field select {
	padding-right: 36px;
	appearance: none;
	cursor: pointer;
}

.contact-form__select .icon {
	position: absolute;
	top: 50%;
	right: 4px;
	width: 24px;
	height: 24px;
	color: var(--c-accent);
	stroke-width: 2.5;
	translate: 0 -50%;
	pointer-events: none;
}

/* The first option ("Choose a topic") reads as a placeholder. */
.contact-form select:has(option[value=""]:checked) {
	color: var(--c-muted);
}

.contact-form select option {
	color: var(--c-text);
}

.contact-form__send {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
}

.contact-form .form-status:not(.is-error) {
	color: var(--c-success, #1f9842);
}

.contact__map {
	height: 300px;
	background: var(--c-beige);
}

.contact__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.contact__visit {
	padding-block: 72px;
	background: var(--c-beige);
}

.contact__visit-inner {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.contact__visit-heading {
	flex: 0 1 272px;
	font-size: var(--t-display);
	line-height: var(--lh-display);
}

.contact__details {
	display: grid;
	align-content: center;
	flex: 0 1 464px;
	gap: 8px;
	font-style: normal;
	font-size: var(--t-body-s);
	line-height: var(--lh-body-s);
	color: var(--c-text-2);
}

.contact__details ul {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact__details li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.contact__details .icon {
	width: 16px;
	height: 16px;
}

.contact__details a {
	text-decoration: none;
	text-underline-offset: 3px;
}

.contact__details a:hover,
.contact__details a.is-underlined {
	text-decoration: underline;
}

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

@media (max-width: 767px) {
	.contact {
		margin-bottom: 40px;
	}

	.contact__intro {
		gap: 16px;
	}

	.contact__form-heading {
		font-size: var(--t-title-s);
		line-height: var(--lh-title-s);
	}

	.contact-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.contact-form__send .btn {
		width: 100%;
	}

	.contact__visit {
		padding-block: 40px;
	}

	.contact__visit-inner {
		flex-direction: column;
	}

	.contact__visit-heading {
		flex: none;
		font-size: var(--t-title);
		line-height: var(--lh-title);
	}

	.contact__details {
		flex: none;
	}
}