/* ==========================================================================
   WyoHS Blog (rendered by [wyohs_blog])

   Cards carry the same identity as the blog carousel on the homepage: a sand
   card, dark-brown serif title over a hairline rule, condensed uppercase date,
   a cream series badge sitting on the photo, and a solid brown Read More bar
   across the bottom. The filter buttons are the navy control idiom used on
   Staff and Board, so the two pages read as one system.

   The two newest posts span two grid columns each and lay their photo beside
   the copy. blog.js moves .is-featured as the filter changes, so a filtered
   view still leads with its own two newest posts.

   Sizes are px on purpose: the BB theme sets html font-size to 62.5%,
   which makes rem values unpredictable.
   ========================================================================== */

.wyohs-blog {
	--blog-cols-max: 4;              /* the shortcode's columns= sets this inline */
	--blog-cols: var(--blog-cols-max);
	--blog-gap: 24px;
	--blog-card-bg: var(--wyohs-sand, #d2a56c);
	--blog-card-ink: #2c1f17;
	--blog-rule: #2c1f17;
	--blog-foot-bg: #2c1f17;
	--blog-foot-fg: #fff;
	--blog-badge-bg: var(--wyohs-cream, #fff8e7);
	--blog-badge-fg: var(--wyohs-ink, #1a1a1a);
	--blog-control: var(--wyohs-navy, #1b3a5c);
	--blog-control-fg: var(--wyohs-peach, #f6d7b3);
	--blog-accent: var(--wyohs-sand, #d2a56c);
	--blog-display: var(--wyohs-display, 'Special Gothic Condensed One', 'Arial Narrow', sans-serif);
	--blog-meta: 'Special Gothic', 'Helvetica Neue', Arial, sans-serif;   /* dates + badges: the wide cut, as on the homepage */
	--blog-serif: var(--wyohs-serif, 'Young Serif', Georgia, serif);
}

/* ---------- filter bar -------------------------------------------------- */

.wyohs-blog__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0 0 32px;
	padding-bottom: 22px;
	border-bottom: 2px solid var(--blog-accent);
}

.wyohs-blog__filterset {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wyohs-blog__filter {
	margin: 0;
	padding: 13px 24px 11px;
	border: 2px solid var(--blog-control);
	border-radius: 0;
	background: transparent;
	color: var(--blog-control);
	font-family: var(--blog-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.wyohs-blog__filter:hover,
.wyohs-blog__filter:focus-visible {
	background: var(--blog-accent);
	border-color: var(--blog-accent);
	color: var(--blog-control);
}

.wyohs-blog__filter.is-active {
	background: var(--blog-control);
	border-color: var(--blog-control);
	color: var(--blog-control-fg);
}

.wyohs-blog__count {
	margin: 0 0 0 auto;
	font-family: var(--blog-display);
	font-size: 15px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wyohs-ink, #1a1a1a);
}

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

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

.wyohs-blog__item {
	margin: 0;
	padding: 0;
	display: flex;
}

.wyohs-blog__item[hidden] { display: none; }

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

.wyohs-blog__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--blog-card-bg);
	color: var(--blog-card-ink);
	transition: transform .15s ease, box-shadow .15s ease;
}

.wyohs-blog__card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(44, 31, 23, .22); }

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

.wyohs-blog__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Series badge, same recipe as .wyohs-badge on the homepage carousels */
.wyohs-blog__badge {
	position: absolute;
	left: 16px;
	bottom: 14px;
	padding: 5px 9px;
	background: var(--blog-badge-bg);
	color: var(--blog-badge-fg);
	font-family: var(--blog-meta);
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 3px;
}

.wyohs-blog__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 18px 0;
}

.wyohs-blog__date {
	margin: 0 0 .9em;
	font-family: var(--blog-meta);
	font-weight: 400;
	font-size: 11.5px;
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--blog-card-ink);
}

.wyohs-blog__title {
	margin: 0 0 .6em;
	padding-bottom: .55em;
	border-bottom: 1px solid var(--blog-rule);
	font-family: var(--blog-serif);
	font-weight: 400;
	font-size: 23px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.wyohs-blog__title a,
.wyohs-blog__title a:visited { color: var(--blog-card-ink); text-decoration: none; }
.wyohs-blog__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wyohs-blog__excerpt,
.wyohs-blog__excerpt p {
	font-size: 13px;
	line-height: 1.5;
	color: var(--blog-card-ink);
}

.wyohs-blog__excerpt { flex: 1 1 auto; }
.wyohs-blog__excerpt p { margin: 0 0 1em; }

.wyohs-blog__more,
.wyohs-blog__more:visited {
	display: block;
	margin: auto -18px 0;
	padding: 13px 18px 11px;
	background: var(--blog-foot-bg);
	color: var(--blog-foot-fg) !important;
	font-family: var(--blog-display);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter .15s ease;
}

.wyohs-blog__more::after { content: " >"; font-size: .7em; vertical-align: .08em; }
.wyohs-blog__card:hover .wyohs-blog__more { filter: brightness(1.35); }

.wyohs-blog .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- featured pair ----------------------------------------------- */

.wyohs-blog__item.is-featured { grid-column: span 2; }

.wyohs-blog__item.is-featured .wyohs-blog__card {
	flex-direction: row;
	align-items: stretch;
}

.wyohs-blog__item.is-featured .wyohs-blog__media {
	width: 46%;
	flex: 0 0 46%;
	aspect-ratio: auto;
}

.wyohs-blog__item.is-featured .wyohs-blog__body { padding: 26px 24px 0; }
.wyohs-blog__item.is-featured .wyohs-blog__date { font-size: 12.5px; }

.wyohs-blog__item.is-featured .wyohs-blog__title {
	font-size: 32px;
	line-height: 1.15;
	border-bottom-width: 2px;
}

.wyohs-blog__item.is-featured .wyohs-blog__excerpt,
.wyohs-blog__item.is-featured .wyohs-blog__excerpt p { font-size: 15px; line-height: 1.6; }

.wyohs-blog__item.is-featured .wyohs-blog__more { margin: auto -24px 0; padding: 15px 24px 13px; }
.wyohs-blog__item.is-featured .wyohs-blog__badge { left: 18px; bottom: 16px; }

/* ---------- empty state ------------------------------------------------- */

.wyohs-blog__empty {
	margin: 0;
	padding: 48px 0;
	font-family: var(--blog-display);
	font-size: 18px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wyohs-ink, #1a1a1a);
}

/* ---------- breakpoints ------------------------------------------------- */

@media (max-width: 1200px) {
	.wyohs-blog { --blog-cols: min(3, var(--blog-cols-max)); }
	.wyohs-blog__item.is-featured { grid-column: span 3; }
	.wyohs-blog__item.is-featured .wyohs-blog__title { font-size: 30px; }
}

@media (max-width: 900px) {
	.wyohs-blog { --blog-cols: min(2, var(--blog-cols-max)); --blog-gap: 18px; }
	.wyohs-blog__item.is-featured { grid-column: span 2; }
	.wyohs-blog__item.is-featured .wyohs-blog__media { width: 42%; flex-basis: 42%; }
	.wyohs-blog__item.is-featured .wyohs-blog__title { font-size: 26px; }
	.wyohs-blog__item.is-featured .wyohs-blog__excerpt,
	.wyohs-blog__item.is-featured .wyohs-blog__excerpt p { font-size: 14px; }
}

@media (max-width: 680px) {
	.wyohs-blog__filters { gap: 12px; }
	.wyohs-blog__count { margin-left: 0; }
	.wyohs-blog__filter { flex: 1 1 auto; padding: 12px 14px 10px; font-size: 16px; letter-spacing: 1.5px; }
}

@media (max-width: 560px) {
	.wyohs-blog { --blog-cols: 1; }
	.wyohs-blog__item.is-featured { grid-column: span 1; }
	/* A featured card at one column is just a card with bigger type. */
	.wyohs-blog__item.is-featured .wyohs-blog__card { flex-direction: column; }
	.wyohs-blog__item.is-featured .wyohs-blog__media { width: 100%; flex-basis: auto; aspect-ratio: 3 / 2; }
	.wyohs-blog__item.is-featured .wyohs-blog__body { padding: 20px 18px 0; }
	.wyohs-blog__item.is-featured .wyohs-blog__title { font-size: 25px; }
	.wyohs-blog__item.is-featured .wyohs-blog__more { margin: auto -18px 0; padding: 13px 18px 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.wyohs-blog__card { transition: none; }
	.wyohs-blog__card:hover { transform: none; }
}

/* --- Beaver Builder wrappers --- */
/* Class on the HTML module holding the shortcode is wyohs-blog__module;
   the intro Text Editor above it is wyohs-prose wyohs-prose--left wyohs-blog__intro. */
.wyohs-blog__module.fl-module,
.wyohs-blog__module .fl-module-content { margin-left: 0 !important; margin-right: 0 !important; }

.wyohs-blog__intro.fl-module { max-width: 46em; margin: 0 0 30px !important; }
.wyohs-blog__intro .fl-module-content { margin-left: 0 !important; margin-right: 0 !important; }

/* --- lead paragraph --- */
/* The intro sits in the same Text Editor module as the shortcode, so it is
   marked up as p.wyohs-blog__lead rather than styled off the module. */
.wyohs-blog__lead {
	max-width: 46em;
	margin: 0 0 34px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wyohs-ink, #1a1a1a);
}
.wyohs-blog__lead a {
	color: var(--wyohs-navy, #1b3a5c);
	text-decoration: underline;
	text-decoration-color: var(--wyohs-sand, #d2a56c);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}
@media (max-width: 680px) { .wyohs-blog__lead { font-size: 16px; margin-bottom: 26px; } }

/* --- type + spacing corrections --- */
.wyohs-blog .wyohs-blog__title,
.wyohs-blog .wyohs-blog__title a,
.wyohs-blog .wyohs-blog__title a:visited {
	font-family: var(--blog-serif) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--blog-card-ink) !important;
}

.wyohs-blog .wyohs-blog__date,
.wyohs-blog .wyohs-blog__badge {
	font-family: var(--blog-meta) !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
}

.wyohs-blog__excerpt {
	flex: 1 0 auto;
	padding-bottom: 1em;
}
.wyohs-blog__excerpt p:last-child { margin-bottom: 0; }
.wyohs-blog__more, .wyohs-blog__more:visited { margin-top: auto; }


/* ----------------------------------------------------------------------
   Collections: the second filter row, and the coming-soon placeholder card.
   The row sits under the series row and reads as a level down: same button
   shape, lighter weight, so it looks subordinate rather than parallel.
   ---------------------------------------------------------------------- */
.wyohs-blog__filterset--collections {
	margin-top: .5rem;
	padding-top: .5rem;
	/* border-top: 1px solid rgba(0, 0, 0, .08); */
}

.wyohs-blog__filterset--collections[hidden] {
	display: none;
}

.wyohs-blog__filterset--collections .wyohs-blog__filter {
	opacity: .85;
}

.wyohs-blog__filterset--collections .wyohs-blog__filter.is-active {
	opacity: 1;
}

/* A slot on a route that nobody has written yet. Not a link, not a tease:
   it shows the route is longer than what exists so far. */
.wyohs-blog__item.is-coming-soon .wyohs-blog__card {
	opacity: .62;
	cursor: default;
}

.wyohs-blog__item.is-coming-soon .wyohs-blog__media {
	display: block;
	position: relative;
	background: rgba(0, 0, 0, .05);
	min-height: 8rem;
	filter: grayscale(100%);
}

.wyohs-blog__badge--soon {
	background: #6b6b6b;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.wyohs-blog__item.is-coming-soon .wyohs-blog__title {
	color: inherit;
}

.wyohs-blog__soonnote {
	margin: .35rem 0 0;
	font-size: .875rem;
	font-style: italic;
	opacity: .8;
}

@media (prefers-reduced-motion: no-preference) {
	.wyohs-blog__filterset--collections .wyohs-blog__filter {
		transition: opacity .15s ease;
	}
}