.interactive-map {
	--modal-title-mobile: var(--font-weight-bold) 30px/120% var(--font-body);
	--modal-title-desktop: var(--font-weight-bold) 40px/120% var(--font-body);
	--modal-desc-mobile: var(--font-weight-normal) var(--text-sm)/var(--leading-normal) var(--font-body);
	--modal-desc-desktop: var(--font-weight-normal) var(--text-base)/var(--leading-normal) var(--font-body);
	--modal-slide-counter: var(--font-weight-bold) var(--text-xl)/120% var(--font-body);
	--btn-text-mobile: 450 var(--text-base)/0.7 var(--font-brandon);
	--btn-text-tablet: 450 var(--text-xl)/0.7 var(--font-brandon);
	--modal-img-text: 450 var(--text-base)/120% var(--font-brandon);

	color: var(--primary-color);
	margin-block-start: 30px;
	margin-block-end: 30px;
}

@media screen and (min-width: 40em) {
	.interactive-map {
		margin-block-end: 40px;
	}
}

@media screen and (min-width: 64em) {
	.interactive-map {
		margin-block-end: 60px;
	} 
}

.interactive-map {
	& .map {
		position: relative;
		height: 500px;
		overflow: hidden;
		& .map-wrapper {
			position: relative;
			overflow: auto;
			scroll-behavior: smooth;
			height: 100%;
			width: 100%;

			& .mobile-size,
			& .regional-map,
			& .desktop-size {
				position: absolute;
				top: 0;
				left: 0;
				height: 640px;
				width: 1120px;
			}
			& .regional-map {
				z-index: 2;
				pointer-events: none;
			}
			& .regional-map.active {
				pointer-events: visiblePainted;
			}
		}
		
		& .zoom-out {
			position: relative;
			margin-left: auto;
			margin-top: -54px;
			height: 54px;
			width: 55px;
			z-index: 10;
			background-color: var(--white);
			opacity: 90%;
			border-start-start-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			& i {
				color: var(--blue);
				font-size: 40px;
			}
		}
		& .zoom-out:not(.active) {
			display: none;
		}
		
	}
}

.interactive-map.regional-map {
	& .map {
		height: 750px;
		height: fit-content;
		& .map-wrapper {
			height: auto;
			& .regional-map {
				position: relative;
				width: 100%;
				height: auto;
			}
			& .regional-map svg.mobile {
				display: block;
			}
			& .regional-map svg.desktop {
				display: none;
			}
			& .mobile-size {
				display: none;
			}
		}
	}
}

.interactive-map .desktop-size {
	display: none;
}

@media screen and (min-width: 40em) {
	.interactive-map {
		padding-inline: var(--space-5);
		& .map {
			border-radius: 20px;
			margin-inline: auto;
			max-width: 584px;
			
		}
	}
}

@media screen and (min-width: 64em) {
	.interactive-map {
		& .map {
			height: 640px;
			max-width: 1120px;
			& .mobile-size {
					display: none;
					z-index: -1;
				}
			& .desktop-size {

				display: block;
				z-index: 1;
			}
		}
	}
	
	.interactive-map.regional-map {
		& .map {
			& .map-wrapper {
				& .regional-map svg.mobile {
					display: none;
				}
				& .regional-map svg.desktop {
					display: block;
				}
			}
		}
	}
}
/* Regional Map Animations */
@keyframes mapZoomIn {
    from {
		transform: scale(0.8);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes mapZoomOut {
    from {
		transform: scale(1);
		opacity: 1;
	}
	to {
		transform: scale(0.8);
		opacity: 0;
	}
}

/* Overview Map Animations */
@keyframes mapFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes mapFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


.interactive-map .map-wrapper::-webkit-scrollbar {
	display: none;
}
.interactive-map .map-wrapper {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.interactive-map .map-wrapper {
	& .dmst29.hover,
	& .drst16.hover,
	& .irst26.hover,
	& .dtrst17.hover {
		display: block;
	}
	& .dmst29.hover + path,
	& .drst16.hover + path,
	& .irst26.hover + path,
	& .dtrst17.hover + path {
		cursor: pointer;
	}
}

@media (hover :hover) {
	.interactive-map #Outer_POI > g:hover {
		& .dmst29 {
			display: block;
		}
	}
	.interactive-map .zoom-out:hover {
		border-radius: unset;
		border-start-start-radius: 5px;
		background-color: var(--blue-dark);
		& i {
			color: var(--white);
		}
	}
}

/* Modal Styles */
.interactive-map .takeover {
	opacity: 0;
	height: 0;
}

.interactive-map.regional-map .takeover {
	display: none;
}

.interactive-map .takeover.active {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	cursor: default;
	background-color: #000000BF;
	z-index: 10;
	/* animation-name: modalFadeIn;
	animation-duration: 0.8s; */
}

/* Modal Animations */
@keyframes modalFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes modalFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.interactive-map .modal-container {
	margin-inline: 20px;
	margin-block-start: 43px;
	background: var(--white);
	border-start-start-radius: 20px;
	border-start-end-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	height: auto;
	& .modal-header {
		margin-inline: 33px;
		margin-block-start: 32px;
		& .title-desc {
			margin-block-end: 20px;
		}
		& h3 {
			font: var(--modal-title-mobile);
			margin-block-end: 5px;
		}
		& p {
			font: var(--modal-desc-mobile);
		}
	}
	& .highlights {
		padding-block-end: 15px;
	}
	& .arrows {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-inline-start: 33px;
		margin-block-end: 20px;

		& .slide-counter {
			font: var(--modal-slide-counter);
		}
	}
	& .glide__arrow {
		margin: 0;
	}
}

.interactive-map .modal-header h3.line-clamp{
	--text-lines: 2;
}
.interactive-map .modal-header p.line-clamp{
	--text-lines: 4;
}

@media screen and (min-width: 64em) {
	.interactive-map .modal-container .modal-header {
		& .title-desc {
			margin: 0;
			& h3 {
				font: var(--modal-title-desktop);
			}
		}
		& h3.line-clamp {
			--text-lines: 2;
		}
		& p.line-clamp{
			--text-lines: 6;
		}
	} 
}

.interactive-map modal .close-slide,
.interactive-map modal .read-more {
	font: var(--btn-text-mobile);
	text-transform: uppercase;
	padding-inline: 20px;
	padding-block: 16px;
	margin: 0;
	border-radius: 8px;
}

.interactive-map modal .close-slide {
	position: absolute;
	top: 20px;
	right:20px;
	display: flex;
	gap: 5px;
	align-items: center;
	color: var(--blue);
	background: var(--white);
}

.interactive-map modal .close-slide:focus {
	outline-color: var(--white);
}

.interactive-map .close-slide .lines {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 24px;
	flex-shrink: 0;
	margin-top: -3px;
}

.interactive-map .close-slide .lines::before,
.interactive-map .close-slide .lines::after {
	display: block;
	height: 2px;
	content: '';
	border-radius: 2px;
	background: var(--blue);
}

.interactive-map .close-slide .lines {
	height: 15px;
}

.interactive-map .close-slide .lines::before,
.interactive-map .close-slide .lines::after {
	position: absolute;
	inset: 50% auto auto 50%;
	scale: 1;
	width: 65%;
	transition: scale var(--transition-appendix);
}

.interactive-map .close-slide .lines::before {
	translate: -50% 225%;
	rotate: -45deg;
	transform-origin: left center;
}

.interactive-map .close-slide .lines::after {
	translate: -75% 225%;
	rotate: 45deg;
	transform-origin: right center;
}

@media (hover: hover) {
	.interactive-map .close-slide:hover .lines::before,
	.interactive-map .close-slide:hover .lines::after {
		scale: 0.55 1;
	}
}

.interactive-map .takeover:not(.active) .close-slide {
	display: none;
}

/* Modal Highlights Container Styles */
.interactive-map .highlights .inner {
	position: relative;
}

.interactive-map .inner .content-section {
	position: absolute;
	bottom: 20px;
	right: var(--space-2);
	left: var(--space-2);
	z-index: 1;
	padding-inline: var(--space-4);
}

@media screen and (min-width: 40em) {
	.interactive-map .inner .content-section {
		bottom: 25px;
	}
}

.interactive-map .content-section .content-title {
	font: var(--modal-img-text);
	color: var(--white);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	width: fit-content;
	margin-inline: auto;
	padding-block-end: 2px;
	background-image: linear-gradient(var(--white) 0 0);
	background-position: 0 100%;
	background-size: 0% 3px;
	background-repeat: no-repeat;
	transition:
		background-size 0.4s,
		background-position 0s 0.4s;
}

.interactive-map .slide:hover .content-section .content-title,
.interactive-map .slide:focus .content-section .content-title {
	background-position: 100% 100%;
	background-size: 100% 3px;
}

.interactive-map .glide__arrow[disabled] {
	filter: grayscale(100%);
}

.interactive-map .modal-container .slider-cont::before {
	content: '';
	z-index: 10;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background: linear-gradient(90deg,rgba(255, 255, 255, 0.9) 0%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgba(255, 255, 255, 0.9) 100%);
	pointer-events: none;
}

@media screen and (min-width: 64em) {
	.interactive-map .modal-container .slider-cont::before {
		display: none;
	}
	.interactive-map .modal-container {
		margin-inline: 80px;
		margin-block-start: 96px;
		margin-block-end: 30px;
		border-radius: 20px;
		padding-inline: 40px;
		padding-block-start: 34px;
		padding-block-end: 27px;
		gap: 27px;
		height: calc(100% - 126px);
		& .modal-header,
		& .highlights {
			padding: 0;
			margin: 0;
		}
		& .modal-header {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			& .custom-button {
				margin-inline-start: auto;
				margin-block-start: 9px;
			}
		}
		& .arrows {
			display: none;
		}
		& .glide__slides {
			transform : initial !important;
		}
	}
	.interactive-map modal .close-slide {
		top: 28px;
		right: 82px;
	}
}

.interactive-map .slide .img-cont {
	overflow: hidden;
	border-radius: 20px;
}

.interactive-map .slide .img-cont::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);
	border-radius: 20px;
	pointer-events: none;
}

.interactive-map .slide img {
	width: 100%;
	transform-origin: center;
	transition: transform 400ms ease;
}

@media (hover: hover) {
	.interactive-map .slide:hover .img-cont img {
		transform: scale(1.1);
	}
}