/*
 * Homepage pattern sections (D-92, D-93). Tokens only: no colour or font literals.
 */

.materli-section {
	padding-block: var(--materli-space-3xl);
}

@media (max-width: 689px) {
	.materli-section {
		padding-block: var(--materli-space-2xl);
	}
}

/* Buttons inside patterns reuse the base .materli-button look. */
.materli-section .wp-block-button__link,
.materli-hero .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--materli-hit);
	padding: 0 var(--materli-space-md);
	font-weight: var(--materli-weight-strong);
	border-radius: var(--materli-radius);
	background: var(--materli-color-accent);
	color: var(--materli-color-surface);
	border: 1px solid var(--materli-color-accent);
	text-decoration: none;
}

.materli-section .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--materli-color-text);
	border-color: var(--materli-color-text);
}

.materli-section .is-style-outline .wp-block-button__link:hover {
	background: var(--materli-color-text);
	color: var(--materli-color-surface);
}

/* Promo band. */
.materli-promo-band {
	background: var(--materli-color-surface-alt);
	text-align: center;
}

.materli-promo-band__slogan {
	font-size: var(--materli-text-display);
	font-weight: var(--materli-weight-strong);
	margin-block: 0 var(--materli-space-lg);
}

.materli-promo-band .wp-block-buttons {
	justify-content: center;
}

/* Text + image, 50/50. */
.materli-text-image .wp-block-columns {
	align-items: center;
	gap: var(--materli-space-xl);
}

.materli-text-image__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.materli-text-image p {
	max-width: 60ch;
}

@media (max-width: 689px) {
	.materli-text-image .wp-block-columns {
		flex-direction: column;
	}

	.materli-text-image .wp-block-column {
		flex-basis: 100% !important;
	}
}

/*
 * Hold below-the-fold home sections back until they near the viewport (G-1 round 2, D-119).
 *
 * Skipped subtrees have no layout box, so Chrome's lazy loader does not start their images before
 * first paint and they stop competing with the LCP image in Lighthouse's simulated 4G.
 * `content-visibility: auto` keeps the content in the accessibility tree and find-in-page. The
 * sizes are measured section heights minus the section's vertical padding (96 px at 390 px wide,
 * 128 px at 1440 px wide), because a skipped box keeps its padding, so the scrollbar does not jump.
 * Never applied to the hero.
 */
.home .materli-section {
	content-visibility: auto;
	contain-intrinsic-size: auto 339px;
}

.home .materli-section--featured {
	contain-intrinsic-size: auto 747px;
}

.home .materli-promo-band {
	contain-intrinsic-size: auto 160px;
}

.home .materli-text-image {
	contain-intrinsic-size: auto 584px;
}

@media (min-width: 690px) {
	.home .materli-section {
		contain-intrinsic-size: auto 516px;
	}

	.home .materli-section--featured {
		contain-intrinsic-size: auto 580px;
	}

	.home .materli-promo-band {
		contain-intrinsic-size: auto 112px;
	}

	.home .materli-text-image {
		contain-intrinsic-size: auto 786px;
	}
}

/*
 * Approach B (G-1 round 2): while the page is loading, skip the home sections entirely so their lazy
 * images start after load. Only a script adds `materli-media-pending` (inc/assets.php), so no-JS
 * visitors are unaffected, and `materli-media-ready` lifts it on load, a timeout or first interaction.
 */
body.home.materli-media-pending:not(.materli-media-ready) .materli-section {
	content-visibility: hidden;
}