/* Document
========================================================================== */

html {
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-map: cubic-bezier(0.4, 0, 0.2, 1);
}


/*--------------------------------------------------------------
# Grid
--------------------------------------------------------------*/

.map-container {
	position: relative;
	display: grid;
	grid-template-columns: 100%;
}

.map-listings-outer {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	pointer-events: auto;
}

.map-controls {
	display: none;
	align-items: flex-start;
	flex-direction: column;
	pointer-events: none;
}

.map-wrapper {
	position: relative;
	display: none;
	height: calc(100svh - 5.9rem);
	grid-row: 1;
	grid-column: 1;
}

.activeArea {
	position: absolute;
	z-index: 1000;
	top: min(var(--pad-vx), 1rem);
	left: 0;
	width: 100%;
	height: calc(100% - min(var(--pad-vx), 1rem));
	pointer-events: none;
	/*	background: rgba(255, 0, 0, 0.15);*/
}

.map-listings-container {
	position: relative;
	z-index: 999;
	pointer-events: none;
	grid-column: 1;
	grid-row: 1;
}

.map-listings-container > .grid-2 {
	height: 100%;
}


/*--------------------------------------------------------------
# Pins
--------------------------------------------------------------*/

.leaflet-marker-icon {
	padding: 7px;
}

.leaflet-marker-icon svg {
	color: #838A8F;
}

.leaflet-marker-icon .beda-map-pin {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.2s var(--ease);
	transform: translate3d(0, 0, 0);
	transform-origin: center bottom;
}

.pin-icon-filler,
.marker-icon-count,
.pin-icon-count {
	font-family: "Assistant", sans-serif;
	font-size: 11px;
	font-weight: 700;
	position: absolute;
	top: 3px;
	left: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 11px;
	height: 11px;
	letter-spacing: -0.025em;
	color: #fff;
	border-radius: 100%;
	background: #838A8F;
}

.pin-icon-count {
	transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}

svg {
	height: 100%;
	fill: currentColor;
}


.beda-map-pin.local svg {
	color: var(--navy);
}

.beda-map-pin.local .marker-icon-count {
	background: var(--navy);
}

.leaflet-marker-icon svg {
	/*stroke: var(--white);
	stroke-width: 0.5px;*/
	filter: drop-shadow(0.5px -0.5px 0 #fff) drop-shadow(-0.5px 0.5px 0 #fff);
}

.beda-map-pin {
	transform: scale(1);
}

.leaflet-marker-icon:hover .beda-map-pin,
.leaflet-marker-icon.pin-hover .beda-map-pin {
	transform: scale(1.5);
}

.leaflet-marker-icon:hover .beda-map-pin svg,
.leaflet-marker-icon.pin-hover .beda-map-pin svg {
	color: var(--pink);
}

.leaflet-marker-icon:hover .marker-icon-count,
.leaflet-marker-icon.pin-hover .marker-icon-count {
	background: var(--pink);
}


.popup-pin {
	position: absolute;
	z-index: 1;
	bottom: -18px;
	left: 50%;
	width: 17px;
	height: 27px;
	margin-left: -9px;
	transform: scale(1.5);
	transform-origin: center bottom;
}

/*--------------------------------------------------------------
# Popup
--------------------------------------------------------------*/

.leaflet-popup-content-wrapper {
	font-size: 1rem;
	overflow: hidden;
	color: #fff;
	border-radius: 0;
}

.map-wrapper .leaflet-popup-content-wrapper {
	overflow: visible !important;
}

.popup-content {
	display: flex;
	flex-direction: column;
	padding: var(--margin-xxl) var(--margin-xl);
	border-radius: var(--radius);
	background: var(--navy);
	gap: var(--margin-l);
}


.popup-item a {
	display: block;
}

.popup-date {
	font-weight: 600;
	margin-bottom: var(--margin-xs);
	color: var(--lemon);
}

.popup-item h1 {
	line-height: var(--lh-tightest);
	margin: 0 !important;
	text-wrap: inherit;
}


.popup-more {
	font-weight: 600;
	line-height: 1;
	position: absolute;
	right: var(--margin-s);
	bottom: var(--margin-s);
	padding: 0.25rem 0.5rem;
	pointer-events: none;
	color: var(--pink-less);
}

.close-map-popup {
	position: absolute;
	top: 0;
	right: 0;
	padding-top: var(--margin-s);
	padding-right: var(--margin-s);
	cursor: pointer;
	border-top-right-radius: var(--radius);
	touch-action: manipulation;
}

.close-popup-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem;
	color: var(--navy);
	border-radius: 100%;
	background: var(--link-highlight);
}

.close-popup-icon-wrapper .icon-close {
	font-size: 0.8rem;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

.no-select::selection {
	background: transparent;
}

.no-select *::selection {
	background: transparent;
}

.no-select::-moz-selection {
	background: transparent;
}

.no-select *::-moz-selection {
	background: transparent;
}

.no-select,
.no-select * {
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	-webkit-user-select: none; /* Safari */
	user-select: none;
	-webkit-touch-callout: none; /* iOS Safari */
}

.map-zoom {
	position: sticky;
	top: calc(100% - 5rem - min(var(--pad-vx), 1rem));
	display: flex;
	flex-direction: column;
	pointer-events: auto;
	border-radius: 999px;
}

.map-zoom-button {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--navy-text);
	border-radius: 100%;
	background: var(--lemon);
	touch-action: manipulation;
}

.map-zoom-button.map-zoom-minus {
	padding-bottom: 0.15em;
}

.map-zoom-button:focus-visible {
	outline: 2px solid var(--black);
	outline-offset: 1px !important;
}

.map-zoom-button.map-zoom-plus:focus-visible {
	z-index: 1;
	border-radius: 100% 100% 0 0;
}

.map-zoom-button.map-zoom-minus:focus-visible {
	z-index: 1;
	border-radius: 0 0 100% 100%;
}

.map-zoom-plus {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.map-zoom-minus {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.map-toggle-group {
	display: grid;
	margin-top: var(--margin-xl);
	margin-bottom: var(--margin-xl);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.5rem;
}

.map-toggle-button {
	font-size: var(--text-large);
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem;
	border-radius: var(--radius-small);
	background: var(--navy);
	gap: 0.35rem;
}

.map-toggle-button.enable-map {
	gap: 0.25rem;
}

[data-active="list"] .enable-list,
[data-active="map"] .enable-map {
	color: var(--navy);
	background: var(--white);
}


/*--------------------------------------------------------------
# Listings
--------------------------------------------------------------*/


.listing-row-outer a {
	display: block;
	margin-bottom: var(--margin-l);
}

.listing-row-outer a:focus-visible {
	border-radius: 0;
	outline: none;
}

.listing-row-outer a:focus-visible .listing-row {
	outline: 2px solid var(--lemon);
	outline-offset: 2px;
}

.listing-row-outer a:focus-visible h1 {
	text-decoration: underline;
	text-underline-offset: 0.1em;
	text-decoration-color: var(--pink-less);
	text-decoration-thickness: 0.125em;
}


.listing-row {
	display: grid;
	overflow: hidden;
	border-radius: var(--radius);
	background: white;
	grid-template-columns: 10rem 1fr;
}

html[data-contrast="1"] .listing-row {
	outline: 1px solid var(--black);
}

html[data-contrast="1"] .map-zoom {
	outline: 1px solid var(--black);
}

.listing-image {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--margin-xl);
	background: var(--white);
}

.listing-image img {
	aspect-ratio: 1;
	object-fit: contain;
}

.listing-image .icon-calendar-week {
	font-size: 3.5rem;
	color: var(--pink);
}

.listing-meta {
	display: flex;
	flex-direction: column;
	margin: var(--margin-s);
	margin-left: 0;
	padding: var(--margin-xl);
	border-radius: calc(var(--radius) - 0.4rem);
	background: var(--navy);
	gap: 0.3333em;
}

.listing-title {
	margin-bottom: 0.5rem;
}

.listing-title h1 {
	line-height: var(--lh-tight);
}

.listing-date-wrapper {
	display: flex;
	justify-content: space-between;
	margin-top: -0.2rem;
}

.listing-date {
	font-weight: 600;
	flex-shrink: 0;
	white-space: nowrap;
	color: var(--lemon);
}

.article-tags {
	font-size: max(14px, 0.8rem);
	display: flex;
	overflow: hidden;
	flex-wrap: wrap;
	height: 1.3em;
	margin-bottom: -0.1rem;
	column-gap: 0.5em;
	row-gap: 0.1em;
}

.hashtag {
	color: var(--pink-less);
}

.flex-icon {
	display: flex;
	align-items: center;
	column-gap: 0.25em;
}

.listing-location {
	font-weight: 500;
}

.listing-location .icon-pin {
	font-size: .8rem;
	margin-left: -.1em;
}


.listing-cat {
	color: var(--sky);
}


@media screen and (min-width: 64rem) {

	.activeArea {
		top: var(--radius);
		left: calc(50% - var(--margin-m));
		width: calc(50% + var(--margin-m));
		height: calc(100% - var(--radius));
	}

	.map-controls {
		display: flex;
	}

	.map-toggle {
		display: none;
	}

	.map-wrapper {
		position: sticky !important;
		top: calc(-1 * var(--radius));
		display: block;
		height: calc(100dvh + var(--radius));
	}


	.map-controls {
		grid-row: 1;
		grid-column: 2;
	}


	.map-filter {
		display: none;
	}

	.map-listings-container {
		min-height: 100dvh;
	}

	.map-listings-outer {
		margin: calc(var(--margin-s) * -1);
		margin-bottom: calc((var(--margin-s) + var(--margin-l)) * -1);
	}

	.map-listings {
		flex-grow: 1;
		min-height: 100%;
	}

	.hero-container {
		z-index: 1;
		margin-bottom: calc(var(--radius) * -1);
	}

	.map-listings-container > .grid-2 {
		padding-top: var(--radius);
	}

	.listing-row-outer a:focus-visible .listing-row {
		outline: 2px solid var(--pink);
	}

	html[data-contrast="1"] .listing-row-outer a:focus-visible .listing-row {
		outline: 2px solid var(--black);
	}
}

@media screen and (max-width: 63.999rem) {

	.map-listings-container {
		padding-top: 0;
	}

	.map-wrapper {
		border-top-left-radius: var(--radius);
		border-top-right-radius: var(--radius);
	}


	[data-active="map"] + .map-container .map-listings-outer {
		display: none;
	}

	[data-active="map"] + .map-container .map-wrapper {
		display: block;
	}

	[data-active="map"] + .map-container .map-controls {
		display: flex;
	}

	[data-active="map"] + .map-container .map-listings-container > .grid-2 {
		width: 100%;
	}

	[data-active="map"] + .map-container .map-listings-container {
		padding: min(calc(88px - 3.25rem), calc(var(--pad-vx) - 6px));
	}

	.map-zoom {
		top: calc(100% - 5rem - min(calc(88px - 3.25rem), calc(var(--pad-vx) - 6px)));
	}

}

@media screen and (max-width: 41.25rem) {
	.listing-row {
		grid-template-columns: 8rem 1fr;
	}
}

@media screen and (max-width: 36rem) {


	.listing-row {
		display: flex;
		flex-direction: column;
	}

	.listing-meta {
		margin: 0;
		border-radius: 0 0 var(--radius) var(--radius);
	}

	.listing-image img {
		max-height: 6rem;
		aspect-ratio: auto;
	}
}


@media (hover: hover) {
	.listing-row-outer a:hover h1,
	.popup-item a:hover h1 {
		text-decoration: underline;
		text-underline-offset: 0.1em;
		text-decoration-color: var(--pink-less);
		text-decoration-thickness: 0.125em;
	}

	.close-map-popup:hover .close-popup-icon-wrapper {
		background: var(--link-highlight-hover);
	}

	html[data-contrast="1"] .close-map-popup:hover .close-popup-icon-wrapper {
		outline: 2px solid white;
		outline-offset: 3px;
	}

	.map-zoom-button:hover {
		background: var(--pink-less);
	}

	[data-active="list"] .enable-map:hover,
	[data-active="map"] .enable-list:hover {
		color: var(--navy);
		background: var(--pink-less);
	}

}

.map-zoom-button:active {
	background: var(--pink);
}