.services-map {
	background-color: var(--color-light-bg);
	color: var(--color-off-black);
}

.services-map.section {
	padding-top: 0;
	padding-bottom: clamp(64px, 6vw, 96px);
}

.services-map__inner {
	display: grid;
	gap: clamp(var(--spacing-20), 3vw, var(--spacing-34));
}

.services-map__head {
	max-width: 760px;
}

.services-map__intro {
	max-width: 760px;
}

.services-map__title {
	font-size: clamp(var(--font-size-heading), 4.4vw, var(--font-size-display));
	line-height: var(--line-height-tight);
	color: var(--color-off-black);
}

.services-map__lead {
	max-width: 660px;
	margin-top: var(--spacing-15);
	font-size: var(--font-size-md);
	line-height: var(--line-height-body);
	color: var(--color-gray);
}

.services-map__filter {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: var(--spacing-5);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
	color: var(--color-gray);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	text-underline-offset: 0.28em;
	transition: color var(--transition-base), text-decoration-color var(--transition-base);
}

.services-map__filter:hover,
.services-map__filter.is-active {
	color: var(--color-blue);
	text-decoration-color: currentColor;
}

.services-map__panels {
	display: grid;
	grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr);
	gap: var(--spacing-15);
	align-items: stretch;
}

.service-panel {
	position: relative;
	z-index: 1;
	min-width: 0;
	display: grid;
	gap: clamp(var(--spacing-20), 2.2vw, var(--spacing-32));
	padding: clamp(var(--spacing-20), 2.4vw, var(--spacing-34));
	border-radius: var(--radius-lg);
	background-color: var(--color-white);
	overflow: hidden;
	isolation: isolate;
}

.service-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-position: center;
	background-size: cover;
	opacity: 0.75;
	pointer-events: none;
}

.service-panel--dentistry::before {
	background-image: url("../img/services-map/dentistry-bg.webp");
}

.service-panel--cosmetology::before {
	background-image: url("../img/services-map/cosmetology-bg.webp");
}

.service-panel--osteopathy-massage::before {
	background-image: url("../img/services-map/osteopathy-massage-bg.webp");
}

.service-panel--dentistry {
	grid-row: 1 / span 2;
}

.service-panel--cosmetology,
.service-panel--osteopathy-massage {
	grid-column: 2;
}

.service-panel__cover {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--spacing-24);
	align-items: start;
}

.service-panel__copy {
	width: 100%;
	min-width: 0;
	max-width: 620px;
}

.service-panel__title {
	font-size: clamp(var(--font-size-xl), 2.4vw, var(--font-size-heading));
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	color: var(--color-off-black);
}

.service-panel__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-6) var(--spacing-15);
	align-content: flex-start;
	margin-top: var(--spacing-15);
}

.service-panel__mark {
	display: grid;
	justify-items: end;
}

.service-panel__icon {
	width: clamp(76px, 7vw, 116px);
	height: clamp(76px, 7vw, 116px);
	object-fit: contain;
}

.service-panel__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--spacing-10);
}

.service-panel--cosmetology .service-panel__list,
.service-panel--osteopathy-massage .service-panel__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-item {
	min-width: 0;
	transition: opacity var(--transition-base), filter var(--transition-base);
}

.service-item.is-muted {
	opacity: 0.32;
	filter: grayscale(1);
}

.service-item.is-muted:hover,
.service-item.is-muted:focus-within {
	opacity: 0.58;
}

.service-item__link {
	position: relative;
	display: grid;
	grid-template-columns: clamp(54px, 5vw, 70px) minmax(0, 1fr);
	align-items: center;
	gap: var(--spacing-14);
	min-height: 116px;
	padding: var(--spacing-15);
	border-radius: var(--radius-md);
	transition: background-color var(--transition-base), opacity var(--transition-base);
}

.service-item__link:hover,
.service-item__link:focus-visible {
	background-color: color-mix(in srgb, var(--color-off-white) 72%, transparent);
}

.service-item__arrow {
	position: absolute;
	top: 50%;
	right: var(--spacing-15);
	display: inline-grid;
	place-items: center;
	color: var(--color-blue);
	font-size: var(--font-size-md);
	line-height: 1;
	opacity: 0;
	transform: translate(-4px, -50%);
	pointer-events: none;
	transition: opacity var(--transition-base), transform var(--transition-base), color var(--transition-base);
}

.service-item__link:hover .service-item__arrow {
	opacity: 1;
	transform: translate(0, -50%);
}

.service-item__link:active .service-item__arrow {
	color: var(--color-blue-dark);
}

.service-item__icon {
	display: grid;
	place-items: center;
	width: clamp(54px, 5vw, 70px);
	height: clamp(54px, 5vw, 70px);
}

.service-item__icon img {
	width: clamp(50px, 4.6vw, 66px);
	height: clamp(50px, 4.6vw, 66px);
	object-fit: contain;
	transition: transform var(--transition-base);
}

.service-item__copy {
	display: grid;
	min-width: 0;
	grid-template-rows: auto auto;
	gap: var(--spacing-5);
	padding-right: var(--spacing-20);
}

.service-item__title {
	display: block;
	min-height: 0;
	font-size: clamp(var(--font-size-base), 1.05vw, var(--font-size-md));
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
	color: var(--color-off-black);
	transition: color var(--transition-base);
}

.service-item__price {
	font-size: clamp(var(--font-size-sm), 0.9vw, var(--font-size-base));
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	color: var(--color-blue);
	white-space: nowrap;
}

.service-item__link:hover .service-item__title,
.service-item__link:focus-visible .service-item__title {
	color: var(--color-blue);
}

.service-item__link:hover .service-item__icon img,
.service-item__link:focus-visible .service-item__icon img {
	transform: scale(1.05);
}

.services-map__foot {
	display: grid;
	grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(var(--spacing-32), 5vw, 72px);
	padding-top: clamp(var(--spacing-32), 4vw, 56px);
	border-top: var(--frame-border);
}

.services-map__foot-intro {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-15);
	max-width: 680px;
}

.services-map__foot-icon {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: clamp(32px, 3vw, 40px);
	height: clamp(32px, 3vw, 40px);
	margin-top: 0.08em;
	border-radius: var(--radius-sm);
	color: var(--color-blue);
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1;
}

.services-map__foot-text {
	font-size: clamp(var(--font-size-lg), 1.5vw, var(--font-size-xl));
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
	color: var(--color-off-black);
}

.services-map__form {
	--cosmic-field-label-bg: var(--color-light-bg);
	min-width: 0;
}

.services-map__form-row {
	--services-form-control-height: calc(var(--spacing-14) + var(--spacing-14) + var(--font-size-base) + var(--spacing-5));
	display: grid;
	grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(180px, 0.95fr) auto;
	gap: var(--spacing-10);
	align-items: start;
}

.services-map__field,
.services-map__action {
	min-width: 0;
	display: grid;
	gap: var(--spacing-6);
}

.services-map__label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
	color: var(--color-gray);
}

.services-map__field .cosmic-field__label {
	font-size: var(--font-size-sm);
}

.services-map__label--empty {
	visibility: hidden;
}

.services-map__field input {
	width: 100%;
	height: var(--services-form-control-height);
	min-height: 0;
	padding: 0 var(--spacing-20);
	border: var(--frame-border);
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	color: var(--color-gray-dark);
	font: inherit;
	font-size: clamp(var(--font-size-base), 1vw, var(--font-size-md));
	font-weight: var(--font-weight-regular);
	line-height: 1.2;
	transition: border-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
	color-scheme: light;
}

.services-map__field input::placeholder {
	color: var(--color-gray);
	opacity: 0;
}

.services-map__field input:hover {
	border-color: color-mix(in srgb, var(--color-off-black) 18%, transparent);
}

.services-map__field input:focus {
	outline: none;
	border-color: var(--color-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-blue) 12%, transparent);
}

.services-map__form-button {
	height: var(--services-form-control-height);
	min-height: var(--services-form-control-height);
	margin-top: 0;
	align-self: start;
	white-space: nowrap;
}

.services-map__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-10);
	margin-top: var(--spacing-10);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-body);
	color: var(--color-gray);
}

.services-map__consent input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.18em;
	accent-color: var(--color-blue);
}

@media (max-width: 1299px) {
	.services-map__panels {
		grid-template-columns: 1fr;
	}

	.service-panel--dentistry,
	.service-panel--cosmetology,
	.service-panel--osteopathy-massage {
		grid-column: auto;
		grid-row: auto;
	}

	.service-panel--cosmetology .service-panel__list,
	.service-panel--osteopathy-massage .service-panel__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1300px) and (max-width: 1400px) {
	.service-panel--dentistry .service-item__link {
		grid-template-columns: var(--font-size-display) minmax(0, 1fr);
		gap: var(--spacing-10);
		padding: var(--spacing-10);
	}

	.service-panel--dentistry .service-item__arrow {
		display: none;
	}

	.service-panel--dentistry .service-item__icon,
	.service-panel--dentistry .service-item__icon img {
		width: var(--font-size-display);
		height: var(--font-size-display);
	}

	.service-panel--dentistry .service-item__copy {
		padding-right: 0;
	}
}

@media (max-width: 1040px) {
	.services-map__foot {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.services-map__head {
		max-width: none;
	}
}

@media (max-width: 820px) {
	.services-map__form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.services-map__form-button {
		width: 100%;
	}

	.services-map__action {
		width: 100%;
	}
}

@media (max-width: 720px) {
	.service-panel__cover {
		grid-template-columns: 1fr;
	}

	.service-panel__mark {
		justify-items: start;
		text-align: left;
	}

	.service-panel__list,
	.service-panel--cosmetology .service-panel__list,
	.service-panel--osteopathy-massage .service-panel__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 640px) {
	.service-panel {
		gap: var(--spacing-20);
		padding: var(--spacing-15);
	}

	.service-panel__cover {
		gap: var(--spacing-15);
	}

	.service-panel__filters {
		max-width: 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-padding-inline: var(--spacing-15);
		scroll-snap-type: inline proximity;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--spacing-15));
		margin-top: var(--spacing-10);
		padding-inline: var(--spacing-15);
		padding-bottom: var(--spacing-6);
		-webkit-overflow-scrolling: touch;
	}

	.service-panel__filter {
		flex: 0 0 auto;
		min-height: calc(var(--spacing-20) * 2 + var(--spacing-5));
		padding-inline: var(--spacing-10);
		scroll-snap-align: start;
		white-space: nowrap;
	}

	.service-panel__filters::-webkit-scrollbar {
		display: none;
	}

	.service-panel__mark {
		display: none;
	}

	.service-panel__icon {
		width: 64px;
		height: 64px;
	}

	.service-panel__list,
	.service-panel--cosmetology .service-panel__list,
	.service-panel--osteopathy-massage .service-panel__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--spacing-6);
	}

	.service-item__link {
		grid-template-columns: 50px minmax(0, 1fr);
		min-height: 104px;
		gap: var(--spacing-10);
		padding: var(--spacing-10);
	}

	.service-item__arrow {
		display: none;
	}

	.service-item__icon {
		width: 50px;
		height: 50px;
	}

	.service-item__icon img {
		width: 48px;
		height: 48px;
	}

	.service-item__copy {
		gap: var(--spacing-5);
		padding-right: 0;
	}

	.service-item__title {
		min-height: 0;
		font-size: clamp(var(--font-size-sm), 2.6vw, var(--font-size-base));
		line-height: var(--line-height-heading);
	}

	.service-item__price {
		font-size: var(--font-size-sm);
	}

}

@media (max-width: 460px) {
	.service-panel {
		gap: var(--spacing-15);
		padding: var(--spacing-10);
	}

	.service-panel__filters {
		margin-inline: calc(-1 * var(--spacing-10));
		padding-inline: var(--spacing-10);
	}

	.service-panel__title {
		font-size: clamp(var(--font-size-lg), 7vw, var(--font-size-xl));
	}

	.service-item__link {
		display: grid;
		grid-template-columns: var(--spacing-32) minmax(0, 1fr);
		align-items: center;
		min-height: 88px;
		gap: var(--spacing-6);
		padding: var(--spacing-6);
	}

	.service-item__icon {
		width: var(--spacing-32);
		height: var(--spacing-32);
	}

	.service-item__icon img {
		width: var(--spacing-32);
		height: var(--spacing-32);
	}

	.service-item__title,
	.service-item__price {
		min-height: 0;
	}

	.service-item__title {
		font-size: var(--font-size-sm);
		hyphens: auto;
	}

	.service-item__price {
		font-size: var(--font-size-sm);
	}

	.services-map__form-row {
		grid-template-columns: 1fr;
	}

	.services-map__field input,
	.services-map__form-button {
		height: var(--services-form-control-height);
		min-height: var(--services-form-control-height);
	}

	.services-map__action {
		gap: 0;
	}

	.services-map__label--empty {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.services-map__filter,
	.service-item,
	.service-item__link,
	.service-item__arrow,
	.service-item__icon img,
	.service-item__title,
	.services-map__field input {
		transition: none;
	}
}