/* ==========================================================================
   abcBIM — contact.css
   Contact page (templates/template-contact.php). Page layout only: the page
   hero, eyebrow, the form itself (.contact-form, .contact-chip) and the link
   rows (.contact-links / .contact-link) come from base.css.
   ========================================================================== */

.contact-page {
	padding-bottom: var(--section-y-tight);
}

/* Form card beside the LinkedIn / YouTube rows; stacked when there is no room. */
.contact-page__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px clamp(32px, 5vw, 80px);
}

.contact-page__main {
	flex: 1 1 520px;
	min-width: 0;
	max-width: 680px;
}

.contact-page__aside {
	flex: 1 1 300px;
	min-width: 0;
	max-width: 520px;
}

.contact-page__links {
	margin-top: 16px;
}

/* ---------- Form card ---------- */
.contact-card {
	padding: clamp(24px, 4vw, 36px);
	background: var(--c-paper);
	border: 1px solid var(--c-rule);
	border-radius: 16px;
}

.contact-card__title {
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.contact-card__title:focus {
	outline: none;
}

.contact-card__sub {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--c-slate);
	text-wrap: pretty;
}

/* Without the form: the email address (revealed by main.js) is the call to action. */
.contact-card__mail {
	margin-top: 20px;
	font-family: var(--f-serif);
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.2;
}

.contact-card__mail a {
	color: var(--c-green);
	overflow-wrap: anywhere;
}

.contact-card__mail a:hover {
	color: var(--c-ink);
}

/* ---------- Sent view ---------- */
.contact-sent__again {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin-top: 24px;
	padding: 8px 20px;
	border: 1px solid var(--c-ink);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--c-ink);
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.contact-sent__again:hover {
	background: var(--c-ink);
	color: var(--c-sand);
}

/* ---------- Small phones ---------- */
@media (max-width: 400px) {
	.contact-card__title {
		font-size: 30px;
	}
}