/*
 * 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.
 */
.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) { transform: translateY(1.75rem); }
.mosaic-anim-ready [data-mosaic-anim="slide-start"]:not(.is-in) { transform: translateX(-2rem); }
[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(2rem); }
.mosaic-anim-ready [data-mosaic-anim="zoom"]:not(.is-in) { transform: scale(0.92); }

.mosaic-anim-ready [data-mosaic-anim] {
	transition: opacity 0.6s ease, transform 0.6s 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;
	}
}

/* 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;
}