/* =============================================================================
 * tombstone.css — styles the "tombstone" detail card built by tombstone.js
 * (title, data column on the left, media preview on the right). Loads on /map/.
 * ============================================================================= */

/* Tombstone data grid built by createTombStone (issue #31, was inline). */
.tomb-grid {
	display: grid;
	grid-auto-flow: row;
	grid-template: repeat(4, 0.5fr) / repeat(2, 0.5fr);
}

.tomb-grid-cell {
	max-width: 20vw;
}

.tooltitle {
	height: 4vh;

	/* word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all; */
	overflow: hidden;
	text-wrap: wrap;
	width: 20vw;
}

.nwlist {
	font-size: 15px;
}

.toolbox {
	height: 90%;
	overflow: hidden;

	/* border: 1px solid black; */
	width: 100%;
}

.toolstone {
	display: block;
	width: 20vw;
}

.tombbox {
	overflow-y: auto;
	position: relative;
}

/* No `height: stretch` here. It pinned this card to the height of the .tombbox
   that scrolls it while its own content stayed taller, so the excess spilled out
   of a box with no scrollbar and was clipped by .leaflet-popup-content-wrapper.
   Firefox never supported the keyword so it only showed up in Chrome; the
   scrolling this was reaching for is .tombbox's job. */
.tombstone {
	display: flex;
	flex-direction: column;
}

.tombtitle {
	background: var(--color-brand-green);
	display: block;
	font-size: 1.3em;
	font-weight: 700;
	padding-block: 1em;
	padding-inline: 3em;
	text-align: center;
}

.tomblist {
	font-family: Lexend, sans-serif;
	font-size: 1em;
	list-style-type: none;
	overflow: auto;
	padding: 0;
	width: 100%;

	/* border: 1px solid black; */
}

.tombleft {
	column-gap: 1em;
	display: block;
	font-size: var(--text-sm);
	overflow: clip;
	padding-block-end: 2em;
	padding-inline: 1em;
	row-gap: 0.5em;

	div:has(a) {
		grid-column: span 2;
	}
}

.tombimage {
	display: block;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	object-fit: contain;
}

.tombrighttip {
	border-bottom: 1px solid #ccc;
	display: block;
	height: 80%;
	margin-bottom: 10px;
	min-width: 100px;
	object-fit: contain;
	padding: 0;
	position: relative;
	width: 100%;
}

.tombstory {
	border-bottom: 1px solid #ccc;
	display: block;
	height: 100%;
	margin-bottom: 10px;
	min-width: 100px;
	object-fit: contain;
	padding: 0;
	width: 100%;
}

.list {
	width: 100%;
}

/* The detail "panel" popups (features.js, storypanel.js). Their width and their
   place on the map are measured in popup-panel.js, which also sets
   --popup-panel-max-block-size; Leaflet writes the width inline. Everything here
   is scoped to .popup-panel so the map's other, plain popups keep Leaflet's
   defaults. */

/* Leaflet reserves 20px below every popup for the tip. These panels hide the tip
   (.leaflet-popup-tip-container in map.css), and the margin is inside the box
   Leaflet positions, so leaving it would float the panel 20px above the spot
   popup-panel.js measured for it — pushing its top back out of the map area. */
.popup-panel {
	margin-block-end: 0;
}

.popup-panel .leaflet-popup-content-wrapper {
	background: var(--color-white);
	border-radius: var(--map-btn-border-radius);
	box-shadow: var(--box-shadow-default);
	color: var(--olor-brand-black);
	overflow: hidden;
	padding: 0;
}

/* A capped box with a scrolling body and a footer that stays put.
   `minmax(0, 1fr)`, NOT `auto`, is what makes the body scroll: an `auto` track is
   sized from its content, and Firefox will not shrink one below that even when
   the grid itself is capped — so .tombbox never got a height smaller than its
   content, its `overflow-y: auto` never engaged, and the remainder was silently
   clipped by the wrapper's `overflow: hidden`. Chrome does shrink the track,
   which is why this only ever reproduced in Firefox. A 0 minimum leaves no room
   for the two engines to disagree. */
.popup-panel .leaflet-popup-content {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	margin: 0;
	max-block-size: var(--popup-panel-max-block-size, 65vh);
	position: relative;
}

/* Narrative ("Interpretation") cards are a single cross-origin <iframe>
   (previewPane.js always uses one when isstory), so they ALWAYS carry that
   document's own scrollbar — there is no way to fold it into ours. The card's job
   is therefore to make it the only one. At a fixed 60vh the iframe was taller
   than the card body, so .tombbox had to scroll as well and the card showed two
   scrollbars nested one inside the other; the wheel then landed on whichever the
   pointer happened to be over. Letting the iframe fill the body exactly leaves
   .tombbox with nothing to scroll.

   The rules below are one chain: every step from .leaflet-popup-content down to
   the iframe has to hand the height along, and breaking any link drops the iframe
   back to its content height. It starts here — a marker card is sized by its
   content up to the band, but a narrative card has to take the whole band,
   because an iframe has no height of its own for a max-block-size to cap. */
.popup-panel:has(.tombstory) .leaflet-popup-content {
	block-size: var(--popup-panel-max-block-size, 65vh);
}

.popup-panel .tombbox:has(.tombstory) {
	display: flex;
	flex-direction: column;
}

.popup-panel .tombbox:has(.tombstory) .tombstone,
.popup-panel .tombstory {
	flex: 1;
	min-block-size: 0;
}

.popup-panel .previewStory,
.popup-panel .previewStory .contentBox {
	block-size: 100%;
	min-block-size: 0;
}

.popup-panel .previewStory iframe {
	block-size: auto;
	flex: 1;
	min-block-size: 0;
}

/* The media preview inside a marker card must not be a scroll container of its
   own: .tombbox already scrolls the whole card, and a nested scroller here just
   produces a second scrollbar to get lost in. (`height: stretch` is the same
   keyword removed from .tombstone above, with the same consequence.) */
.popup-panel .previewDiv {
	block-size: auto;
	overflow-y: visible;
}

/* The Native Territories footer (tombstone.js). Targeted by class rather than as
   `> :last-child`: most records have no native data, and on those the rule landed
   on .tombbox instead and turned the whole card pink. */
.tomb-native {
	background: var(--color-brand-pink);
	box-shadow: var(--box-shadow-default);
	padding: 1em;

	a,
	a:hover,
	a:active,
	a:visited {
		color: currentColor;
	}
}

/* Close modal button, matching button styling, idealy less overriding of leaflet css */

.leaflet-container a.button {
	color: color-mix(in sRGB, var(--color-white), transparent 10%);

	&:hover,
	&:focus {
		color: var(--color-white);
	}
}

.leaflet-container a.leaflet-popup-close-button {
	background: url('../img/close.svg') center no-repeat var(--color-brand-black);
	background-size: 1em 1em;
	right: 1em;
	top: 1em;

	transition: background-color var(--transition-duration)
		var(--transition-timing);

	&:hover,
	&:active {
		background-color: color-mix(
			in sRGB,
			var(--color-brand-black),
			transparent 10%
		);
	}

	&:active,
	&:focus {
		box-shadow: var(--color-brand-orange) 0 0 0 var(--border-width-lg);
		outline: none;
	}

	span {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}