/**
 * Société Jersiaise, content pages
 *
 * The shell shared by every page rendered from fields instead of Elementor:
 * the hero band, the lede, the section rhythm and the image-and-text feature
 * row. Loads after shop.css, which supplies the container and the buttons.
 *
 * Scoped under .sj-shop because that is the design system's scope class,
 * inherited from the shop build. It says nothing about the page.
 *
 * @package sj-child
 */

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

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

.sj-shop .sj-page-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: var(--sj-page-hero-min);
	padding-block: var(--sj-space-8) var(--sj-space-5);
	overflow: hidden;
	background-color: var(--sj-color-navy);
	color: var(--sj-color-ink-inverse);
}

@media (min-width: 48rem) {

	.sj-shop .sj-page-hero {
		min-block-size: var(--sj-page-hero-min-lg);
		padding-block: var(--sj-space-9) var(--sj-space-6);
	}
}

.sj-shop .sj-page-hero__inner {
	position: relative;
	z-index: 1;
}

.sj-shop .sj-page-hero__title {
	margin: 0;
	font-size: var(--sj-text-3xl);
	font-weight: var(--sj-weight-bold);
	line-height: var(--sj-leading-display);
	letter-spacing: var(--sj-tracking-caps);
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--sj-color-ink-inverse);
}

/* Decorative, so it may bleed off the right edge; the hero clips it. */
.sj-shop .sj-page-hero__emblem {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 0;
	inline-size: var(--sj-page-hero-emblem);
	opacity: var(--sj-page-hero-emblem-opacity);
	transform: translate(12%, -50%);
	pointer-events: none;
}

.sj-shop .sj-page-hero__emblem img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 0;
}

/* -------------------------------------------------------------------------
 * Lede and section rhythm
 * ---------------------------------------------------------------------- */

.sj-shop .sj-page-lede {
	padding-block: var(--sj-space-7) var(--sj-space-4);
}

@media (min-width: 48rem) {

	.sj-shop .sj-page-lede {
		padding-block: var(--sj-space-8) var(--sj-space-5);
	}
}

.sj-shop .sj-page-lede__text {
	max-inline-size: var(--sj-measure-lede);
	margin: 0;
	font-size: var(--sj-text-lg);
	font-weight: var(--sj-weight-semibold);
	line-height: var(--sj-leading-normal);
	letter-spacing: var(--sj-tracking-heading);
	color: var(--sj-color-navy);
	text-wrap: pretty;
}

.sj-shop .sj-page-section {
	padding-block: var(--sj-space-6);
}

@media (min-width: 48rem) {

	.sj-shop .sj-page-section {
		padding-block: var(--sj-space-7);
	}
}

.sj-shop .sj-page-section:last-child {
	padding-block-end: var(--sj-space-8);
}

@media (min-width: 48rem) {

	.sj-shop .sj-page-section:last-child {
		padding-block-end: var(--sj-space-9);
	}
}

/* The kit sets h2 uppercase at 44px site wide; this is (0,2,0) and wins. */
.sj-shop .sj-page-title {
	margin: 0;
	font-size: var(--sj-text-xl);
	font-weight: var(--sj-weight-bold);
	line-height: var(--sj-leading-tight);
	letter-spacing: var(--sj-tracking-heading);
	text-transform: none;
	text-wrap: balance;
	color: var(--sj-color-navy);
}

@media (min-width: 48rem) {

	.sj-shop .sj-page-title {
		font-size: var(--sj-text-2xl);
	}
}

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

.sj-shop .sj-feature__inner {
	display: grid;
	gap: var(--sj-space-5);
	align-items: center;
}

@media (min-width: 48rem) {

	.sj-shop .sj-feature__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sj-space-7);
	}

	.sj-shop .sj-feature--flip .sj-feature__media {
		order: 2;
	}
}

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

.sj-shop .sj-feature__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--sj-ratio-feature);
	object-fit: cover;
	border-radius: var(--sj-radius-md);
}

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

.sj-shop .sj-feature__text p {
	margin: 0 0 var(--sj-space-3);
}

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

.sj-shop .sj-feature__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sj-space-3);
	margin: var(--sj-space-2) 0 0;
}