.thematic-map-slideshow {
	/*==============================*/
	/*=====----- TEMPLATE -----=====*/
	/*==============================*/

	position: relative;
	container-type: inline-size;
	margin-bottom: var(--widget-margin-bottom);
	color: var(--white);
	background: var(--blue-dark);

	.stage,
	.map-container {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		align-content: start;
		gap: 0.75rem;
	}

	.stage {
		--glide-arrow-width: 2.5rem;

		padding-block: 0.875rem 2.625rem;
		padding-inline: 0.8125rem;
	}

	.map-container {
		gap: 0.75rem;
	}

	/*----- map -----*/

	.map {
		order: -1;
		background: var(--white);
	}

	.map-svg {
		inline-size: 100%;
		pointer-events: none;

		.default-state,
		.active-state {
			transition: opacity var(--transition-long);
		}

		.active-state {
			opacity: 0;
		}

		.interactive {
			display: block;
			pointer-events: all;
			cursor: pointer;
		}
	}

	.map-svg .map-region.active {
		.default-state {
			opacity: 0;
		}

		.active-state {
			opacity: 1;
		}
	}

	/*----- map nav -----*/

	.map-nav {
		position: relative;
		z-index: 4;
		display: flex;
		justify-content: center;
		padding-block-end: 0.25rem;
	}

	.map-nav-label {
		display: block;
		width: 0;
		height: 0;
		padding: 0;
		margin: 0;
		opacity: 0;
		overflow: hidden;
	}

	.map-nav-select {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		inline-size: 100%;
		max-inline-size: max-content;
		padding: 0;
		padding-block: 0.25rem;
		padding-right: 1.375rem;
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-sm);
		line-height: 1.2;
		letter-spacing: -0.05em;
		text-transform: uppercase;
		text-align: start;
		color: inherit;
		background: none;
		background-image: url('/includes/public/assets/shared/angle-down-white.svg');
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 0.875rem auto;
		border: none;
		border-block-end: 2px solid var(--green-light);
		border-radius: 0;

		option {
			color: var(--black);
		}
	}

	/*----- slideshow -----*/

	.glide__arrows {
		position: absolute;
		inset-inline-end: 0;
		inset-block-end: 0;
		z-index: 2;
		gap: 0.75rem;
	}

	.glide__arrow {
		width: var(--glide-arrow-width);
		font-size: var(--text-base);
	}

	.slide-counter {
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: 0.6875rem;
		line-height: 1.2;
		letter-spacing: -0.05em;
		text-transform: uppercase;
		color: inherit;
	}

	.glide__slides {
		padding-bottom: 2px;
	}

	/*============================*/
	/*=====----- SLIDES -----=====*/
	/*============================*/

	.slide,
	.slide-top {
		position: relative;
	}

	.slide {
		height: auto;
	}

	.slide-scroll,
	.slide-inner,
	.content-section {
		display: flex;
		flex-direction: column;
	}

	.slide-inner {
		gap: 1.5rem;
		height: 100%;
	}

	.slide-scroll {
		gap: 1.125rem;
	}

	.content-section {
		flex-grow: 1;
	}

	.content-section,
	.slide-footer {
		padding-inline: 0.5rem;
	}

	.content-section {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		align-content: start;
		gap: 0.5rem;
	}

	.slide-title,
	.slide-desc {
		margin: 0;
		color: inherit;
	}

	.slide-title {
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-3xl);
		line-height: 1.2;
		letter-spacing: -0.1em;
		text-transform: uppercase;
	}

	.title-small {
		display: block;
		margin-block-end: 0.25rem;
		font-family: var(--font-body);
		font-size: var(--text-xl);
		letter-spacing: 0;
		text-transform: none;
	}

	.slide-desc {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		box-orient: vertical;
		-webkit-line-clamp: 7;
		line-clamp: 7;
		overflow: hidden;
		font-family: var(--font-body);
		font-weight: var(--font-weight-medium);
		font-size: var(--text-sm);
		line-height: var(--leading-normal);
	}

	.slide-footer {
		margin-top: auto;
		opacity: 0;
		transition: opacity var(--transition-appendix);
	}

	.slide.glide__slide--active .slide-footer {
		opacity: 1;
	}

	.slide-top {
		order: -1;
		flex-shrink: 0;
	}

	.slide-img {
		inline-size: 100%;
	}

	/*----- icon tiles -----*/

	.slide-tiles {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.625rem;
		max-inline-size: 42.893ch;
		margin-block-start: 0.625rem;
	}

	.slide-tile {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.25rem;
		min-block-size: 3.8125rem;
		padding: 0.5625rem;
		text-align: center;
		text-decoration: none;
		line-height: var(--leading-none);
		color: var(--black);
		background: var(--blue-tint);
		border: 1px solid var(--black);
		border-block-end-width: 2px;
		border-inline-end-width: 2px;
		border-radius: var(--rounded-xl);
		overflow: hidden;

		&::before {
			position: absolute;
			inset: 0;
			z-index: -1;
			display: block;
			content: '';
			background: linear-gradient(180deg, #DAE6E8 27.77%, #82D3DB 99.64%);
			pointer-events: none;
			opacity: 0;
			transition: opacity var(--transition-appendix);
		}
	}

	.tile-icon {
		font-size: 0.9375rem;
	}

	.tile-title {
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-semibold);
		font-size: var(--text-xs);
		line-height: inherit;
		color: inherit;
	}

	/*===================================*/
	/*=====----- MEDIA QUERIES -----=====*/
	/*===================================*/

	@media (hover: hover) {
		.region-selector:not(.active):hover {
			color: var(--brown);
		}

		a.slide-tile:hover::before {
			opacity: 1;
		}

		.map-svg .map-region:has(.interactive:hover) {
			.default-state {
				opacity: 0;
			}

			.active-state {
				opacity: 1;
			}
		}
	}

	@container (min-width: 64em) {
		.stage {
			--glide-arrow-width: 3.125rem;
			--map-column-width: 64%;
			--gap: 1.5625rem;
			--padding-block: 1.25rem;
			--padding-inline: 1.5rem;

			grid-template-columns: var(--map-column-width) minmax(0, 1fr);
			align-items: stretch;
			align-content: stretch;
			gap: var(--gap);
			padding-block: var(--padding-block);
			padding-inline: var(--padding-inline);
		}

		.map-container {
			display: block;
		}

		.map-nav {
			display: none;
		}

		.slider-col {
			position: absolute;
			inset: var(--padding-block) var(--padding-inline) var(--padding-block) calc(var(--map-column-width) + var(--gap));
		}

		.slider-cont,
		.glide__track,
		.glide__slides {
			height: 100%;
		}

		.slide-inner {
			position: relative;
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: minmax(0, 1fr) auto;
			gap: 0;

			&::before {
				position: absolute;
				inset: auto 0 0;
				z-index: 5;
				display: block;
				height: calc(var(--glide-arrow-width) + 2rem);
				content: '';
				background: linear-gradient(to bottom, rgba(25, 61, 108, 0), var(--blue-dark) 1rem);
				pointer-events: none;
			}
		}

		.slide:has(.slide-footer) .slide-inner::before {
			display: none;
		}
		
		.slide-scroll {
			max-height: calc(100% - var(--glide-arrow-width) - 1rem);
			padding-bottom: 1rem;
			overflow-x: hidden;
			overflow-y: auto;
			overscroll-behavior: contain;
		}

		.slide:has(.slide-footer) .slide-scroll {
			max-height: 100%;
		}

		.slide-desc {
			-webkit-line-clamp: 6;
			line-clamp: 6;
		}
		
		.slide-footer {
			position: relative;
			z-index: 5;
			padding-block: 1rem 0;
			background: var(--blue-dark);
			
			&::before {
				position: absolute;
				inset: auto 0 calc(100% - 1px);
				display: block;
				height: 1rem;
				content: '';
				background: linear-gradient(to top, var(--blue-dark), rgba(25, 61, 108, 0));
				pointer-events: none;
			}
		}
	}

	@container (min-width: 90em) {
		.glide__arrows {
			inset-inline-end: 1.9375rem;
			inset-block-end: 1.375rem;
			gap: 0.625rem;
		}

		.glide__arrow {
			width: 3.125rem;
			font-size: var(--text-xl);
		}

		.slide-counter {
			font-size: var(--text-xs);
		}

		.slide {
			padding-block-end: 1.6875rem;
		}
		
		.slide-inner {
			gap: 0.625rem;
		}

		.slide-scroll {
			gap: 1.625rem;
		}
		
		.content-section,
		.slide-footer {
			padding-inline: 1.6875rem;
		}

		.content-section {
			gap: 1rem;
		}

		.slide-title {
			font-size: var(--text-4xl);
		}

		.title-small {
			font-size: 1.5rem;
			letter-spacing: -0.01em;
		}

		.slide-tiles {
			margin-block-start: 0.5rem;
		}

		.slide-tile {
			min-block-size: 4.1875rem;
		}
	}
}