/* ! [ Properties ] */
.regions-block {
	position: relative;
	display: flex;
	flex-wrap: wrap;

	max-width: var(--container);
}
	.regions-figure {
		display: block;
		flex-grow: 1;
		flex-basis: 60%;
		width: 100%;
		height: auto;
		margin: 0 auto 0 0;
		min-width: 300px;
		max-width: 700px;
	}
		.regions-map-object {
			display: block;
			margin: 0;
			width: 100%;
			height: auto;
		}
	.regions-items {
		position: relative;
		flex-basis: 40%;
		width: 100%;
		min-width: 250px;
		max-width: 350px;
		padding-top: 2.75rem;
		margin-bottom: 2rem;

		overflow: hidden;
		display: flex;
	}


		.regions-items > .region-item {
			display: none;
		}
		.regions-items > .region-item.active {
			display: block;
		}
		.regions-items:not(:has(.active))::before {
			content: 'Click a region to see more info';
			font-style: italic;
			opacity: .75;
			width: 100%;
			text-align: center;
		}
			.region-item {
				display: flex;
				flex-direction: column;
				border: .25rem solid var(--blue-dark);
				margin-bottom: auto;

				background-color: #fff;

				position: relative;
			}
				.region-item-close {
					position: absolute;
					right: 0;
					top: 0;
					border: none;

					background: transparent;
					color: #fff;
					z-index: 2;
				}
				.region-item-close:hover,
				.region-item-close:focus {
					color: var(--orange-regular);
				}
					.region-item-close .icon {
						width: 1.75rem;
						height: 1.75rem;
					}

				.region-header {
					padding: .5rem;
					background-color: var(--blue-dark);
					color: #fff;
				}
					.region-header::before {
						content: '';
						display: block;
						margin: 0 auto;
						width: 80px;
						aspect-ratio: 2/1;
						background-image: url('/img/logo-mns-artwork.svg');
						background-size: 80px auto;
					}
					.region-title {
						margin-top: .75rem;
						margin-bottom: .5rem;
						text-transform: uppercase;
						text-align: center;
						font-size: 1.5rem;
					}

				.region-figure {
					margin: 0 0 1rem 0;
				}
					.region-figure img {
						width: 100%;
						height: auto;
					}
				.region-content {
					padding: .5rem 1rem .5rem;
				}
					.director-name {
						margin: 0;
						text-align: center;
						font-size: 1.375rem;
					}
						.director-name strong {
							display: block;
							text-transform: uppercase;
							/* text-decoration: underline; */
							color: var(--blue-light);
						}
					.director-email {
						text-align: center;
					}
					.director-email a:hover,
					.director-email a:focus {
						color: var(--orange-regular);
					}

					.youth-directors-title {
						display: block;
						margin: 1rem 0 .25rem;
						text-align: center;
						/* text-decoration: underline; */
						text-transform: uppercase;
						font-size: 1rem;
						color: var(--blue-light);
					}
						.youth-directors-title strong {

						}
						.youth-directors-list {
							list-style: none;
							padding: 0;
							text-align: center;
							font-weight: bolder;
						}


				.regional-locations-list {
					display: flex;
					flex-wrap: wrap;
					font-size: 1.25rem;
					line-height: 1.1;
					margin: 1rem 0 0 0;
				}
				.regional-locations-list dt {
					flex-basis: 15%;
					margin-bottom: .25rem;
					font-weight: bolder;
				}
				.regional-locations-list dd {
					flex-grow: 1;
					flex-basis: 85%;
					padding-left: 1rem;
					margin-bottom: .25rem;

					text-align: right;
					font-weight: normal;
				}
					.regional-locations-list dd em {
						/* display: block; */
						font-size: smaller;
					}
					.regional-locations-list dd::after {
						content: none;
					}

				.region-item a {
					color: inherit;
					text-decoration: underline;
				}

/* Position popover over map */
@media only screen and (max-width: 1100px) {
	.regions-figure {
		padding-bottom: 8rem;
	}
	.regions-items {
		flex-basis: auto;
		position: static;
		padding-top: 0;

		position: absolute;
		top: 0;
		bottom: auto;
		left: 0;
		right: 0;

		max-width: none;
		margin: auto;

		overflow: scroll;
	}
	.regions-items:has(.region-item.active) {
		bottom: 0;
	}
	.region-item {
		margin: 1rem auto auto;
		max-width: 300px;
		box-shadow: 0 0 100vw 25vw hsla(211, 93%, 10%, .75);
	}
		.regional-locations-list {
			font-size: 1rem;
		}
}
@media only screen and (max-width: 800px) {
	.regions-block {
		/* allow regions block/map to be full viewport width for better looking drop-shadows from the region-item.  */
		margin-left: -2rem;
		margin-right: -2rem;
	}
	.region-figure {
		max-width: 180px;
		margin-inline: auto;
	}
}