/**
 * Contact: page-templates/contact.php.
 * From 1280 (2181:770): 120px under the card. Card: the card fill exported
 * flat from Figma (1920 x 1044, corners rounded in the image), stretched to
 * the card; below 1280 the card is tall (form under the details), so the
 * image covers it at its own ratio. Radius 40, 32px padding
 * (72px left), 56px gap. Details: 48px top, 28px gaps; H1 Display/L white;
 * intro Body/L white, 440px; list 480px, rows 18px top and bottom with a
 * white 10% line between them, 16px gap, 44px icon circle with a 20px
 * icon, 12px semibold label (0.5px), 2px to the value in Heading/H4 bold;
 * the email is yellow; the FAQ row ends in an arrow.
 * Form: white, radius 25, 44px padding, 600px, 20px gaps; title Heading/H2;
 * labels 16px semibold, 8px to the 56px inputs (cream, line border, radius
 * 12, 20px sides), message 170px; full width dark button.
 * Consent checkbox and status line: not designed (components/checkbox.css).
 * Below 1280 (not designed): stacked, the form under the details. Phones
 * (client, 19 Oct 2026): 15px between details and form, 12px between the
 * detail blocks.
 */

.contact-wrap {
	padding-bottom: var(--section-space);
}

.contact-card {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 36px 20px 20px;
	border-radius: var(--radius-section);
	background:
		image-set(url("../../images/contact-card-bg.webp") 1x, url("../../images/contact-card-bg@2x.webp") 2x) center / cover no-repeat,
		var(--gradient-why-stacked);
	color: var(--color-white);
}

.contact-card__details {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.contact-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-display-l);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-display-l);
	line-height: var(--leading-display-l);
}

.contact-card__text {
	max-width: 440px;
	margin: 0;
	font-size: var(--text-body-l);
	line-height: var(--leading-body-l);
}

.contact-list {
	max-width: 480px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-item {
	position: relative;
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding: 18px 0;
}

.contact-item + .contact-item {
	border-top: 1px solid rgb(255 255 255 / 10%);
}

.contact-item__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	color: var(--color-white);
}

.contact-item__icon--yellow {
	background: var(--color-yellow);
}

.contact-item__icon--orange {
	background: var(--color-orange);
}

.contact-item__icon--white {
	background: var(--color-white);
	color: var(--color-green-dark);
}

.contact-item__icon--glass {
	background: rgb(255 255 255 / 10%);
}

.contact-item__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.contact-item__label {
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
}

.contact-item__value {
	color: inherit;
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
	overflow-wrap: anywhere;
	text-decoration: none;
}

.contact-item--email .contact-item__value {
	color: var(--color-yellow);
}

a.contact-item__value:hover {
	text-decoration: underline;
}

/* Rows with a link (email, FAQ) are clickable as a whole. */
a.contact-item__value::after {
	content: "";
	position: absolute;
	inset: 0;
}

.contact-item__arrow {
	flex: none;
}

/* Lines under a value: the phone's messenger links and hours, the company
 * address and numbers (decision 15.4). Not designed: Body/S on the card. */
.contact-item__meta {
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
	opacity: 0.85;
}

/* Above the row-wide link of the phone number. */
.contact-item__meta a {
	position: relative;
	z-index: 1;
	color: var(--color-yellow);
	text-decoration: none;
}

.contact-item__meta a:hover {
	text-decoration: underline;
}

.contact-item--company,
.contact-item--phone {
	align-items: flex-start;
}

/* Form */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
	padding: var(--space-md) 20px;
	border-radius: 20px;
	background: var(--color-white);
	color: var(--color-ink);
}

.contact-form__title {
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-h2);
	line-height: var(--leading-h2);
}

.contact-form__row {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact-field {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
	margin: 0;
}

.contact-field__label {
	font-size: var(--text-body-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.contact-field__input {
	box-sizing: border-box;
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--color-line);
	border-radius: 12px;
	background: var(--color-cream);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-field);
	line-height: var(--leading-body-m);
	appearance: none;
	transition: border-color 0.15s ease;
}

.contact-field__input--area {
	height: 170px;
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
	resize: vertical;
}

.contact-field__input::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

.contact-field__input:hover {
	border-color: var(--color-muted);
}

.contact-field__input:focus {
	border-color: var(--color-ink);
}

.contact-field__input[aria-invalid="true"] {
	border-color: var(--color-orange-dark);
}

.contact-form__consent {
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.contact-form__consent[data-invalid] .check__box {
	border-color: var(--color-orange-dark);
}

.contact-form__hp {
	position: absolute;
	left: -9999px;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

.contact-form__submit[aria-busy="true"] {
	cursor: progress;
	opacity: 0.6;
}

.contact-form__status {
	margin: 0;
	font-size: var(--text-body-s);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-body-s);
}

.contact-form__status:empty {
	display: none;
}

.contact-form__status.is-success {
	color: var(--color-green);
}

.contact-form__status.is-error {
	color: var(--color-orange-dark);
}

@media (prefers-reduced-motion: reduce) {
	.contact-field__input {
		transition: none;
	}
}

@media (min-width: 768px) {
	.contact-card {
		gap: var(--space-lg);
		padding: 48px 32px 32px;
	}

	.contact-card__details {
		gap: 28px;
	}

	.contact-form {
		padding: 44px;
		border-radius: 25px;
	}

	.contact-form__row {
		flex-direction: row;
		gap: var(--space-sm);
	}
}

@media (min-width: 1280px) {
	.contact-card {
		flex-direction: row;
		gap: 56px;
		align-items: center;
		padding: 32px 32px 32px 72px;
		background-color: transparent;
		background-image:
			image-set(url("../../images/contact-card-bg.webp") 1x, url("../../images/contact-card-bg@2x.webp") 2x),
			var(--gradient-title-card);
		background-size: 100% 100%;
	}

	.contact-card__details {
		flex: 1 1 0;
		align-self: stretch;
		padding-top: 48px;
	}

	.contact-form {
		flex: none;
		width: 600px;
	}
}