/* ===========================================================================
   Content layout — added 10 November 2026
   ---------------------------------------------------------------------------
   Layout for pages written in the WordPress editor rather than in ACF fields.

   Every rule is scoped under .lss-prose, so nothing here can reach the rest of
   the site. The vocabulary deliberately mirrors what the theme already does:
   the same yellow (#FCC115), the same 0.625rem radius, the same gradient over
   image bands as .move-wrap, and the same card shape as .tab-box. Type is
   inherited — ClashGrotesk headings, Plus Jakarta Sans body — so nothing here
   sets a font family.

   The classes are meant to be written in the editor, in Text mode:

     .lss-split          image beside text   (.lss-split--flip to swap sides)
     .lss-cards          grid of cards       (.lss-card for each child)
     .lss-band           dark image band with white text over it
     .lss-steps          numbered steps      (.lss-step for each child)
     .lss-callout        highlighted aside
     .lss-figure         a full-width rounded image

   =========================================================================== */

.lss-prose {
	color: #333;
}

/* ---- rhythm --------------------------------------------------------------
   Headings carry their own space so the editor does not need empty paragraphs
   to separate sections. */
.lss-prose > h2 {
	margin-top: 3.25rem;
	margin-bottom: 1rem;
	position: relative;
	padding-top: 1.75rem;
}

.lss-prose > h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3.25rem;
	height: 0.25rem;
	border-radius: 0.125rem;
	background: #FCC115;
}

.lss-prose > h2:first-child {
	margin-top: 0;
}

.lss-prose > h3 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.lss-prose > p {
	margin-bottom: 1.125rem;
	line-height: 1.75;
}

.lss-prose > p:last-child {
	margin-bottom: 0;
}

/* Lists outside a card: a tick rather than a bullet, matching the brand accent. */
.lss-prose > ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 1.5rem;
}

.lss-prose > ul > li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.875rem;
	line-height: 1.7;
}

.lss-prose > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	width: 0.75rem;
	height: 0.4rem;
	border-left: 2px solid #FCC115;
	border-bottom: 2px solid #FCC115;
	transform: rotate(-45deg);
}

/* ---- image beside text --------------------------------------------------- */
.lss-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: center;
	margin: 2.5rem 0;
}

.lss-split > figure,
.lss-split > .lss-split-media {
	margin: 0;
	overflow: hidden;
	border-radius: 0.625rem;
}

/* A fixed ratio rather than a height: several images in this library are EXIF-rotated or have
   stale dimensions recorded in WordPress, so the box must not depend on the source file. */
.lss-split img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.625rem;
}

.lss-split--flip > :first-child {
	order: 2;
}

.lss-split h3 {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.lss-split p:last-child {
	margin-bottom: 0;
}

/* ---- card grid ----------------------------------------------------------- */
.lss-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem;
	margin: 2rem 0;
}

.lss-card {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 0.625rem;
	padding: 1.75rem;
	transition: box-shadow .25s ease, transform .25s ease;
}

.lss-card:hover {
	box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

.lss-card h3 {
	margin-top: 0;
	margin-bottom: 0.625rem;
	font-size: 1.25rem;
}

.lss-card p:last-child {
	margin-bottom: 0;
}

.lss-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0.5rem;
	margin-bottom: 1.125rem;
}

/* Four cards wrap to 3 + 1 on a 1004px column, which leaves an orphan. Use this for any
   even-numbered group that should sit two by two. */
.lss-cards--two {
	grid-template-columns: repeat(2, 1fr);
}

/* ---- dark image band ------------------------------------------------------
   Follows .move-wrap: cover image, left-to-right dark gradient, white text. The dark end is held
   to 72% before it falls away, because the text column is 42rem of a ~63rem band and several of
   these photographs have a bright yellow facade in them; at .move-wrap's own .35 right stop, body
   text over that yellow measures about 3:1, under the 4.5:1 it needs. */
.lss-band {
	position: relative;
	border-radius: 0.625rem;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 3.5rem;
	margin: 2.75rem 0;
	color: #fff;
}

.lss-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(16, 16, 16, .9) 0%, rgba(16, 16, 16, .82) 72%, rgba(0, 0, 0, .35) 100%);
}

.lss-band > * {
	position: relative;
	max-width: 42rem;
}

.lss-band h2,
.lss-band h3 {
	color: #fff;
	margin-top: 0;
	padding-top: 0;
}

/* default.css carries `body, img, ul, ol, li, span, p { color: var(--grey-color) }` — a direct
   element rule, so it beats the white these elements inherit from .lss-band. Text inside the band
   has to set its own colour or it renders dark grey on a dark photograph. */
.lss-band p,
.lss-band li,
.lss-band span,
.lss-band strong {
	color: #fff;
}

.lss-band h2::before {
	display: none;
}

.lss-band p:last-child {
	margin-bottom: 0;
}

.lss-band a {
	color: #FCC115;
}

/* ---- numbered steps ------------------------------------------------------- */
.lss-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.25rem;
	margin: 2rem 0;
	counter-reset: lss-step;
}

.lss-step {
	position: relative;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 0.625rem;
	padding: 2.75rem 1.5rem 1.5rem;
	counter-increment: lss-step;
}

.lss-step::before {
	content: counter(lss-step, decimal-leading-zero);
	position: absolute;
	top: 1.25rem;
	left: 1.5rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: #FCC115;
	letter-spacing: .08em;
}

.lss-step h3 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.lss-step p:last-child {
	margin-bottom: 0;
}

/* ---- callout --------------------------------------------------------------- */
.lss-callout {
	background: #fbf7ec;
	border-left: 0.25rem solid #FCC115;
	border-radius: 0.375rem;
	padding: 1.5rem 1.75rem;
	margin: 2rem 0;
}

.lss-callout h3 {
	margin-top: 0;
	font-size: 1.125rem;
}

.lss-callout p:last-child {
	margin-bottom: 0;
}

/* ---- plain figure ----------------------------------------------------------- */
.lss-figure {
	margin: 2.5rem 0;
}

.lss-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0.625rem;
}

.lss-figure figcaption {
	margin-top: 0.75rem;
	font-size: 0.9rem;
	color: #6b6b6b;
}

/* ---- responsive --------------------------------------------------------------
   Breakpoints follow the theme's own (991px / 767px). */
@media only screen and (max-width: 991px) {
	.lss-split {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.lss-split--flip > :first-child {
		order: 0;
	}
	.lss-split img {
		aspect-ratio: 16 / 10;
	}
	.lss-band {
		padding: 2.5rem;
	}
	.lss-prose > h2 {
		margin-top: 2.5rem;
	}
}

@media only screen and (max-width: 767px) {
	.lss-band {
		padding: 1.75rem;
	}
	.lss-band::before {
		background: linear-gradient(180deg, rgba(16, 16, 16, .88) 0%, rgba(16, 16, 16, .78) 100%);
	}
	.lss-cards--two {
		grid-template-columns: 1fr;
	}
	.lss-card,
	.lss-step {
		padding: 1.25rem;
	}
	.lss-step {
		padding-top: 2.5rem;
	}
	.lss-callout {
		padding: 1.25rem;
	}
}