/**
 * Section intro — centered split heading + deck (demo-skin .gsap-section-header).
 * Motion: cw-widgets-scroll-reveal.js — gsap.to from CSS preset below (no from() flicker).
 * Outer wrapper: vertical safe area (default 8rem top/bottom in Elementor) — ScrollTrigger stays on .cw-section-intro.
 *
 * Last modified: 2026-03-28 — do not overflow:hidden heading/description (clips yPercent + pill words; see canonical doc §7).
 */

.cw-section-intro-outer {
	width: 100%;
	box-sizing: border-box;
}

.cw-section-intro {
	width: 100%;
	box-sizing: border-box;
}

.cw-section-intro__heading {
	margin: 0 0 var(--cw-section-intro-heading-gap, 1.5rem);
	font-weight: 700;
	line-height: var(--cw-line-height-heading, 1.1);
	letter-spacing: 0;
	color: var(--cw-section-intro-heading-color, var(--cw-text-primary, #fff));
	font-size: clamp(2rem, 4vw + 0.5rem, 3.75rem);
}

.cw-section-intro__heading .split-word {
	display: inline-block;
	margin-right: 0.2em;
	will-change: transform, opacity;
}

.cw-section-intro__heading .split-word:last-child {
	margin-right: 0;
}

.cw-section-intro.gsap-section-header .cw-section-intro__heading.split-reveal-heading .split-word {
	opacity: 0;
	transform: translate3d(0, 115%, 0);
}

/* Mobile: same as plugin skip — avoid flash if GSAP runs late (ScrollTrigger unreliable on small viewports). */
@media (max-width: 767px) {
	.cw-section-intro.gsap-section-header .cw-section-intro__heading.split-reveal-heading .split-word,
	.cw-section-intro.gsap-section-header .cw-section-intro__description p,
	.cw-section-intro.gsap-section-header .cw-section-intro__description a,
	.cw-section-intro.gsap-section-header .cw-section-intro__description button {
		opacity: 1;
		transform: none;
	}
}

/*
 * WYSIWYG lives in .cw-section-intro__description wrapper; plugin animates p, a, button inside (not the wrapper)
 * so a parent opacity:0 does not fight GSAP child tweens.
 */
.cw-section-intro.gsap-section-header .cw-section-intro__description p,
.cw-section-intro.gsap-section-header .cw-section-intro__description a,
.cw-section-intro.gsap-section-header .cw-section-intro__description button {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
}

@media (prefers-reduced-motion: reduce) {
	.cw-section-intro.gsap-section-header .cw-section-intro__heading.split-reveal-heading .split-word,
	.cw-section-intro.gsap-section-header .cw-section-intro__description p,
	.cw-section-intro.gsap-section-header .cw-section-intro__description a,
	.cw-section-intro.gsap-section-header .cw-section-intro__description button {
		opacity: 1;
		transform: none;
	}
}

.elementor-editor-active .cw-section-intro.gsap-section-header .cw-section-intro__heading.split-reveal-heading .split-word,
.elementor-editor-active .cw-section-intro.gsap-section-header .cw-section-intro__description p,
.elementor-editor-active .cw-section-intro.gsap-section-header .cw-section-intro__description a,
.elementor-editor-active .cw-section-intro.gsap-section-header .cw-section-intro__description button {
	opacity: 1;
	transform: none;
}

/* Gradient capsule — demo .text-pill (parity with hero pill) */
/* No overflow:hidden — demo-skin .text-pill (index.html) does not clip; hidden overflow cuts off
 * split-word yPercent reveals inside the capsule. */
/*
 * Pill capsule (cw-section-intro recipe).
 * Spacing defaults (margin pull-in + .split-word `:has()` rule) live in the
 * shared `cw-segmented-heading.css` stylesheet so every widget that emits
 * `.text-pill` gets identical inter-word spacing — see that file for the
 * Strategy B math (set 2026-05-08).
 */
.cw-section-intro .text-pill {
	display: inline-block;
	padding: 0.25rem 1.25rem;
	background: color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 15%, transparent);
	border-radius: 999px;
	position: relative;
	z-index: 1;
	vertical-align: baseline;
	/* Inherit the heading font-size so pill words and non-pill words stay the same height. */
	font-size: inherit;
}

.cw-section-intro .text-pill::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	padding: 1px;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--cw-accent-primary, #dc2626) 80%, transparent),
		color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 80%, transparent)
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: -1;
}

.cw-section-intro .text-pill .split-word {
	margin-right: 0.15em;
}

.cw-section-intro .text-pill .split-word:last-child {
	margin-right: 0;
}

.cw-section-intro__description {
	margin: 0 auto;
	max-width: var(--cw-section-intro-desc-max, 42rem);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--cw-section-intro-desc-color, var(--cw-text-muted, #8090a8));
	font-weight: 400;
}

.cw-section-intro__description > p:first-child {
	margin-top: 0;
}

.cw-section-intro__description > p:last-child {
	margin-bottom: 0;
}

.cw-section-intro__description p + p {
	margin-top: 1em;
}

/* — CTA row (Nova / Ghost) — uses the same .cw-hero__btn classes as Hero Homepage / Button preset. */
.cw-section-intro__actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
	max-width: 100%;
}

.cw-section-intro__action {
	flex: 0 0 auto;
}

@media (max-width: 540px) {
	.cw-section-intro__actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.cw-section-intro__action,
	.cw-section-intro__action > .cw-hero__btn {
		width: 100%;
	}
}

/* Eyebrow — segment-hero pattern, mirrors cw-heading-default__eyebrow.
 * Reads the same CSS variables so theme/kit token swaps flow through automatically. */
.cw-section-intro__eyebrow {
	display: block;
	margin: 0 0 1.25rem;
	font-family: var(--cw-font-body, system-ui, sans-serif);
	font-size: var(--cw-font-size-label, 0.78rem);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-label, 0.08em);
	text-transform: uppercase;
	color: var(--cw-text-muted, rgba(255, 255, 255, 0.72));
	text-align: inherit;
}

.cw-section-intro__eyebrow-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	max-width: 100%;
}

.cw-section-intro__eyebrow-text {
	display: inline-block;
}

.cw-section-intro__eyebrow-line {
	display: block;
	flex: 0 0 2rem;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}