@import url('components/brand-values.css');

.hc-contacts{
	margin-bottom: 70px;
}

.hc-contacts-page {
	padding-bottom: 80px;
}


.hc-contacts__layout {
	display: grid;
	grid-template-columns: minmax(280px, 499px) minmax(0, 1fr);
	gap: clamp(40px, 8vw, 148px);
	align-items: start;
}

.hc-contacts__layout--single {
	grid-template-columns: minmax(0, 473px);
}

.hc-contacts__departments {
	display: flex;
	flex-direction: column;
	gap: 42px;
	min-width: 0;
}
.hc-contacts-page .rounded-item {
	height: 40px;
}
.hc-contacts-dept__title {
	margin: 0 0 17px;
	font: 400 26px / 1.25 "Stolzl", system-ui, sans-serif;
	color: var(--color-brown);
}

.hc-contacts-dept__rows {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.hc-contacts-page .drawer-nav__link {
	font: 300 18px / 1.3 "Stolzl", system-ui, sans-serif;
	color: var(--color-brown);
}
.hc-contacts-page .drawer-nav__link .rounded-item{
	height: 40px;
}

.hc-contacts__sidebar {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hc-contacts__map {
	padding: 20px;
	/*border: 8px solid rgb(var(--color-pink-rgb) / 60%);*/
	border-radius: 10px;
	background: rgb(var(--color-pink-rgb) / 60%);
	overflow: hidden;
	margin-bottom: 40px;
}

.hc-contacts__map-media {
	display: block;
	width: 100%;
	aspect-ratio: 718 / 395;
	border: 0;
	border-radius: 10px;
	object-fit: cover;
}

.hc-contacts-info__title {
	margin: 0 0 16px;
	font: 400 26px / 30px "Stolzl", system-ui, sans-serif;
	color: var(--color-brown);
}

.hc-contacts-info .drawer-nav__link {
	align-items: center;
	max-width: 337px;
}

.hc-contacts-info__text {
	margin: 0;
	font: 400 16px / 1.5 "Stolzl", system-ui, sans-serif;
	color: var(--color-brown);
}

.hc-contacts-info__text p {
	margin: 0;
}

.hc-contacts-info__text p + p {
	margin-top: 4px;
}

.hc-contacts__details {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.hc-contacts__details--single {
	grid-template-columns: minmax(0, 1fr);
}

.hc-contacts__details-col--info {
	display: flex;
	flex-direction: column;
	gap: 25px;
	padding-left: 15px;
	min-width: 0;
}

.hc-contacts__details-col--actions {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 12px;
	margin-bottom: 5px;
	max-width: 290px;
	width: 100%;
	min-width: 0;
}

.hc-contacts__route.brand__values-btn {
	margin-top: 0;
	width: 100%;
	font: 400 16px / 1.3 "Stolzl", system-ui, sans-serif;
}

.hc-contacts-info--social .hc-contacts-info__title {
	margin-bottom: 21px;
}

.hc-contacts__social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 1200px) {
	.hc-contacts__details {
		align-items: flex-start;
		flex-direction: column;
		gap: 20px;
	}
	.hc-contacts-info .drawer-nav__link,
	.hc-contacts__details-col--actions{
		max-width: 100%;
	}
	.hc-contacts__details-col--info{
		padding-left: 0;
	}
}

@media (max-width: 1023px) {
	.hc-contacts__layout,
	.hc-contacts__layout--single {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 767px) {
	.hc-contacts {
		margin-bottom: 30px;
	}
	.hc-contacts__layout{
		margin-top: -2px;
	}
	.hc-contacts-page {
		padding-bottom: 50px;
	}

	.hc-contacts__departments {
		gap: 22px;
	}

	.hc-contacts-dept__title,
	.hc-contacts-info__title {
		font-size: 20px;
		margin-bottom: 8px;
	}

	.hc-contacts__map {
		padding: 12px;
		border-width: 6px;
	}
	.hc-contacts-page .drawer-nav__link {
		font-size: 18px;
		gap: 5px;
	}
	.hc-contacts-page .rounded-item {
		padding: 0 10px;
	}
	.drawer-nav__link .rounded-item {
		height: 32px;
	}
	.hc-contacts__details {
		flex-direction: column;
		align-items: unset;
	}
	.hc-contacts-dept__rows {
		gap: 15px;
	}
	.hc-contacts__details-col--info {
		padding: 0;
		gap: 10px;
	}
	.hc-contacts-info__text {
		font-size: 18px;
	}
	.hc-contacts__layout .hc-contacts-page .drawer-nav__link {
		gap: 10px;
	}
	.hc-contacts__details-col--info .drawer-nav__link {
		gap: 10px;
	}
	.hc-contacts__social .rounded-item {
		padding: 0 10px;
		height: 32px;
		border-radius: 20px;
		width: 44px;
	}
	.hc-contacts__details-col--actions {
		margin-top: 8px;
		max-width: 100%;
		flex-direction: column-reverse;
	}
	.hc-contacts-dept--lavender .hc-contacts-dept__rows .drawer-nav__link[href^="mailto:"] span:last-child {
		font-size: 15px;
	}
}
