/* ═══════════════════════════════════════════════
   CONTACT HERO
   Info + icon-detail list on the left, embedded
   form on the right. Models .contact-grid /
   .contact-info / .contact-form from
   PREVIEW/css/sections/contact.css.
   Block-scoped — loaded only when rendered.
   ═══════════════════════════════════════════════ */

.contact-hero {
	padding: 120px 24px 40px;
}
.contact-hero__inner {
	max-width: var(--page-max);
	margin: 0 auto;
}

.contact-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
}

/* ── Info column ────────────────────────────────────── */
.contact-hero__title {
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: 16px;
}
.contact-hero__body {
	font-size: 15px;
	color: var(--fg-secondary);
	line-height: 1.6;
	margin-bottom: 24px;
}

.contact-hero__details {
	display: flex;
	flex-direction: column;
}
.contact-hero__detail,
.contact-hero__detail--link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	font-size: 14px;
	color: var(--fg-secondary);
	text-decoration: none;
	transition: color 0.15s ease;
}
.contact-hero__detail--link:hover {
	color: var(--fg);
}
.contact-hero__icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--primary) 10%, transparent);
	border-radius: var(--radius-sm);
	color: var(--primary);
	flex-shrink: 0;
}
.contact-hero__icon svg {
	width: 16px;
	height: 16px;
}

/* ── Form column ────────────────────────────────────── */
.contact-hero__form {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	corner-shape: squircle;
	padding: 40px;
}
.contact-hero__form-heading {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-bottom: 24px;
}

/* ── Zoom Scheduler embed ────────────────────────────
   Width/height attrs on the iframe reserve intrinsic
   ratio so the page doesn't reflow on load. CSS makes
   it responsive: fill the column up to 750px wide,
   keep Zoom's recommended 560px height. */
.contact-hero__form--meeting .contact-hero__scheduler {
	display: block;
	width: 100%;
	width: min(750px, 100%);
	height: 700px;
	border: 0;
	margin: 0 auto;
}

/* Reasonable default styling for form shortcodes — most form plugins
   render .form-group-ish markup. These rules are gentle nudges; if your
   plugin emits very different markup, adjust there or override here. */
.contact-hero__form input[type="text"],
.contact-hero__form input[type="email"],
.contact-hero__form input[type="tel"],
.contact-hero__form input[type="url"],
.contact-hero__form textarea,
.contact-hero__form select {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--font);
	font-size: 15px;
	color: var(--fg);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.contact-hero__form input[type="text"]:focus,
.contact-hero__form input[type="email"]:focus,
.contact-hero__form input[type="tel"]:focus,
.contact-hero__form input[type="url"]:focus,
.contact-hero__form textarea:focus,
.contact-hero__form select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.contact-hero__form textarea {
	resize: vertical;
	min-height: 120px;
}
.contact-hero__form label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
}
.contact-hero__form button[type="submit"],
.contact-hero__form input[type="submit"] {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	background: var(--primary);
	color: var(--dark-brown);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.25s ease, transform 0.1s ease;
}
.contact-hero__form button[type="submit"]:hover,
.contact-hero__form input[type="submit"]:hover {
	background: var(--secondary);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 35%, transparent);
}
.contact-hero__form button[type="submit"]:active,
.contact-hero__form input[type="submit"]:active {
	transform: scale(0.98);
}

@media (max-width: 800px) {
	.contact-hero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.contact-hero__form { padding: 28px; }
}