/* -----------------------------------------------------------------------
   Guide to Records

   Six external catalogues as cards, in the Staff and Board card idiom:
   a plate on top, a peach field carrying the institution in condensed caps,
   a serif title over a hairline rule and a paragraph, then a navy foot bar
   with a trailing chevron. The whole card is the link.

   Every value here is measured off people.css. That file gets the same
   shape by styling a Beaver Builder Posts module, which needs posts; six
   external catalogues are not posts, so the values are re-stated rather
   than shared. The duplication is deliberate and is noted in records.php
   too. If one is restyled, look at the other.

   Two deliberate divergences from Staff and Board, both because these
   cards carry a paragraph where a person card carries a role:

   1. The plate is 3:2, not 4:5. At three columns a 4:5 plate pushes the
      words most of a screen down the card.
   2. Three columns, not four. A paragraph in a quarter of 1160px sets to
      about five words a line.
   ----------------------------------------------------------------------- */

/* 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-records-page .wyohs-records-page__lede,
.wyohs-records-page .wyohs-records-page__head,
.wyohs-records-page .wyohs-records-page__grid,
.wyohs-records-page .wyohs-records-page__next-head {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.wyohs-records-page .wyohs-records-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-records-page .wyohs-records-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. Beaver Builder deletes a column the moment it is empty,
   which makes a three-column row a fragile place to keep Component
   instances. Copied from documents.css, where it was solved first. */

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

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

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

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

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

.wyohs-records {
	text-align: left;
	--rec-cols: 3;
	--rec-gap: 24px;
	--rec-card-bg: var(--wyohs-peach, #f6d7b3);
	--rec-card-ink: var(--wyohs-navy, #1b3a5c);
	--rec-card-sub: var(--wyohs-ink, #1a1a1a);
	--rec-foot-bg: var(--wyohs-navy, #1b3a5c);
	--rec-foot-fg: var(--wyohs-peach, #f6d7b3);
	--rec-display: var(--wyohs-display, 'Special Gothic Condensed One', 'Arial Narrow', sans-serif);
	--rec-serif: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	--rec-body: var(--wyohs-body, 'Special Gothic', sans-serif);
	max-width: 1160px;
	margin: 0 auto;
}

.wyohs-records__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--rec-cols), minmax(0, 1fr));
	gap: var(--rec-gap);
	align-items: stretch;
}

.wyohs-records__cell {
	margin: 0;
	display: flex;
}

/* The card -------------------------------------------------------------- */

.wyohs-records__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--rec-card-bg);
	color: var(--rec-card-ink);
	overflow: hidden;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

a.wyohs-records__card:hover,
a.wyohs-records__card:focus-visible {
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(27, 58, 92, .18);
}

.wyohs-records__plate {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--rec-card-ink);
	flex: 0 0 auto;
}

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

.wyohs-records__field {
	display: block;
	flex: 1 1 auto;
	padding: 20px 18px 22px;
}

.wyohs-records__eyebrow {
	display: block;
	font-family: var(--rec-display);
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #6b4a24;
	margin-bottom: 8px;
}

/* The hairline under the title sits on the title's own bottom border, and
   the padding is .66em rather than .5em so a descender clears it. That is
   people.css's note and it still applies: "Digitized Collections in Western
   History and Culture" has a g and a y in it. */

.wyohs-records__title {
	display: block;
	font-family: var(--rec-serif);
	font-weight: 400;
	font-size: 23px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rec-card-ink);
	padding-bottom: .66em;
	border-bottom: 1px solid var(--rec-card-ink);
}

.wyohs-records__summary {
	display: block;
	margin-top: 12px;
	font-family: var(--rec-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--rec-card-sub);
}

.wyohs-records__foot {
	display: block;
	margin-top: auto;
	padding: 13px 18px 11px;
	background: var(--rec-foot-bg);
	color: var(--rec-foot-fg);
	font-family: var(--rec-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter .15s ease;
}

.wyohs-records__foot::after {
	content: " >";
	font-size: .7em;
	vertical-align: .08em;
}

a.wyohs-records__card:hover .wyohs-records__foot,
a.wyohs-records__card:focus-visible .wyohs-records__foot {
	filter: brightness(1.15);
}

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

@media (max-width: 1000px) {

	.wyohs-records {
		--rec-cols: 2;
	}
}

@media (max-width: 900px) {

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

@media (max-width: 640px) {

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

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

	.wyohs-records {
		--rec-cols: 1;
		--rec-gap: 20px;
	}

	.wyohs-records__title {
		font-size: 21px;
	}
}

/* Undoing the host module -----------------------------------------------
   The shortcode sits in its own HTML module, a sibling 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: if the shortcode
   is ever moved into a .wyohs-prose module they are what stops the whole
   grid going centred and the foot bar going navy on navy. */

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

.wyohs-prose a.wyohs-records__card,
.wyohs-prose a.wyohs-records__card:hover {
	color: var(--wyohs-navy, #1b3a5c);
	text-decoration: none;
	background: var(--wyohs-peach, #f6d7b3);
}

.wyohs-prose .wyohs-records__foot {
	color: var(--wyohs-peach, #f6d7b3);
}