/* ==========================================================================
   Contact Mega Block
   ========================================================================== */

/* Block Container
   ========================================================================== */
section.block-contact-mega {
	padding-bottom: 0;
}

/* Filter Tabs
   ========================================================================== */
.contact-filter__btn {
	padding-bottom: 18px;
	position: relative;
	outline: none;
	color: var(--base-ultra-light);
	transition: 0.2s ease-out;
}

.contact-filter__btn:is(:hover, :focus-visible),
.contact-filter__btn.active {
	color: var(--primary-ultra-dark);
}

.contact-filter__indicator {
	opacity: 0;
	transition: opacity 0.2s;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
}

.contact-filter__btn:is(:hover, :focus-visible) .contact-filter__indicator,
.contact-filter__btn.active .contact-filter__indicator {
	opacity: 1;
}

/* Search Input
   ========================================================================== */
.contact-filter__search {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--base);
	outline: none;
}

.contact-filter__search::placeholder {
	color: var(--base-ultra-light);
}

/* Tab Panels
   ========================================================================== */
#offices,
#people,
#sales {
	display: none !important;
}

#offices.active,
#people.active,
#sales.active {
	display: grid !important;
}

@media screen and (max-width: 1025px) {
	#offices.active {
		gap: var(--gap-s) !important;
	}
	#people.active,
	#sales.active {
		gap: var(--gap-xs3) !important;
	}
}

/* Offices Panel
   ========================================================================== */
#offices {
	column-gap: 53px;
	row-gap: var(--gap-m);
}

@media screen and (min-width: 1026px) and (max-width: 1350px) {
	#offices > div {
		grid-column-end: span 6;
	}
}

3/* People Panel
   ========================================================================== */
#people {
	row-gap: var(--gap-xs);
}

/* ==========================================================================
   Mobile Styles
   ========================================================================== */
@media screen and (max-width: 1025px) {
	/* Filter Tabs */
	.contact-filter__btn {
		padding-bottom: 10px;
	}

	.contact-filter__indicator {
		bottom: -2px;
	}

	.contact-filter__btn-wrapper {
		flex-direction: column !important;
		align-items: start !important;
		padding-bottom: var(--gap-xs4);
	}

	.contact-filter__search {
		width: 100%;
		max-width: 100%;
		padding: var(--gap-xs7) 0;
	}
	.contact-filter__indicator.contact-filter__indicator {
		left: 0;
		transform: unset;
	}
}

.contact-office {
	background: white;
	padding: var(--gap-xs5);
	border-radius: var(--radius-m);
}
.contact-office .contact-person--card.contact-person--card.contact-person--card {
	padding: 0;
}

.contact-office__contacts {
	margin-top: auto;
}

@media screen and (max-width: 1025px) {
	.people-search-wrapper {
		align-items: start !important;
		flex-direction: column !important;
		gap: 0 !important;
	}
}

@media screen and (max-width: 1025px) {
	.contact-office {
		width: 100vw;
		border-radius: 0;
		position: relative;
		left: calc(var(--gutter) * -1);
	}
}