/**
 * Shared section: contact block (Contact Us).
 *
 * Mobile-first: centered title, the primary-dark offices panel, the map (200px tall,
 * as in Figma), then the form card. From laptop (64em) two columns: panel +
 * map on the left (the map fills the rest of the column's height), the form
 * card on the right (Figma 505 / 957 of 1500, 39px apart). The form inside
 * uses the main size (assets/css/components/form.css) with white, outlined
 * inputs, as in the Contact Page form card.
 *
 * Options (fields of the Contact Us page): a subtitle under the title; maps
 * `each` (a map under every office, Figma 400 × 224); the stacked layout
 * (.contact-block--stacked, Texas Chongo Contact Us): offices side by side
 * from tablet (Figma 400 + 20 + 400 of 1500), the phone and social icons
 * in one centered row (2 × 274), the form card below at 1315 of 1500.
 */

.contact-block {
	padding-block: calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--40)) var(--wp--preset--spacing--90);
}

.contact-block__title {
	max-inline-size: calc(var(--wp--style--global--content-size) * 751 / 1500); /* Figma text box. */
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--primary);
	text-align: center;
}

.contact-block__layout {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.contact-block__aside {
	display: flex;
	flex-direction: column;
}

/* Offices panel */
.contact-block__panel {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

.contact-block__group {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.contact-block__label {
	color: inherit;
}

.contact-block__address,
.contact-block__hours,
.contact-block__directions {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	font-style: normal;
	line-height: var(--wp--custom--line-height--body-sm);
}

/* Two classes: links get their color from the global element styles. */
.contact-block__panel .firm-phone--contact,
.contact-block__panel .contact-block__directions-link {
	color: inherit;
}

.contact-block__panel .firm-phone--contact {
	justify-self: start;
	text-decoration: none;
}

.contact-block__panel .firm-phone--contact:hover {
	text-decoration: underline;
}

.contact-block__group--social {
	gap: var(--wp--preset--spacing--30);
}

.contact-block__social {
	color: var(--wp--preset--color--base);
}

/* Map: the main office's GBP embed (iframe styles in main.css). */
.contact-block__map {
	flex: 1 0 auto;
	min-block-size: calc(var(--wp--preset--spacing--90) * 3);
}

/* Form card */
.contact-block__card {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border-block-start: var(--wp--preset--spacing--20) solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--sm);
}

.contact-block__card-title {
	margin-block-end: var(--wp--preset--spacing--50);
	padding-block-end: var(--wp--preset--spacing--50);
	border-block-end: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--primary);
	text-align: center;
}

/* Subtitle: under the title, which then keeps only a small gap. */
.contact-block__title:has(+ .contact-block__subtitle) {
	margin-block-end: var(--wp--preset--spacing--20);
}

.contact-block__subtitle {
	max-inline-size: calc(var(--wp--style--global--content-size) * 946 / 1500); /* Figma text box. */
	margin: 0 auto var(--wp--preset--spacing--60);
	text-align: center;
}

/* Maps each: one map per office, under its address. */
.contact-block__map--office {
	flex: none;
	min-block-size: 0;
	aspect-ratio: 400 / 224;
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Stacked layout */
.contact-block__stack {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--60);
}

.contact-block__offices {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	inline-size: 100%;
	max-inline-size: calc(var(--wp--style--global--content-size) * 400 / 1500);
	text-align: center;
}

.contact-block__office {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--30);
}

.contact-block--stacked .contact-block__label {
	color: var(--wp--preset--color--primary);
}

.contact-block__stack > .contact-block__map {
	inline-size: 100%;
	max-inline-size: calc(var(--wp--style--global--content-size) * 820 / 1500);
}

.contact-block__details {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--50);
	text-align: center;
}

.contact-block__details .contact-block__group {
	justify-items: center;
}

/* Two classes: links get their color from the global element styles. */
.contact-block__details .firm-phone--contact {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.contact-block__details .firm-phone--contact:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.contact-block--stacked .contact-block__social {
	justify-content: center;
	color: var(--wp--preset--color--primary);
}

.contact-block__stack > .contact-block__card {
	inline-size: 100%;
	max-inline-size: calc(var(--wp--style--global--content-size) * 1315 / 1500);
	margin-block-start: var(--wp--preset--spacing--50);
}

/* tablet: two offices (or more) side by side; phone | social. */
@media (min-width: 48em) {
	.contact-block__offices:has(> .contact-block__office + .contact-block__office) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--50);
		max-inline-size: calc(var(--wp--style--global--content-size) * 820 / 1500);
	}

	.contact-block__details {
		grid-template-columns: repeat(2, minmax(0, calc(var(--wp--style--global--content-size) * 274 / 1500)));
		justify-content: center;
		align-items: start;
	}

	.contact-block__details > :only-child {
		grid-column: 1 / -1;
	}
}

/* laptop: panel + map | form card. */
@media (min-width: 64em) {
	.contact-block {
		padding-block: calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--60));
	}

	.contact-block__title {
		margin-block-end: var(--wp--preset--spacing--80);
	}

	.contact-block__subtitle {
		margin-block-end: var(--wp--preset--spacing--80);
	}

	.contact-block__layout:has(> .contact-block__card) {
		grid-template-columns: minmax(0, 505fr) minmax(0, 957fr);
		align-items: stretch;
		gap: var(--wp--preset--spacing--70);
	}

	.contact-block__panel {
		gap: var(--wp--preset--spacing--50);
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--80);
	}

	.contact-block__card {
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
		border-block-start-width: var(--wp--preset--spacing--40);
	}

	.contact-block__card-title {
		margin-block-end: var(--wp--preset--spacing--70);
		padding-block-end: var(--wp--preset--spacing--50);
	}
}