/**
 * Layout — containers, section rhythm and the editorial grid primitives.
 *
 * @package FlorenStyle
 */

/* -------------------------------------------------------------------------
 * 1. Containers
 * ---------------------------------------------------------------------- */

.fs-container {
	width: 100%;
	max-width: var(--fs-container);
	margin-inline: auto;
	padding-inline: var(--fs-gutter);
}

.fs-container--wide {
	max-width: var(--fs-container-wide);
}

.fs-container--text {
	max-width: calc(var(--fs-container-text) + (var(--fs-gutter) * 2));
}

/* Edge-to-edge, but still gutter-protected on small screens. */
.fs-container--flush {
	max-width: none;
	padding-inline: var(--fs-gutter);
}

/* -------------------------------------------------------------------------
 * 2. Sections
 * ---------------------------------------------------------------------- */

.fs-section {
	position: relative;
	padding-block: var(--fs-section-y);
	background-color: var(--fs-surface);
	color: var(--fs-text);
}

.fs-section--tight {
	padding-block: var(--fs-section-y-tight);
}

.fs-section--flush-top {
	padding-block-start: 0;
}

.fs-section--flush-bottom {
	padding-block-end: 0;
}

.fs-section--alt {
	background-color: var(--fs-surface-alt);
}

/*
 * A full-bleed section. Used for cinematic imagery that must break the
 * container. Sits inside a normal document flow without horizontal scroll.
 */
.fs-section--bleed {
	padding-inline: 0;
}

/* -------------------------------------------------------------------------
 * 3. Section headers
 * ---------------------------------------------------------------------- */

.fs-section-header {
	margin-bottom: clamp(2.5rem, 1.5rem + 3.5vw, 5.5rem);
}

.fs-section-header__title {
	font-size: var(--fs-step-4);
	max-width: 20ch;
}

.fs-text-center .fs-section-header__title,
.fs-section-header--center .fs-section-header__title {
	margin-inline: auto;
}

.fs-section-header--center {
	text-align: center;
}

.fs-section-header--center .fs-eyebrow--ruled {
	justify-content: center;
}

.fs-section-header__intro {
	margin-top: var(--fs-space-m);
	max-width: var(--fs-measure);
	color: var(--fs-text-muted);
}

.fs-section-header--center .fs-section-header__intro {
	margin-inline: auto;
}

/*
 * Split header — title on the left, supporting copy on the right.
 * A recurring editorial device that creates asymmetry without disorder.
 */
.fs-section-header--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fs-space-l);
	align-items: end;
}

@media (min-width: 62rem) {
	.fs-section-header--split {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--fs-grid-gap);
	}

	.fs-section-header--split .fs-section-header__intro {
		margin-top: 0;
		padding-bottom: 0.4em;
	}
}

/* -------------------------------------------------------------------------
 * 4. Grid primitives
 * ---------------------------------------------------------------------- */

.fs-grid {
	display: grid;
	gap: var(--fs-grid-gap);
}

.fs-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.fs-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.fs-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

/*
 * The editorial split: a large image beside a column of copy.
 * .is-reversed flips the visual order while leaving the DOM order intact,
 * so the reading order for assistive technology stays correct.
 */
.fs-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fs-grid-gap);
	align-items: center;
}

@media (min-width: 56rem) {
	.fs-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(2.5rem, 1rem + 6vw, 7rem);
	}

	.fs-split--wide-media {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	.fs-split--wide-text {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}

	.fs-split.is-reversed > .fs-split__media {
		order: 2;
	}

	.fs-split.is-reversed > .fs-split__body {
		order: 1;
	}

	.fs-split--top {
		align-items: start;
	}
}

.fs-split__body > * + * {
	margin-top: var(--fs-space-m);
}

.fs-split__body .fs-eyebrow {
	margin-bottom: var(--fs-space-s);
}

/* Stack utility — vertical rhythm without per-element margins. */
.fs-stack {
	display: flex;
	flex-direction: column;
}

.fs-stack > * + * {
	margin-top: var(--fs-space-m);
}

.fs-stack--l > * + * {
	margin-top: var(--fs-space-l);
}

.fs-stack--xl > * + * {
	margin-top: var(--fs-space-xl);
}

.fs-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-m);
	align-items: center;
}

.fs-cluster--center {
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * 5. Page shell
 * ---------------------------------------------------------------------- */

.fs-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.fs-main {
	flex: 1 0 auto;
}

/*
 * The header is sticky rather than fixed, so it occupies real space in the
 * flow. No compensating padding is needed on any template, and no layout
 * shift occurs when it changes height on scroll.
 */

/* -------------------------------------------------------------------------
 * 6. Decorative rules
 * ---------------------------------------------------------------------- */

.fs-rule {
	border: 0;
	border-top: var(--fs-hairline-width) solid var(--fs-border);
	margin: 0;
}

.fs-rule--short {
	inline-size: clamp(3rem, 6vw, 5rem);
	border-top-width: 2px;
	border-color: var(--fs-accent);
}