/* Digital Cube — Salient mobile QA (visual-qa.md §5b / §5c) */

/* Prevent animated_circle toggle icons stretching when titles wrap on phone */
@media only screen and (max-width: 690px) {
	.nectar-toggle-wrap .nectar-toggle-icon {
		aspect-ratio: 1 / 1;
		width: 40px !important;
		height: auto !important;
		align-self: center;
		flex-shrink: 0;
	}

	.nectar-toggle-wrap .nectar-toggle-heading {
		align-items: center;
	}

	/*
	 * Equal-height flex rows keep 2–3 columns side-by-side below 690px, which
	 * pushes text to ~60–65px (second/third column offset). Stack them.
	 */
	/* Flexbox columns (split stats, parallax panels) — stack on phone */
	.wpb_column[class*="flex_layout_desktop"],
	.wpb_column.flex_layout_desktop_row,
	.wpb_column.flex_layout_desktop_column {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.wpb_column.child_column {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Parallax / performance stat rows — Salient keeps 60px phone padding without overrides */
	.wpb_row.parallax_section .row_col_wrap_12,
	.wpb_row.parallax_section .row_col_wrap_12_inner {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.wpb_row.parallax_section .wpb_column {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Bootstrap sm columns stay multi-column in flex rows — force full width on phone */
	.vc_column_container[class*="vc_col-sm-"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	.wpb_column[class*="flex_layout_desktop"] .inner_row,
	.wpb_column.flex_layout_desktop_row .inner_row {
		width: 100% !important;
		max-width: 100% !important;
	}

	.wpb_row.vc_row-flex.vc_row-o-equal-height .row_col_wrap_12,
	.wpb_row.vc_row-flex.vc_row-o-equal-height .row_col_wrap_12_inner,
	.wpb_row.inner_row .row_col_wrap_12_inner {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}

	.wpb_row.vc_row-flex.vc_row-o-equal-height .row_col_wrap_12 > .wpb_column,
	.wpb_row.vc_row-flex.vc_row-o-equal-height .row_col_wrap_12_inner > .wpb_column,
	.wpb_row.inner_row .row_col_wrap_12_inner > .wpb_column {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		min-width: 0 !important;
		transform: none !important;
	}

	/* Release CSS sticky columns on phone so stacked layout scrolls normally */
	.nectar-sticky-column-css,
	.nectar-sticky-column-css .n-sticky,
	.nectar-sticky-column-css .wpb_column {
		position: relative !important;
		top: auto !important;
		height: auto !important;
		transform: none !important;
	}

	/*
	 * Sticky-media "layered card reveal" sections are authored in reverse DOM
	 * order (03, 02, 01) so the desktop scroll reveal plays 01 -> 02 -> 03.
	 * When the effect is disabled on phone, Salient stacks them in raw DOM order
	 * (column), which shows them reversed. Flip back to natural reading order.
	 * Scoped to the exact phone breakpoint Salient uses to disable the effect.
	 */
	body .nectar-sticky-media-sections.disable-effect--phone .nectar-sticky-media-section__content__wrap {
		flex-direction: column-reverse !important;
	}
}

/*
 * Desktop-only background-image "cards"/bands (e.g. About page value cards,
 * Services "Clarity first" band) keep their tall fixed-pixel desktop
 * min-height on tablet/phone, but their background image is set to load on
 * desktop only. The result on mobile is a very tall, near-empty box with a
 * line of text floating in it. Collapse those columns to content height on
 * mobile. Heroes are excluded because they size with svh and DO load a mobile
 * background image. Columns that provide their own mobile background image
 * (a .viewport-mobile layer) are also left untouched.
 */
@media only screen and (max-width: 999px) {
	.wpb_column[class*="min_height_desktop_"]:not([class*="svh"]):has(> .vc_column-inner > .column-image-bg-wrap.viewport-desktop):not(:has(.column-image-bg-wrap.viewport-mobile)) > .vc_column-inner {
		min-height: 0 !important;
	}
}

/*
 * NOTE: Oversized mobile section spacing is fixed NATIVELY via each row's
 * Salient phone padding settings (top_padding_phone / bottom_padding_phone),
 * applied across all pages to mirror the tuned B2B page (160px -> 60px,
 * 200px -> 80px, 260px -> 100px; heroes -> 36px top / 0 bottom). That keeps the
 * spacing editable in the WPBakery builder instead of being silently overridden.
 *
 * The ONE thing below that cannot be done natively: Salient has no per-device
 * "column margin" field. A hero (first-section) whose columns stack on phone
 * inherits its DESKTOP column_margin (often 60px) as a margin between the
 * heading and the element below it, creating a large dead gap. Tighten just the
 * hero's stacked-column gap on phone so the heading sits close to its media.
 */
@media only screen and (max-width: 690px) {
	.wpb_row.first-section .wpb_column:not([class*="vc_col-xs-"]):not(.child_column):not(:last-child),
	.vc_row.first-section .wpb_column:not([class*="vc_col-xs-"]):not(.child_column):not(:last-child) {
		margin-bottom: 20px !important;
	}
}