/**
 * The trip map.
 *
 * Sized and framed like the photographs around it, because that is what it is:
 * one more picture in the post, not a widget bolted onto the page.
 */

.vnk-map {
	margin: 2.5rem 0;
}

/*
 * The size the map was drawn at, whether it is floated or not: a picture
 * stretched past its own pixels is a blurred picture, and a map with no text
 * beside it is still only as wide as it was drawn.
 */
.vnk-map.vnk-map--sized {
	width: var(--vnk-map-width, 100%);
	max-width: 100%;
}

.vnk-map-link {
	display: block;
	position: relative;
	line-height: 0;
	border-radius: 4px;
	overflow: hidden;
	/* The same inset hairline the gallery tiles carry. */
	box-shadow: 0 0 0 1px #333 inset;
	/*
	 * The shape the map was drawn in, passed down from the block so the space
	 * is held at the right proportions before the picture arrives - a square
	 * map must not reserve a letterbox and then shove the page down.
	 */
	aspect-ratio: var(--vnk-map-ratio, 2 / 1);
	/* Close to the paper of an OpenStreetMap tile, so the wait is not a flash. */
	background-color: #e9e5dc;
}

/* A map is a light rectangle on a dark page; give it a little air. */
.vnk-map-link:focus-visible {
	outline: 2px solid #7fb0ff;
	outline-offset: 3px;
}

.vnk-map-image {
	width: 100%;
	height: auto;
	display: block;
}

.vnk-map-link:hover {
	box-shadow: 0 0 0 1px #8a8a8a inset;
}

.vnk-map-caption {
	margin-top: 0.6rem;
	font-family: var(--font-sub, inherit);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

.vnk-map-place {
	color: #ececec;
	text-transform: uppercase;
}

/*
 * Required by the licence on OpenStreetMap's data, so it is never hidden - but
 * it belongs in the corner of the map, the way every map on the web credits
 * its own, rather than on a line of its own under the picture.
 */
.vnk-map-credit {
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 100%;
	padding: 1px 5px;
	border-radius: 3px 0 0 0;
	background-color: rgba(255, 255, 255, 0.7);
	color: #3a3a3a;
	font-family: var(--font-sub, inherit);
	font-size: 10px;
	line-height: 1.5;
	letter-spacing: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Shown in the editor when the trip has no location set yet. */
.vnk-map-empty {
	margin: 2rem 0;
	padding: 1rem 1.2rem;
	border: 1px dashed #4a4a4a;
	border-radius: 4px;
	color: #a0a0a0;
}

@media (max-width: 600px) {
	.vnk-map {
		margin: 1.8rem 0;
	}
}

/**
 * Wrapped by the text.
 *
 * What the shortcode is for: a small map beside the paragraph that mentions
 * the place, with the writing running down past it.
 *
 * The gap beside the map is padding, not margin, and that is deliberate.
 * WordPress's constrained layout claims the horizontal margins of every direct
 * child of the content and pins them with "margin-inline: auto !important" -
 * and an auto margin on a float computes to zero, which puts the text against
 * the map's edge. Answering with !important of our own did not hold either.
 * Padding is nobody else's, so the gap simply stays.
 *
 * The figure is a border box one gap wider than the map, so the picture inside
 * is exactly the size that was asked for and the gap is extra.
 */
.vnk-map.vnk-map--float {
	--vnk-map-gap: 1.6rem;
	box-sizing: border-box;
	/* One gap wider than the map, so the gap is extra and the picture is not. */
	width: calc(var(--vnk-map-width, 360px) + var(--vnk-map-gap));
}

.vnk-map--left {
	float: left;
	padding-right: var(--vnk-map-gap);
}

.vnk-map--right {
	float: right;
	padding-left: var(--vnk-map-gap);
}

/*
 * A float pushes the lines beside it, not the blocks under it, so the gallery
 * that follows would ride up into the map. It clears instead.
 */
.entry-content > .foogallery,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-image {
	clear: both;
}

/*
 * On a phone the column is too narrow to have anything run beside it: at that
 * width a floated map and three words per line is worse than either alone.
 */
@media (max-width: 700px) {
	.vnk-map.vnk-map--float {
		--vnk-map-gap: 0px;
		float: none;
		width: 100%;
	}
}