/* Contact + map */

.contact__container {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: var(--container);
	margin: 0 auto;
}

.contact__intro {
	display: flex;
	flex-direction: column;
	gap: 23px;
	max-width: 522px;
}

.contact__lead {
	color: var(--color-neutral-1);
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

/*
 * Figma 185:712 — a 522x279 window, square corners, flush with the map strip below.
 * The portrait is deliberately over-scaled inside it (125.44% x 131.06%, nudged
 * left and up) so the three doctors fill the frame instead of floating in white.
 */
.contact__image {
	position: relative;
	width: 100%;
	max-width: 522px;
	aspect-ratio: 522 / 279;
	overflow: hidden;
}

.contact__image img {
	position: absolute;
	left: -17.8%;
	top: -4.27%;
	width: 125.44%;
	height: 131.06%;
	max-width: none;
	object-fit: cover;
}

.contact__info {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	/*
	 * Cells hug their content, so the socials block gains no dead space below it
	 * just because the opening hours beside it are taller — and rows keep the gap
	 * they are given instead of stretching to fill the column height.
	 */
	align-items: start;
	align-content: start;
	max-width: 672px;
}

.contact__block-label {
	margin-bottom: 15px;
	color: var(--color-neutral-2);
	font-size: var(--body-small-size);
	line-height: 1.4;
}

.contact__value {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-primary);
	font-size: var(--body-secondary-size);
	line-height: var(--body-lh);
	letter-spacing: var(--body-secondary-ls);
}

.contact__value img { width: 14px; height: 14px; flex: 0 0 14px; }

.contact__value--multiline { display: block; }

/*
 * Figma 185:756 — 45px badges, each a #F0F0F0 disc with a #1A294A glyph, 10px apart.
 * The disc is part of the exported SVG, so the link itself carries no border or fill.
 * (The footer uses lighter #9BA3AF glyphs — different icons, do not share these.)
 */
.contact__socials {
	display: flex;
	gap: 10px;
	margin-top: 6px;
}

.contact__social {
	display: block;
	border-radius: 50%;
	transition: opacity .2s ease;
}

.contact__social:hover { opacity: .8; }

.contact__social img { width: 45px; height: 45px; }


.contact-map {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
}

@media (min-width: 640px) {
	/*
	 * Figma 185:763 — every row puts its second column at x=315 (170+145, 195+120,
	 * 259+56), so one 259 / 357 track pair with a 56px gutter reproduces all three.
	 */
	.contact__info {
		grid-template-columns: minmax(0, 259px) minmax(0, 357px);
		column-gap: 56px;
	}
}

@media (min-width: 1024px) {
	/*
	 * Figma 185:765 — 100px above the content, no padding below: the portrait runs
	 * flush into the map strip. Columns are 522 / 672 with 139px between them.
	 */
	/*
	 * Figma places this container at x=57 rather than the site's x=50 — a 7px
	 * drift that isn't in any other section. Normalised to the page gutter so
	 * the block lines up with every other section edge.
	 */
	.contact { padding: 100px var(--gutter) 0; }
	/*
	 * The two columns hold their Figma widths at 1440 and shrink together below
	 * it -- `0 1` rather than `0 0`, or the pair overflows every viewport
	 * narrower than the 1340px container they were drawn against.
	 */
	.contact__container {
		flex-direction: row;
		justify-content: space-between;
		gap: clamp(40px, 9vw, 139px);
	}
	.contact__intro { flex: 0 1 522px; min-width: 0; }
	.contact__info { flex: 0 1 672px; min-width: 0; }
	.contact-map { height: 380px; }
}