/**
 * Société Jersiaise, shop landing page
 *
 * Loads after shop.css on the shop landing page only. The product card, the
 * grid, the buttons and the price all come from shop.css; this file is the
 * page's own rhythm plus the two components unique to it, the category tile and
 * the Book of the Month feature.
 *
 * The page this replaced felt flat for a structural reason rather than a
 * decorative one: every section sat on the same white ground, with the same
 * small centred heading, at the same vertical rhythm, so nothing led and
 * nothing followed. The fix here is alternating grounds and one section that is
 * deliberately much larger than the others, not more ornament.
 *
 * Scoped under .sj-shop, like the rest. See the note at the top of shop.css.
 *
 * @package sj-child
 */

/* -------------------------------------------------------------------------
 * Bands
 *
 * Four grounds, in a fixed order of weight: hero, plain, tint, dark. Section
 * spacing lives here and nowhere else, so the rhythm cannot be set twice.
 * ---------------------------------------------------------------------- */

.sj-shop--home {
	background-color: var(--sj-color-surface);
}

.sj-shop .sj-home__band {
	padding-block: var(--sj-space-7);
	background-color: var(--sj-color-surface);
}

@media (min-width: 48rem) {

	.sj-shop .sj-home__band {
		padding-block: var(--sj-section-y);
	}
}

.sj-shop .sj-home__band--tint {
	background-color: var(--sj-color-surface-tint);
}

.sj-shop .sj-home__band--feature {
	background-color: var(--sj-color-info-bg);
}

.sj-shop .sj-home__band--dark {
	background-color: var(--sj-color-navy);
	color: var(--sj-color-ink-inverse);
}

.sj-shop .sj-home__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sj-space-6);
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.sj-shop .sj-home__hero {
	padding-block: var(--sj-space-7) var(--sj-space-7);
	border-block-end: var(--sj-border-width) solid var(--sj-color-border);
	background-color: var(--sj-color-surface);
}

@media (min-width: 48rem) {

	.sj-shop .sj-home__hero {
		padding-block: var(--sj-space-8) var(--sj-space-7);
	}
}

.sj-shop .sj-home__hero .sj-home__inner {
	gap: var(--sj-space-4);
	align-items: flex-start;
}

.sj-shop .sj-home__eyebrow {
	margin: 0;
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-bold);
	letter-spacing: var(--sj-tracking-caps);
	text-transform: uppercase;
	color: var(--sj-color-navy);
}

.sj-shop .sj-home__hero-title {
	margin: 0;
	font-size: var(--sj-text-3xl);
	line-height: var(--sj-leading-display);
	letter-spacing: var(--sj-tracking-caps);
	text-wrap: balance;
	color: var(--sj-color-navy);
}

/**
 * The lede is the only place on the page with a measure.
 *
 * Everything else is a grid or a card and sizes itself. A full width paragraph
 * at 1720px is unreadable, so this one is pinned to prose width.
 */
.sj-shop .sj-home__hero-lede {
	max-inline-size: var(--sj-container-narrow);
	margin: 0;
	font-size: var(--sj-text-lg);
	line-height: var(--sj-leading-body);
	color: var(--sj-color-ink-body);
	text-wrap: pretty;
}

.sj-shop .sj-home__hero-actions {
	margin: var(--sj-space-2) 0 0;
}

/**
 * The seal, as a watermark on the right of the hero.
 *
 * Decorative, so it is aria-hidden and carries an empty alt. It is allowed to
 * bleed off the right edge, which is why the hero clips: without overflow
 * hidden it would widen the document and give the whole page a horizontal
 * scrollbar.
 *
 * It goes at narrow widths rather than shrinking. Behind a left aligned
 * heading on a phone it muddies the text it sits under, and a watermark that
 * costs legibility is not worth the bytes.
 */
.sj-shop .sj-home__hero {
	position: relative;
	overflow: hidden;
}

.sj-shop .sj-home__emblem {
	display: none;
}

@media (min-width: 56rem) {

	.sj-shop .sj-home__emblem {
		position: absolute;
		display: block;
		inset-block-start: 50%;
		inset-inline-end: calc( var(--sj-gutter) * -1 );
		inline-size: var(--sj-emblem-size);
		max-inline-size: 52%;
		opacity: var(--sj-emblem-opacity);
		transform: translateY(-50%);
		pointer-events: none;
	}

	.sj-shop .sj-home__emblem img {
		inline-size: 100%;
		block-size: auto;
		display: block;
	}

	/* The hero copy stays above the watermark and keeps its measure. */
	.sj-shop .sj-home__hero .sj-home__inner {
		position: relative;
		z-index: 1;
	}

	.sj-shop .sj-home__hero-lede {
		max-inline-size: min( var(--sj-container-narrow), 60% );
	}
}

/* -------------------------------------------------------------------------
 * Section heads
 * ---------------------------------------------------------------------- */

.sj-shop .sj-home__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sj-space-3) var(--sj-space-6);
}

.sj-shop .sj-home__title {
	margin: 0;
	font-size: var(--sj-text-2xl);
	line-height: var(--sj-leading-tight);
	letter-spacing: var(--sj-tracking-heading);
	text-transform: none;
	text-wrap: balance;
	color: var(--sj-color-navy);
}

.sj-shop .sj-home__title--inverse {
	color: var(--sj-color-ink-inverse);
}

.sj-shop .sj-home__intro {
	margin: var(--sj-space-1) 0 0;
	font-size: var(--sj-text-sm);
	color: var(--sj-color-ink-body);
}

.sj-shop .sj-home__more {
	font-size: var(--sj-text-sm);
	font-weight: var(--sj-weight-semibold);
	white-space: nowrap;
	text-decoration: none;
	color: var(--sj-color-navy);
}

.sj-shop .sj-home__more:hover,
.sj-shop .sj-home__more:focus-visible {
	text-decoration: underline;
	text-underline-offset: var(--sj-border-width-thick);
}

/* -------------------------------------------------------------------------
 * Category tiles
 * ---------------------------------------------------------------------- */

/**
 * Fixed column counts, not auto-fit.
 *
 * auto-fit packs in as many columns as will fit, which with six tiles gave five
 * across and one stranded on its own row at 1440, and four then two at 1280. A
 * fixed three divides six evenly at every width that can hold it.
 */
.sj-shop .sj-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sj-space-4);
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (max-width: 29.99rem) {

	.sj-shop .sj-cat-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 56rem) {

	.sj-shop .sj-cat-grid {
		gap: var(--sj-space-5);
	}

	.sj-shop .sj-cat-grid--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sj-shop .sj-cat-grid--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sj-shop .sj-cat-grid__item {
	margin: 0;
}

.sj-shop .sj-cat-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	block-size: 100%;
	overflow: hidden;
	border: var(--sj-border-width) solid var(--sj-color-border);
	border-radius: var(--sj-radius-lg);
	background-color: var(--sj-color-surface);
	text-decoration: none;
	transition: border-color var(--sj-duration-fast) var(--sj-ease);
}

.sj-shop .sj-cat-tile:hover,
.sj-shop .sj-cat-tile:focus-visible {
	border-color: var(--sj-color-navy);
	text-decoration: none;
}

.sj-shop .sj-cat-tile__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--sj-color-surface-tint-strong);
}

.sj-shop .sj-cat-tile__media img {
	inline-size: 100%;
	block-size: 100%;
	/**
	 * Square, deliberately.
	 *
	 * The Elementor kit sets `border-radius: 6px` on every img site wide via
	 * `.elementor-kit-8 img`, which rounded the picture inside a tile that is
	 * already rounding and clipping its own corners, so the two curves fought
	 * each other. That selector is (0,1,1) and this one is (0,2,1), so it wins
	 * on specificity and needs no !important.
	 */
	border-radius: 0;
	object-fit: cover;
	display: block;
}

/**
 * Category imagery is cropped, unlike product imagery.
 *
 * Product covers are set to contain everywhere else in the shop, because a book
 * cover with its top sliced off looks broken. A category tile is a photograph
 * doing a decorative job, so cover is right here and contain would letterbox it.
 */

.sj-shop .sj-cat-tile__body {
	display: flex;
	flex-direction: column;
	gap: var(--sj-space-1);
	padding: var(--sj-space-4);
}

.sj-shop .sj-cat-tile__name {
	font-size: var(--sj-text-md);
	font-weight: var(--sj-weight-bold);
	line-height: var(--sj-leading-snug);
	color: var(--sj-color-navy);
}

.sj-shop .sj-cat-tile__count {
	font-size: var(--sj-text-2xs);
	letter-spacing: var(--sj-tracking-none);
	color: var(--sj-color-ink-muted);
}

/* -------------------------------------------------------------------------
 * Book of the Month
 * ---------------------------------------------------------------------- */

.sj-shop .sj-botm {
	display: grid;
	gap: var(--sj-space-6);
	align-items: stretch;
}

/**
 * The cover column is fixed and the text column takes the rest.
 *
 * A 1fr 1fr split makes the cover enormous on a wide screen, because a book
 * cover has nothing to fill the width with. Pinning the cover column and
 * letting the prose flex keeps the balance at every size.
 */
@media (min-width: 56rem) {

	.sj-shop .sj-botm {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		gap: var(--sj-space-8);
	}
}

.sj-shop .sj-botm__cover {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sj-space-5);
	border-radius: var(--sj-radius-lg);
	background-color: var(--sj-color-surface);
}

.sj-shop .sj-botm__cover img {
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
	inline-size: 100%;
	max-block-size: var(--sj-cover-height-feature);
	object-fit: contain;
	display: block;
}

.sj-shop .sj-botm__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sj-space-3);
}

.sj-shop .sj-botm__title {
	margin: 0;
	font-size: var(--sj-text-2xl);
	line-height: var(--sj-leading-tight);
	letter-spacing: var(--sj-tracking-heading);
	text-transform: none;
	text-wrap: pretty;
}

.sj-shop .sj-botm__title a {
	color: var(--sj-color-navy);
	text-decoration: none;
}

.sj-shop .sj-botm__title a:hover,
.sj-shop .sj-botm__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: var(--sj-border-width-thick);
}

.sj-shop .sj-botm__meta {
	margin: 0;
	font-size: var(--sj-text-sm);
	color: var(--sj-color-ink-body);
}

.sj-shop .sj-botm__excerpt {
	max-inline-size: var(--sj-container-narrow);
	color: var(--sj-color-ink-body);
}

.sj-shop .sj-botm__excerpt p {
	margin: 0 0 var(--sj-space-2);
}

.sj-shop .sj-botm__excerpt p:last-child {
	margin-block-end: 0;
}

.sj-shop .sj-botm__price {
	margin: 0;
	font-size: var(--sj-text-xl);
	font-weight: var(--sj-weight-bold);
	color: var(--sj-color-navy);
}

.sj-shop .sj-botm__form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--sj-space-3);
	margin-block-start: var(--sj-space-1);
}

.sj-shop .sj-botm__soldout {
	margin: 0;
	font-size: var(--sj-text-sm);
	font-weight: var(--sj-weight-semibold);
	color: var(--sj-color-ink-muted);
}

.sj-shop .sj-botm__more a {
	font-size: var(--sj-text-sm);
	font-weight: var(--sj-weight-semibold);
	color: var(--sj-color-navy);
	text-decoration: none;
}

.sj-shop .sj-botm__more a:hover,
.sj-shop .sj-botm__more a:focus-visible {
	text-decoration: underline;
	text-underline-offset: var(--sj-border-width-thick);
}

.sj-shop .sj-botm__more {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Product rows
 * ---------------------------------------------------------------------- */

/**
 * Four across at most, whatever the container can hold.
 *
 * The archive grid sizes itself to fit as many cards as possible, which is
 * right there and wrong here: a landing page row of seven small cards reads as
 * a dump rather than a selection.
 */
.sj-shop .sj-home__grid {
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

@media (min-width: 64rem) {

	.sj-shop .sj-home__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Closing band
 * ---------------------------------------------------------------------- */

.sj-shop .sj-home__about {
	display: grid;
	gap: var(--sj-space-6);
}

@media (min-width: 56rem) {

	.sj-shop .sj-home__about {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--sj-space-8);
		align-items: start;
	}
}

.sj-shop .sj-home__about-text p {
	margin: 0 0 var(--sj-space-3);
	color: var(--sj-color-ink-inverse);
	opacity: 0.88;
	text-wrap: pretty;
}

.sj-shop .sj-home__about-text p:last-child {
	margin-block-end: 0;
}

.sj-shop .sj-home__promises {
	display: grid;
	gap: var(--sj-space-5);
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 40rem) {

	.sj-shop .sj-home__promises {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}

.sj-shop .sj-home__promise {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sj-space-2);
	margin: 0;
	padding-block-start: var(--sj-space-4);
	border-block-start: var(--sj-border-width-thick) solid var(--sj-color-sage);
}

/**
 * Sage on navy, matching the rule above each column.
 *
 * The icons are drawn with currentColor at a single stroke weight so they read
 * as one set rather than three borrowed glyphs, and they sit above the heading
 * where the eye lands first.
 */
.sj-shop .sj-home__promise-icon {
	display: block;
	inline-size: var(--sj-space-6);
	block-size: var(--sj-space-6);
	color: var(--sj-color-sage);
}

.sj-shop .sj-home__promise-title {
	margin: 0;
	font-size: var(--sj-text-sm);
	font-weight: var(--sj-weight-bold);
	line-height: var(--sj-leading-snug);
	text-transform: none;
	color: var(--sj-color-ink-inverse);
}

.sj-shop .sj-home__promise p {
	margin: 0;
	font-size: var(--sj-text-2xs);
	line-height: var(--sj-leading-body);
	color: var(--sj-color-ink-inverse);
	opacity: 0.82;
}