/*
 * Layout base for sections, rows and columns. Shared by every builder page
 * and cached by the browser; per-page rules live in the page's own CSS file,
 * which loads after this one.
 *
 * Mobile first and direction-neutral: logical properties only, and the grid
 * follows the page direction, so columns start on the correct side in RTL.
 */

/*
 * A section is a full-width band: it spans the whole window even when the
 * theme puts page content in a narrower column, so backgrounds and images run
 * edge to edge. The row inside keeps the content width.
 */
.mosaic-section {
	box-sizing: border-box;
	inline-size: var(--mosaic-vw, 100vw);
	max-inline-size: var(--mosaic-vw, 100vw);
	margin-inline: calc(50% - var(--mosaic-vw, 100vw) / 2);
	padding-block: var(--mosaic-section-pad, 3rem);
	padding-inline: var(--mosaic-gutter, clamp(1rem, 4vw, 2rem));
}

/*
 * --mosaic-vw is the page width without the scrollbar, set by layout.js. Until
 * it runs the fallback is 100vw, which includes the scrollbar; this stops the
 * few pixels of difference causing a sideways scroll.
 */
body:has(.mosaic-section) {
	overflow-x: clip;
}

/* Edge to edge: no side space at all, for photos and colour bands. */
.mosaic-section--edge {
	padding-inline: 0;
}

.mosaic-section :where(*, *::before, *::after) {
	box-sizing: border-box;
}

/* A row is a 12 column grid. Columns stack by default; the page CSS widens them. */
.mosaic-row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--mosaic-gap, 1.5rem);
	inline-size: 100%;
	max-inline-size: var(--mosaic-content-width, 120rem);
	margin-inline: auto;
}

.mosaic-section--full > .mosaic-row {
	max-inline-size: none;
}

/* Nested rows fill their column. */
.mosaic-column > .mosaic-row {
	max-inline-size: none;
	margin-inline: 0;
}

/*
 * A column is a vertical stack of modules. It is a size container, so modules
 * can adapt to the width of the column they sit in with @container queries.
 */
.mosaic-column {
	display: flex;
	flex-direction: column;
	grid-column: span 12;
	gap: 1rem;
	min-inline-size: 0;
	container-type: inline-size;
	container-name: mosaic-column;
}

/*
 * The 12 column grid has 11 gaps between its tracks. A wide gap set on a row (a layout may ask for 3 or 4rem) can be wider than a
 * phone, which squeezes the tracks to nothing and makes every full width column wider than the screen: the page scrolls sideways.
 * On narrow screens, and in narrow columns for rows nested in them, the gap between columns shrinks to fit (never above the row's own
 * setting). The space between stacked columns follows the page gap.
 */
@media (max-width: 47.9375rem) {
	.mosaic-section .mosaic-row {
		column-gap: min(var(--mosaic-gap, 1.5rem), calc(100% / 24));
		row-gap: var(--mosaic-gap, 1.5rem);
	}
}

@container mosaic-column (max-width: 40rem) {
	.mosaic-column > .mosaic-row {
		column-gap: min(var(--mosaic-gap, 1.5rem), calc(100% / 24));
	}
}

/* Icons from the icon library: sized by the text around them, drawn in its colour. */
.mosaic-svg {
	display: inline-block;
	flex: none;
	inline-size: 1em;
	block-size: 1em;
	vertical-align: -0.125em;
}

/* Directional icons (arrows, chevrons) point the other way in right-to-left pages. */
[dir="rtl"] .mosaic-svg--flip {
	transform: scaleX(-1);
}

/* Text for screen readers only, so modules work in themes that do not define the class. */
.mosaic-section .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* "Hide the theme header and footer" on a page: a landing page that brings its own. */
.mosaic-page-bare .site-header,
.mosaic-page-bare .site-footer {
	display: none;
}

/* Blocks that fill their column stay full width when a row centres or ends its content. */
.mosaic-column > :where(.mosaic-heading, .mosaic-text, .mosaic-blurb, .mosaic-icon-box, .mosaic-icon-list, .mosaic-divider, .mosaic-spacer, .mosaic-video, .mosaic-map, .mosaic-search, .mosaic-menu) {
	inline-size: 100%;
}

/* Header and footer templates. */
.mosaic-template {
	display: block;
}

.mosaic-template--header.is-sticky {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: var(--mosaic-color-bg, #fff);
	box-shadow: 0 1px 0 var(--mosaic-color-border, rgba(0, 0, 0, 0.08));
}

.admin-bar .mosaic-template--header.is-sticky {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

.mosaic-page-bare .mosaic-template--header,
.mosaic-page-bare .mosaic-template--footer {
	display: none;
}

/* Rows stacked in one section are spaced like the columns inside them. */
.mosaic-section > .mosaic-row + .mosaic-row {
	margin-block-start: var(--mosaic-gap, 1.5rem);
}

/*
 * Entrance animations (Advanced tab). An element is hidden only when the page script is on its way
 * (html.mosaic-anim-ready, set in the head) and is shown by .is-in. If the script never arrives,
 * the failsafe below shows everything after a few seconds. Distance, size change, time and curve come from
 * custom properties, so every option is one rule.
 */
[data-mosaic-anim] { --mx-d: 1.75rem; --mx-z: 0.92; --mx-dur: 0.6s; --mx-ease: ease; }
[data-mosaic-int="subtle"] { --mx-d: 0.75rem; --mx-z: 0.97; }
[data-mosaic-int="strong"] { --mx-d: 4rem; --mx-z: 0.6; }
[data-mosaic-dur="300"] { --mx-dur: 0.3s; }
[data-mosaic-dur="900"] { --mx-dur: 0.9s; }
[data-mosaic-dur="1200"] { --mx-dur: 1.2s; }
[data-mosaic-dur="1800"] { --mx-dur: 1.8s; }
[data-mosaic-ease="linear"] { --mx-ease: linear; }
[data-mosaic-ease="ease-in"] { --mx-ease: ease-in; }
[data-mosaic-ease="ease-out"] { --mx-ease: ease-out; }
[data-mosaic-ease="ease-in-out"] { --mx-ease: ease-in-out; }
[data-mosaic-ease="bounce"], [data-mosaic-anim="bounce"] { --mx-ease: cubic-bezier(0.34, 1.56, 0.64, 1); }

.mosaic-anim-ready [data-mosaic-anim]:not(.is-in) {
	opacity: 0;
	animation: mosaic-anim-failsafe 0.01s 4s forwards;
}

.mosaic-anim-ready [data-mosaic-anim="slide-up"]:not(.is-in),
.mosaic-anim-ready [data-mosaic-anim="bounce"]:not(.is-in) { transform: translateY(var(--mx-d)); }
.mosaic-anim-ready [data-mosaic-anim="slide-down"]:not(.is-in) { transform: translateY(calc(var(--mx-d) * -1)); }
.mosaic-anim-ready [data-mosaic-anim="slide-start"]:not(.is-in) { transform: translateX(calc(var(--mx-d) * -1)); }
.mosaic-anim-ready [data-mosaic-anim="slide-end"]:not(.is-in) { transform: translateX(var(--mx-d)); }
[dir="rtl"].mosaic-anim-ready [data-mosaic-anim="slide-start"]:not(.is-in),
[dir="rtl"] .mosaic-anim-ready [data-mosaic-anim="slide-start"]:not(.is-in) { transform: translateX(var(--mx-d)); }
[dir="rtl"].mosaic-anim-ready [data-mosaic-anim="slide-end"]:not(.is-in),
[dir="rtl"] .mosaic-anim-ready [data-mosaic-anim="slide-end"]:not(.is-in) { transform: translateX(calc(var(--mx-d) * -1)); }
.mosaic-anim-ready [data-mosaic-anim="zoom"]:not(.is-in) { transform: scale(var(--mx-z)); }
.mosaic-anim-ready [data-mosaic-anim="zoom-out"]:not(.is-in) { transform: scale(calc(2 - var(--mx-z))); }
.mosaic-anim-ready [data-mosaic-anim="flip-x"]:not(.is-in) { transform: perspective(800px) rotateX(70deg); }
.mosaic-anim-ready [data-mosaic-anim="flip-y"]:not(.is-in) { transform: perspective(800px) rotateY(70deg); }
.mosaic-anim-ready [data-mosaic-anim="rotate"]:not(.is-in) { transform: rotate(-12deg) scale(0.9); }

.mosaic-anim-ready [data-mosaic-anim] {
	transition: opacity var(--mx-dur) var(--mx-ease), transform var(--mx-dur) var(--mx-ease);
}

@keyframes mosaic-anim-failsafe {
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-mosaic-anim] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/*
 * Scroll effects and mouse effects (Advanced tab). The script (effects.js) writes the custom properties as the page moves; the
 * separate translate, rotate and scale properties are used so they never fight with the Transform settings.
 */
[data-mx-vy], [data-mx-hx], [data-mx-rot], [data-mx-scale] {
	translate: var(--mx-x, 0) var(--mx-y, 0);
	rotate: var(--mx-r, 0deg);
	scale: var(--mx-s, 1);
	will-change: translate, rotate, scale;
}
[data-mx-abv][hidden] { display: none !important; }
[data-mx-fade] { opacity: var(--mx-o, 1); }
[data-mx-blur] { filter: blur(var(--mx-b, 0px)); }
[data-mx-mouse="tilt"] { will-change: transform; transition: transform 0.15s ease-out; }
[data-mx-mouse="track"], [data-mx-mouse="float"] { translate: var(--mx-mx, 0) var(--mx-my, 0); transition: translate 0.2s ease-out; }
[data-mx-on] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	[data-mx-vy], [data-mx-hx], [data-mx-rot], [data-mx-scale], [data-mx-mouse] { translate: none !important; rotate: none !important; scale: none !important; transform: none !important; }
	[data-mx-fade] { opacity: 1 !important; }
	[data-mx-blur] { filter: none !important; }
}

/* An element hidden by an interaction stays hidden whatever its layout says. */
[class*="mosaic-el-"][hidden] { display: none !important; }

/* Section dividers: a shape along the top or bottom edge, behind the content unless it is set to the front. */
.mosaic-section { position: relative; }
.mosaic-has-dividers { isolation: isolate; }
.mosaic-divider {
	position: absolute;
	inset-inline: 0;
	z-index: -1;
	block-size: 5rem;
	line-height: 0;
	color: #ffffff;
	pointer-events: none;
}
.mosaic-divider.is-front { z-index: 2; }
.mosaic-divider--top { inset-block-start: 0; }
.mosaic-divider--bottom { inset-block-end: 0; }
.mosaic-divider svg { display: block; inline-size: 100%; block-size: 100%; }
.mosaic-divider--top svg { transform: scaleY(-1); }
.mosaic-divider--top.is-flipped svg { transform: scale(-1, -1); }
.mosaic-divider--bottom.is-flipped svg { transform: scaleX(-1); }

/* Video behind the content of a container. */
.mosaic-has-bg-video { position: relative; isolation: isolate; overflow: hidden; }
.mosaic-bg-video {
	position: absolute;
	inset: 0;
	z-index: -1;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.mosaic-bg-video { display: none; }
}

/* A whole area that is a link: the link covers it, and what is inside stays clickable above it. */
.mosaic-has-cover-link {
	position: relative;
}

.mosaic-cover-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mosaic-has-cover-link a:not(.mosaic-cover-link),
.mosaic-has-cover-link button,
.mosaic-has-cover-link input,
.mosaic-has-cover-link select,
.mosaic-has-cover-link textarea {
	position: relative;
	z-index: 2;
}