@charset "UTF-8";
/**
 * GenieBuilder — Contact Card & Form.
 * The team's card and an optional agent's card, then a GenieCRM form.
 * Token-driven; every value below can be changed from the element's
 * style panel.
 */

.mlsg-gb-contact {
	--mlsg-gb-contact-gap: var(--mlsg-gb-space-lg);
	--mlsg-gb-contact-divider: var(--mlsg-gb-color-border);
	--mlsg-gb-contact-photo: 4.5rem;
	--mlsg-gb-contact-social: 2.25rem;
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-gb-contact-gap);
	width: 100%;
	color: var(--mlsg-gb-color-text);
}

.mlsg-gb-contact__heading,
.mlsg-gb-contact__form-heading {
	margin: 0;
	color: var(--mlsg-gb-color-text);
}

.mlsg-gb-contact__body {
	display: grid;
	grid-template-columns: var(--mlsg-gb-contact-columns, 1fr);
	gap: var(--mlsg-gb-contact-gap);
	align-items: start;
}

.mlsg-gb-contact__people {
	display: grid;
	grid-template-columns: var(--mlsg-gb-contact-cards, 1fr);
	gap: var(--mlsg-gb-space-md);
}

/* Dividing lines (on unless switched off): under the cards, and between
   the team's card and the agent's when they stack. */
.mlsg-gb-contact-lines-yes .mlsg-gb-contact__people {
	padding-bottom: var(--mlsg-gb-contact-gap);
	border-bottom: 1px solid var(--mlsg-gb-contact-divider);
}

/* Side by side (--mlsg-gb-contact-card-rule: 0px from the element), the cards
   need no line between them. */
.mlsg-gb-contact-lines-yes .mlsg-gb-contact__person + .mlsg-gb-contact__person {
	padding-top: calc(var(--mlsg-gb-space-md) * var(--mlsg-gb-contact-card-rule-on, 1));
	border-top: var(--mlsg-gb-contact-card-rule, 1px) solid var(--mlsg-gb-contact-divider);
}

.mlsg-gb-contact__person {
	--mlsg-gb-contact-align: flex-start;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--mlsg-gb-space-md);
	min-width: 0;
}

.mlsg-gb-contact .mlsg-gb-contact__photo {
	display: grid;
	flex: none;
	place-items: center;
	align-self: var(--mlsg-gb-contact-align);
	width: var(--mlsg-gb-contact-photo-w, var(--mlsg-gb-contact-photo));
	height: var(--mlsg-gb-contact-photo);
	object-fit: cover;
	background-color: var(--mlsg-gb-color-placeholder);
}

.mlsg-gb-contact .mlsg-gb-contact__person--team .mlsg-gb-contact__photo {
	object-fit: contain;
}

/* No photo: the name's initials on the brand colour. */
.mlsg-gb-contact .mlsg-gb-contact__photo--initials {
	background-color: var(--mlsg-gb-color-primary);
	color: var(--mlsg-gb-color-badge-text);
	font-size: 1.25rem;
	font-weight: 700;
}

/* Shapes. Scoped under the element so they outrank Elementor's own
   ".elementor img { border-radius: 0; height: auto; }", which otherwise
   flattens every shape and the photo's height (measured on a live page). */
.mlsg-gb-contact .mlsg-gb-contact__photo--circle {
	border-radius: 50%;
}

.mlsg-gb-contact .mlsg-gb-contact__photo--rounded {
	border-radius: var(--mlsg-gb-contact-radius, 0.625rem);
}

.mlsg-gb-contact .mlsg-gb-contact__photo--square {
	border-radius: 0;
}

.mlsg-gb-contact .mlsg-gb-contact__photo--hexagon {
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.mlsg-gb-contact .mlsg-gb-contact__photo--shield {
	clip-path: polygon(50% 0, 100% 12%, 100% 52%, 92% 72%, 72% 88%, 50% 100%, 28% 88%, 8% 72%, 0 52%, 0 12%);
}

.mlsg-gb-contact .mlsg-gb-contact__photo--arch {
	border-radius: 50% 50% 0.5rem 0.5rem / 40% 40% 0.5rem 0.5rem;
}

.mlsg-gb-contact .mlsg-gb-contact__photo--blob {
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
}

/* My own shape: an uploaded image masks the photo (--mlsg-gb-contact-mask is
   set by the element from the upload). */
.mlsg-gb-contact .mlsg-gb-contact__photo--mask {
	-webkit-mask-image: var(--mlsg-gb-contact-mask, none);
	mask-image: var(--mlsg-gb-contact-mask, none);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.mlsg-gb-contact__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: var(--mlsg-gb-contact-align);
	gap: var(--mlsg-gb-space-xs);
	min-width: 0;
	text-align: inherit;
}

.mlsg-gb-contact__bio {
	margin: var(--mlsg-gb-space-xs) 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--mlsg-gb-color-text);
}

.mlsg-gb-contact__extra {
	font-size: 0.9375rem;
	color: var(--mlsg-gb-color-text);
}

.mlsg-gb-contact__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mlsg-gb-color-muted);
}

.mlsg-gb-contact__name {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mlsg-gb-color-text);
}

.mlsg-gb-contact__meta {
	font-size: 0.9375rem;
	color: var(--mlsg-gb-color-muted);
}

.mlsg-gb-contact__lines {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mlsg-gb-space-xs) var(--mlsg-gb-space-md);
	margin-top: var(--mlsg-gb-space-xs);
}

.mlsg-gb-contact a.mlsg-gb-contact__line {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 1rem;
	color: var(--mlsg-gb-color-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mlsg-gb-contact a.mlsg-gb-contact__line:hover {
	text-decoration: underline;
}

.mlsg-gb-contact__line-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	color: var(--mlsg-gb-color-primary);
}

.mlsg-gb-contact__line-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mlsg-gb-contact__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mlsg-gb-space-sm);
	margin: var(--mlsg-gb-space-xs) 0 0;
	padding: 0;
	list-style: none;
}

.mlsg-gb-contact a.mlsg-gb-contact__social-link {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: var(--mlsg-gb-contact-social);
	height: var(--mlsg-gb-contact-social);
	border-radius: var(--mlsg-gb-radius-badge);
	background-color: var(--mlsg-gb-color-primary);
	color: var(--mlsg-gb-color-badge-text);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mlsg-gb-contact a.mlsg-gb-contact__social-link:focus-visible,
.mlsg-gb-contact a.mlsg-gb-contact__line:focus-visible {
	outline: 2px solid var(--mlsg-gb-color-primary);
	outline-offset: 2px;
}

/* Icons carry only what this element sets; broad theme rules on icons in
   links would otherwise box or pad them. */
.mlsg-gb-contact .mlsg-gb-contact__person i {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.mlsg-gb-contact__form {
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-gb-space-md);
	min-width: 0;
}

.mlsg-gb-contact__note {
	margin: 0;
	color: var(--mlsg-gb-color-muted);
}

@media (max-width: 767px) {
	.mlsg-gb-contact__body,
	.mlsg-gb-contact__people {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlsg-gb-contact a.mlsg-gb-contact__social-link {
		transition: none;
	}
}