/**
 * BBP V2 responsive stability layer.
 *
 * Loaded after the component styles. It does not redesign the pages; it
 * establishes one fluid sizing contract for browser zoom, desktop resizing,
 * tablet and mobile layouts.
 */

html:has(body.bbp-v2-responsive) {
	overflow-x: clip;
	scrollbar-gutter: stable;
}

body.bbp-v2-responsive {
	--bbp-v2-fluid-max: 1520px;
	--bbp-v2-fluid-gutter: clamp(24px, 3.2vw, 64px);
	--bbp-v2-fluid-gap: clamp(20px, 2.2vw, 40px);
	--bbp-v2-fluid-section: clamp(68px, 7vw, 132px);
	max-width: 100%;
	overflow-x: clip;
	text-size-adjust: 100%;
}

body.bbp-v2-responsive :where(
	.elementor,
	.elementor-section-wrap,
	.elementor-location-header,
	.elementor-location-footer,
	.e-con,
	.e-con-inner,
	.elementor-element,
	.elementor-widget,
	.elementor-widget-container,
	[class^="bbp-v2-"],
	[class*=" bbp-v2-"]
) {
	box-sizing: border-box;
	min-width: 0;
}

body.bbp-v2-responsive :where(
	.elementor,
	.elementor-section-wrap,
	.elementor-location-header,
	.elementor-location-footer,
	main,
	.e-con,
	.e-con-inner,
	.elementor-widget-container
) {
	max-width: 100%;
}

body.bbp-v2-responsive :where(img, picture, video, canvas, svg, iframe) {
	max-width: 100%;
}

body.bbp-v2-responsive :where(img, video) {
	height: auto;
}

body.bbp-v2-responsive :where(h1, h2, h3, h4, p, li, dd, dt) {
	overflow-wrap: break-word;
}

body.bbp-v2-responsive :where(input, select, textarea, button) {
	max-width: 100%;
}

body.bbp-v2-responsive :where(.bbp-v2-fluid-inner, .bbp-page-inner) {
	margin-inline: auto;
	width: min(calc(100% - (var(--bbp-v2-fluid-gutter) * 2)), var(--bbp-v2-fluid-max));
}

body.bbp-v2-responsive :where(.bbp-v2-fluid-section, .bbp-page-section) {
	max-width: 100%;
	width: 100%;
}

/* Keep every plugin canvas inside the usable viewport. */
body.bbp-v2-responsive :where(
	.bbp-v2-header,
	.bbp-v2-hero,
	.bbp-v2-family-stage,
	.bbp-v2-process,
	.bbp-v2-products,
	.bbp-v2-milestone,
	.bbp-v2-related,
	.bbp-v2-rfq
) {
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

body.bbp-v2-responsive :where(
	.bbp-v2-hero__viewport,
	.bbp-v2-family-stage__viewport,
	.bbp-v2-process__viewport,
	.bbp-v2-products__viewport,
	.bbp-v2-recommendations__viewport
) {
	max-width: 100%;
	overflow: hidden;
}

body.bbp-v2-responsive :where(
	.bbp-v2-hero__track,
	.bbp-v2-family-stage__track,
	.bbp-v2-process__track,
	.bbp-v2-products__track,
	.bbp-v2-recommendations__track
) {
	min-width: 0;
}

body.bbp-v2-responsive :where(
	.bbp-v2-hero__slide,
	.bbp-v2-family-stage__slide,
	.bbp-v2-process__slide,
	.bbp-v2-products__slide,
	.bbp-v2-recommendations__slide
) {
	flex-shrink: 0;
	max-width: 100%;
	min-width: 0;
}

body.bbp-v2-responsive :where(
	.bbp-v2-hero__media img,
	.bbp-v2-page-hero img,
	.bbp-v2-company-video__poster img,
	.bbp-v2-company-about__image img,
	.bbp-v2-company-quality__image img,
	.bbp-v2-contact-story__image img,
	.bbp-v2-service-support__image img,
	.bbp-v2-solutions-area-card__image img
) {
	display: block;
	height: 100%;
	max-width: none;
	object-fit: cover;
	width: 100%;
}

/* Keep copy legible at intermediate widths and never clip a long title. */
@media (max-width: 1200px) {
	body.bbp-v2-responsive .bbp-v2-hero__content {
		max-width: 100%;
		padding-left: clamp(24px, 5vw, 54px) !important;
		padding-right: clamp(24px, 5vw, 54px) !important;
	}

	body.bbp-v2-responsive .bbp-v2-hero__heading {
		font-size: clamp(38px, 7vw, 68px) !important;
		line-height: 1.02 !important;
		max-width: min(100%, 18ch);
		overflow-wrap: anywhere;
	}

	/*
	 * When no distinct tablet artwork was supplied, contain the desktop art.
	 * This preserves baked-in headings instead of cropping them at both edges.
	 */
	body.bbp-v2-responsive .bbp-v2-hero__slide:not(.has-tablet-art) .bbp-v2-hero__media img {
		background: var(--bbp-v2-brand-dark);
		object-fit: contain;
	}
}

body.bbp-v2-responsive :where(
	.bbp-v2-product-card img,
	.bbp-v2-family-stage__media img,
	.bbp-v2-products__media img
) {
	display: block;
	max-height: 100%;
	object-fit: contain;
	width: 100%;
}

body.bbp-v2-responsive :where(
	.bbp-v2-milestone__factory,
	.bbp-v2-products-directory--reference,
	.bbp-v2-products-reference-banner,
	.bbp-v2-solutions-reference-banner,
	.bbp-v2-contact-reference-banner
) {
	max-width: 100dvw;
}

body.bbp-v2-responsive :where(
	.bbp-v2-home-capabilities__grid,
	.bbp-v2-products__grid,
	.bbp-v2-solutions-areas__grid,
	.bbp-v2-service-process__grid,
	.bbp-v2-service-support__cards,
	.bbp-v2-related__grid,
	.bbp-v2-contact-details__grid,
	.bbp-v2-company-documents
) > * {
	min-width: 0;
}

body.bbp-v2-responsive :where(table) {
	max-width: 100%;
}

body.bbp-v2-responsive :where(.bbp-v2-table-scroll) {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
}

@media (max-width: 1200px) {
	body.bbp-v2-responsive {
		--bbp-v2-fluid-gutter: clamp(24px, 3.4vw, 40px);
	}

	body.bbp-v2-responsive :where(
		.bbp-v2-home-capabilities__grid,
		.bbp-v2-solutions-areas__grid,
		.bbp-v2-service-support__cards,
		.bbp-v2-related__grid,
		.bbp-v2-contact-details__grid,
		.bbp-v2-company-documents
	) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1024px) {
	body.bbp-v2-responsive {
		--bbp-v2-fluid-gutter: clamp(22px, 3.5vw, 32px);
		--bbp-v2-fluid-section: clamp(58px, 8vw, 92px);
	}

	body.bbp-v2-responsive :where(
		.bbp-v2-company-about__row,
		.bbp-v2-company-quality__row,
		.bbp-v2-contact-story__row,
		.bbp-v2-service-intro__row,
		.bbp-v2-products-ordering,
		.bbp-v2-contact-rfq-shell,
		.bbp-v2-rfq__layout
	) {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.bbp-v2-responsive :where(
		.bbp-v2-company-about__image,
		.bbp-v2-company-quality__image,
		.bbp-v2-contact-story__image,
		.bbp-v2-service-support__visual
	) {
		min-height: clamp(320px, 48vw, 560px);
	}
}

@media (max-width: 767px) {
	body.bbp-v2-responsive {
		--bbp-v2-fluid-gutter: clamp(18px, 5vw, 22px);
		--bbp-v2-fluid-gap: 20px;
		--bbp-v2-fluid-section: clamp(48px, 14vw, 74px);
	}

	body.bbp-v2-responsive :where(
		.bbp-v2-home-capabilities__grid,
		.bbp-v2-solutions-areas__grid,
		.bbp-v2-service-process__grid,
		.bbp-v2-service-support__cards,
		.bbp-v2-related__grid,
		.bbp-v2-contact-details__grid,
		.bbp-v2-company-documents
	) {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.bbp-v2-responsive .bbp-v2-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	body.bbp-v2-responsive :where(
		.bbp-v2-company-about__image,
		.bbp-v2-company-quality__image,
		.bbp-v2-contact-story__image,
		.bbp-v2-service-support__visual
	) {
		min-height: clamp(230px, 72vw, 360px);
	}

	body.bbp-v2-responsive :where(
		.bbp-v2-page-hero h1,
		.bbp-v2-page-hero h2,
		.bbp-v2-hero__heading
	) {
		font-size: clamp(34px, 10vw, 56px) !important;
		line-height: 1.04 !important;
	}

	body.bbp-v2-responsive .bbp-v2-hero__content {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	body.bbp-v2-responsive .bbp-v2-hero__slide:not(.has-mobile-art) .bbp-v2-hero__media img {
		object-fit: contain;
	}

	body.bbp-v2-responsive .bbp-v2-hero__slide.has-mobile-art .bbp-v2-hero__media img {
		object-fit: cover;
	}

	body.bbp-v2-responsive :where(.bbp-v2-floating-tools, .bbp-v2-quick-bar) {
		max-width: calc(100vw - 12px);
	}
}

@media (max-width: 420px) {
	body.bbp-v2-responsive .bbp-v2-products__grid {
		gap: 12px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.bbp-v2-responsive *,
	body.bbp-v2-responsive *::before,
	body.bbp-v2-responsive *::after {
		scroll-behavior: auto !important;
	}
}