/* =================================================================================================
   THE LFD PAGE SHELL

   WHAT IT IS FOR

   Manon centres page content in a boxed container with its own padding, and every LFD surface
   that wanted to run full width - the homepage hero, a gallery band, a news grid - had to fight
   it with negative margins and 100vw tricks. 100vw is the width of the viewport INCLUDING the
   scrollbar, so every one of those tricks adds a horizontal scrollbar on a desktop browser that
   shows one. This project has shipped that bug twice.

   .lfd-page is the shell those surfaces sit in instead: full width, no negative margins, no
   100vw anywhere. .lfd-page__inner is the measure - the column body copy is set in.

   THE GUTTERS ARE A DECISION, NOT A DEFAULT

       42px   desktop
       28px   1180 and below
       16px   767 and below

   Three numbers, declared once as custom properties, used by every LFD surface. A surface that
   wants a different gutter overrides the property on itself rather than inventing a padding.

   IT IS OPT-IN AND IT IS SCOPED

   Nothing here targets a bare element, Manon's classes, or the WordPress content. A page that
   does not carry .lfd-page is untouched by this file existing, which is what lets it ship
   alongside the legacy Manon pages this site still serves.
   ================================================================================================= */

:root {
	/* The shell's one responsive value, resolved from the tokens rather than from three numbers
	   written here. A surface that wants a different gutter overrides THIS on itself. */
	--lfd-gutter: var(--lfd-space-page-gutter, 2.625rem);
	--lfd-measure: var(--lfd-width-wide, 97.5rem);
}

@media (max-width: 1180px) {

	:root {
		--lfd-gutter: var(--lfd-space-page-gutter-md, 1.75rem);
	}
}

@media (max-width: 767px) {

	:root {
		--lfd-gutter: var(--lfd-space-page-gutter-sm, 1rem);
	}
}

/* THE SECTION STACKING CONTRACT.

   Sections used to reach for z-index: 99999 whenever a decorative watermark from the section
   above leaked over the one below. That is not a layering decision - it is one element
   outbidding another, and the next element to need the top has nowhere to go.

   Every .lfd-section declares `isolation: isolate`, so the values below are LOCAL to a section
   and a watermark physically cannot paint outside its own. They are the design system's own
   z-index tokens - --lfd-z-under, --lfd-z-base, --lfd-z-raised - and not a second scale
   invented alongside the one tokens.css already has. */

/* --- the shell --------------------------------------------------------------------------- */

.lfd-page {
	/* width:100% and not 100vw. 100vw includes the scrollbar, so on any desktop browser that
	   reserves space for one this rule would be about 15px wider than the page and produce a
	   horizontal scrollbar on every LFD surface at once. */
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;

	/* Manon's boxed content is what this shell is escaping. Both are needed: the padding is what
	   insets the column, the max-width is what stops it running full width. */
	box-sizing: border-box;
	overflow-x: clip;
}

/* Manon wraps page content in .edgtf-content-inner and gives it a max-width and padding. A page
   carrying .lfd-page releases BOTH, and only on that page. */
body .lfd-page,
body .lfd-page > .lfd-section {
	max-width: none;
}

.lfd-page__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lfd-measure, 97.5rem);
	margin-inline: auto;
	padding-inline: var(--lfd-gutter, 2.625rem);
}

/* A surface that wants to sit edge to edge inside the shell - a full-bleed image, a hero - asks
   for it by name rather than by cancelling the inner's padding from outside. */
.lfd-page__bleed {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* --- sections ----------------------------------------------------------------------------- */

.lfd-section {
	position: relative;
	/* The contract. Everything painted inside this section stays inside it. */
	isolation: isolate;
	width: 100%;
	box-sizing: border-box;
}

.lfd-section__content {
	position: relative;
	z-index: var(--lfd-z-base, 0);
}

/* A decorative watermark, rule, or oversized numeral. Behind the content, inside the section,
   and clipped to it - which is the part that was missing when one leaked over the next band. */
.lfd-section__watermark {
	position: absolute;
	inset: 0;
	z-index: var(--lfd-z-under, -1);
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

.lfd-section__overlay {
	position: relative;
	z-index: var(--lfd-z-raised, 1);
}

/* --- the legacy pages this must not touch ------------------------------------------------- */

/* Deliberately empty of selectors: this comment is the rule. Nothing in this file may target
   .edgtf-*, a bare element, or .entry-content. If a legacy Manon page changes when this
   stylesheet loads, something here is wrong, and tests/e2e asserts exactly that. */