/**
 * Three Box Column — Figma Branch Locations (475:2755).
 * Grey band; centred heading; three-column card grid.
 */

.three-box-column {
	--tbc-pad-block: var(--space-80); /* 80px */
	--tbc-header-gap: var(--space-16);
	--tbc-stack-gap: var(--space-48); /* 48px */
	--tbc-grid-gap: var(--space-32); /* 32px */
	--tbc-card-pad: 2.0625rem; /* 33px */
	--tbc-card-gap: var(--space-16);
	--tbc-body-gap: 0.75rem; /* region → address spacing ≈ 12px visual */
	--tbc-contacts-gap: var(--space-4);
	--tbc-lede-size: 1.125rem; /* 18px */
	--tbc-cols: 3;

	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding-block: var(--tbc-pad-block);
	background-color: var(--color-bg-grey);
	border-block: 0.5px solid var(--color-blue-200);
}

.three-box-column__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--tbc-stack-gap);
}

.three-box-column__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tbc-header-gap);
	width: 100%;
	text-align: center;
}

.three-box-column__heading {
	margin: 0;
	max-width: 100%;
	font-family: var(--font-sans);
	font-size: var(--text-display-md-size);
	font-weight: var(--text-display-md-weight);
	line-height: var(--text-heading-line-height);
	letter-spacing: 0.05em; /* 2.4px @ 48px */
	text-transform: uppercase;
	color: var(--color-brand-secondary);
}

.three-box-column__lede {
	margin: 0;
	max-width: 100%;
	font-family: var(--font-sans);
	font-size: var(--tbc-lede-size);
	font-weight: var(--text-body-lg-weight);
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--color-grey-blue-2);
}

.three-box-column__grid {
	display: grid;
	grid-template-columns: repeat(var(--tbc-cols), minmax(0, 1fr));
	gap: var(--tbc-grid-gap);
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.three-box-column__card {
	display: flex;
	flex-direction: column;
	gap: var(--tbc-card-gap);
	margin: 0;
	padding: var(--tbc-card-pad);
	background-color: var(--color-bg-white);
	border: 1px solid var(--color-bg-blue-light);
	border-radius: 0.5rem; /* 8px */
	box-sizing: border-box;
}

.three-box-column__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-h3-size);
	font-weight: var(--text-h3-weight);
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-brand-secondary);
}

.three-box-column__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--tbc-body-gap);
	min-width: 0;
}

.three-box-column__subtitle {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-body-size);
	font-weight: var(--text-label-weight);
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-grey-blue-1);
}

.three-box-column__address {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-body-lg-size);
	font-weight: var(--text-body-lg-weight);
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--color-grey-blue-2);
	white-space: pre-line;
}

.three-box-column__contacts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--tbc-contacts-gap);
	margin-block-start: auto;
	padding-block-start: var(--space-16);
}

.three-box-column__link {
	font-family: var(--font-sans);
	font-size: var(--text-body-lg-size);
	font-weight: var(--text-body-lg-weight);
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--color-brand-secondary);
	text-decoration: none;
	word-break: break-word;
	transition: color 0.2s ease;
}

.three-box-column__link:hover,
.three-box-column__link:focus-visible {
	color: var(--color-brand-accent);
	text-decoration: underline;
}

.three-box-column__link:focus-visible {
	outline: 2px solid var(--color-brand-secondary);
	outline-offset: 2px;
}

@media (max-width: 1439px) {
	.three-box-column {
		--tbc-pad-block: var(--space-64);
	}
}

@media (max-width: 1023px) {
	.three-box-column {
		--tbc-cols: 2;
		--tbc-stack-gap: var(--space-40);
	}

	.three-box-column__heading {
		font-size: var(--text-h2-size);
	}
}

@media (max-width: 767px) {
	.three-box-column {
		--tbc-pad-block: var(--space-48);
		--tbc-cols: 1;
		--tbc-stack-gap: var(--space-32);
		--tbc-card-pad: var(--space-24);
	}

	.three-box-column__heading {
		font-size: var(--text-h2-size);
	}

	.three-box-column__lede {
		font-size: var(--text-body-lg-size);
	}
}

@media (prefers-reduced-motion: reduce) {
	.three-box-column__link {
		transition: none;
	}
}