/**
 * NÜ — the shared section rhythm, surfaces, and the automatic join.
 *
 * One place owns how far apart two sections sit. Every NÜ section element puts
 * `nu-section` and `nu-section--{surface}` on its root (see inc/nu-section.php),
 * and gets its vertical rhythm, its inline gutter and its surface colour from
 * here instead of restating them.
 *
 * The join: two sections in a row painted the same colour used to stack the
 * first one's bottom padding on top of the second one's top padding, so the gap
 * inside a single visual surface came out twice the size of the gap between two
 * different ones. The adjacency rules below drop the second section's top
 * padding, which leaves exactly one section's worth of space between the two
 * blocks of content. It works because every section renders as a direct sibling
 * of the next inside the Bricks content wrapper.
 *
 * Cascade notes, because they decide who wins:
 *
 *   - This sheet is a dependency of every element sheet, so it loads first and
 *     an element's own `.nu-*` rule beats it at equal specificity. An element
 *     that deviates from the rhythm declares only the variable it changes.
 *   - That also means an element-level `--nu-section-*` declaration outranks the
 *     media queries at the bottom of this file. An element that narrows its
 *     gutter on phones has to restate that inside its own breakpoint.
 *   - Bricks writes control CSS as `#brxe-{id} {…}` (1,0,0), which beats
 *     everything here — so a padding value typed in the builder wins over the
 *     automatic join, deliberately.
 *   - Defaults live in the `var(--x, fallback)` call rather than in a
 *     declaration, so nothing shadows a value set further down.
 *
 * @see inc/nu-section.php
 */

.nu-section {
	/* The rhythm. Change these two and every section moves together. */
	--nu-section-space: var(--space-3xl, 11.19rem);
	--nu-section-space-inline: var(--space-xl, 5.6rem);

	background-color: var(--nu-section-bg, transparent);

	/*
	 * --nu-section-join-pt is set only by the join rules below.
	 * --nu-section-pt / --nu-section-pb are for an element that genuinely sits
	 * on a different rhythm (a hero, a nav bar, a section designed to butt up
	 * against the one under it).
	 */
	padding-block:
		var(--nu-section-join-pt, var(--nu-section-pt, var(--nu-section-space)))
		var(--nu-section-pb, var(--nu-section-space));
	padding-inline: var(--nu-section-space-inline);
}

/* ------------------------------------------------------------- Surfaces */

/*
 * The four brand surfaces. The class is also what the join rule matches on, so
 * two sections only close up when they resolve to the same key here — a custom
 * colour set on one of them does not change the match.
 */
.nu-section--white {
	--nu-section-bg: var(--light, #fff);
}

.nu-section--purple {
	--nu-section-bg: var(--bg-surface, rgba(224, 220, 255, 0.3));
}

.nu-section--blue {
	--nu-section-bg: var(--color-4, #d7e3f5);
}

.nu-section--dark {
	--nu-section-bg: var(--color-3, #061745);
}

/*
 * Navy carrying a photograph under a flat overlay. It paints the same base as
 * `--dark` — the photo sits on top of it — but it is a separate key on purpose:
 * a picture and a flat colour do not read as one surface, so these must never
 * join with `--dark`, or with each other (two different photographs).
 *
 * That is why it is absent from the join rules below rather than listed there.
 */
.nu-section--dark-image {
	--nu-section-bg: var(--color-3, #061745);
}

/* ----------------------------------------------------------------- Join */

/*
 * Same surface as the section directly above → drop the top padding, so the two
 * read as one continuous surface with a single section's gap between them.
 *
 * Two opt-outs, both inside the selector rather than fighting it afterwards, so
 * there is no specificity race to lose:
 *
 *   .nu-section--join-never    on the second — this section keeps its padding.
 *   .nu-section--flush-bottom  on the first — that section ends with no bottom
 *                              padding of its own, so there would be no gap
 *                              left at all to inherit. The anchor-nav strip is
 *                              the one that does this.
 */
.nu-section--white:not(.nu-section--flush-bottom) + .nu-section--white:not(.nu-section--join-never),
.nu-section--purple:not(.nu-section--flush-bottom) + .nu-section--purple:not(.nu-section--join-never),
.nu-section--blue:not(.nu-section--flush-bottom) + .nu-section--blue:not(.nu-section--join-never),
.nu-section--dark:not(.nu-section--flush-bottom) + .nu-section--dark:not(.nu-section--join-never) {
	--nu-section-join-pt: 0px;
}

/*
 * Force the join on regardless of what is above — for a section that continues
 * the one before it across a surface change (a caption under a band, a list that
 * belongs to the block above it).
 */
.nu-section--join-always {
	--nu-section-join-pt: 0px;
}

/* --------------------------------------------------------------- Phones */

@media (max-width: 767px) {
	.nu-section {
		--nu-section-space-inline: var(--space-l, 3.96rem);
	}
}

/*
 * Below 478px the fluid --space-3xl has bottomed out at 39px, which is too tight
 * for a section break on a phone. --space-4xl at that width lands on 64px, and
 * the 1.2 lift takes it to ~77px — the value the most recently built sections
 * already used.
 */
@media (max-width: 478px) {
	.nu-section {
		--nu-section-space: calc(var(--space-4xl, 15.83rem) * 1.2);
	}
}