/**
 * Layout
 *
 * Containers, section rhythm and the alignment contract every block shares.
 *
 * Blocks are full-bleed by default and opt into a container internally, so an
 * editor can stack a full-width hero directly on top of a boxed text section
 * without any wrapper fighting them.
 *
 * @package Norwegian_Flagstone
 */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
}

.site-content {
	flex: 1 0 auto;
}

/* Containers ---------------------------------------------------------------- */

/* Boxed page inset. */
.nf-container {
	margin-inline: auto;
	max-width: var(--nf-container);
	padding-inline: var(--nf-gutter);
	width: 100%;
}

/* Narrower content column for editorial content. */
.nf-container--content {
	max-width: calc(var(--nf-content) + (var(--nf-gutter) * 2));
}

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

.nf-container--narrow {
	max-width: calc(var(--nf-measure-narrow) + (var(--nf-gutter) * 2));
}

/* Edge-to-edge with no inset — used by media-led blocks. */
.nf-container--full {
	max-width: none;
	padding-inline: 0;
}

/* Sections ------------------------------------------------------------------ */

/*
 * Every block root gets `.nf-block`. The spacing modifiers are what the ACF
 * "Spacing" field writes out, so editors control rhythm without custom CSS.
 */
.nf-block {
	position: relative;
}

.nf-block--space-none {
	padding-block: 0;
}

.nf-block--space-s {
	padding-block: var(--nf-section-space-s);
}

.nf-block--space-m {
	padding-block: var(--nf-section-space-m);
}

.nf-block--space-l {
	padding-block: var(--nf-section-space-l);
}

/* Asymmetric variants, for butting two blocks of the same colour together. */
.nf-block--space-top-none {
	padding-top: 0;
}

.nf-block--space-bottom-none {
	padding-bottom: 0;
}

/* Background helpers ------------------------------------------------------- */

.nf-bg-lys {
	background-color: var(--nf-lys);
}

.nf-bg-dark {
	background-color: var(--nf-mork-sort);
}

.nf-bg-gull {
	background-color: var(--nf-gull);
}

.nf-bg-white {
	background-color: var(--nf-white);
}

.nf-bg-none {
	background-color: transparent;
}

/* Stacks ------------------------------------------------------------------- */

/* Vertical stack with a consistent gap; `--nf-stack-gap` is overridable. */
.nf-stack {
	display: flex;
	flex-direction: column;
	gap: var(--nf-stack-gap, var(--nf-space-m));
}

.nf-stack--center {
	align-items: center;
	text-align: center;
}

/* Horizontal cluster that wraps — button rows, meta lists. */
.nf-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nf-cluster-gap, var(--nf-space-xs));
}

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

.nf-cluster--end {
	justify-content: flex-end;
}

/* Text alignment utilities written by block fields ------------------------- */

.nf-text-left {
	text-align: left;
}

.nf-text-center {
	text-align: center;
}

.nf-text-right {
	text-align: right;
}

/* Centred blocks keep their measure and stay optically centred. */
.nf-text-center .nf-measure {
	margin-inline: auto;
}

.nf-measure {
	max-width: var(--nf-measure);
}

.nf-measure--narrow {
	max-width: var(--nf-measure-narrow);
}

/* Cover / media layering --------------------------------------------------- */

/*
 * Shared primitive for "text on top of an image". Used by the hero and any
 * future media block, so the overlay maths lives in exactly one place.
 */
.nf-cover {
	display: flex;
	flex-direction: column;
	isolation: isolate;
	position: relative;
}

.nf-cover__media {
	inset: 0;
	position: absolute;
	z-index: var(--nf-z-base);
}

/*
 * Image-optimisation plugins (Imagify, ShortPixel, EWWW) rewrite <img> into
 * <picture><source><img></picture> — on the front end only, which is exactly the
 * kind of thing that makes a live page disagree with an editor preview.
 *
 * A percentage height has to resolve through every ancestor: if the <picture>
 * is left at `height: auto`, the img's `height: 100%` has nothing definite to
 * resolve against and falls back to auto, so the image overflows the hero and
 * crops from the top instead of the focal point. Stretching whatever wrapper
 * turns up keeps the chain definite without assuming the markup shape.
 */
.nf-cover__media > * {
	display: block;
	height: 100%;
	width: 100%;
}

.nf-cover__media img,
.nf-cover__media video {
	height: 100%;
	max-width: none;
	object-fit: cover;

	/* Focal point; set per block via --nf-cover-position, centred by default. */
	object-position: var(--nf-cover-position, center center);
	width: 100%;
}

.nf-cover__overlay {
	background-color: var(--nf-mork-sort);
	inset: 0;
	opacity: var(--nf-cover-overlay-opacity, 0.25);
	position: absolute;
	z-index: var(--nf-z-media-overlay);
}

.nf-cover__inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	position: relative;
	width: 100%;
	z-index: var(--nf-z-content);
}