/**
 * Trihead Scroll Sections widget styles.
 * The section is one viewport tall and gets pinned by GSAP ScrollTrigger while
 * the panels transition; then it releases and the page continues. In the editor
 * (and on mobile / reduced-motion) the panels fall back to a stacked layout.
 */

.trihead-scroll-sections {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.trihead-scroll-sections * {
	box-sizing: border-box;
}

/* Each panel fills the section and stacks on top of the others. */
.trihead-scroll-sections__section {
	position: absolute;
	inset: 0;
	visibility: hidden;
	overflow: hidden;
}

/* Pre-init / no-JS: show the first panel. */
.trihead-scroll-sections__section:first-child {
	visibility: visible;
}

.trihead-scroll-sections__outer,
.trihead-scroll-sections__inner {
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}

.trihead-scroll-sections__bg {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 8vh 6vw;
	background-size: cover;
	background-position: center;
}

/* Per-slide content position presets. */
.trihead-scroll-sections__bg.is-pos-center {
	align-items: center;
	justify-content: center;
	text-align: center;
}
.trihead-scroll-sections__bg.is-pos-bottom-left {
	align-items: flex-end;
	justify-content: flex-start;
	text-align: left;
}
.trihead-scroll-sections__bg.is-pos-bottom-center {
	align-items: flex-end;
	justify-content: center;
	text-align: center;
}
.trihead-scroll-sections__bg.is-pos-top-left {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
}

.trihead-scroll-sections__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.trihead-scroll-sections__heading {
	position: relative;
	z-index: 2;
	margin: 0;
	width: 100%;
	max-width: 1200px;
	color: #ffffff;
	font-size: clamp(1.5rem, 6vw, 8rem);
	font-weight: 600;
	line-height: 1.1;
	text-align: inherit;
}

.trihead-scroll-sections__heading a {
	color: inherit;
	text-decoration: none;
}

/* SplitText line wrapper — clips characters as they slide in. */
.trihead-scroll-sections .clip-text {
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Stacked fallback — editor, mobile, and reduced-motion.
 * Panels become normal-flow blocks so the page lays out predictably and
 * every panel stays visible and readable (no pin, no overlap).
 * ------------------------------------------------------------------- */
.trihead-scroll-sections--editor,
.trihead-scroll-sections--static {
	height: auto;
	overflow: visible;
}

.trihead-scroll-sections--editor .trihead-scroll-sections__section,
.trihead-scroll-sections--static .trihead-scroll-sections__section {
	position: relative;
	inset: auto;
	height: 70vh;
	visibility: visible;
}

.trihead-scroll-sections--editor .trihead-scroll-sections__section {
	border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}