/* -----------------------------------------------------------------------
   Grant Programs

   Three funds, each given the same shape so an applicant can compare them
   at a glance: a Young Serif heading over a hairline, prose at the 680px
   measure, and a peach "at a glance" panel carrying the facts someone
   actually needs before they apply.

   The endowment gets one navy band near the top to give the page an anchor
   and to say who Lola Homsher was before the programs start.

   Everything below targets a native Heading or Text Editor module. Those
   render with include_wrapper false, so each class sits ON the element, not
   around it, and a pseudo-element on a module needs .fl-builder-content and
   .fl-module in the selector to clear the theme's clearfix.

   Sizes are px. The theme sets html{font-size:62.5%}, so rem is a trap.
   ----------------------------------------------------------------------- */

.wyohs-grants {
	--measure: 680px;
}

/* Modules are flex items in their column, so auto side margins shrink-wrap
   them to their text unless width is set. */

.wyohs-grants .wyohs-grants__lede,
.wyohs-grants .wyohs-grants__eyebrow,
.wyohs-grants .wyohs-grants__statement,
.wyohs-grants .wyohs-grants__funds,
.wyohs-grants .wyohs-grants__head,
.wyohs-grants .wyohs-grants__body,
.wyohs-grants .wyohs-grants__panel,
.wyohs-grants .wyohs-grants__next-head {
	width: 100%;
}

/* Lede ------------------------------------------------------------------ */

.wyohs-grants .wyohs-grants__lede {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.wyohs-grants .wyohs-grants__lede p {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 21px;
	line-height: 1.6;
	color: var(--wyohs-ink, #1a1a1a);
	margin: 0;
}

.wyohs-grants .wyohs-grants__rule {
	max-width: 64px;
	margin: 38px auto 0;
}

.wyohs-grants .wyohs-grants__rule .fl-separator {
	border-top: 2px solid var(--wyohs-sand, #d2a56c);
	margin: 0;
}

/* Endowment band -------------------------------------------------------- */

.wyohs-grants .wyohs-grants__eyebrow {
	max-width: 1000px;
	margin: 0 auto 26px;
	text-align: center;
}

.wyohs-grants .wyohs-grants__eyebrow p {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wyohs-sand, #d2a56c);
	margin: 0;
}

.wyohs-grants .wyohs-grants__statement {
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
}

.wyohs-grants .wyohs-grants__statement p {
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.22;
	color: var(--wyohs-cream, #fff8e7);
	margin: 0;
}

/* The four things the endowment pays for, set as a rule of names rather
   than a bulleted list: it reads as a masthead, not as a to-do. */

.wyohs-grants .wyohs-grants__funds {
	max-width: 1000px;
	margin: 46px auto 0;
}

.wyohs-grants .wyohs-grants__funds ul {
	list-style: none;
	margin: 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(255, 248, 231, .28);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 34px;
}

.wyohs-grants .wyohs-grants__funds li {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: rgba(255, 248, 231, .82);
	margin: 0;
	padding: 0;
}

.wyohs-grants .wyohs-grants__funds .wyohs-grants__funds-note {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none;
	color: rgba(255, 248, 231, .66);
	text-align: center;
	margin: 22px 0 0;
}

/* Prose ----------------------------------------------------------------- */

.wyohs-grants .wyohs-grants__head {
	max-width: var(--measure);
	margin: 0 auto 6px;
	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);
}

.fl-builder-content .wyohs-grants .wyohs-grants__head.fl-module::after {
	content: '';
	display: block;
	clear: none;
	width: 100%;
	height: 1px;
	background: rgba(26, 26, 26, .18);
	margin-top: 18px;
}

.wyohs-grants .wyohs-grants__body {
	max-width: var(--measure);
	margin: 20px auto 0;
}

.wyohs-grants .wyohs-grants__body p {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 17px;
	line-height: 1.65;
	color: var(--wyohs-ink, #1a1a1a);
	margin: 0 0 18px;
	text-align: left;
}

.wyohs-grants .wyohs-grants__body p:last-child {
	margin-bottom: 0;
}

.wyohs-grants .wyohs-grants__body em,
.wyohs-grants .wyohs-grants__body i,
.wyohs-grants .wyohs-grants__body cite {
	font-style: italic;
}

.wyohs-grants .wyohs-grants__body a,
.wyohs-grants .wyohs-grants__lede a,
.wyohs-grants .wyohs-grants__panel a {
	color: var(--wyohs-navy, #1b3a5c);
	text-decoration: none;
	border-bottom: 1px solid var(--wyohs-sand, #d2a56c);
	transition: background-color .15s ease;
}

.wyohs-grants .wyohs-grants__body a:hover,
.wyohs-grants .wyohs-grants__lede a:hover,
.wyohs-grants .wyohs-grants__panel a:hover {
	background: rgba(210, 165, 108, .28);
}

/* At a glance panel -----------------------------------------------------
   A definition list rather than a table: an editor can add a row in the
   Text Editor without touching a grid, and it degrades to a readable
   stack if the CSS never loads. */

.wyohs-grants .wyohs-grants__panel {
	max-width: var(--measure);
	margin: 40px auto 0;
	background: var(--wyohs-peach, #f6d7b3);
	padding: 34px 38px 36px;
}

.fl-builder-content .wyohs-grants .wyohs-grants__panel.fl-module::before {
	display: none;
}

.wyohs-grants .wyohs-grants__panel h4 {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #6a5842;
	margin: 0 0 22px;
	padding-bottom: 14px;
	border-bottom: 2px solid rgba(26, 26, 26, .22);
}

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

.wyohs-grants .wyohs-grants__panel 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-grants .wyohs-grants__panel 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-grants .wyohs-grants__panel dd strong {
	font-weight: 400;
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 19px;
	color: var(--wyohs-navy, #1b3a5c);
}

/* Where to go next ------------------------------------------------------ */

.wyohs-grants .wyohs-grants__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;
}

/* The three link cards sit in one Beaver Builder column and are laid out by
   grid. Beaver Builder drops a column the moment it is empty, which makes a
   three-column row a fragile place to keep Component instances. */

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

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

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

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

/* Small screens --------------------------------------------------------- */

@media (max-width: 992px) {

	.wyohs-grants .wyohs-grants__statement p {
		font-size: 32px;
	}
}

@media (max-width: 900px) {

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

@media (max-width: 640px) {

	.wyohs-grants .wyohs-grants__lede p {
		font-size: 18px;
	}

	.wyohs-grants .wyohs-grants__statement p {
		font-size: 26px;
	}

	.wyohs-grants .wyohs-grants__head {
		font-size: 27px;
	}

	.wyohs-grants .wyohs-grants__panel {
		padding: 26px 22px 28px;
	}

	.wyohs-grants .wyohs-grants__panel dl {
		grid-template-columns: 1fr;
		gap: 6px 0;
	}

	.wyohs-grants .wyohs-grants__panel dd {
		margin-bottom: 14px;
	}

	.wyohs-grants .wyohs-grants__next-head {
		font-size: 30px;
	}
}