/* -----------------------------------------------------------------------
   Governing Documents

   Rows, not cards, following the Wyoming History News archive. Thirty-five
   documents in a grid of boxes is a wall; what a reader does here is scan a
   category for a title, so the file kind sits small at the left of a row
   where a cover would be and the title carries the line.

   The two archives are deliberately the same object: same year/category
   heading with its count and 2px rule, same three-column row, same quiet
   meta pushed right, same chevron. The class names are local to this page
   rather than shared with whn.css, because the two stylesheets load on
   different pages and neither should depend on the other.

   No filter bar and no Special Elite. Dates are condensed caps, which keeps
   the typewriter face for the places it actually means something.
   ----------------------------------------------------------------------- */

/* Page furniture --------------------------------------------------------
   The lede and the closing heading are native Text Editor and Heading
   modules, which render with include_wrapper false: each class sits ON the
   element. As flex items in their column they shrink-wrap unless width is
   set. */

.wyohs-docs-page .wyohs-docs-page__lede,
.wyohs-docs-page .wyohs-docs-page__next-head {
	width: 100%;
}

.wyohs-docs-page .wyohs-docs-page__lede {
	max-width: 760px;
	margin: 0 auto;
}

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

.wyohs-docs-page .wyohs-docs-page__lede p:last-child {
	margin-bottom: 0;
}

.wyohs-docs-page .wyohs-docs-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: center;
	margin: 0;
}

/* Where to go next: the three link cards live in one Beaver Builder column
   and are laid out by grid rather than by three BB columns. Beaver Builder
   drops a column the moment it is empty, which makes a three-column row a
   fragile place to move Component instances around; one column and a grid
   holds its shape whatever the builder does. */

/* The column kept the 33% width it was born with as one of three, so it has
   to be told it is on its own now. */

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

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

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

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

@media (max-width: 900px) {

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

@media (max-width: 640px) {

	.wyohs-docs-page .wyohs-docs-page__lede p {
		font-size: 16px;
	}

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

/* The archive ----------------------------------------------------------- */

.wyohs-docs {
	text-align: left;
	--docs-rule: rgba(26, 26, 26, .22);
	--docs-hair: rgba(26, 26, 26, .12);
	--docs-quiet: #5c5c5c;
	max-width: 1160px;
	margin: 0 auto;
}

/* Category heading ------------------------------------------------------ */

.wyohs-docs__group {
	margin: 0 0 56px;
}

.wyohs-docs__group:last-child {
	margin-bottom: 0;
}

.wyohs-docs__group-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	border-bottom: 2px solid var(--docs-rule);
	padding-bottom: 14px;
	margin: 0 0 8px;
}

.wyohs-docs__group-title {
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.15;
	text-align: left;
	color: var(--wyohs-ink, #1a1a1a);
	margin: 0;
}

.wyohs-docs__group-count {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 14px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--docs-quiet);
	margin: 0;
}

.wyohs-docs__group-note {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--docs-quiet);
	margin: 14px 0 0;
}

.wyohs-docs__empty {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 17px;
	color: var(--docs-quiet);
	margin: 22px 0 0;
}

/* Rows ------------------------------------------------------------------ */

.wyohs-docs__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wyohs-docs__item + .wyohs-docs__item {
	border-top: 1px solid var(--docs-hair);
}

.wyohs-docs__link {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding: 18px 16px 18px 8px;
	text-decoration: none;
	color: inherit;
	transition: background-color .15s ease;
}

a.wyohs-docs__link:hover,
a.wyohs-docs__link:focus-visible {
	background: rgba(246, 215, 179, .45);
	text-decoration: none;
}

/* The kind tile stands where a cover sits on the Wyoming History News row.
   A document has no cover, so it carries its file type instead, at the same
   size and proportion so the two archives keep the same rhythm. */

.wyohs-docs__kind {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	aspect-ratio: 17 / 22;
	background: var(--wyohs-navy, #1b3a5c);
	border: 1px solid var(--docs-hair);
	box-shadow: 0 1px 3px rgba(26, 26, 26, .14);
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 17px;
	line-height: 1;
	color: var(--wyohs-sand, #d2a56c);
}

.wyohs-docs__link--none .wyohs-docs__kind {
	background: rgba(27, 58, 92, .35);
	color: rgba(255, 248, 231, .8);
}

.wyohs-docs__text {
	display: block;
	min-width: 0;
}

.wyohs-docs__title {
	display: block;
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 22px;
	line-height: 1.25;
	color: var(--wyohs-navy, #1b3a5c);
}

.wyohs-docs__teaser {
	display: block;
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 15px;
	line-height: 1.5;
	color: var(--docs-quiet);
	margin-top: 4px;
}

.wyohs-docs__meta {
	display: flex;
	align-items: baseline;
	gap: 18px;
	white-space: nowrap;
}

.wyohs-docs__date,
.wyohs-docs__size,
.wyohs-docs__soon {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--docs-quiet);
}

.wyohs-docs__size {
	min-width: 62px;
	text-align: right;
}

.wyohs-docs__chev {
	font-size: 22px;
	line-height: 1;
	color: var(--wyohs-sand, #d2a56c);
	transition: transform .15s ease;
}

a.wyohs-docs__link:hover .wyohs-docs__chev {
	transform: translateX(3px);
}

/* Narrow ----------------------------------------------------------------
   The chevron and the file size stop earning their space here. The title
   and the date are enough to pick a document by. */

@media (max-width: 640px) {

	.wyohs-docs__group-title {
		font-size: 26px;
	}

	.wyohs-docs__link {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 16px;
		padding: 16px 4px;
	}

	.wyohs-docs__kind {
		width: 52px;
		font-size: 15px;
	}

	.wyohs-docs__title {
		font-size: 20px;
	}

	.wyohs-docs__meta {
		grid-column: 2;
		gap: 14px;
		margin-top: 6px;
	}

	.wyohs-docs__chev {
		display: none;
	}

	.wyohs-docs__size {
		min-width: 0;
		text-align: left;
	}
}