/*
 * Contact block. Loaded only on pages that use it. Mobile first; desktop from 900px.
 * The details card is on the left and the Gravity Forms card on the right; with no
 * form the details take the full width. Gravity Forms draws the form's own fields
 * with its own stylesheet.
 */

.contact { padding: 56px 0; }

.contact__title { font-size: 1.9rem; line-height: 1.1; }
.contact__intro { max-width: 56ch; margin: 10px 0 0; color: var(--muted); }

.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 26px; }

.contact__card { min-width: 0; padding: 22px; border-radius: var(--card-r); background: var(--surface); }

.contact__details { display: grid; gap: 22px; align-content: start; }

/* Never wider than the screen: long emails, addresses and words break onto a new line. */
.contact__row { min-width: 0; }
.contact__details,
.contact__row > * { min-width: 0; overflow-wrap: anywhere; }
.contact__row b { display: block; margin-bottom: 2px; }
.contact__row address { margin: 0; color: var(--muted); font-style: normal; line-height: 1.5; }

.contact__link { display: inline-block; margin-top: 4px; font-weight: 600; }

.contact__hours { display: grid; grid-template-columns: auto 1fr; gap: 3px 18px; margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; }
.contact__hours dt { color: var(--ink); font-weight: 600; }
.contact__hours dd { margin: 0; }
.contact__note { display: block; margin-top: 8px; color: var(--muted); }

.contact__form-title { margin-bottom: 16px; font-size: 1.25rem; }

/* ---------- Look C: outlined cards ---------- */

.look-c .contact__card { border: 1px solid var(--line); }

/* ---------- Look F: soft cards ---------- */

.look-f .contact__card { box-shadow: 0 14px 30px -22px rgb(0 0 0 / 0.35); }

/* ---------- Desktop ---------- */

@media (min-width: 900px) {
	.contact { padding: 96px 0; }
	.contact__title { font-size: 2.9rem; }

	.contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; margin-top: 40px; align-items: start; }
	.contact__grid--single { grid-template-columns: minmax(0, 40rem); }
	.contact__card { padding: 32px; }
}

/* ---------- The form's Send button: Gravity Forms paints its buttons from its own CSS
   variables, so point those at the site's button tokens (the form then matches every look) ---------- */
.contact .gform_wrapper.gform-theme {
	--gf-ctrl-btn-bg-color-primary: var(--primary);
	--gf-ctrl-btn-bg-color-hover-primary: var(--primary);
	--gf-ctrl-btn-color-primary: var(--on-primary);
	--gf-ctrl-btn-color-hover-primary: var(--on-primary);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-radius: var(--btn-r);
	--gf-ctrl-btn-font-family: var(--fb);
	--gf-ctrl-btn-font-weight: 700;
	--gf-ctrl-btn-size-md: 50px;
}