/* Contact People — Contact page (components/contact-people/contact-people.php) */

.contact-people {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--side-padding);
	display: flex;
	flex-direction: column;
	gap: 80px;
}

/* Card — lavender panel, 40px radius, info left + Calendly right. */
.contact-person {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	column-gap: 10px;
	background: var(--color-card-grey);
	border-radius: 40px; /* Figma; no 40 token (--radius-section is 20) */
	padding: 48px;
	overflow: hidden; /* clip the bottom-bleeding photo to the rounded corner */
}

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

/* Heading — DM Serif Display Regular 48, #1C3153; name in gold gradient. */
.contact-person__title {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: var(--fs-h2); /* 48px */
	line-height: 1.1;
	color: var(--color-navy-mid);
	margin: 0 0 32px;
}

.contact-person__contacts {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Email / phone — Montserrat Bold 16, #0C3D46. */
.contact-person__link {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-family: var(--font-body);
	font-weight: var(--weight-bold);
	font-size: 16px; /* Figma; no 16 token */
	color: var(--color-ink-teal);
	text-decoration: none;
	word-break: break-word;
}

/* Keep it underline-free on hover/focus (overrides the global a:hover rule). */
.contact-person__link:hover,
.contact-person__link:focus-visible {
	text-decoration: none;
}

/* Navy icon chip; icon forced white (matches contact-cards). */
.contact-person__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	background: var(--color-navy-deep);
	border-radius: var(--radius-btn);
}
.contact-person__chip img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

/* Person photo — bare cutout, pinned to the bottom and bleeding to the card edge. */
.contact-person__photo {
	margin-top: auto;
	margin-bottom: -48px; /* cancel the card's bottom padding so the photo touches the bottom edge */
}
.contact-person__photo img {
	display: block;
	max-width: 100%;
	height: auto;
}

.contact-person__booking {
	min-width: 0;
}
/* White frame around the Calendly widget; capped + centered so it isn't sparse. */
.contact-person__calendly {
	max-width: 530px; /* 520 widget + 5px padding each side */
	margin-inline: auto;
	padding: 5px;
	background: var(--color-white);
}
.contact-person__booking .calendly-inline-widget {
	width: 100%;
}
.contact-person__soon {
	font-family: var(--font-body);
	font-size: 16px; /* Figma; no 16 token */
	color: var(--color-text-muted);
	margin: 0;
}

@media (max-width: 1024px) {
	.contact-person {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 32px;
	}
	.contact-person__title {
		font-size: 38px;
	}
	/* Stacked layout: the photo sits above the Calendly column, so no bleed. */
	.contact-person__photo {
		margin-bottom: 0;
	}
}

@media (max-width: 768px) {
	.contact-person {
		padding: 24px;
		border-radius: 24px; /* Figma; no 24 token */
	}
	.contact-person__title {
		font-size: 30px;
	}
}