@font-face {
	font-family: 'GT America';
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/GT-America-LC-Compressed-Bold.otf') format("opentype");
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@view-transition {
	navigation: auto;
}

html {
	accent-color: #9b7863;
	height: 100%;
}

body {
	background: #e1e3e5;
	font-family: 'Inter', system-ui, sans-serif;
	margin: 0;
	height: 100%;
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/** MARK: Map statuses */
.ymaps3--drawer-control-container.open .filters {
	display: block;
}

.filter-group {
	border: none;
	margin: 0;
	padding: 0;
}

.filter-group+.filter-group {
	margin-block-start: 1em;
}

.filter-group__title {
	font-family: 'GT America', sans-serif;
	font-size: 150%;
	text-transform: uppercase;
}

.filter-group--status label::before {
	background: url('../img/k.svg') center / 50% no-repeat rgb(38, 38, 38);
	border-radius: 50%;
	content: '';
	display: inline-block;
	margin-inline-end: .25em;
	padding: 0.55em;
	transform: translateY(.15em);
}

.filter-group--status input[value="in_progress"]+label::before {
	background-color: #9b7863;
}

.filter-group--status input[value="invest"]+label::before {
	background-color: rgb(250, 249, 249);
	background-image: url('../img/k--black.svg');
	outline: 1px solid rgb(38, 38, 38);
}

.city-map:not(:has(.filter-group--status input[value="done"]:checked)) .ymaps3x0--marker:has(.ymaps3--default-marker__background[style*="color: rgb(38, 38, 38);"]),
.city-map:not(:has(.filter-group--status input[value="in_progress"]:checked)) .ymaps3x0--marker:has(.ymaps3--default-marker__background[style*="color: rgb(155, 120, 99);"]),
.city-map:not(:has(.filter-group--status input[value="invest"]:checked)) .ymaps3x0--marker:has(.ymaps3--default-marker__background[style*="color: rgb(250, 249, 249);"]) {
	display: none;
}

.filter-group__link {
	display: block;
	color: #9b7863;
	padding-block: .3em;
}

/** MARK: Project popup */
.ymaps3--popup-marker__position-top .ymaps3--popup-marker_container {
	box-sizing: border-box;
	max-height: calc(100dvh - 100px);
	max-width: 21.25rem;
	overflow-y: auto;
	padding: 1rem;
	scrollbar-color: #666 rgba(0, 0, 0, 0);
	scrollbar-width: thin;
}

.ymaps3--popup-marker_container::-webkit-scrollbar {
	width: 8px;
	background: transparent;
}

.ymaps3--popup-marker_container::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: 4px;
}

.project-popup__cover {
	border-top-left-radius: var(--ymaps3-default-border-radius);
	border-top-right-radius: var(--ymaps3-default-border-radius);
	height: auto;
	margin: -1rem -1rem 1.25rem;
	width: -moz-available;
	width: -webkit-fill-available;
	vertical-align: middle;
}

.project-popup__title {
	font-family: 'GT America', sans-serif;
	font-size: 200%;
	line-height: 1;
	margin: 0 0 0.2em;
	padding-right: 32px;
	text-transform: uppercase;
}

.project-popup__status {
	color: #666;
	margin: 0 0 .5em;
}

.project-popup {
	position: relative;
}

.project-popup p {
	margin: 0;
}

.project-popup p+p {
	margin-block-start: .5em;
}

.project-popup__btn {
	border-radius: 4px;
	background-color: #9b7863;
	color: #FAF9F9 !important;
	display: inline-block;
	font-weight: 500;
	justify-self: start;
	padding: 0.75em 1.5em;
	text-decoration: none;
}

.project-popup__link {
	align-items: center;
	display: inline-flex;
	font-size: 10px;
	justify-content: center;
	line-height: 1;
	min-height: 24px;
	min-width: 24px;
	position: absolute;
	top: 0;
	text-align: center;
	text-decoration: none;
	right: 0;
}

.project-popup__link:hover {
	opacity: 0.8;
}

/** MARK: YMap */
ymaps {
	touch-action: manipulation;
}

.ymaps3x0--marker:has(.ymaps3--default-marker-point:hover) {
	z-index: 1001 !important;
}

.ymaps3--pin ymaps3.ymaps3--default-marker__background {
	filter: none;
}

.ymaps3--default-marker__background::before {
	position: absolute;
	content: '';
	pointer-events: none;
	inset: 0;
	background: url('../img/k.svg') 50% 30% / 45% no-repeat;
}

.ymaps3--small-poi .ymaps3--default-marker__background::before {
	background-position: center;
}

.ymaps3--small-poi ymaps3.ymaps3--default-marker__stroke {
	filter: none;
}

.ymaps3--default-marker__background[style*="color: rgb(250, 249, 249);"]::before {
	background-image: url('../img/k--black.svg');
}

ymaps .ymaps3--hint-title {
	font-family: 'GT America', sans-serif;
	color: rgb(38, 38, 38);
	font-size: 130%;
	font-weight: 500;
	hyphens: auto;
	line-height: 1;
	overflow: initial;
	text-overflow: initial;
	text-transform: uppercase;
	word-break: break-word;
}

ymaps .ymaps3--hint {
	max-width: max-content;
	width: 200px;
	white-space: initial;
}

.ymaps3--small-poi svg {
	transform: scale(1.5);
}

.ymaps3--small-poi .ymaps3--default-marker__background::before {
	background-size: 75%;
	z-index: 1;
}