/*
 * Our Calendars.
 *
 * The Our Books catalogue row, rebuilt out of native Beaver Builder modules
 * rather than a shortcode. A calendar is one item that changes once a year,
 * so the annual job should be a few edits in the builder — swap the photo,
 * the title, the paragraph and the button's link — and nothing in code.
 *
 * Every measurement below is taken off the live Our Books page rather than
 * chosen: 1160px measure, a 260px plate, a 44px gutter, 32px / 1.18 title,
 * 17px / 1.4 strapline, 15px / 1.4px-tracked meta line, 17px / 1.66 body,
 * a 13/22/12 navy button. If the two pages ever disagree, books.css is the
 * one that is right and this file is the one to correct.
 */

.wyohs-cal {
	--cal-rule: rgba( 26, 26, 26, .22 );
	--cal-plate: 260px;
	--cal-gap: 44px;
}

/* -----------------------------------------------------------------------
   Geometry

   Beaver Builder lays columns out by percentage and the theme gives every
   module 20px of side margin above 992px, which together put the plate at
   278px, the copy at 582px and the heading — which had no such margin — at
   562px, twenty pixels left of its own paragraphs. The column group becomes
   an explicit grid instead, and the module margins are zeroed inside these
   rows so nothing is measured through them.
   ----------------------------------------------------------------------- */

.wyohs-cal .fl-row-content {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}

.wyohs-cal .fl-module {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.wyohs-cal.wyohs-cal-row .fl-row-content {
	padding-top: 60px;
	padding-bottom: 44px;
}

.wyohs-cal.wyohs-cal-row .fl-col-group {
	display: grid;
	grid-template-columns: var( --cal-plate ) 1fr;
	gap: var( --cal-gap );
	align-items: start;
}

.wyohs-cal.wyohs-cal-row .fl-col {
	width: auto !important;
	max-width: none;
	float: none;
	clear: none;
}

/* The theme hangs a clearfix ::before and ::after on every column group.
   In a grid container those are grid items: they take the first tracks and
   push the plate and the copy one cell along each, which lands the 260px
   plate in the 856px track and reads as the two columns having swapped.
   Turning them off is not enough on its own, so the two columns are pinned
   to their tracks by hand as well. */
.wyohs-cal .fl-col-group::before,
.wyohs-cal .fl-col-group::after {
	display: none !important;
}

.wyohs-cal.wyohs-cal-row .wyohs-cal__col-plate {
	grid-column: 1;
	grid-row: 1;
}

.wyohs-cal.wyohs-cal-row .fl-col:not( .wyohs-cal__col-plate ) {
	grid-column: 2;
	grid-row: 1;
}

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

.wyohs-cal .wyohs-cal__col-plate {
	position: relative;
}

.wyohs-cal .wyohs-cal__frame .fl-photo-content {
	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;
}

/* width must be definite. Beaver Builder emits sizes="auto" on a lazy
   image, and with width:auto the browser has to lay the image out to pick
   a source and pick a source to lay it out. Chrome resolves that circle to
   zero and loads nothing at all: the frame renders, the shadow renders, and
   no pixels ever arrive. object-fit does the fitting instead. */
.wyohs-cal .wyohs-cal__frame img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 2px 6px rgba( 26, 26, 26, .18 ), 0 14px 30px rgba( 26, 26, 26, .14 );
}

/* The NEW pill from Our Books, saying the one thing that is true here. */
.wyohs-cal .wyohs-cal__flag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	width: auto !important;
}

.wyohs-cal .wyohs-cal__flag p {
	margin: 0;
	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;
	text-align: left;
}

/* ----------------------------------------------------------------- copy */

/* .fl-builder-content h3 is (0,1,1) and would set this in condensed caps. */
.wyohs-cal .wyohs-cal__title,
.wyohs-cal .wyohs-cal__title .fl-heading,
.wyohs-cal .wyohs-cal__title .fl-heading-text {
	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 );
	text-align: left;
}

.wyohs-cal .wyohs-cal__title .fl-heading {
	margin: 0;
}

.wyohs-cal .wyohs-cal__sub p {
	margin: 0 0 12px;
	font-family: 'Special Elite', serif;
	font-size: 17px;
	line-height: 1.4;
	color: rgba( 26, 26, 26, .78 );
	text-align: left;
}

.wyohs-cal .wyohs-cal__meta p {
	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 );
	text-align: left;
}

.wyohs-cal .wyohs-cal__summary {
	margin-top: 16px;
	max-width: 66ch;
}

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

.wyohs-cal .wyohs-cal__summary p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- button */

.wyohs-cal .wyohs-cal__cta {
	margin-top: 22px !important;
}

.wyohs-cal .wyohs-cal__cta .fl-button-wrap {
	text-align: left;
	margin: 0;
}

.wyohs-cal .wyohs-cal__cta a.fl-button,
.wyohs-cal .wyohs-cal__cta a.fl-button:visited {
	display: inline-flex;
	align-items: baseline;
	padding: 13px 22px 12px !important;
	background: var( --wyohs-navy, #1b3a5c ) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none;
	transition: background .18s ease;
}

.wyohs-cal .wyohs-cal__cta a.fl-button *,
.wyohs-cal .wyohs-cal__cta a.fl-button span.fl-button-text {
	font-family: var( --wyohs-display, 'Special Gothic Condensed One' ), sans-serif !important;
	font-size: 16px !important;
	line-height: 1 !important;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #fff8e7 !important;
}

.wyohs-cal .wyohs-cal__cta a.fl-button:hover {
	background: var( --wyohs-sand, #d2a56c ) !important;
}

.wyohs-cal .wyohs-cal__cta a.fl-button:hover *,
.wyohs-cal .wyohs-cal__cta a.fl-button:hover span.fl-button-text {
	color: var( --wyohs-navy, #1b3a5c ) !important;
}

/* ---------------------------------------------------- the three columns

   Under the same 2px rule that separates one book from the next, at the
   same 44px of clearance. */

.wyohs-cal.wyohs-cal-row--facts .fl-row-content {
	border-top: 2px solid var( --cal-rule );
	padding-top: 44px;
}

.wyohs-cal.wyohs-cal-row--facts .fl-col-group {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --cal-gap );
	align-items: start;
}

.wyohs-cal.wyohs-cal-row--facts .fl-col {
	width: auto !important;
	max-width: none;
	float: none;
}

.wyohs-cal .wyohs-cal__fact-head,
.wyohs-cal .wyohs-cal__fact-head .fl-heading,
.wyohs-cal .wyohs-cal__fact-head .fl-heading-text {
	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;
	font-weight: 400;
	color: var( --wyohs-navy, #1b3a5c );
	text-align: left;
}

.wyohs-cal .wyohs-cal__fact-head .fl-heading {
	margin: 0;
}

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

/* -------------------------------------------------------- closing panel */

.wyohs-cal.wyohs-cal-row--note .fl-row-content {
	padding-top: 44px;
	padding-bottom: 60px;
}

.wyohs-cal .wyohs-cal__note {
	background: var( --wyohs-lime, #e2ecb2 );
	padding: 30px 34px;
}

.wyohs-cal .wyohs-cal__note .wyohs-cal__note-head {
	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 );
	text-align: left;
}

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

.wyohs-cal .wyohs-cal__note p:last-child {
	margin-bottom: 0;
}

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

   The two Our Books breakpoints, to the pixel. */

@media ( max-width: 860px ) {
	.wyohs-cal {
		--cal-plate: 200px;
		--cal-gap: 30px;
	}

	.wyohs-cal .wyohs-cal__title,
	.wyohs-cal .wyohs-cal__title .fl-heading-text {
		font-size: 28px;
	}
}

@media ( max-width: 640px ) {
	.wyohs-cal.wyohs-cal-row .fl-col-group,
	.wyohs-cal.wyohs-cal-row--facts .fl-col-group {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	/* Once the grid is a single column the pinned tracks have to go, and the
	   columns have to be told to fill: left to itself the plate column
	   shrink-wraps to its own content, which is a 16px-padded frame around
	   an image sized as a percentage of it — so it collapses to 32px and the
	   photograph disappears. */
	.wyohs-cal.wyohs-cal-row .wyohs-cal__col-plate,
	.wyohs-cal.wyohs-cal-row .fl-col:not( .wyohs-cal__col-plate ) {
		grid-column: 1;
		grid-row: auto;
	}

	.wyohs-cal.wyohs-cal-row .fl-col,
	.wyohs-cal.wyohs-cal-row--facts .fl-col {
		width: 100% !important;
		justify-self: stretch;
	}

	.wyohs-cal .wyohs-cal__frame,
	.wyohs-cal .wyohs-cal__frame .fl-photo {
		display: block;
		width: 100%;
	}

	.wyohs-cal.wyohs-cal-row .fl-row-content {
		padding-top: 34px;
		padding-bottom: 34px;
	}

	/* Specificity: the base rule zeroes max-width at (0,3,0) and a media
	   query adds none of its own, so this has to match that weight. */
	.wyohs-cal.wyohs-cal-row .wyohs-cal__col-plate {
		max-width: 240px !important;
	}

	.wyohs-cal .wyohs-cal__title,
	.wyohs-cal .wyohs-cal__title .fl-heading-text {
		font-size: 26px;
	}

	.wyohs-cal .wyohs-cal__summary p,
	.wyohs-cal .wyohs-cal__fact p,
	.wyohs-cal .wyohs-cal__note p {
		font-size: 16px;
	}

	.wyohs-cal .wyohs-cal__cta a.fl-button {
		width: 100%;
		justify-content: center;
	}

	.wyohs-cal .wyohs-cal__note {
		padding: 24px 22px;
	}
}


/* -----------------------------------------------------------------------
   Hitting the Our Books numbers exactly

   Two things were still off after the geometry was right, and both come
   from the module wrapper rather than from anything in the copy:

   1. The theme gives every module 20px of bottom margin, which stacked on
      top of the intended rhythm. Our Books spaces its rows with paragraph
      margins, so those are restated here on the module instead.
   2. Beaver Builder's rich text zeroes the bottom margin of a last-child
      paragraph, and every one of these modules holds exactly one
      paragraph — so the p-level margins never applied at all.
   ----------------------------------------------------------------------- */

.wyohs-cal .wyohs-cal__flag {
	margin: 0 !important;
}

.wyohs-cal .wyohs-cal__title {
	margin: 0 0 8px !important;
}

.wyohs-cal .wyohs-cal__sub {
	margin: 0 0 12px !important;
}

.wyohs-cal .wyohs-cal__meta {
	margin: 0 0 8px !important;
}

.wyohs-cal .wyohs-cal__summary {
	margin: 16px 0 0 !important;
}

.wyohs-cal .wyohs-cal__cta {
	margin: 22px 0 0 !important;
}

.wyohs-cal .wyohs-cal__fact-head {
	margin: 0 0 8px !important;
}

.wyohs-cal .wyohs-cal__fact,
.wyohs-cal .wyohs-cal__note {
	margin: 0 !important;
}

/* Our Books sets the button's line-height to 1; Beaver Builder's own is
   18px, which makes the same padding sit two pixels taller. */
.wyohs-cal .wyohs-cal__cta a.fl-button {
	line-height: 1 !important;
}