/*
 * Our Books.
 *
 * Uniform stacked rows: a square frame at the left, the same fields in the
 * same order at the right, every row identical. The page is a catalogue, so
 * nothing alternates and nothing is special-cased; the only variation is the
 * NEW flag and the muted treatment an out-of-print title gets.
 *
 * Tokens come from /assets/home.css. Sizes are px because the Beaver Builder
 * theme sets html { font-size: 62.5% }.
 */

.wyohs-books {
	margin: 60px auto 0;
	max-width: 1160px;
	width: 100%;
	text-align: left;

	--bk-frame: 260px;
	--bk-gap: 44px;
	--bk-rule: rgba( 26, 26, 26, .22 );
}

/* ------------------------------------------------------------------- row */

.wyohs-books .wyohs-books__item {
	display: grid;
	grid-template-columns: var( --bk-frame ) 1fr;
	gap: var( --bk-gap );
	align-items: start;
	padding: 44px 0;
	border-top: 2px solid var( --bk-rule );
}

.wyohs-books .wyohs-books__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.wyohs-books .wyohs-books__item:last-child {
	padding-bottom: 0;
}

/* ----------------------------------------------------------------- plate */

.wyohs-books .wyohs-books__plate-col {
	position: relative;
}

.wyohs-books .wyohs-books__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 16px;
	background: var( --wyohs-peach, #f6d7b3 );
	box-sizing: border-box;
	overflow: hidden;
}

/*
 * contain, not cover. The frame is square so a portrait book and a landscape
 * one can share a column; cropping either to fill it would cut the cover.
 */
.wyohs-books .wyohs-books__cover {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 2px 6px rgba( 26, 26, 26, .18 ), 0 14px 30px rgba( 26, 26, 26, .14 );
}

.wyohs-books .wyohs-books__frame--blank {
	background: var( --wyohs-navy, #1b3a5c );
	padding: 26px;
}

.wyohs-books .wyohs-books__plate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
}

.wyohs-books .wyohs-books__plate-eyebrow {
	font-family: var( --wyohs-display, 'Special Gothic Condensed One' ), sans-serif;
	font-size: 12px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var( --wyohs-sand, #d2a56c );
}

.wyohs-books .wyohs-books__plate-title {
	font-family: var( --wyohs-serif, 'Young Serif' ), serif;
	font-size: 22px;
	line-height: 1.24;
	color: #fff8e7;
}

.wyohs-books .wyohs-books__plate-rule {
	display: block;
	width: 54px;
	height: 2px;
	background: var( --wyohs-sand, #d2a56c );
}

/* ------------------------------------------------------------- NEW flag */

.wyohs-books .wyohs-books__flag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 6px 13px 5px;
	background: var( --wyohs-sand, #d2a56c );
	color: var( --wyohs-navy, #1b3a5c );
	font-family: var( --wyohs-display, 'Special Gothic Condensed One' ), sans-serif;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ body */

.wyohs-books .wyohs-books__body {
	padding-top: 2px;
}

/* h3 inside builder content is condensed uppercase by default; restate it. */
.wyohs-books .wyohs-books__title {
	margin: 0 0 8px;
	font-family: var( --wyohs-serif, 'Young Serif' ), serif;
	font-size: 32px;
	line-height: 1.18;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var( --wyohs-ink, #1a1a1a );
}

.wyohs-books .wyohs-books__author {
	margin: 0 0 12px;
	font-family: 'Special Elite', serif;
	font-size: 17px;
	line-height: 1.4;
	color: rgba( 26, 26, 26, .78 );
}

.wyohs-books .wyohs-books__series,
.wyohs-books .wyohs-books__date {
	margin: 0 0 8px;
	font-family: var( --wyohs-display, 'Special Gothic Condensed One' ), sans-serif;
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var( --wyohs-navy, #1b3a5c );
}

.wyohs-books .wyohs-books__date {
	color: rgba( 26, 26, 26, .55 );
}

.wyohs-books .wyohs-books__date span {
	color: rgba( 26, 26, 26, .4 );
}

.wyohs-books .wyohs-books__summary {
	margin: 16px 0 0;
	max-width: 66ch;
}

.wyohs-books .wyohs-books__summary p {
	margin: 0 0 14px;
	font-size: 17px;
	line-height: 1.66;
	text-align: left;
	color: var( --wyohs-ink, #1a1a1a );
}

.wyohs-books .wyohs-books__summary p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- buttons */

.wyohs-books .wyohs-books__buys {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 22px 0 0;
}

.wyohs-books a.wyohs-books__cta {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	padding: 13px 22px 12px;
	background: var( --wyohs-navy, #1b3a5c );
	color: #fff8e7;
	font-family: var( --wyohs-display, 'Special Gothic Condensed One' ), sans-serif;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	transition: background .18s ease, color .18s ease;
}

.wyohs-books a.wyohs-books__cta:hover,
.wyohs-books a.wyohs-books__cta:focus-visible {
	background: var( --wyohs-sand, #d2a56c );
	color: var( --wyohs-navy, #1b3a5c );
}

.wyohs-books .wyohs-books__chev {
	font-size: 19px;
	line-height: 1;
}

/*
 * Stands where a buy button would stand, and is deliberately inert: no link,
 * no hover, muted against the cream. A reader who has come this far is looking
 * at the button, so the button's own position is where "you cannot buy this"
 * has to be said.
 */
.wyohs-books .wyohs-books__nobuy {
	display: inline-flex;
	align-items: baseline;
	padding: 13px 22px 12px;
	background: #e7dfd1;
	color: rgba( 26, 26, 26, .48 );
	font-family: var( --wyohs-display, 'Special Gothic Condensed One' ), sans-serif;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	cursor: default;
	user-select: none;
}

/* --------------------------------------------------------- out of print */

.wyohs-books .wyohs-books__item--gone .wyohs-books__frame {
	background: #efe3d2;
}

.wyohs-books .wyohs-books__item--gone .wyohs-books__cover {
	opacity: .78;
}

/* ------------------------------------------------------------ responsive */

@media ( max-width: 860px ) {
	.wyohs-books {
		--bk-frame: 200px;
		--bk-gap: 30px;
	}

	.wyohs-books .wyohs-books__title {
		font-size: 28px;
	}
}

@media ( max-width: 640px ) {
	.wyohs-books .wyohs-books__item {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 34px 0;
	}

	.wyohs-books .wyohs-books__plate-col {
		max-width: 240px;
	}

	.wyohs-books .wyohs-books__title {
		font-size: 26px;
	}

	.wyohs-books .wyohs-books__summary p {
		font-size: 16px;
	}

	.wyohs-books a.wyohs-books__cta {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/*
 * Undoing the host module.
 *
 * If this component is ever printed inside a .wyohs-prose rich-text module
 * rather than a sibling module of its own, that module centres paragraphs,
 * rewrites h3 as condensed caps and paints every link navy with a sand
 * underline. Restating the intended values here costs nothing where the
 * component sits outside a prose module and saves the page where it does not.
 */
.wyohs-prose .wyohs-books,
.wyohs-prose .wyohs-books p,
.wyohs-prose .wyohs-books h3 {
	text-align: left;
}

.wyohs-prose .wyohs-books .wyohs-books__title {
	font-family: var( --wyohs-serif, 'Young Serif' ), serif;
	font-size: 32px;
	text-transform: none;
	letter-spacing: 0;
}

.wyohs-prose .wyohs-books .wyohs-books__summary p {
	font-size: 17px;
}

.wyohs-prose .wyohs-books a.wyohs-books__cta {
	color: #fff8e7;
	background: var( --wyohs-navy, #1b3a5c );
	text-decoration: none;
	border-bottom: 0;
}

.wyohs-prose .wyohs-books a.wyohs-books__cta:hover,
.wyohs-prose .wyohs-books a.wyohs-books__cta:focus-visible {
	color: var( --wyohs-navy, #1b3a5c );
	background: var( --wyohs-sand, #d2a56c );
}

/* ------------------------------------------------- publishing with us */

.wyohs-books .wyohs-books__note {
	margin: 56px 0 0;
	padding: 34px 0 0;
	border-top: 2px solid var( --bk-rule );
	text-align: left;
}

.wyohs-books .wyohs-books__note-title {
	margin: 0 0 12px;
	font-family: var( --wyohs-display, 'Special Gothic Condensed One' ), sans-serif;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 400;
	color: var( --wyohs-navy, #1b3a5c );
}

.wyohs-books .wyohs-books__note p {
	margin: 0 0 10px;
	max-width: 66ch;
	font-size: 17px;
	line-height: 1.66;
	text-align: left;
	color: var( --wyohs-ink, #1a1a1a );
}

.wyohs-books .wyohs-books__note-contact {
	font-family: var( --wyohs-display, 'Special Gothic Condensed One' ), sans-serif;
	font-size: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: rgba( 26, 26, 26, .55 );
}

/* Award-Winning Books: the award line, the publisher line for a book from
   another press, and the empty state. Added 2 Oct 2026. */

.wyohs-books .wyohs-books__award {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 4px 0 12px;
	font-family: var( --wyohs-display, 'Special Gothic Condensed One' ), sans-serif;
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var( --wyohs-navy, #1b3a5c );
}

.wyohs-books .wyohs-books__award::before {
	content: "";
	flex: 0 0 18px;
	height: 2px;
	transform: translateY( -4px );
	background: var( --wyohs-sand, #d2a56c );
}

.wyohs-books .wyohs-books__publisher {
	margin: -6px 0 12px;
	font-family: 'Special Elite', serif;
	font-size: 15px;
	line-height: 1.4;
	color: rgba( 26, 26, 26, .55 );
}

.wyohs-books__empty {
	margin: 0;
	font-family: 'Special Elite', serif;
	font-size: 17px;
	color: rgba( 26, 26, 26, .6 );
}