/* InnerG Hero widgets (Split + Full Width) — structural layout only;
   colour/typography/spacing are controlled per-instance via Elementor. */

/* The Hero's containing section is meant to be true full-bleed (see the
   user's "eliminate the margins" request) — normally set via that
   section's own "Column Gap: No Gap" setting, but that's page DATA, not
   code, and re-saving the page in the Elementor editor (e.g. after adding
   a slide) can silently revert it back to Elementor's ~10px default
   .elementor-widget-wrap padding. This :has() rule makes the zero-padding
   a property of the WIDGET itself instead, so it holds regardless of
   whatever the section's own gap setting happens to be. */
.elementor-widget-wrap:has( > .elementor-widget-innerg-hero-split ),
.elementor-widget-wrap:has( > .elementor-widget-innerg-hero-fullwidth ) {
	/* !important is deliberate: Elementor's own rule for this
	   (.elementor-column-gap-default > .elementor-column > .elementor-element-populated)
	   is a 3-class selector (0,3,0), which beats this :has() rule's 2-class
	   specificity (0,2,0) regardless of source order. Out-specificity-matching
	   Elementor's exact selector would be fragile against version changes;
	   !important is the appropriate tool for reliably overriding a
	   third-party page builder's own structural default. */
	padding: 0 !important;
}

/* ---------- Split ---------- */

/* CSS Grid (not Flexbox) for the two-pane split — a flex row's own auto
   height, when a child is itself a flex/grid container with growing
   content, doesn't reliably expand to fit that nested content (confirmed:
   the row silently settled at min-height regardless of how tall .text's
   own children actually needed to be, letting .text's overflow:hidden
   clip Stats away entirely on a short viewport instead of visibly
   overlapping it). Grid's row-track sizing correctly measures each
   column's real content height through nested formatting contexts, which
   is exactly the property this needs: the row must always grow to fit
   whichever pane needs more room, never clip either one. */
.innerg-hero-split {
	--innerg-hero-text-width: 55%;
	position: relative;
	display: grid;
	grid-template-columns: var( --innerg-hero-text-width ) 1fr;
	align-items: stretch;
}

/* When the Header is overlaying (see Header_Renderer::filter_body_class()),
   it's removed from flow and pinned to the viewport, so without this the
   Hero's own content would start at y:0 hidden underneath it — box-sizing:
   border-box (global default) keeps this additive within min-height rather
   than growing past it, matching the reference's own min-h-screen + pt-16
   combination exactly. */
body.innerg-header-overlay .innerg-hero-split,
body.innerg-header-overlay .innerg-hero-full {
	padding-top: var( --header-height, 64px );
}

.innerg-hero-split__text {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	/* Horizontal padding matches the reference's responsive px-8/md:px-16/
	   lg:px-20/xl:px-28 steps below; vertical (py-24) doesn't change. */
	padding: 6rem 2rem;
}

/* CSS Grid "stack" technique — same pattern already used by Membership's
   carousel cards: every slide-text shares this one grid area, so the box's
   height is always the TALLEST slide's own natural content height, never
   an external fixed/vh value. This is what keeps Stats' position stable
   across slide switches (previously via a hard-locked viewport-height
   that could be shorter than the slide's actual text, letting the text
   visually overlap Stats on short viewports) — and dropping the old
   min-height:0 escape hatch restores flex's default min-content floor, so
   this box can never be squeezed shorter than its content needs. */
.innerg-hero-split__slides {
	position: relative;
	display: grid;
	flex: 1 1 auto;
}

@media ( min-width: 768px ) {
	.innerg-hero-split__text {
		padding-inline: 4rem;
	}
}

@media ( min-width: 1024px ) {
	.innerg-hero-split__text {
		padding-inline: 5rem;
	}
}

@media ( min-width: 1280px ) {
	.innerg-hero-split__text {
		padding-inline: 7rem;
	}
}

.innerg-hero-split__decoration {
	position: absolute;
	inset-inline-start: -6rem;
	bottom: -6rem;
	width: 35rem;
	max-width: none;
	height: auto;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
}

.innerg-hero-split__eyebrow {
	position: relative;
	font-size: 0.75rem; /* 12px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --accent );
	margin-block-end: 2rem;
}

.innerg-hero-split__heading {
	position: relative;
	font-family: var( --font-serif );
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var( --brand-dark, var( --foreground ) );
	margin-block-end: 2rem;
	font-size: 3rem; /* 48px, mobile */
}

@media ( min-width: 768px ) {
	.innerg-hero-split__heading {
		font-size: 3.75rem; /* 60px */
	}
}

@media ( min-width: 1024px ) {
	.innerg-hero-split__heading {
		font-size: 5.5rem; /* 88px */
	}
}

@media ( min-width: 1536px ) {
	.innerg-hero-split__heading {
		font-size: 6rem; /* 96px */
	}
}

.innerg-hero-split__description {
	position: relative;
	font-size: 1.0625rem; /* 17px */
	line-height: 1.625;
	max-width: 28rem;
	color: var( --muted-foreground );
	margin-block-end: 2.5rem;
}

.innerg-hero-split__media {
	grid-column: 2;
	position: relative;
	overflow: hidden;
	min-height: 50vh;
}

.innerg-hero-split--media-left .innerg-hero-split__text {
	grid-column: 2;
}

.innerg-hero-split--media-left .innerg-hero-split__media {
	grid-column: 1;
}

.innerg-hero-split__slide-media {
	display: none;
}

/* Every slide-text shares this one grid area (see .innerg-hero-split__slides
   above) at all times — inactive ones are invisible but still measured for
   layout via visibility:hidden (not display:none), which is what makes the
   box size to the TALLEST slide rather than whichever one is currently
   active, at any viewport size. */
.innerg-hero-split__slide-text {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.innerg-hero-split__slide-text.is-active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	position: relative;
	z-index: 1;
}

/* Sliders specifically (2+ slides): top-anchor instead of centering, so a
   slide's own content length never shifts where its eyebrow/heading start
   — vertical centering alone would still visibly re-center a shorter
   slide's block within the same fixed box, which reads as "jumping" even
   though Stats itself no longer moves. Single-slide heroes keep the
   centered look above (matching the reference exactly) since there's only
   ever one state to render, so nothing can shift between slides. */
.innerg-hero-split--is-slider .innerg-hero-split__slide-text.is-active {
	justify-content: flex-start;
}

/* Pins Buttons (and its own margin-block-end gap) to the BOTTOM of the
   fixed-height slide box, via flexbox's auto-margin trick — the space this
   absorbs is whatever's left after eyebrow+heading+description above it,
   so a slide with a shorter/longer description only changes an invisible
   gap, never the buttons' own Y position. Combined with the top-anchor
   above, this is what actually eliminates the shift entirely (top-anchor
   alone still let Buttons float up/down with the content above it). */
.innerg-hero-split--is-slider .innerg-hero-split__buttons {
	margin-block-start: auto;
}

.innerg-hero-split__slide-media.is-active {
	display: block;
}

.innerg-hero-split__slide-media {
	position: absolute;
	inset: 0;
}

/* Compound selector (2 classes) is deliberate: Elementor's own
   `.elementor img { height: auto; max-width: 100% }` reset is 0,1,1
   specificity, which beats a single-class `.innerg-hero-split__image`
   (0,1,0) for `height` — silently shrinking the image to its intrinsic
   aspect ratio instead of filling the pane. Nesting under the slide
   wrapper class reaches 0,2,0, safely outranking Elementor's rule. */
.innerg-hero-split__slide-media .innerg-hero-split__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.innerg-hero-split__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.innerg-hero-split__caption {
	position: absolute;
	inset-inline: 2.5rem;
	bottom: 2.5rem;
	z-index: 2;
}

.innerg-hero-split__caption-eyebrow {
	font-size: 0.75rem; /* 12px */
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: rgba( 255, 255, 255, 0.7 );
	margin-block-end: 0.25rem;
}

.innerg-hero-split__caption-heading {
	font-family: var( --font-serif );
	font-weight: 500;
	font-size: 1.375rem; /* 22px */
	color: #fff;
}

.innerg-hero-split__buttons {
	position: relative;
	margin-block-end: 4rem;
}

.innerg-hero-split__stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1.5rem;
	/* No margin-top here — .innerg-hero-split__buttons' own margin-bottom
	   above is the entire gap to this border-top line, matching the
	   reference's mb-16-then-pt-10 (not mb-16-plus-separate-margin-top). */
	padding-block-start: 2.5rem;
	border-top: 1px solid var( --border, #ddd );
}

.innerg-hero-split__stat-number {
	font-family: var( --font-serif );
	font-weight: 600;
	font-size: 1.75rem; /* 28px */
	color: var( --brand-dark, var( --foreground ) );
}

.innerg-hero-split__stat-label {
	font-size: 0.75rem; /* 12px */
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var( --muted-foreground );
	margin-block-start: 0.375rem;
}

.innerg-hero-split__dots {
	position: absolute;
	bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	z-index: 5;
}

.innerg-hero-split__dots--pos-center {
	left: 50%;
	transform: translateX( -50% );
}

.innerg-hero-split__dots--pos-left {
	inset-inline-start: 1.5rem;
}

.innerg-hero-split__dots--pos-right {
	inset-inline-end: 1.5rem;
}

.innerg-hero-split__dot {
	border: 0;
	padding: 0;
}

.innerg-hero-split__dots--dots .innerg-hero-split__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.4 );
}

.innerg-hero-split__dots--dots .innerg-hero-split__dot.is-active {
	background: #fff;
}

/* Numbers pagination ("01 — 04") — same .innerg-hero-split__dot class (so
   hero-slider.js's existing is-active toggling needs no changes), styled as
   plain text with no background box at all (the base .dot rule's circle
   background is only ever applied within --dots via the pagination_color/
   pagination_active_color controls' scoped selectors — see Split_Widget.php). */
.innerg-hero-split__dots--numbers .innerg-hero-split__dot {
	width: auto;
	height: auto;
	border-radius: 0;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
	color: rgba( 255, 255, 255, 0.4 );
}

.innerg-hero-split__dots--numbers .innerg-hero-split__dot.is-active {
	color: #fff;
}

.innerg-hero-split__dot-line {
	width: 1.75rem; /* ~3x an em-dash glyph's visual width */
	height: 1px;
	background: rgba( 255, 255, 255, 0.4 );
}

.innerg-hero-split__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.3 );
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.innerg-hero-split__arrow:hover {
	background: rgba( 0, 0, 0, 0.5 );
}

.innerg-hero-split__arrow svg {
	width: 18px;
	height: 18px;
}

.innerg-hero-split__arrow--prev {
	inset-inline-start: 1rem;
}

.innerg-hero-split__arrow--next {
	inset-inline-end: 1rem;
}

.innerg-hero-split__scroll-cue,
.innerg-hero-full__scroll-cue {
	cursor: pointer;
	position: absolute;
	bottom: 2.25rem; /* 36px */
	/* Physical, not logical: this element sets its own writing-mode below,
	   and inset-inline-* resolves against THIS element's writing mode, not
	   the document's — under vertical-lr that maps inline-end to `bottom`,
	   not `right`, silently colliding with the line above and leaving the
	   cue with no horizontal offset at all (collapsing to its static
	   position, flush left). An explicit [dir='rtl'] override below does
	   the flip instead. */
	right: 3rem; /* 48px */
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var( --font-mono ), monospace;
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.7 );
	z-index: 5;
	/* Vertical reading direction regardless of page direction — this is a
	   fixed visual motif (rotated label beside a vertical line), not
	   text content that should mirror in RTL. */
	writing-mode: vertical-lr;
	text-orientation: mixed;
	border: 0;
	background: none;
	padding: 0;
}

[dir='rtl'] .innerg-hero-split__scroll-cue,
[dir='rtl'] .innerg-hero-full__scroll-cue {
	right: auto;
	left: 3rem;
}

.innerg-hero-split__scroll-text,
.innerg-hero-full__scroll-text {
	color: inherit;
}

.innerg-hero-split__scroll-line,
.innerg-hero-full__scroll-line {
	width: 1px;
	height: 3.25rem; /* 52px */
	background: linear-gradient( to bottom, #ffffff, #fdfbf7, transparent );
	animation: innerg-scroll-cue-fill 1.8s ease-in-out infinite;
}

/* Line grows from the top down to full height, then — instead of just
   disappearing — collapses back from the bottom up, so it always reads as
   "filling then draining" rather than snapping/resetting. */
@keyframes innerg-scroll-cue-fill {
	0% {
		transform: scaleY( 0 );
		transform-origin: top;
	}

	50% {
		transform: scaleY( 1 );
		transform-origin: top;
	}

	50.1% {
		transform-origin: bottom;
	}

	100% {
		transform: scaleY( 0 );
		transform-origin: bottom;
	}
}

@media ( max-width: 900px ) {
	.innerg-hero-split {
		grid-template-columns: 1fr;
		height: auto !important; /* stacks text above media — a viewport-height box doesn't apply here at all. */
	}

	/* Both panes collapse into the single mobile column regardless of
	   which desktop column (1 or 2, incl. the --media-left swap) they were
	   explicitly assigned above — order (below) controls stacking here. */
	.innerg-hero-split__text,
	.innerg-hero-split__media {
		grid-column: 1;
	}

	.innerg-hero-split__media {
		min-height: 60vh;
	}

	.innerg-hero-split__stats {
		grid-template-columns: repeat( 2, 1fr );
	}

	/* "Reverse order on mobile" (Layout & Behaviour) — independent of the
	   desktop Media position (left/right) setting above, which this
	   overrides via source order here rather than earlier, higher up. */
	.innerg-hero-split--mobile-media-first .innerg-hero-split__media {
		order: 1;
	}

	.innerg-hero-split--mobile-media-first .innerg-hero-split__text {
		order: 2;
	}
}

/* ---------- Full width ---------- */

.innerg-hero-full {
	position: relative;
	display: flex;
	overflow: hidden;
}

/* Same Elementor `.elementor img` specificity issue as the Split image
   above — compound selector needed to win on `height`. */
.innerg-hero-full .innerg-hero-full__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.innerg-hero-full__overlay {
	position: absolute;
	inset: 0;
}

/* Gradient overlay style: two independent, optional fade layers —
   vertical (dark top or bottom edge) and horizontal (dark start or end
   edge, direction-aware so it still points at the content's own side
   once mirrored for RTL). Each layer's direction is picked via a
   modifier class from the widget's own settings rather than being
   fixed, and each carries its own colour/strength custom properties. */
.innerg-hero-full__overlay--v-bottom {
	background: linear-gradient(
		to top,
		color-mix( in oklab, var( --innerg-hero-gradient-v-color, #2b291a ) var( --innerg-hero-gradient-v-alpha, 55% ), transparent ) 0%,
		color-mix( in oklab, var( --innerg-hero-gradient-v-color, #2b291a ) var( --innerg-hero-gradient-v-mid-alpha, 30% ), transparent ) 50%,
		transparent 100%
	);
}

.innerg-hero-full__overlay--v-top {
	background: linear-gradient(
		to bottom,
		color-mix( in oklab, var( --innerg-hero-gradient-v-color, #2b291a ) var( --innerg-hero-gradient-v-alpha, 55% ), transparent ) 0%,
		color-mix( in oklab, var( --innerg-hero-gradient-v-color, #2b291a ) var( --innerg-hero-gradient-v-mid-alpha, 30% ), transparent ) 50%,
		transparent 100%
	);
}

.innerg-hero-full__overlay--h-start {
	background: linear-gradient(
		to right,
		color-mix( in oklab, var( --innerg-hero-gradient-h-color, #2b291a ) var( --innerg-hero-gradient-h-alpha, 85% ), transparent ) 0%,
		color-mix( in oklab, var( --innerg-hero-gradient-h-color, #2b291a ) var( --innerg-hero-gradient-h-mid-alpha, 45% ), transparent ) 50%,
		transparent 100%
	);
}

.innerg-hero-full__overlay--h-end {
	background: linear-gradient(
		to left,
		color-mix( in oklab, var( --innerg-hero-gradient-h-color, #2b291a ) var( --innerg-hero-gradient-h-alpha, 85% ), transparent ) 0%,
		color-mix( in oklab, var( --innerg-hero-gradient-h-color, #2b291a ) var( --innerg-hero-gradient-h-mid-alpha, 45% ), transparent ) 50%,
		transparent 100%
	);
}

[dir='rtl'] .innerg-hero-full__overlay--h-start {
	background: linear-gradient(
		to left,
		color-mix( in oklab, var( --innerg-hero-gradient-h-color, #2b291a ) var( --innerg-hero-gradient-h-alpha, 85% ), transparent ) 0%,
		color-mix( in oklab, var( --innerg-hero-gradient-h-color, #2b291a ) var( --innerg-hero-gradient-h-mid-alpha, 45% ), transparent ) 50%,
		transparent 100%
	);
}

[dir='rtl'] .innerg-hero-full__overlay--h-end {
	background: linear-gradient(
		to right,
		color-mix( in oklab, var( --innerg-hero-gradient-h-color, #2b291a ) var( --innerg-hero-gradient-h-alpha, 85% ), transparent ) 0%,
		color-mix( in oklab, var( --innerg-hero-gradient-h-color, #2b291a ) var( --innerg-hero-gradient-h-mid-alpha, 45% ), transparent ) 50%,
		transparent 100%
	);
}

.innerg-hero-full__eyebrow {
	font-size: 0.625rem; /* 10px */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin-block-end: 1.25rem; /* mb-5 */
}

.innerg-hero-full__heading {
	font-family: var( --font-serif );
	font-weight: 500;
	line-height: 1.03;
	font-size: 2.25rem; /* text-4xl = 36px */
	margin-block-end: 1rem; /* mb-4 */
}

@media ( min-width: 768px ) {
	.innerg-hero-full__heading {
		font-size: 3.75rem; /* md:text-6xl = 60px */
	}
}

.innerg-hero-full__description {
	font-size: 0.875rem; /* text-sm */
	line-height: 1.6;
	max-width: 24rem; /* max-w-sm */
}

.innerg-hero-full__back {
	position: absolute;
	z-index: 2;
	inset-block-start: 2.5rem;
	inset-inline-start: 2rem;
}

@media ( min-width: 768px ) {
	.innerg-hero-full__back {
		inset-inline-start: 4rem;
	}
}

.innerg-hero-full__back-link {
	font-size: 0.625rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

.innerg-hero-full__back-link:hover {
	color: rgba( 255, 255, 255, 0.8 );
}

/* Reference's own compiled build bumps several fixed 10px labels to 12px
   at 1024px+ (same pattern already confirmed for the CTA banner elsewhere
   in this stylesheet) — applies here to both the eyebrow and the back
   link, letter-spacing recalculated to keep the same em-relative tracking.
   Placed after both elements' base rules (not just after eyebrow's) since
   an equal-specificity rule wins by source order, not by where the media
   query "logically" belongs — the same lesson already learned once for
   the CTA banner's own 1024px bump. */
@media ( min-width: 1024px ) {
	.innerg-hero-full__eyebrow {
		font-size: 0.75rem; /* 12px */
		letter-spacing: 0.3em;
	}

	.innerg-hero-full__back-link {
		font-size: 0.75rem; /* 12px */
		letter-spacing: 0.25em;
	}
}

.innerg-hero-full__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-block-end: 2.5rem; /* mb-10 */
}

.innerg-hero-full__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media ( min-width: 640px ) {
	.innerg-hero-full__buttons {
		flex-direction: row;
	}
}

.innerg-hero-full__stat {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.innerg-hero-full__stat-icon {
	display: flex;
	flex-shrink: 0;
}

.innerg-hero-full__stat-icon svg {
	width: 14px;
	height: 14px;
}

.innerg-hero-full__stat-value {
	font-size: 0.875rem;
	font-weight: 500;
	margin: 0;
}

.innerg-hero-full__stat-label {
	font-size: 0.625rem;
	margin: 0;
}

.innerg-hero-full__inner {
	position: relative;
	z-index: 2;
	display: flex;
	/* Column, not the flex default (row): the "Vertical position"
	   control sets `justify-content` on this element expecting it to
	   move the content box up/down, which only works when the main
	   axis actually runs vertically. Without this, justify-content was
	   silently controlling horizontal position instead (and align-items
	   — needed for the "Horizontal position" control — had no effect at
	   all), which is why content position never worked correctly. */
	flex-direction: column;
	width: 100%;
	/* Padding comes entirely from the widget's own responsive
	   "Section edge padding" control (default matches this comment's
	   old hardcoded 3rem/1.5rem exactly). */
}

.innerg-hero-full__content {
	display: flex;
	flex-direction: column;
	width: 100%;
}