/**
 * The island detail view — in the map's panel and on the island's own page.
 *
 * Two selectors' worth of difference between the two: the panel adds the
 * overlay around it, the page adds nothing. Everything below `.wildisland-detail`
 * therefore applies in both places, which is the point of rendering one
 * template into both.
 *
 * Two class names in a selector wherever a theme could plausibly have a rule
 * for the element — the same rule the Divi work arrived at
 * (`AI/architecture/divi-fallstricke.md`).
 *
 * @package WildislandMap
 */

/* ---------------------------------------------------------------- the panel */

/* The legacy `.detail-layer`: fixed, the whole window, opaque white, above
 * everything. Its z-index was 3999; Leaflet's own chrome tops out at 1000 and a
 * fixed site header is usually below 1000, so 4000 keeps the legacy order
 * without inheriting its exact number as a promise. */
.wildisland-detail-layer {
	position: fixed;
	z-index: 4000;
	inset: 0;
	overflow-y: auto;
	background: #fff;
	overscroll-behavior: contain;
}

/* The legacy `.detail-container`: at most 1280px, centred, `margin-top: 20px`
 * and the 15px gutter its columns carry. */
.wildisland-detail-layer .wildisland-detail-layer__inner {
	position: relative;
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 15px 3em;
}

/* The legacy close button, quoted: transparent, a two-pixel dark frame,
 * uppercase, and in the upper right of the sheet. Taken out of the flow rather
 * than floated: floated, it pushed the whole sheet down and the island's name
 * ended up a button's height below the top edge, where the legacy has it level
 * with the button. */
.wildisland-detail-layer .wildisland-detail-layer__close {
	position: absolute;
	top: 20px;
	right: 15px;
	z-index: 1;
	margin: 0;
	padding: 10px 30px;
	border: 2px solid #333;
	border-radius: 0;
	background: transparent;
	color: #4e4e4e;
	font: inherit;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	cursor: pointer;
}

.wildisland-detail-layer .wildisland-detail-layer__close:hover,
.wildisland-detail-layer .wildisland-detail-layer__close:focus {
	background: transparent;
	color: #4e4e4e;
	text-decoration: underline;
}

.wildisland-detail-layer .wildisland-detail-layer__status:empty {
	display: none;
}

.wildisland-detail-layer .wildisland-detail-layer__status {
	clear: both;
	margin: 2em 0;
	color: #6b6b6b;
}

/* The page behind the panel must not scroll: the panel is the whole window,
 * and a scrollbar moving something nobody can see is what a full-screen overlay
 * exists to prevent. */
body.wildisland-detail-open {
	overflow: hidden;
}

/* ------------------------------------------------------------ the island */

/* 18px on a 25.7px line — the legacy `.detail-container .col` — and an absolute
 * size for the same reason the popup carries one: the sheet is dropped into a
 * theme, and a `em` chain that starts wherever the theme happens to be is a
 * different sheet at every site. */
.wildisland-detail {
	display: grid;
	gap: 0 30px;
	color: #000;
	font-size: 18px;
	line-height: 1.43;
	grid-template-columns: 1fr;
}

/* Two columns from the width the legacy `col-md` breaks at. Left the facts,
 * right the map and the pictures — the arrangement of `ShowDetail.html`. */
@media (min-width: 62em) {
	.wildisland-detail {
		grid-template-columns: 1fr 1fr;
	}

	/* The right-hand column starts below the close button, as the legacy one
	   does — it opens with the button and four `<br>` before the sub-map. */
	.wildisland-detail .wildisland-detail__aside {
		margin-top: 60px;
	}
}


/* The legacy title is the page's own `h2` — 30px/33px, medium, and *not*
 * uppercased. It was set in capitals here, which is the popup's rule, not
 * this one's. */
.wildisland-detail .wildisland-detail__title {
	margin: 20px 0 10px;
	padding: 0;
	color: #000;
	font-size: 30px;
	font-weight: 500;
	line-height: 33px;
	text-transform: none;
}

.wildisland-detail .wildisland-detail__identity {
	display: flex;
	align-items: flex-start;
	margin: 0 0 20px;
	gap: 0 15px;
	flex-wrap: wrap;
}

/* The legacy emblem is drawn at its own 231x48 and nothing shrinks it. */
/*
 * The second line of the name in the detail view. The legacy view has no
 * design for it at all — it prints the raw `<br /><span>…</span>` as text in
 * its heading, which is the bug this field replaces. So this is not a
 * reproduction of anything: it is the popup's arrangement (a smaller line
 * under the code) at the detail view's own scale.
 */
.wildisland-detail .wildisland-detail__subtitle {
	display: block;
	padding-top: 5px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.43;
}

.wildisland-detail .wildisland-detail__sign {
	width: auto;
	max-width: 231px;
	height: auto;
}

.wildisland-detail .wildisland-detail__flag {
	width: auto;
	max-width: 70px;
	height: auto;
}

/* Both lines are 14px/20px on the legacy sheet — the small print beside the
 * flag, not a heading and a caption. */
.wildisland-detail .wildisland-detail__country,
.wildisland-detail .wildisland-detail__position {
	color: #000;
	font-size: 14px;
	line-height: 20px;
}

.wildisland-detail .wildisland-detail__attributes {
	display: grid;
	margin: 0 0 20px;
	gap: 20px 30px;
	grid-template-columns: 1fr 1fr;
}

/* **Label and value on one line**, which is what the legacy sheet prints:
 * "**Category:** B". They were stacked here, and that alone made the block a
 * head taller than the original and read as a form rather than as a sentence. */
.wildisland-detail .wildisland-detail__attribute {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.35em;
}

.wildisland-detail .wildisland-detail__attribute--wide {
	grid-column: 1 / -1;
}

/* `padding: 0` on both, and it is not decoration: Divi sets `p { padding-bottom: 1em }` and
 * `h1…h6 { padding-bottom: 10px }` globally (`AI/architecture/divi-fallstricke.md`, section 3).
 * The child theme takes both back, but the plugin has to stand in a theme that does not. */
.wildisland-detail .wildisland-detail__label {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.43;
}

/* The colon the legacy markup carries inside the `<strong>`. In the stylesheet
 * because it is punctuation between two elements, not part of either name. */
.wildisland-detail .wildisland-detail__label::after {
	content: ":";
}

.wildisland-detail .wildisland-detail__value {
	margin: 0;
}

/* Habitat and general information run the full width and break after their
   label, as they do on the legacy sheet. */
.wildisland-detail .wildisland-detail__attribute--wide {
	display: block;
}

/* The unit next to the area, in the legacy `<small>` — and not uppercased by a
 * theme that puts everything in this block in capitals. */
.wildisland-detail .wildisland-detail__value small {
	text-transform: none;
}

.wildisland-detail .wildisland-detail__text {
	margin: 0 0 20px;
}

.wildisland-detail .wildisland-detail__text > :last-child {
	margin-bottom: 0;
}

/* Divi drops the markers off every `ul` on the page; the general information is
 * editorial prose and its lists are lists (`AI/architecture/divi-fallstricke.md`,
 * section 3). */
.wildisland-detail .wildisland-detail__text ul {
	margin: 0 0 1em;
	padding-left: 1.5em;
	list-style: disc outside;
}

.wildisland-detail .wildisland-detail__text ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
	list-style: decimal outside;
}

.wildisland-detail .wildisland-detail__text li {
	margin: 0;
	list-style: inherit;
}

/* ------------------------------------------------------- map and pictures */

/* 200px, as the legacy `#sub_map`. */
.wildisland-detail .wildisland-detail__map {
	height: 200px;
	margin: 0 0 0.5em;
	background: #e8ebe6;
}

.wildisland-detail .wildisland-detail__maps-link {
	margin: 0 0 20px;
	padding: 0;
	font-size: 14px;
	line-height: 20px;
}

.wildisland-detail .wildisland-detail__gallery {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The legacy gallery lays its pictures out side by side — `display: inline-block`
 * with 10px between them — and each is at its own width, not stretched to the
 * column. A single picture therefore stays the size it was uploaded at. */
.wildisland-detail .wildisland-detail__gallery-item {
	display: inline-block;
	max-width: 100%;
	margin: 0 10px 10px 0;
	vertical-align: top;
	list-style: none;
}

.wildisland-detail .wildisland-detail__gallery-item figure {
	position: relative;
	margin: 0;
}

.wildisland-detail .wildisland-detail__gallery-item img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* The legacy caption sits *on* the picture, bottom right, at 12px. It has no
 * backdrop there and is unreadable over a bright sky; a dark scrim behind it is
 * the invisible half of E3 — the caption stays where it was and becomes
 * legible. */
.wildisland-detail .wildisland-detail__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0.6em 0.8em;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
	color: #fff;
	font-size: 0.8em;
	text-align: right;
}