/* =========================================================================
   HNZ Constructions — Contact Us section

   Owns the section shell and responsive form/image layout. Field styling
   lives in forms.css.

   Measured off Home.png (1442px = 1440px artboard, so 1:1):
     - form column   x 177..864  (688px)
     - image         x 1021..1293 (273px), aspect ratio 273/373
     - gap form/image 157px
     - intro line    same rounded display face as the heading, not the
                      body font — cap-height ties out to --fs-500, not
                      --fs-200 as the previous pass assumed.
   ========================================================================= */

/* Intro line ------------------------------------------------------------
   Previously set in --font-body at --fs-200 (13px) with margin-bottom
   --sp-7 (48px). The glyph shapes ("connect", "chat") match the heading's
   rounded display face, not the body font's Spartan, and a cap-height
   check confirms it: the intro's isolated "L" stem measures 16px tall;
   the heading's "C" measures 28px tall at the known 40px (--fs-600)
   ceiling, giving a 0.70 cap/font ratio for that face. 16 / 0.70 ≈ 23px,
   which lands on --fs-500's 24px desktop ceiling, not --fs-200.

   Spacing: the framed heading's own 44px margin-bottom (layout.css)
   already accounts for the 41px measured from rule 2 to the intro's ink —
   no extra margin-top needed here. Below the intro, ink-to-next-label-cap
   measures 65px; --sp-8 (64px) is the closest token. */
.contact__intro {
	margin-bottom: var(--sp-2);
	font-family: var(--font-display);
	font-size: var(--fs-500); /* 20px–24px */
	font-weight: var(--fw-bold);
	text-align: center;

	@media (min-width: 1300px) {
		margin-bottom: var(--sp-8);
	}
}

.section--contact {
	padding-bottom: 0;
	scroll-margin-top: calc(var(--header-height) + var(--sp-3));
}

@media (min-width: 1300px) {
	.section--contact {

		.container {
			padding-bottom: var(--sp-10); /* 112px at the 1440px reference artboard. */
		}
	}
}

.contact {
	display: grid;
	gap: var(--sp-6);
	align-items: end;
	position: relative;
	z-index: 1;
	padding-bottom: var(--sp-8); /* 112px at the 1440px reference artboard. */
}

.contact__placeholder {
	padding: var(--sp-4);
	border: 1px dashed var(--c-rule);
	color: var(--c-ink-muted);
	font-size: var(--fs-200); /* 13px */
}

/* Form / image row -------------------------------------------------------
   Single column below 1300px (image stacks under the form — the export is
   desktop-only, so this ordering is a judgement call, not a measurement).
   The two-column split only measures out at 1300px+. */
@media (min-width: 1300px) {
	.contact {
		/*
		 * 688px form / 273px image with a 157px gap, all measured.
		 *
		 * The block is NOT centred. Its left edge is x 177, which is a 10%
		 * inset of the 1360px container (40 + 136 = 176) — the same left edge
		 * the About block uses, which is what identifies it as a deliberate
		 * grid position rather than export noise. Insetting by 10% lands both
		 * edges within 1px (176..1293 against a measured 177..1293) and leaves
		 * exactly the 106px of right-hand slack the export has; centring the
		 * pair put it 15px out and left the asymmetry unexplained.
		 */
		margin-left: 10%;
		grid-template-columns: minmax(0, 43rem) minmax(0, 17.0625rem);
		column-gap: 9.8125rem; /* 157px */
		justify-content: start;
		padding-bottom: 0;
	}
}

.contact__media img {
	/* 273 / 373 measured, not the 3/4 placeholder. */
	aspect-ratio: 273 / 373;
	object-fit: cover;
	width: 100%;
	max-width: 273px; /* 273px measured, not the 3/4 placeholder. */
}

/* Homepage V2 contact ---------------------------------------------------
   The alternate homepage uses the full-width form composition from its
   reference, without the shared intro, image or decorative pattern. */

.page-template-template-home-v2 .section--contact {
	padding-bottom: 0;
}

.page-template-template-home-v2 .section--contact::before {
	display: none;
}

.page-template-template-home-v2 .section--contact .container {
	padding-bottom: 0;
}

.page-template-template-home-v2 .section--contact .container::after {
	display: none;
}

.page-template-template-home-v2 .contact__intro,
.page-template-template-home-v2 .contact__media {
	display: none;
}

.page-template-template-home-v2 .section--contact .section__heading--framed {
	padding-inline: max(0px, calc((100% - var(--inner-container)) / 2));
	margin-bottom: 5rem;
	font-size: 30px;
	font-weight: var(--fw-display);
	line-height: 1;
	letter-spacing: var(--ls-tight);
}

.page-template-template-home-v2 .contact {
	display: block;
	width: min(var(--inner-container), 100%);
	max-width: none;
	margin-inline: auto;
	padding-bottom: 0;
}

@media (max-width: 699px) {
	.page-template-template-home-v2 .contact {
		width: 100%;
	}
}