/**
 * Contact page, after Figma's "Contact" (910:11694): the title, text and
 * e-mail on the left, the welcome illustration on the right, reaching into
 * their column where its top left corner is empty. Figma has no tablet or
 * phone frame; there the illustration goes under the text (the container
 * turns into a column in its Elementor settings), like the home page's rows.
 *
 * Loaded on every front-end request, including the Elementor preview.
 */

/* --- Desktop: the illustration over the text column --------------------- */

/* At 1440 Figma has the 1032px illustration start 173px (16.76% of its
   width) inside the 449px text column, its top 29.5px (2.86%) above the
   title and its right edge 30px past the 1276px content box. Narrower, it
   keeps those proportions but scales down to the space left (the 30px only
   while 52px stay outside it), and below 1210px it moves down, up to 80px at
   1025, so the figures stay clear of the text. Percentages here are of the
   content box, for width and margins alike. */
@media (min-width: 1025px) {
	.e-con.tgbp-contact__text {
		position: relative;
		z-index: 1;
		flex-shrink: 0;
	}

	.elementor-element.elementor-widget.tgbp-contact__art {
		--tgbp-art-out: clamp(0px, (100vw - 1276px) / 2 - 52px, 30px);
		--tgbp-art-width: min(1032px, (100% - 449px + var(--tgbp-art-out)) / 0.8324);
		flex: none;
		width: var(--tgbp-art-width);
		max-width: none;
		margin: calc(var(--tgbp-art-width) * -0.0286 + clamp(0px, (1130px - 100%) * 0.42, 80px)) calc(var(--tgbp-art-out) * -1) 0 calc(var(--tgbp-art-width) * -0.1676);
	}
}

/* --- The e-mail address ------------------------------------------------- */

/* Figma's "Link gray" button: a grey line under the address (30px in all with
   the text), gone on hover. */
.elementor-widget.tgbp-contact__email .elementor-heading-title > a {
	display: inline-block;
	padding-bottom: 3px;
	border-bottom: 1px solid #525252;
	color: inherit;
	transition: border-color 0.2s;
}

.elementor-widget.tgbp-contact__email .elementor-heading-title > a:hover {
	border-bottom-color: transparent;
	color: inherit;
}

/* --- Phones ------------------------------------------------------------- */

/* Bold title, like the home page's on phones (font weight isn't a responsive
   setting in Elementor). */
@media (max-width: 767px) {
	.elementor-widget.tgbp-contact__title .elementor-heading-title.elementor-heading-title {
		font-weight: 700;
	}
}