/* Contact (page-contact.php, boards contact-v1 / -mobile). Fields, error marks and notices come from checkout.css
   and main.css. Mobile keeps the board's order: call card, form, email card, note. Tablet 768-1023 (not on the
   boards): the form full width, then the two cards side by side. Desktop: form 8 columns, details 4. */

.contact-head .page-title-col { gap: 16px; }
.contact-intro { max-width: 820px; font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.7; }

.contact-grid {
	display: grid; gap: 36px; align-items: start;
	padding-bottom: clamp(3rem, 2.472rem + 2.254vw, 4.5rem); /* board 48 / 72 */
}

/* ---------- Details ---------- */
.contact-lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; color: var(--sage-deep); }
.contact-note { font-size: 13px; line-height: 1.6; color: var(--quiet); }
.contact-card { box-shadow: inset 0 0 0 1px var(--line); }
.contact-call { display: grid; gap: 10px; padding: 20px 18px; background: var(--ground-alt); }
.contact-num { font-family: var(--font-mono); font-weight: 300; letter-spacing: -0.02em; font-size: 26px; line-height: 1.2; }
.contact-num a, .contact-mail-list a { text-decoration: none; }
.contact-num a:hover, .contact-mail-list a:hover { text-decoration: underline; text-decoration-color: var(--sage); text-underline-offset: 3px; }
.contact-mail-head { display: grid; gap: 10px; padding: 18px; box-shadow: inset 0 -1px 0 var(--line); }
.contact-mail-list li { display: grid; gap: 4px; padding: 12px 18px; }
.contact-mail-list li + li { box-shadow: inset 0 1px 0 var(--line); }
.contact-mail-list a { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }

/* ---------- Form ---------- */
.contact-form { display: grid; gap: 18px; }
.contact-form > .woocommerce-message, .contact-form > .woocommerce-error { margin: 0; }
.contact-form > ul.woocommerce-error { display: grid; gap: 4px; }
.contact-form-note { font-size: 13px; line-height: 1.6; color: var(--quiet); }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.contact-fields .form-row { grid-column: 1 / -1; display: grid; align-content: start; gap: 8px; margin: 0; } /* a neighbour's error message must not stretch it */
.contact-fields .hc-f-first_name, .contact-fields .hc-f-last_name { grid-column: auto; }
.contact-fields textarea.input-text { height: 140px; min-height: 0; font-size: 16px; line-height: 1.5; }
.contact-submit { margin: 0; }
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* the spam honeypot, off screen (as blog.css) */
.contact-submit .btn { width: 100%; }

@media (min-width: 768px) {
	.contact-head { padding-bottom: 48px; }
	.contact-head .page-title-col { gap: 20px; }

	.contact-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px;
		grid-template-areas: "form form form form form form form form form form form form" "call call call call call call mail mail mail mail mail mail" "note note note note note note mail mail mail mail mail mail";
	}
	.contact-form { grid-area: form; gap: 20px; margin-bottom: 24px; }
	.contact-call { grid-area: call; padding: 24px; }
	.contact-mail { grid-area: mail; }
	.contact-order-note { grid-area: note; }
	.contact-mail-head { padding: 24px; }
	.contact-mail-list li { padding: 14px 24px; }

	.contact-fields { gap: 20px 40px; }
	.contact-fields .hc-f-email, .contact-fields .hc-f-phone { grid-column: auto; }
	.contact-fields textarea.input-text { height: 160px; }
	.contact-submit { margin-top: 8px; }
	.contact-submit .btn { width: auto; }
}

@media (min-width: 1024px) {
	.contact-grid {
		grid-template-areas: "form form form form form form form form call call call call" "form form form form form form form form mail mail mail mail" "form form form form form form form form note note note note";
		grid-template-rows: auto auto 1fr;
	}
	.contact-form { margin-bottom: 0; }
}