/* Contact Info section — Figma 169-1030
   Content frame: 1280px wide within 1440px page → 80px (5rem) side margins.
   Left col gap (heading→details) 20px; right col gap (heading→socials) 38px.
   Address columns: 193 / 188 / 165px, 29px gaps; 36px before divider & phone. */

.contact-info {
	background: #ebebeb;
	padding-top:    var( --ci-pt, 3.5rem );
	padding-bottom: var( --ci-pb, 3.5rem );
	margin-top:     var( --ci-mt, 0rem );
	margin-bottom:  var( --ci-mb, 0rem );
}

.contact-info__inner {
	max-width: 90rem;          /* 1440px */
	margin: 0 auto;
	padding: 0 5rem;           /* 80px → 1280px content, matches Figma */
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;
}

.contact-info__left {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;              /* 20px heading → details */
	min-width: 0;
}

.contact-info__right {
	display: flex;
	flex-direction: column;
	gap: 2.375rem;             /* 38px heading → socials */
	flex-shrink: 0;
	align-items: flex-start;
}

/* ── Headings ── */
.contact-info__heading {
	font-family: 'Quincy', Georgia, serif;
	font-size: 2.25rem;        /* 36px */
	font-weight: 400;
	font-style: normal;
	line-height: 1.25;
	color: #000d26;
	margin: 0;
}

/* ── Contact details row ── */
.contact-info__details {
	display: flex;
	align-items: center;
	gap: 2.25rem;              /* 36px */
	flex-wrap: nowrap;
}

.contact-info__addresses {
	display: flex;
	gap: 1.8125rem;            /* 29px */
	align-items: flex-start;
	flex-wrap: nowrap;
}

.contact-info__address {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.125rem;       /* 18px */
	font-weight: 400;
	line-height: 1.55;
	color: #0a1628;
	margin: 0;
	flex-shrink: 0;
}

/* Figma column widths — forces each address to a tidy 2-line block */
.contact-info__addresses .contact-info__address:nth-child(1) { width: 12.0625rem; } /* 193px */
.contact-info__addresses .contact-info__address:nth-child(2) { width: 11.75rem;   } /* 188px */
.contact-info__addresses .contact-info__address:nth-child(3) { width: 10.3125rem; } /* 165px */

.contact-info__address a {
	color: inherit;
	text-decoration: none;
}

.contact-info__address a:hover {
	text-decoration: underline;
}

.contact-info__divider {
	width: 1px;
	height: 2.125rem;          /* 34px */
	background: #0a1628;
	opacity: 0.25;
	flex-shrink: 0;
	align-self: center;
}

.contact-info__phone {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.125rem;       /* 18px */
	font-weight: 400;
	line-height: 1.55;
	color: #0a1628;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.contact-info__phone:hover {
	text-decoration: underline;
}

/* ── Socials ── */
.contact-info__socials {
	display: flex;
	gap: 2.5rem;               /* 40px */
	align-items: center;
}

.contact-info__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s;
}

.contact-info__social-link:hover {
	opacity: 0.65;
}

.contact-info__social-link img {
	width: 2rem;               /* 32px */
	height: 2rem;
	display: block;
}

/* ── Responsive ── */
@media (max-width: 1280px) {
	.contact-info__inner { padding: 0 3rem; }
}

/* ≤1200px — stack the "Follow Our Socials" column under the contact column */
@media (max-width: 1200px) {
	.contact-info__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 2.5rem;
	}
}

/* ≤768px — addresses keep their row; phone drops to its own line, so the
   now-orphaned divider is hidden */
@media (max-width: 768px) {
	.contact-info__inner { padding: 0 1.5rem; }
	.contact-info__details { flex-wrap: wrap; gap: 1.25rem 1.5rem; }
	.contact-info__addresses { flex-wrap: wrap; gap: 1.25rem 1.5rem; }
	.contact-info__addresses .contact-info__address:nth-child(1),
	.contact-info__addresses .contact-info__address:nth-child(2),
	.contact-info__addresses .contact-info__address:nth-child(3) { width: auto; }
	.contact-info__divider { display: none; }
}

/* ≤600px (down to 320px) — center everything */
@media (max-width: 600px) {
	.contact-info {
		padding-top:    var( --ci-pt-m, var( --ci-pt, 2.25rem ) );
		padding-bottom: var( --ci-pb-m, var( --ci-pb, 2.25rem ) );
		margin-top:     var( --ci-mt-m, var( --ci-mt, 0rem ) );
		margin-bottom:  var( --ci-mb-m, var( --ci-mb, 0rem ) );
	}
	.contact-info__inner {
		padding: 0 1rem;
		align-items: center;
		text-align: center;
	}
	.contact-info__left,
	.contact-info__right {
		width: 100%;
		align-items: center;
	}
	.contact-info__details {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
	.contact-info__addresses {
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
	}
	.contact-info__socials {
		justify-content: center;
	}
}