/* ==========================================================================
   Maison Dunand — Connected Module (v2.0.12)
   --------------------------------------------------------------------------
   The plugin no longer owns column backgrounds, overlays, or column parallax —
   Salient's native vc_column_inner handles all of that. We own only:
     - the transparent wrapper div that scopes JS to one module instance
     - the endpoint content slot (positioned above other column content,
       with optional text parallax and responsive padding)
     - the SVG curve that spans both endpoints
     - an opt-in row min-height (via `Row min-height` param → custom prop)
     - an optional centered background image layer (via the Settings
       "Centered Image" tab → JS relocates it to be a direct child of
       the wrap on init, so it spans both columns and stays outside any
       Salient column-level parallax transforms)
   ========================================================================== */

/* Wrapper — layout-invisible so Salient's inner row/columns keep their own
   native box model. Position:relative so the absolutely-positioned SVG can
   anchor to it. `isolation:isolate` forces a fresh stacking context so
   Salient's `.wpb_row > .span_12 { z-index: 10 }` can't escape upward and
   paint the column wrap above our curve. */
.mdc-connected-wrap {
	position: relative;
	isolation: isolate;
}

/* Row min-height — opt in via the `Row min-height` param on the parent
   shortcode (emits `--mdc-row-min-height` inline on the wrapper). The
   min-height is applied at every level of the Salient column tree so it
   cascades down to the `.wpb_wrapper` inside each column — that's the
   element the absolutely-positioned endpoint anchors against, so both
   columns stretch to the same minimum height even if one contains only
   an endpoint. Columns with MORE content still grow independently — set
   the var larger than your tallest column if you need them visually
   locked (or use Salient's native row "Equal Column Heights" option).
   Default 0 = no effect on pages that don't set the var.

   NOTE: we do NOT touch `display` / flex / widths anywhere in the chain
   below — Salient owns column widths via `vc_col-sm-*`, and overriding
   them leads to 60/40 style splits. This rule only affects min-height. */
.mdc-connected-wrap > .wpb_row,
.mdc-connected-wrap > .vc_row_inner,
.mdc-connected-wrap .row_col_wrap_12_inner,
.mdc-connected-wrap [class*="vc_col-"],
.mdc-connected-wrap .wpb_column,
.mdc-connected-wrap .vc_column-inner,
.mdc-connected-wrap .vc_column-inner > .wpb_wrapper {
	min-height: var(--mdc-row-min-height, 0);
}

/* Endpoint anchor — the endpoint uses position:absolute;inset:0 to overlay
   the column without taking flow space. `inset:0` anchors to the nearest
   POSITIONED ancestor, so we promote `.wpb_wrapper` to position:relative.
   That puts the endpoint's anchor INSIDE Salient's column padding (the
   `.vc_column-inner` padding stays around the overlay, just like the rest
   of the column content). Scoped to our wrapper so we never affect other
   columns on the page.

   We ALSO make .vc_column-inner display:flex with a flex-growing wpb_wrapper
   child. Why: when a column has no flow-producing content (e.g. the typical
   "empty left column with only an endpoint and maybe a centered background
   image"), .wpb_wrapper naturally collapses to ~1px tall. Salient overrides
   our cascaded `min-height: var(--mdc-row-min-height)` on .wpb_wrapper (same
   selector specificity, later in source order), so the cascade alone isn't
   enough. Flex-grow sidesteps specificity entirely: wpb_wrapper stretches
   to fill vc_column-inner's available height, giving the absolutely-
   positioned endpoint a real anchor box with genuine parallax travel room.
   vc_column-inner IS always row-tall (via Salient's equal-height flex or
   our own min-height cascade further up), so this is a definite-height
   parent for wpb_wrapper to grow into.

   wpb_wrapper is ALSO itself a flex column. Its flow children (Salient
   image blocks, text blocks, etc.) are vertically aligned per the
   `--mdc-content-align` custom prop (set by the `content_align` shortcode
   param, default `center`). The endpoint is position:absolute and so is
   out of flex flow — it still anchors via inset:0 against wpb_wrapper,
   unaffected by this alignment. This gives the common pattern (column
   with an endpoint + a separate Salient image block, where the image
   should sit at the vertical center of the tall column) the right
   default without touching the endpoint's absolute positioning. */
.mdc-connected-wrap .vc_column-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.mdc-connected-wrap .vc_column-inner > .wpb_wrapper {
	position: relative;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: var(--mdc-content-align, center);
}

/* Settings data node is invisible but we belt-and-braces it with display:none
   in case a theme overrides [hidden]. */
.mdc-settings-data { display: none !important; }

/* Centered background image — optional layer behind the columns when the
   Settings "Centered Image" tab is configured. Sits at z-index 0 inside
   the wrap's isolated stacking context, so Salient's own column z-index:10
   still floats above it. Column-level backgrounds (if set on either
   vc_column_inner) will occlude this layer — keep those off when using
   this mode. `pointer-events:none` lets clicks pass through to content.
   Outer wrapper owns the vertical insets (top/bottom padding in the
   column stack) so the image can breathe above the row's own padding. */
.mdc-connected__bg {
	position: absolute;
	left: 0;
	right: 0;
	top:    var(--mdc-bg-top, 0);
	bottom: var(--mdc-bg-bot, 0);
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
/* Inner image element — explicit width (defaults to 100%) plus
   `margin-inline:auto` with left/right:0 centers the image horizontally
   inside the wrapper when `--mdc-bg-w` is set to something smaller than
   100%. `background-size:cover` keeps the photo filling whatever box the
   user's width+padding produces. */
.mdc-connected__bg-img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: var(--mdc-bg-w, 100%);
	max-width: 100%;
	margin-inline: auto;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Endpoint content slot — overlays the native Salient column it lives in
   (Content-Trail pattern). `position:absolute; inset:0` fills the column
   without taking flow space, so other column content (images, blocks)
   pushes the column to its natural height and the endpoint floats above
   it. `pointer-events:none` keeps clicks passing through the empty air
   around the text to the content below; the inner parallax wrapper opts
   back in so links / buttons inside the endpoint still work. */
.mdc-endpoint {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
	pointer-events: none;
}
.mdc-endpoint--left  { }
.mdc-endpoint--right { }

/* Parallax wrapper — the thing JS translateY's on scroll. Shrinks to its
   content so Start Y / End Y % has real travel room inside the column. */
.mdc-endpoint__parallax {
	position: relative;
	pointer-events: auto;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	/* Shrink-to-content so align-items (cross-axis) actually shifts it.
	 * Long children still wrap inside the safe zone via max-width:100%. */
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
}
.mdc-endpoint__parallax img { max-width: 100%; height: auto; display: block; }
.mdc-endpoint__parallax p:first-child { margin-top: 0; }
.mdc-endpoint__parallax p:last-child  { margin-bottom: 0; }

.mdc-endpoint__content {
	display: block;
	max-width: 100%;
}

/* SVG overlay — spans the entire wrapper and sits above both columns.
   z-index 50 beats Salient's `.wpb_row > .span_12 { z-index: 10 }` and
   typical column overlay stacks; `pointer-events:none` keeps clicks
   passing through to the columns below. */
.mdc-connected-svg {
	position: absolute;
	inset: 0;
	width:  100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 50;
}
.mdc-connected-path {
	fill: none;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	transition: opacity 0.3s ease;
}
.mdc-connected-wrap:not(.is-ready) .mdc-connected-path { opacity: 0; }

/* Mobile (below the 2-col breakpoint that Salient uses to collapse
   vc_column_inner to 100%). Three things happen here:
     1. Hide the connecting curve — there's nothing to "trail" once the
        columns stack.
     2. Drop the endpoint back into normal flow. On desktop the endpoint
        is `position:absolute; inset:0` so it overlays its column and
        floats above other column content (the Content-Trail idiom). On
        mobile we don't need that — and worse, when a column's only
        content is the endpoint itself, an absolute endpoint produces no
        flow height. Without Salient's row-flex equal-height kicking in
        (it doesn't, because columns are now stacked), the column
        collapses to 0 and the endpoint visually disappears. Putting the
        endpoint in flow makes the column size naturally to the
        endpoint's intrinsic content.
     3. Disable the parallax transform — the endpoint is no longer an
        overlay, so translating it would just shift normal flow content. */
@media ( max-width: 767px ) {
	.mdc-connected-svg { display: none; }
	.mdc-connected-wrap .mdc-endpoint {
		position: relative;
		inset: auto;
	}
	.mdc-connected-wrap .mdc-endpoint__parallax {
		transform: none !important;
	}
}

/* Reduced-motion — freeze text parallax at its resting position. */
@media ( prefers-reduced-motion: reduce ) {
	.mdc-endpoint__parallax { transform: none !important; }
}