/**
 * Books grid.
 *
 * Two column mirrored layout: the left column reads inward with the cover
 * on the right, the right column is its mirror image. Rows stay aligned.
 *
 * Markup contract (Elementor Loop Item):
 *   .ln-gd-book          Loop Item root container
 *   ├─ .ln-gd-book-cover Image widget, featured image
 *   └─ .ln-gd-book-text  inner container
 *      ├─ .ln-gd-book-title    Heading, post title
 *      └─ .ln-gd-book-excerpt  Text Editor, post excerpt
 *
 * Two Elementor facts drive the selectors below:
 *
 * 1. The grid's first child is a <style> element Elementor injects, so
 *    :nth-child would count it and mirror every row the wrong way.
 *    :nth-of-type(div) counts only real loop items.
 * 2. A boxed container renders an extra .e-con-inner wrapper that is the
 *    actual flex parent. Direction is set on both shapes so the layout
 *    survives whichever content width the container uses.
 *
 * The .elementor-element class in the selectors is not decoration: it
 * lifts specificity above Elementor's own per-element rules.
 */

.ln-gd-books {
	--gd-gold: #c9a227;
	--gd-ink: #faf9f6;
	--gd-rule: rgba( 201, 162, 39, 0.4 );

	--gd-cover: 150px;
	--gd-inner-gap: 1.5rem;
	--gd-title: clamp( 1rem, 1.4vw, 1.2rem );
	--gd-body: 0.9375rem;
}

/* ---------------------------------------------------------------- item */

.ln-gd-books .elementor-grid > div .ln-gd-book.elementor-element,
.ln-gd-books .elementor-grid > div .ln-gd-book.elementor-element > .e-con-inner {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var( --gd-inner-gap );
}

/**
 * content-box so the rule and its padding sit outside the declared cover
 * width. The jacket stays exactly --gd-cover wide whatever the gutter is.
 */
.ln-gd-books .elementor-grid > div .ln-gd-book-cover.elementor-element {
	box-sizing: content-box;
	flex: 0 0 var( --gd-cover );
	width: var( --gd-cover );
}

/**
 * Covers are locked to one ratio. Real book jackets vary, and left to
 * their own proportions the central band of covers reads as ragged
 * rather than as two columns.
 */
.ln-gd-books .elementor-grid > div .ln-gd-book-cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/**
 * The outline sits on the image itself, not on a wrapping anchor, so it
 * survives the link moving to the item container.
 */
.ln-gd-books .elementor-grid > div .ln-gd-book-cover img {
	outline: 1px solid transparent;
	outline-offset: 4px;
	transition: outline-color 0.3s ease;
}

.ln-gd-books .ln-gd-book:hover .ln-gd-book-cover img {
	outline-color: var( --gd-gold );
}

.ln-gd-books .elementor-grid > div .ln-gd-book-text.elementor-element {
	flex: 1 1 auto;
	min-width: 0;
}

/* --------------------------------------------------------- typography */

.ln-gd-books .ln-gd-book-title {
	margin: 0 0 0.6rem;
}

/**
 * Colour and type go on the heading element itself, not the widget
 * wrapper. The wrapper's colour never reaches the h3, because the site
 * kit sets a colour directly on headings and that beats inheritance.
 */
.ln-gd-books .ln-gd-book-title .elementor-heading-title {
	margin: 0;
	font-family: "Libre Baskerville", Georgia, serif;
	font-size: var( --gd-title );
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --gd-gold );
	transition: color 0.3s ease;
}

.ln-gd-books .ln-gd-book-title .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

/**
 * The whole item is the link, so the hover state is driven from the item
 * and lands on the heading whether or not it is wrapped in an anchor.
 */
.ln-gd-books .ln-gd-book:hover .ln-gd-book-title .elementor-heading-title,
.ln-gd-books .ln-gd-book:hover .ln-gd-book-title .elementor-heading-title a {
	color: var( --gd-ink );
}

.ln-gd-books a.ln-gd-book,
.ln-gd-books .ln-gd-book a {
	text-decoration: none;
}

.ln-gd-books .ln-gd-book-excerpt,
.ln-gd-books .ln-gd-book-excerpt p {
	margin: 0;
	font-family: "Nunito Sans", sans-serif;
	font-size: var( --gd-body );
	font-style: italic;
	line-height: 1.6;
	color: var( --gd-ink );
}

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

.ln-gd-books .elementor-grid > div:nth-of-type(odd) .ln-gd-book.elementor-element,
.ln-gd-books .elementor-grid > div:nth-of-type(odd) .ln-gd-book.elementor-element > .e-con-inner {
	flex-direction: row-reverse;
}

/* The rule rides on the cover, on whichever side faces the text. */

.ln-gd-books .elementor-grid > div:nth-of-type(odd) .ln-gd-book-cover.elementor-element {
	padding-left: var( --gd-inner-gap );
	padding-right: 0;
	border-left: 1px solid var( --gd-rule );
	border-right: 0;
}

.ln-gd-books .elementor-grid > div:nth-of-type(even) .ln-gd-book-cover.elementor-element {
	padding-right: var( --gd-inner-gap );
	padding-left: 0;
	border-right: 1px solid var( --gd-rule );
	border-left: 0;
}

.ln-gd-books .elementor-grid > div:nth-of-type(odd) .ln-gd-book-text.elementor-element {
	text-align: right;
}

.ln-gd-books .elementor-grid > div:nth-of-type(even) .ln-gd-book-text.elementor-element {
	text-align: left;
}

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

@media ( max-width: 1024px ) {
	.ln-gd-books {
		--gd-cover: 120px;
	}
}

@media ( max-width: 767px ) {
	.ln-gd-books {
		--gd-cover: 110px;
		--gd-inner-gap: 1rem;
	}

	.ln-gd-books .elementor-grid > div:nth-of-type(odd) .ln-gd-book.elementor-element,
	.ln-gd-books .elementor-grid > div:nth-of-type(odd) .ln-gd-book.elementor-element > .e-con-inner {
		flex-direction: row;
	}

	.ln-gd-books .elementor-grid > div:nth-of-type(odd) .ln-gd-book-cover.elementor-element {
		padding-left: 0;
		padding-right: var( --gd-inner-gap );
		border-left: 0;
		border-right: 1px solid var( --gd-rule );
	}

	.ln-gd-books .elementor-grid > div:nth-of-type(odd) .ln-gd-book-text.elementor-element {
		text-align: left;
	}
}