/* Contact page template
--------------------------------------------- */
[data-anhvu-contact-map] iframe {
	display: block;
	width: 100%;
	height: clamp(22rem, 43vw, 34rem);
	border: 0;
}

[data-anhvu-contact-map][data-layout="container"] {
	padding-top: var(--space-xl);
}

[data-anhvu-contact-map][data-layout="container"] iframe {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

[data-anhvu-contact-intro] {
	max-width: 54rem;
	margin-inline: auto;
	text-align: center;
}

[data-anhvu-contact-intro] > :first-child,
[data-anhvu-contact-page-header] > :first-child {
	margin-top: 0;
}

[data-anhvu-contact-intro] > :last-child,
[data-anhvu-contact-page-header] > :last-child {
	margin-bottom: 0;
}

[data-anhvu-contact-page-header] {
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}

[data-anhvu-contact-page-layout] {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
	align-items: start;
	gap: var(--space-xl);
	margin-top: var(--space-xl);
}

[data-anhvu-contact-page-layout][data-no-recipient] {
	grid-template-columns: minmax(0, 1fr);
}

[data-anhvu-contact-page-form],
[data-anhvu-contact-recipient] {
	min-width: 0;
}

[data-anhvu-contact-recipient] {
	padding: 0;
}

[data-anhvu-contact-recipient] h2 {
	margin-top: 0;
}

[data-anhvu-contact-recipient] dl,
[data-anhvu-contact-recipient] dd {
	margin: 0;
}

[data-anhvu-contact-recipient] dl > div {
	display: grid;
	grid-template-columns: minmax(6.5rem, 0.8fr) minmax(0, 1.2fr);
	gap: var(--space-sm);
	padding-block: var(--space-sm);
	border-bottom: 1px dashed var(--color-border);
}

[data-anhvu-contact-recipient] dl > div:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

[data-anhvu-contact-recipient] dt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: var(--font-weight-semibold);
}

[data-anhvu-contact-info-icon] {
	display: inline-block;
	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--anhvu-contact-info-color, var(--color-primary));
	-webkit-mask: var(--anhvu-contact-info-icon) center / contain no-repeat;
	mask: var(--anhvu-contact-info-icon) center / contain no-repeat;
}

[data-anhvu-contact-recipient] dt::after {
	content: ":";
}

[data-anhvu-contact-recipient] dd {
	overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
	[data-anhvu-contact-page-layout] {
		grid-template-columns: minmax(0, 1fr);
	}

	[data-anhvu-contact-recipient] dl > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2rem;
	}
}