/*
 * Sections and the colour flow between them.
 *
 * The page is a dark room and colour arrives as daylight. One backdrop sits
 * behind all of <main> (drawn by motion.js into .pm-flow__light): a single
 * gradient carrying each section's tone, blended across every boundary, and
 * blooms of the day's light where the page turns from black to blue. The
 * sections themselves are transparent over it, so colour flows down the
 * page regardless of where one section ends. Window light and the pointer
 * shine belong to their section but aren't cut off at its edges.
 * Everything here is background; nothing transforms or filters text.
 */

/* ---------- Page flow ---------- */

/* The flow the backdrop is painted behind: <main> on the site, and in the
   editor the block list, once motion.js or editor-backdrop.js has added the
   backdrop layer. */
.pm-flow,
.is-root-container:has(> .pm-flow__light) {
	position: relative;
	isolation: isolate;
}

.pm-flow__light {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: clip; /* Not hidden: the sky below must stick to the viewport. */
	pointer-events: none;
}

/* The sky: pinned to the screen while the page scrolls past. Its two
   layers carry the day's colours either side of the scroll position
   (--sky "r g b" and --sky-a, set by motion.js) and cross-fade between
   them, warming from a cool blue to an orange dusk. The footer continues
   the dusk glow (footer.css), so keep the two in step. */
.pm-flow__sky {
	position: sticky;
	top: 0;
	display: block;
	height: 100vh;
	pointer-events: none;
}

.pm-flow__sky > span {
	--sky: 6 79 114;
	--sky-a: 0.9;
	position: absolute;
	inset: 0;
	will-change: opacity;
	background:
		radial-gradient(110vmax 62vh at 50% 112%, rgb(var(--sky) / calc(var(--sky-a) * 0.5)), rgb(var(--sky) / calc(var(--sky-a) * 0.15)) 45%, transparent 72%),
		radial-gradient(60vmax 40vmax at 88% -8%, rgb(var(--sky) / calc(var(--sky-a) * 0.2)), transparent 70%);
}

/* The tones of every section, as one gradient down the page. */
.pm-flow__tone {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* A bloom of light on a section boundary, centred on its point; the box is
   just big enough for its largest gradient (1200 by 640 radii). */
.pm-flow__bloom {
	position: absolute;
	width: 2400px;
	height: 1280px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Post content lays sections edge to edge. */
.pm-flow > .wp-block-post-content,
.pm-flow > .entry-content {
	margin-block: 0;
}

.pm-flow .wp-block-post-content > .alignfull {
	margin-block: 0;
}

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

.pm-section {
	position: relative;
	padding-block: var(--space-section);
	color: var(--text-body);
}

.pm-section > :not(.pm-layers) {
	position: relative;
	z-index: 1;
}

.pm-section.pm-tight {
	padding-block: var(--space-12);
}

.pm-section.pm-flush-top {
	padding-top: 0;
}

.pm-section.pm-flush-bottom {
	padding-bottom: 0;
}

/* Tones. Outside the flow (the editor) they are solid grounds (theme.json
   section styles). In the flow the backdrop paints them; until it has (or
   without JavaScript) each blue section paints a wash that fades in and out
   inside its own padding. */
.is-style-section-tint {
	color: var(--text-on-tint);
}

.is-style-section-brand {
	color: var(--white);
}

.pm-flow .pm-section:not(.is-style-section-tint, .is-style-section-brand) {
	background: transparent;
}

.pm-flow .pm-section.is-style-section-tint {
	background: linear-gradient(to bottom, var(--flow-top, transparent) 0, rgba(4, 54, 84, 0.62) var(--pm-fade), rgba(4, 54, 84, 0.62) calc(100% - var(--pm-fade)), var(--flow-bottom, transparent) 100%);
}

.pm-flow .pm-section.is-style-section-brand {
	background: linear-gradient(to bottom, var(--flow-top, transparent) 0, rgba(6, 79, 114, 0.7) var(--pm-fade), rgba(6, 79, 114, 0.7) calc(100% - var(--pm-fade)), var(--flow-bottom, transparent) 100%);
}

:is(.pm-flow, .is-root-container):has(> .pm-flow__light) .pm-section,
:is(.pm-flow, .is-root-container):has(> .pm-flow__light) .pm-section.is-style-section-tint,
:is(.pm-flow, .is-root-container):has(> .pm-flow__light) .pm-section.is-style-section-brand {
	background: transparent;
}

.is-style-section-tint a:not(.wp-element-button, .wp-block-button__link, .pm-card),
.is-style-section-brand a:not(.wp-element-button, .wp-block-button__link, .pm-card) {
	color: var(--sky-200);
}

.is-style-section-tint a:not(.wp-element-button, .wp-block-button__link, .pm-card):hover,
.is-style-section-brand a:not(.wp-element-button, .wp-block-button__link, .pm-card):hover {
	color: var(--white);
}

/* ---------- Light layers ---------- */

/* A section's own light. Clipped at the sides (it never widens the page)
   but not at the top and bottom: each light fades out on its own, so it can
   spill across into the next section. */
.pm-layers {
	position: absolute;
	inset: 0;
	overflow-x: clip;
	overflow-y: visible;
	pointer-events: none;
}

/* A soft bloom of daylight: the light source behind a window. Inside the
   flow the boundary blooms take its place. */
.pm-glow {
	position: absolute;
	inset: 0;
	--glow: rgba(6, 79, 114, 0.6);
}

:where(.is-style-section-tint, .is-style-section-brand) .pm-glow {
	--glow: rgba(84, 189, 237, 0.22);
}

.pm-glow--glow-left {
	background: radial-gradient(70vmax 70vmax at 8% 18%, var(--glow), transparent 62%);
}

.pm-glow--glow-right {
	background: radial-gradient(70vmax 70vmax at 92% 82%, var(--glow), transparent 62%);
}

.pm-glow--window-left {
	background: radial-gradient(46vmax 46vmax at 4% 0%, var(--glow), transparent 62%);
}

.pm-glow--window-right {
	background: radial-gradient(46vmax 46vmax at 96% 0%, var(--glow), transparent 62%);
}

.pm-flow .pm-glow {
	display: none;
}

/* Daylight cast through a window: a skewed patch of panes, the glazing bars
   reading as the window's shadow. motion.js drifts it with the scroll. */
.pm-window {
	--pane: var(--sky-400);
	--skew: -16deg;
	position: absolute;
	top: -8%;
	height: 116%;
	width: 52%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: clamp(8px, 1vw, 16px);
	opacity: 0.18;
	transform: skewX(var(--skew));
	transform-origin: top;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 45%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 45%, transparent 100%);
	filter: blur(1.5px);
}

/* Promoted only near the viewport, where motion.js moves it. */
.pm-window.is-near {
	will-change: transform;
}

.pm-window--right {
	right: -4%;
}

.pm-window--left {
	left: -4%;
	--skew: 16deg;
}

.pm-window > span {
	display: block;
	background: linear-gradient(to bottom, var(--pane), transparent);
}

/* Light falls off away from the window: the lower row is fainter. */
.pm-window > span:nth-child(n + 4) {
	opacity: 0.615;
}

:where(.is-style-section-tint, .is-style-section-brand) .pm-window {
	--pane: var(--sky-200);
	opacity: 0.14;
}

/* A shine that follows the pointer (or sweeps with the scroll on touch). */
.pm-shine {
	position: absolute;
	inset: 0;
	opacity: var(--shine-o, 0);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pm-fade), #000 calc(100% - var(--pm-fade)), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pm-fade), #000 calc(100% - var(--pm-fade)), transparent 100%);
	background: radial-gradient(38vmax 38vmax at var(--shine-x, 50%) var(--shine-y, 50%), rgba(84, 189, 237, 0.2), rgba(6, 79, 114, 0.32) 34%, transparent 70%);
}

:where(.is-style-section-tint, .is-style-section-brand) .pm-shine {
	background: radial-gradient(34vmax 34vmax at var(--shine-x, 50%) var(--shine-y, 50%), rgba(189, 238, 255, 0.16), rgba(84, 189, 237, 0.07) 40%, transparent 70%);
}

.pm-tight .pm-shine {
	display: none;
}

/* Touch screens: no pointer to follow, so no shine; and no sky pinned to
   the screen (composited beneath the content, it made the browser give much
   of the page above it layers of its own). The window light stays, still
   (motion.js moves it only where there's a mouse). */
@media (hover: none), (pointer: coarse) {

	.pm-shine,
	.pm-flow__sky {
		display: none;
	}

	.pm-window.is-near {
		will-change: auto;
	}
}

/* ---------- Section heading ---------- */

.pm-heading > .wp-block-heading {
	max-width: 22em;
	margin-bottom: 0;
}

.pm-heading > .wp-block-heading + p,
.pm-heading > p {
	max-width: 38em;
	margin-top: var(--space-5);
	font-size: var(--fs-lead);
	line-height: 1.5;
}

.pm-heading.has-text-align-center > *,
.pm-heading.aligncenter > * {
	margin-inline: auto;
	text-align: center;
}

/* ---------- Two-column intro (heading one side, prose the other) ---------- */

.pm-cols.wp-block-columns {
	align-items: flex-start;
}

.pm-prose > p,
.pm-cols .wp-block-column > p,
.pm-cols .wp-block-column > .wp-block-list {
	max-width: 38em;
}

.pm-prose > * + *,
.pm-cols .wp-block-column > * + * {
	margin-block-start: var(--space-6);
}

.pm-prose > h2,
.pm-prose > h3,
.pm-cols .wp-block-column > h3 {
	margin-top: var(--space-10);
	margin-bottom: 0;
}

.pm-prose > h2 + *,
.pm-prose > h3 + *,
.pm-cols .wp-block-column > h3 + * {
	margin-block-start: var(--space-4);
}

/* ---------- Split feature: photograph beside copy ---------- */

.wp-block-columns.is-style-split {
	gap: clamp(32px, 5vw, 96px);
	align-items: center !important; /* Core sets normal !important. */
}

.is-style-split .wp-block-image,
.is-style-split .wp-block-image img {
	width: 100%;
}

.is-style-split .wp-block-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 781px) {

	/* Stacked, the copy follows the photograph whichever side it sat. */
	.wp-block-columns.is-style-split.pm-reverse {
		flex-direction: column-reverse;
	}
}

/* ---------- Notice strip ---------- */

/* The site-wide bar under the header (parts/notice.html) and any page's own
   strip under its hero. With no text (the setting emptied) it isn't shown. */
.is-style-notice {
	background: var(--surface-tint);
	padding-block: var(--space-4);
}

.is-style-notice:not(:has(> p:not(:empty))) {
	display: none;
}

.is-style-notice p {
	margin: 0 auto;
	text-align: center;
	text-wrap: balance;
	font-size: var(--fs-caption);
	line-height: 1.6;
	color: var(--text-on-tint);
}

/* ---------- Grids ---------- */

.pm-grid.is-layout-grid {
	gap: clamp(20px, 3vw, 40px);
}

/* Card grids choose their columns from how many cards they hold
   (Render::grid_columns, and editor.js in the editor): full rows where the
   width allows, no card left alone on a row if that can be helped, cards
   200 to 480px wide. The columns for each width arrive as --pm-c0 to
   --pm-c1360 and are picked here by the width the grid's parent gives it.
   Without container queries the core layout (as many as fit) stays. */
@supports (container-type: inline-size) {

	:where(.wp-block-group, .wp-block-column, .wp-block-post-content):has(> .pm-grid--balanced) {
		container-type: inline-size;
	}

	.pm-grid--balanced.is-layout-grid {
		grid-template-columns: repeat(var(--pm-cols, var(--pm-c0, 1)), minmax(0, 480px));
	}

	@container (min-width: 400px) {

		.pm-grid--balanced.is-layout-grid {
			--pm-cols: var(--pm-c400);
		}
	}

	@container (min-width: 520px) {

		.pm-grid--balanced.is-layout-grid {
			--pm-cols: var(--pm-c520);
		}
	}

	@container (min-width: 640px) {

		.pm-grid--balanced.is-layout-grid {
			--pm-cols: var(--pm-c640);
		}
	}

	@container (min-width: 760px) {

		.pm-grid--balanced.is-layout-grid {
			--pm-cols: var(--pm-c760);
		}
	}

	@container (min-width: 880px) {

		.pm-grid--balanced.is-layout-grid {
			--pm-cols: var(--pm-c880);
		}
	}

	@container (min-width: 1000px) {

		.pm-grid--balanced.is-layout-grid {
			--pm-cols: var(--pm-c1000);
		}
	}

	@container (min-width: 1120px) {

		.pm-grid--balanced.is-layout-grid {
			--pm-cols: var(--pm-c1120);
		}
	}

	@container (min-width: 1240px) {

		.pm-grid--balanced.is-layout-grid {
			--pm-cols: var(--pm-c1240);
		}
	}

	@container (min-width: 1360px) {

		.pm-grid--balanced.is-layout-grid {
			--pm-cols: var(--pm-c1360);
		}
	}
}

.pm-features.is-layout-grid {
	gap: clamp(24px, 4vw, 64px);
}

/* ---------- Photo band (21:9 breather) ---------- */

.pm-band img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

@media (max-width: 781px) {

	.pm-band img {
		aspect-ratio: 16 / 9;
	}
}

/* ---------- Narrow long-form ---------- */

.pm-article {
	max-width: var(--container-narrow);
	margin-inline: auto;
}

/* The call-to-action band closes the main content, flush with it. */
.pm-flow > .pm-cta-part {
	margin-block-start: 0;
}