/*
 * contact-band.css — the front page's closing section.
 *
 * Geometry is taken from the client's own homepage rather than invented: every
 * value below is what their Elementor kit emits for elements 5e9abe3 (band),
 * 6caa9ad (photo card), d6320fe / 6222f35 (the two columns), 81116bc (headline)
 * and e6c61ea (panel title). Their leading-zero paddings (`064px`, `016px`) are
 * Elementor output quirks; the real values are 64px and 16px.
 */

.contact-band {
	background: var(--bg);
	padding: 0 var(--s-16) var(--s-16);
}

/* The rounded photo card. overflow hidden so the photo takes the same radius. */
.contact-band__frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--radius);
	padding: var(--s-12);
	max-width: var(--container-bleed);
	margin-inline: auto;
}

.contact-band__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/*
 * Their wash, exactly: a flat 50% black over the whole photo, no gradient.
 * An extra left-side gradient was needed only while a brighter stand-in
 * photograph was in place; over their own building shot the headline measures
 * comfortably above AA on both the brick and the sky, so the plain wash stands.
 */
.contact-band__frame::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.5);
}

.contact-band__grid {
	display: flex;
	gap: var(--s-12);
	align-items: stretch;
}

/* Their left column: half the width, contents centred vertically. */
.contact-band__lead {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--s-6);
}

.contact-band__title {
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.3;
	color: #fff;
	margin: 0;
	max-width: 20ch;
}

/* Their right column: half the width, a white card with the form inside. */
.contact-band__panel {
	flex: 1 1 50%;
	background: var(--card);
	border-radius: var(--radius);
	padding: var(--s-12);
}

.contact-band__panel-title {
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--ink);
	margin: 0 0 var(--s-6);
}

/*
 * ---- Compact form metrics, scoped to this band ----
 *
 * The shared form component is sized for the Yhteystiedot and Tarjouspyyntö
 * PAGES, where the form is the whole point of the screen: 17px labels and 24px
 * between fields. Dropped into this card unchanged it made the band 935px tall
 * — taller than a laptop viewport — so the page ended on a wall of form.
 *
 * These are the client's own numbers for this exact form (their element
 * 003687b): 0.75rem labels at weight 300 and 16px between field groups. So the
 * band gets shorter and MORE faithful at the same time, and the two form pages
 * are untouched.
 */
/* line-height too: the body's 1.6 turned a 12px label into a 19px line. */
.contact-band .form-label {
	font-size: 0.75rem;
	font-weight: 300;
	line-height: 1.3;
	margin-bottom: var(--s-1);
}

.contact-band .form-field {
	margin-bottom: var(--s-4);
}

.contact-band .form-input {
	padding: 10px 14px;
}

/*
 * The shared textarea is 6 rows because a quote request needs room. Here the
 * message sits beside a photograph and four rows is enough to start writing —
 * the field still scrolls, so nothing is lost.
 */
.contact-band textarea.form-input {
	height: 72px;
	min-height: 72px;
}

/* The shared 32px above the button left a visible dead gap in a card this size. */
.contact-band .form-actions {
	margin-top: var(--s-4);
}

/*
 * Our GDPR line runs to two lines at body size, which cost more height than the
 * single small notice their form carries. Set small and tight it says the same
 * thing in the space the design can afford.
 */
.contact-band .form-privacy {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--muted);
	margin-bottom: 0;
}

/* ---- Tablet and below: their single-column stack ---- */
@media (max-width: 1024px) {
	.contact-band__grid {
		flex-direction: column;
	}

	.contact-band__lead {
		align-items: flex-start;
	}

	.contact-band__title {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.contact-band {
		padding: 0 var(--s-4) var(--s-16);
	}

	/* Theirs opens up at the top on mobile and tightens at the sides. */
	.contact-band__frame {
		padding: var(--s-16) var(--s-6) var(--s-6);
	}

	.contact-band__title {
		font-size: 1.5rem;
	}

	.contact-band__panel {
		padding: var(--s-6);
	}

	.contact-band__panel-title {
		font-size: 1.25rem;
	}
}