/* ==========================================================================
   CONTACT PAGE (page-specific styles)
   ========================================================================== */

.contact {
	display: flex;
	flex-direction: column;
	padding-top: 50px;
}

/* Hero — contact-specific overrides on shared page-hero
   ========================================================================== */

.contact .page-hero__subtitle {
	color: var(--color-fg);
	line-height: var(--line-height-tight);
	letter-spacing: -0.02em;
	max-width: 604px;
}

/* Body
   ========================================================================== */

.contact__body {
	padding-top: var(--space-md);
	padding-bottom: var(--space-3xl);
}

.contact__body .container {
	max-width: 1080px;
}

/* Office cards — uses .gradient-border utility */
.contact__cards {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 20px;
}

/* Each office block (map + info) */
.contact__office {
	display: flex;
	gap: 20px;
	align-items: center;
	position: relative;
	width: min(290px, 100%);
	margin-left: auto;
	margin-right: auto;
}

/* Divider via pseudo-element — horizontal when stacked */
.contact__office + .contact__office::before {
	content: '';
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--color-card-border);
}

.contact__office-map {
	width: 90px;
	height: 90px;
	flex-shrink: 0;
	object-fit: contain;
}

.contact__office-info {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

.contact__office-label {
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.02em;
	line-height: var(--line-height-tight);
	color: var(--color-fg);
	margin-bottom: 0;
}

.contact__office-region {
	color: var(--color-secondary);
}

.contact__office-address {
	font-family: var(--font-body);
	font-size: var(--font-size-b1);
	font-weight: var(--font-weight-regular);
	letter-spacing: -0.02em;
	line-height: var(--line-height-tight);
	color: var(--color-fg);
}

/* Tablet (>=768px) — horizontal layout, vertical divider
   ========================================================================== */

@media (min-width: 768px) {

	.contact .page-hero__title {
		margin-top: -50px;
	}

	.contact .page-hero__content {
		padding-bottom: 32px;
	}

	.contact__cards {
		flex-direction: row;
		align-items: flex-start;
		padding: 36px;
		width: auto;
		max-width: none;
	}

	.contact__office {
		flex: 1;
		align-items: flex-start;
		width: auto;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.contact__office-map {
		width: 140px;
		height: 140px;
	}

	/* Vertical divider */
	.contact__office + .contact__office::before {
		top: 0;
		bottom: 0;
		left: -20px;
		right: auto;
		width: 1px;
		height: auto;
	}
}

/* Desktop (>=1024px)
   ========================================================================== */

@media (min-width: 1024px) {
	.contact__body {
		padding-top: var(--space-lg);
	}

	.contact__office-map {
		width: 180px;
		height: 180px;
	}
}