/**
 * CW Heading (default) — internal page hero copy (OSI-style structure, Compression Works tokens).
 * CTAs: .cw-hero__btn--nova / .cw-hero__btn--ghost from cw-hero-homepage.css
 *
 * Last modified: 2026-04-22 — top icon: tile vs glyph layers + Elementor SVG/FA sizing; lead alignment unchanged.
 */

.cw-heading-default {
	position: relative;
	overflow: hidden;
	background: transparent;
	color: var(--cw-text, #ffffff);
	box-sizing: border-box;
}

/*
 * Design top pad as a custom property; padding-block-start is applied below (with optional header offset).
 * :where() = 0 specificity so Style → Content layout → Block padding always wins.
 */
:where(.elementor-widget-cw-heading-default .cw-heading-default) {
	--cw-heading-default-pad-top: clamp(3rem, 8vw, 6rem);
	padding-block-end: clamp(2.5rem, 6vw, 5rem);
	padding-inline: 0;
}

/*
 * Content → Spacing preset (prefix_class on widget).
 * Narrow: compact internal hero (former Elementor defaults).
 * Wide: Team CW / about-management-team block rhythm + inner rail (same 1400px content max as Narrow).
 * :where() on the widget half keeps specificity low so Style → Content layout
 * (Block padding, Content max width, Inner content padding) always wins when set.
 */
:where(.elementor-widget-cw-heading-default.cw-heading-spacing--narrow) .cw-heading-default {
	box-sizing: border-box;
	padding-inline: 0;
	--cw-heading-default-pad-top: 4.5rem;
	padding-block-end: 4rem;
}

:where(.elementor-widget-cw-heading-default.cw-heading-spacing--wide) .cw-heading-default {
	box-sizing: border-box;
	padding-inline: 0;
	--cw-heading-default-pad-top: 6rem;
	padding-block-end: 6rem;
}

:where(.elementor-widget-cw-heading-default.cw-heading-spacing--narrow) .cw-heading-default__inner {
	max-width: 1400px;
}

:where(.elementor-widget-cw-heading-default.cw-heading-spacing--wide) .cw-heading-default__inner {
	max-width: 1400px;
	padding-inline-start: max(1.5rem, var(--cw-gutter-inline, clamp(1rem, 5vw, 1.5rem)), env(safe-area-inset-left, 0px));
	padding-inline-end: max(1.5rem, var(--cw-gutter-inline, clamp(1rem, 5vw, 1.5rem)), env(safe-area-inset-right, 0px));
}

@media (max-width: 1024px) {
	:where(.elementor-widget-cw-heading-default.cw-heading-spacing--narrow) .cw-heading-default {
		--cw-heading-default-pad-top: 3.5rem;
		padding-block-end: 3rem;
	}

	:where(.elementor-widget-cw-heading-default.cw-heading-spacing--wide) .cw-heading-default {
		--cw-heading-default-pad-top: 5rem;
		padding-block-end: 5rem;
	}
}

@media (max-width: 767px) {
	:where(.elementor-widget-cw-heading-default.cw-heading-spacing--narrow) .cw-heading-default {
		--cw-heading-default-pad-top: 3rem;
		padding-block-end: 2.5rem;
	}

	:where(.elementor-widget-cw-heading-default.cw-heading-spacing--wide) .cw-heading-default {
		--cw-heading-default-pad-top: 4rem;
		padding-block-end: 4rem;
	}
}

/*
 * Top padding: design value only (editor, overlap disabled, or “Reserve space for fixed header” = No).
 * Front + theme header overlap: add measured bar height so copy clears #backdrop (cw-header-layout.js → :root).
 */
.elementor-widget-cw-heading-default .cw-heading-default {
	padding-block-start: var(--cw-heading-default-pad-top);
}

body:not(.cw-header-overlap-disabled):not(.elementor-editor-active):not(.elementor-editor-preview)
	.elementor-widget-cw-heading-default
	.cw-heading-default.cw-heading-default--reserve-header {
	padding-block-start: calc(var(--cw-site-header-height, 0px) + var(--cw-heading-default-pad-top));
}

/* In-widget hero stack: photo + overlays (below optional diagonal grid) */
.cw-heading-default--has-block-bg {
	isolation: isolate;
}

.cw-heading-default__bg-stack {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.cw-heading-default__bg-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cw-heading-default__bg-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Internal hero scrim — demo our-product_how-to-apply: dark base, surface mid, open top */
.cw-heading-default__bg-overlay--linear {
	background: linear-gradient(
		to top,
		#0a0a0c 0%,
		color-mix(in srgb, var(--cw-surface-1, #141414) 80%, transparent) 48%,
		transparent 100%
	);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cw-heading-default__bg-overlay--linear {
		background: linear-gradient(
			to top,
			#0a0a0c 0%,
			rgba(20, 20, 20, 0.82) 48%,
			transparent 100%
		);
	}
}

/* CW Backgrounds / demo-skin family vignette */
.cw-heading-default__bg-overlay--vignette {
	background: radial-gradient(
		ellipse 100% 100% at 50% 50%,
		transparent 40%,
		rgba(0, 0, 0, 0.22) 100%
	);
}

/* Demo-hero style accent radials (screen) */
.cw-heading-default__bg-overlay--accents {
	background-image:
		radial-gradient(
			circle at 90% -10%,
			color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 12%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 4%, transparent) 40%,
			transparent 70%
		),
		radial-gradient(
			circle at -15% 45%,
			color-mix(in srgb, var(--cw-accent-primary, #dc2626) 10%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-primary, #dc2626) 3%, transparent) 40%,
			transparent 70%
		);
	mix-blend-mode: screen;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cw-heading-default__bg-overlay--accents {
		background-image:
			radial-gradient(
				circle at 90% -10%,
				rgba(0, 183, 250, 0.12) 0%,
				rgba(0, 183, 250, 0.04) 40%,
				transparent 70%
			),
			radial-gradient(
				circle at -15% 45%,
				rgba(220, 38, 38, 0.1) 0%,
				rgba(220, 38, 38, 0.03) 40%,
				transparent 70%
			);
	}
}

/* Subtle grid echo (CW accent tints) — optional; paints above __bg-stack, below copy */
.cw-heading-default.cw-heading-default--has-grid-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 40px,
			color-mix(in srgb, var(--cw-accent-primary, #dc2626) 6%, transparent) 40px,
			color-mix(in srgb, var(--cw-accent-primary, #dc2626) 6%, transparent) 41px
		),
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 40px,
			color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 4%, transparent) 40px,
			color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 4%, transparent) 41px
		);
	pointer-events: none;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cw-heading-default.cw-heading-default--has-grid-bg::before {
		background:
			repeating-linear-gradient(
				-45deg,
				transparent,
				transparent 40px,
				rgba(220, 38, 38, 0.04) 40px,
				rgba(220, 38, 38, 0.04) 41px
			),
			repeating-linear-gradient(
				45deg,
				transparent,
				transparent 40px,
				rgba(0, 183, 250, 0.03) 40px,
				rgba(0, 183, 250, 0.03) 41px
			);
	}
}

.cw-heading-default__inner {
	position: relative;
	z-index: 2;
	max-width: var(--cw-content-max-width, 1400px);
	margin: 0 auto;
	box-sizing: border-box;
}

/* Optional segment-hero icon (above eyebrow): outer tile + inner glyph (parity with cw-env-card__icon / cw-cards). */
.cw-heading-default__icon-wrap {
	display: flex;
	width: 100%;
	margin-bottom: 2rem;
}

.cw-heading-default__icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
	border-radius: 1rem;
	line-height: 0;
	color: var(--cw-accent-secondary, #00b7fa);
	border: 1px solid color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 20%, transparent);
	background: color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 10%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cw-heading-default__icon-tile {
		border: 1px solid rgba(0, 183, 250, 0.2);
		background: rgba(0, 183, 250, 0.1);
	}
}

.cw-heading-default__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	font-size: 1.75rem;
}

/* Elementor wraps FA/SVG; !important wins over inline SVG width/height from the library. */
.cw-heading-default__icon .elementor-icon,
.cw-heading-default__icon svg {
	display: block;
	width: 1em !important;
	height: 1em !important;
	max-width: 100%;
	max-height: 100%;
	flex-shrink: 0;
}

.cw-heading-default__icon svg {
	fill: currentColor;
}

.cw-heading-default__icon i {
	font-size: 1em;
	line-height: 1;
}

/*
 * Same horizontal gutter as theme header (--cw-gutter-inline), through laptop / small desktop.
 * max-width 1366px matches theme.css header gutter (Elementor laptop preview, not only ≤1023).
 * Editor "Inner content padding" adds to this.
 */
@media (max-width: 1366px) {
	/* Wide preset sets its own horizontal inset (1.5rem + gutter + safe-area). */
	.elementor-widget-cw-heading-default:not(.cw-heading-spacing--wide) .cw-heading-default__inner {
		/* Match cw-cards / fluent-form: fallback if --cw-gutter-inline undefined (invalid max() drops padding). */
		padding-inline-start: max(var(--cw-gutter-inline, clamp(1rem, 5vw, 1.5rem)), env(safe-area-inset-left, 0px));
		padding-inline-end: max(var(--cw-gutter-inline, clamp(1rem, 5vw, 1.5rem)), env(safe-area-inset-right, 0px));
	}
}

/*
 * Outer <p> is block-level so the next sibling (title group) always wraps below.
 * Inner span is inline-flex — shrinks to content so the eyebrow follows the parent's
 * text-align (left / center / right) without competing with .cw-heading-default__title-group
 * (which is also inline-flex and would otherwise sit on the same line).
 */
.cw-heading-default__eyebrow {
	display: block;
	margin: 0 0 1.25rem;
	font-family: var(--cw-font-body, "Inter", 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));
}

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

.cw-heading-default__eyebrow-text {
	display: inline-block;
}

/* Flanking lines — demo-skin segment hero ( — HOSPITAL & TRAUMA — ) */
.cw-heading-default__eyebrow-line {
	display: block;
	flex: 0 0 2rem;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* Legacy single trailing line retained only when the flanked modifier is not applied. */
.cw-heading-default__eyebrow:not(.cw-heading-default__eyebrow--flanked) .cw-heading-default__eyebrow-inner::after {
	content: "";
	flex: 0 0 48px;
	height: 1px;
	background: currentColor;
}

.cw-heading-default__title {
	margin: 0 0 1.75rem;
	padding: 0;
	font-family: var(--cw-font-heading, "Barlow", system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.08;
	letter-spacing: 0;
	max-width: 52rem;
}

.cw-heading-default__title-line {
	color: var(--cw-text, #ffffff);
}

/* Same gradient contract as .cw-cw-heading__gradient (emphasis line + last-word accent, Single-Article Header parity) */
.cw-heading-default__emphasis,
.cw-heading-default__title-last-word {
	font-style: normal;
	font-weight: inherit;
	display: inline;
	background: linear-gradient(
		135deg,
		var(--cw-cw-heading-g-start, var(--cw-accent-primary, #dc2626)),
		var(--cw-cw-heading-g-end, var(--cw-accent-secondary, #00b7fa))
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.cw-heading-default__emphasis strong,
.cw-heading-default__emphasis b {
	color: var(--cw-accent-secondary, #00b7fa);
	-webkit-text-fill-color: currentColor;
	background: none;
	font-weight: 700;
}

@supports not (background-clip: text) {
	.cw-heading-default__emphasis,
	.cw-heading-default__title-last-word {
		color: var(--cw-cw-heading-g-start, var(--cw-accent-primary, #dc2626));
		background: none;
		-webkit-text-fill-color: inherit;
	}
}

/*
 * Title + optional accent: inline-flex so when __inner is text-align:center the whole
 * headline centers as one unit; accent aligns under the title via align-items (Style → Title accent bar).
 */
.cw-heading-default__title-group {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 100%;
}

.cw-heading-default__inner--has-title-accent .cw-heading-default__title {
	margin-bottom: 1rem;
}

.cw-heading-default__title-accent {
	display: block;
	width: 6rem;
	height: 0.375rem;
	flex-shrink: 0;
	margin-top: 0;
	margin-bottom: 1.5rem;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--cw-heading-default-accent-g-start, var(--cw-accent-primary, #dc2626)),
		var(--cw-heading-default-accent-g-end, var(--cw-accent-secondary, #00b7fa))
	);
	box-shadow: 0 0 15px rgba(188, 30, 32, 0.6);
}

.cw-heading-default__lead {
	margin: 0 0 2.5rem;
	font-family: var(--cw-font-body, "Inter", system-ui, sans-serif);
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.6;
	color: var(--cw-text-muted, rgba(255, 255, 255, 0.82));
}

.elementor-widget-cw-heading-default .cw-heading-default__lead {
	max-width: 640px;
}

.cw-heading-default__lead p {
	margin: 0 0 0.75em;
	text-align: inherit;
}

.cw-heading-default__lead p:last-child {
	margin-bottom: 0;
}

.cw-heading-default__actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

/* Bridge: hero buttons are full-width on small screens in homepage CSS; keep row-friendly min width here */
.elementor-widget-cw-heading-default .cw-heading-default__actions .cw-hero__btn {
	width: auto;
}

@media (max-width: 639px) {
	.elementor-widget-cw-heading-default .cw-heading-default__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.elementor-widget-cw-heading-default .cw-heading-default__actions .cw-hero__btn {
		width: 100%;
		justify-content: center;
	}
}