/* -----------------------------------------------------------------------
   Historical Maps

   A remake of the Society's own Wyoming Historical Maps page. The words are
   theirs; the arrangement is the site's.

   Two components, both lifted from pages that already exist:

   1. The eleven maps are the **Annals volume grid** — a plate over a navy
      field, a serif label under a hairline — at three columns instead of
      six, because a map at 190px is a smudge and the scans are only 400px
      wide to begin with.
   2. The ordering details are the **Grant Programs at-a-glance panel** — a
      peach field carrying a definition list, labels in condensed caps,
      values in body text, a Young Serif navy `strong` for the thing that
      matters.

   Values are measured off annals.css and grants-page.css and re-stated here
   rather than shared, because those stylesheets load on other pages and
   nothing here should depend on them. Same call documents.css made about
   whn.css. If one is restyled, look at the others.
   ----------------------------------------------------------------------- */

/* Page furniture --------------------------------------------------------
   Native Heading and Text Editor modules, rendered with include_wrapper
   false, so each class sits ON the element. They shrink-wrap as flex items
   unless width is set, and the horizontal margins have to be zeroed with
   it: the theme gives every module 20px of side margin above 992px and the
   percentage resolves against the column's content box, which overflows the
   document at 1200px. */

.wyohs-maps-page .wyohs-maps-page__head,
.wyohs-maps-page .wyohs-maps-page__body,
.wyohs-maps-page .wyohs-maps-page__grid,
.wyohs-maps-page .wyohs-maps-page__panel,
.wyohs-maps-page .wyohs-maps-page__next-head {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.wyohs-maps-page .wyohs-maps-page__head {
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.18;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wyohs-ink, #1a1a1a);
	text-align: left;
	max-width: 1160px;
	margin: 0 auto;
}

.wyohs-maps-page .wyohs-maps-page__body {
	max-width: 1160px;
	margin: 18px auto 0;
	text-align: left;
}

.wyohs-maps-page .wyohs-maps-page__body p {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 18px;
	line-height: 1.68;
	color: var(--wyohs-ink, #1a1a1a);
	max-width: 72ch;
	margin: 0 0 18px;
}

.wyohs-maps-page .wyohs-maps-page__body p:last-child {
	margin-bottom: 0;
}

.wyohs-maps-page .wyohs-maps-page__next-head {
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.05;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wyohs-ink, #1a1a1a);
	text-align: left;
}

/* Where to go next: three Link Card instances in ONE Beaver Builder column,
   laid out by grid, because Beaver Builder deletes a column the moment it is
   empty. Copied from documents.css, where it was solved first. */

.wyohs-maps-page--cards .fl-col-group {
	display: block;
}

.wyohs-maps-page--cards .fl-col {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
}

.wyohs-maps-page--cards .fl-col-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	align-items: stretch;
}

.wyohs-maps-page--cards .fl-col-content > .wyohs-next {
	margin: 0;
	width: 100%;
}

/* The map grid ---------------------------------------------------------- */

.wyohs-maps {
	--maps-cols: 3;
	--maps-hair: rgba(26, 26, 26, .12);
	text-align: left;
	max-width: 1160px;
	margin: 0 auto;
}

.wyohs-maps__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--maps-cols), minmax(0, 1fr));
	gap: 40px 30px;
}

.wyohs-maps__cell {
	margin: 0;
}

.wyohs-maps__map {
	display: block;
	text-decoration: none;
	color: inherit;
}

a.wyohs-maps__map:hover,
a.wyohs-maps__map:focus-visible {
	text-decoration: none;
}

/* The plate.

   Bishop's originals are 17.5 by 23.5 inches, which is 0.745, and the scans
   come in at 400 by about 532, which is the same shape. The box is set to
   3/4 so every plate is the same height whatever a given scan rounded to,
   and object-fit takes up the couple of pixels of difference.

   The number behind the image is the fallback, exactly as on the Annals
   grid: it is what shows while the scan loads and what stays if an
   attachment is ever deleted, so a missing map reads as a plate rather than
   as a hole. */

.wyohs-maps__plate {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	background: var(--wyohs-navy, #1b3a5c);
	border: 1px solid var(--maps-hair);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(26, 26, 26, .16), 0 6px 16px rgba(26, 26, 26, .1);
	transition: transform .18s ease, box-shadow .18s ease;
}

.wyohs-maps__plate-num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 44px;
	line-height: 1;
	color: var(--wyohs-sand, #d2a56c);
}

.wyohs-maps__plate-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	display: block;
}

a.wyohs-maps__map:hover .wyohs-maps__plate,
a.wyohs-maps__map:focus-visible .wyohs-maps__plate {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(26, 26, 26, .18), 0 14px 26px rgba(26, 26, 26, .18);
}

.wyohs-maps__title {
	display: block;
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 20px;
	line-height: 1.25;
	color: var(--wyohs-navy, #1b3a5c);
	margin-top: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--maps-hair);
	transition: border-color .18s ease;
}

a.wyohs-maps__map:hover .wyohs-maps__title,
a.wyohs-maps__map:focus-visible .wyohs-maps__title {
	border-bottom-color: var(--wyohs-sand, #d2a56c);
}

/* The ordering panel ----------------------------------------------------
   Grant Programs' at-a-glance panel, values measured off grants-page.css. */

.wyohs-maps-order {
	max-width: 1160px;
	margin: 0 auto;
	background: var(--wyohs-peach, #f6d7b3);
	padding: 34px 38px 36px;
	text-align: left;
}

.wyohs-maps-order__list {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 16px 26px;
	margin: 0;
	align-items: baseline;
}

.wyohs-maps-order__list dt {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #6a5842;
	margin: 0;
}

.wyohs-maps-order__list dd {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--wyohs-ink, #1a1a1a);
	margin: 0;
}

.wyohs-maps-order__list dd strong {
	font-weight: 400;
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 19px;
	color: var(--wyohs-navy, #1b3a5c);
}

.wyohs-maps-order__list dd a {
	color: var(--wyohs-navy, #1b3a5c);
	text-decoration: underline;
	text-decoration-color: var(--wyohs-sand, #d2a56c);
	text-underline-offset: 3px;
}

.wyohs-maps-order__list dd a:hover {
	text-decoration-color: var(--wyohs-navy, #1b3a5c);
}

/* Narrow ---------------------------------------------------------------- */

@media (max-width: 900px) {

	.wyohs-maps-page--cards .fl-col-content {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.wyohs-maps {
		--maps-cols: 2;
	}
}

@media (max-width: 640px) {

	.wyohs-maps-page .wyohs-maps-page__head {
		font-size: 28px;
	}

	.wyohs-maps-page .wyohs-maps-page__next-head {
		font-size: 30px;
	}

	.wyohs-maps {
		--maps-cols: 1;
	}

	.wyohs-maps__grid {
		gap: 32px;
	}

	.wyohs-maps__title {
		font-size: 19px;
	}

	/* The definition list stacks. A 190px label column beside a street
	   address at phone width leaves the address setting four words wide. */

	.wyohs-maps-order {
		padding: 26px 22px 28px;
	}

	.wyohs-maps-order__list {
		grid-template-columns: 1fr;
		gap: 4px 0;
	}

	.wyohs-maps-order__list dd {
		margin-bottom: 16px;
	}

	.wyohs-maps-order__list dd:last-child {
		margin-bottom: 0;
	}
}

/* Undoing the host module -----------------------------------------------
   Both shortcodes sit in their own HTML modules, siblings of the prose
   rather than inside it, so nothing here has to fight a Text Editor
   module's centring or type scale. These are a guard, not a fix. */

.wyohs-prose .wyohs-maps,
.wyohs-prose .wyohs-maps-order,
.wyohs-prose .wyohs-maps *,
.wyohs-prose .wyohs-maps-order * {
	text-align: left;
}

.wyohs-prose a.wyohs-maps__map {
	color: inherit;
	text-decoration: none;
	background: none;
}