/**
 * Visual lab — shared section layout.
 */

.hp-visual-lab {
	--hp-lab-section-gap-mobile: clamp(5rem, 14vh, 10rem);
	--hp-lab-section-gap: var(--hp-lab-section-gap-mobile);
	--hp-lab-section-gap-compact: clamp(4rem, 10vh, 6rem);
	--hp-lab-container-max: min(1200px, 92vw);
	--hp-lab-container-pad: clamp(1rem, 4vw, 2.5rem);
	--hp-lab-heading-font: Georgia, "Times New Roman", serif;
	--hp-lab-heading-weight: 400;
}

@media (min-width: 901px) {
	.hp-visual-lab {
		--hp-lab-section-gap: calc(var(--hp-lab-section-gap-mobile) * 2);
	}
}

.hp-visual-lab h1,
.hp-visual-lab h2,
.hp-visual-lab h3 {
	font-family: var(--hp-lab-heading-font);
	font-weight: var(--hp-lab-heading-weight);
}

.hp-lab-section {
	position: relative;
	width: 100%;
}

.hp-visual-lab > section:not(.hp-lab-gap) {
	margin-block-end: var(--hp-lab-section-gap);
}

.hp-visual-lab > section:last-child {
	margin-block-end: 0;
}

.hp-lab-gap {
	display: block;
	box-sizing: content-box;
	margin: 0;
	padding-top: var(--hp-lab-section-gap);
	border: 0;
	background: transparent;
	pointer-events: none;
	flex-shrink: 0;
}

body.hp-visual-lab-page .hp-header-hero {
	margin-block-end: 0;
}

.hp-visual-lab > section.hp-lab-section--01 {
	margin-block-end: var(--hp-lab-section-gap-compact);
}

.hp-visual-lab > section.hp-lab-section--03 {
	margin-block-end: calc(var(--hp-lab-section-gap-compact) * 2);
}

.hp-visual-lab > section.hp-lab-section--04 {
	margin-block-end: 0;
}

.hp-visual-lab > section.hp-lab-section--05 {
	margin-block-start: 0;
}

.hp-lab-section__container {
	width: 100%;
	max-width: var(--hp-lab-container-max);
	margin-inline: auto;
	padding-inline: var(--hp-lab-container-pad);
}