/*!/wp-content/plugins/prindustry-elements/elements/pr-hero/assets/pr-hero.css*//* ==========================================================================
   PRINDUSTRY HERO — from the site's real "shared base + home variant" CSS.
   Namespaced to .prhero-* so this widget's styles are fully isolated: they can
   only ever affect a Hero *widget* instance, never other markup that happens to
   use the original .prindustry-hero classes (e.g. a Raw HTML hero block on the
   same page). Colour hooks the builder can override:
     .prhero-accent          -> var(--h-accent, #90C9DC)
     .prhero-btn-primary bg  -> var(--h-primary, #f16721)
   Otherwise this matches the live hero. Other hero variants (brandportal /
   about / wide) are not bundled here — this element renders the home hero.
   ========================================================================== */

/* ---- Mulish font, self-hosted, loaded once ---- */
@font-face{font-family:'Mulish';src:url('https://prindustry.com/wp-content/uploads/2026/07/mulish-v18-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:optional;}
@font-face{font-family:'Mulish';src:url('https://prindustry.com/wp-content/uploads/2026/07/mulish-v18-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:optional;}
@font-face{font-family:'Mulish';src:url('https://prindustry.com/wp-content/uploads/2026/07/mulish-v18-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:optional;}
@font-face{font-family:'Mulish';src:url('https://prindustry.com/wp-content/uploads/2026/07/mulish-v18-latin-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:optional;}

/* ---- Full-width "breakout" + base ---- */
.prhero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	color: #fff;
	font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	min-height: var(--hero-min-height, 600px);
	padding-top: var(--hero-padding-top, 80px);
	background: var(--hero-bg);
}
.prhero * { box-sizing: border-box; }

/* ---- Decorative circles (top-left / bottom-right) ---- */
.prhero:before,
.prhero:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.prhero:before {
	width: var(--circle1-size, 900px);
	height: var(--circle1-size, 900px);
	left: var(--circle1-left, -360px);
	top: var(--circle1-top, -180px);
	background: var(--circle1-bg, rgba(23, 46, 75, .28));
	box-shadow: var(--circle1-shadow, none);
	border: var(--circle1-border, none);
}
.prhero:after {
	width: var(--circle2-size, 760px);
	height: var(--circle2-size, 760px);
	right: var(--circle2-right, -360px);
	bottom: var(--circle2-bottom, -360px);
	background: var(--circle2-bg, rgba(255, 255, 255, .10));
	box-shadow: var(--circle2-shadow, none);
	border: var(--circle2-border, none);
}

.prhero-bg-shadow {
	position: absolute;
	right: 4%;
	top: 22%;
	width: 720px;
	height: 360px;
	border-radius: 999px;
	background: rgba(23, 46, 75, .24);
	filter: blur(76px);
	z-index: 0;
}

/* ---- Grid structure ---- */
.prhero-inner {
	position: relative;
	z-index: 2;
	max-width: 1520px;
	margin: 0 auto;
	padding: var(--inner-padding, 120px 60px 40px);
	display: grid;
	grid-template-columns: var(--inner-columns, 54% 46%);
	align-items: center;
	gap: var(--inner-gap, 44px);
}

.prhero-copy {
	position: relative;
	z-index: 20;
	max-width: var(--copy-max-width, 760px);
	padding-left: var(--copy-padding-left, 20px);
}

/* ---- Eyebrow (small label above the title, optional) ---- */
.prhero-eyebrow {
	margin: 0 0 28px;
	display: inline-block;
	font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--eyebrow-size, 18px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: #f16721;
}
.prhero-eyebrow:after {
	content: "";
	display: block;
	width: var(--eyebrow-underline-width, 78px);
	height: 3px;
	margin-top: 14px;
	border-radius: 999px;
	background: #F47B34;
}

/* ---- Typography ---- */
.prhero h1 {
	margin: 0;
	max-width: var(--h1-max-width, 720px);
	font-family: 'Orkney', 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--h1-size, clamp(40px, 2.3vw, 50px));
	line-height: var(--h1-line-height, 1.15);
	letter-spacing: var(--h1-letter-spacing, -.03em);
	font-weight: 700;
	color: #fff;
	white-space: var(--h1-white-space, normal);
}
.prhero .prhero-accent { color: var(--h-accent, #90C9DC); }

.prhero h2 {
	margin: 34px 0 0;
	max-width: 650px;
	font-family: 'Orkney', 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(22px, 1.2vw, 24px);
	line-height: 1.3;
	color: #fff;
}

.prhero p {
	margin: var(--p-margin-top, 26px) 0 0;
	max-width: var(--p-max-width, 720px);
	font-size: var(--p-font-size, 18px);
	line-height: var(--p-line-height, 1.75);
	font-weight: 500;
	color: rgba(255, 255, 255, .92);
}

/* ---- Buttons ---- */
.prhero-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: var(--actions-margin-top, 48px);
}

.prhero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border-radius: 999px;
	text-decoration: none;
	font-family: 'Orkney', 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .06em;
	transition: .2s ease;
}
.prhero-btn:hover { transform: translateY(-2px); }

.prhero-btn-primary {
	background: var(--h-primary, #f16721);
	color: #fff !important;
	box-shadow: 0 14px 34px rgba(241, 103, 33, .28);
}
.prhero-btn-primary:hover {
	background: #ff741f;
	color: #fff !important;
}

.prhero-btn-secondary {
	background: #fff;
	color: #172e4b !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .13);
}
.prhero-btn-secondary:hover {
	background: #f7f9fb;
	color: #172e4b !important;
}

/* ---- Visual / images side ------------------------------------------------
   PROPORTIONAL COLLAGE (rebuilt)
   The three screenshots live inside an aspect-ratio-locked box and are sized
   and offset in PERCENTAGES of that box — widths/horizontal offsets as % of its
   width, vertical offsets as % of its height. Percentages resolve against this
   positioned box (never the viewport), so the whole collage scales as one unit
   at any width with no fragile units: no fixed pixels, no negative margins, no
   container-query fallbacks that could explode the images if a CSS optimiser or
   the theme interferes. The box reserves its own height (aspect-ratio), so the
   screenshots can never overflow into the sections above or below.
   ------------------------------------------------------------------------- */
.prhero-visual {
	position: relative;
	width: 100%;
	max-width: var(--visual-max-width, 640px);
	margin-inline: auto;
	aspect-ratio: var(--visual-ratio, 100 / 84);
	perspective: 1200px;
	overflow: visible;
}

.prhero-glow {
	position: absolute;
	right: 6%;
	top: 23%;
	width: 96%;
	height: 52%;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	filter: blur(70px);
	z-index: 0;
}

.prhero-screen {
	position: absolute;
	display: block;
	/* Cap at the collage box width as a hard safety net — even if a % width
	   below is stripped by an optimiser, the screenshot can never exceed its
	   box (the old collapse showed images blowing up to full-viewport width).
	   Salient's img{max-width:100%} would otherwise fight the widths. */
	max-width: 100% !important;
	height: auto;
	background: #fff;
	object-fit: cover;
	border-radius: 22px;
	transition: transform .3s ease, box-shadow .3s ease;
	box-shadow:
		0 16px 36px rgba(23, 46, 75, .18),
		0 44px 90px rgba(23, 46, 75, .22);
}

/* ---- Shared responsive hack: hero directly under a sticky header ---- */
@media (max-width: 1000px) {
	.home-hero-row {
		position: relative;
		z-index: 1;
		margin-top: -80px !important;
	}
	.home-hero-row .prhero {
		position: relative;
		z-index: 1;
		padding-top: 0 !important;
	}
	.home-hero-row .prhero-inner {
		padding-top: 150px !important;
	}
	header,
	.site-header,
	.elementor-location-header,
	.elementor-sticky,
	.elementor-sticky--active {
		z-index: 99999 !important;
	}
}

@media (max-width: 768px) {
	.prhero-actions {
		flex-direction: column;
		margin-top: 36px;
	}
	.prhero-btn {
		width: 100%;
	}
}

/* ==========================================================================
   VARIANT: HOMEPAGE HERO  (.prhero--home)
   ========================================================================== */
.prhero--home {
	--hero-min-height: 620px;
	--hero-padding-top: 80px;
	--hero-bg:
		radial-gradient(circle at 16% 40%, rgba(23, 46, 75, .34) 0, transparent 34%),
		radial-gradient(circle at 76% 18%, rgba(255, 255, 255, .14) 0, transparent 24%),
		linear-gradient(135deg, #3095b4 0%, #2f95b5 42%, #3095b4 100%);

	--circle1-bg: rgba(23, 46, 75, .28);
	--circle2-bg: rgba(255, 255, 255, .10);

	--inner-padding: 120px 60px 40px;
	--inner-columns: 54% 46%;
	--inner-gap: 44px;

	--p-max-width: 720px;

	/* The collage box. It bleeds a little past the column's right edge (the
	   overhanging main screenshot) and reserves its own height via aspect-ratio. */
	--visual-max-width: 680px;
	--visual-ratio: 100 / 86;
}

/* Desktop collage — all geometry is proportional: widths and horizontal
   offsets are % of the collage box width, vertical offsets % of its height. It
   scales identically at every width. The Layout tab can still override any of
   these per instance; blank keeps these design values. */
.prhero--home .prhero-main {
	width: var(--img1-w, 84%); right: var(--img1-right, -10%); top: var(--img1-top, 2%); z-index: 1; transform: rotate(var(--img1-rot, -1.2deg));
}
.prhero--home .prhero-main:hover {
	transform: rotate(var(--img1-rot, -1.2deg)) translateY(-8px) scale(1.015);
}
.prhero--home .prhero-editor {
	width: var(--img2-w, 60%); right: var(--img2-right, 3%); top: var(--img2-top, 48%); z-index: 4; transform: rotate(var(--img2-rot, -2.4deg));
}
.prhero--home .prhero-editor:hover {
	transform: rotate(var(--img2-rot, -2.4deg)) translateY(-8px) scale(1.015);
}
.prhero--home .prhero-shop {
	width: var(--img3-w, 37%); right: var(--img3-right, 49%); top: var(--img3-top, 31%); z-index: 3; transform: rotate(var(--img3-rot, 3deg));
}
.prhero--home .prhero-shop:hover {
	transform: rotate(var(--img3-rot, 3deg)) translateY(-8px) scale(1.015);
}

/* --------------------------------------------------------------------------
   Per-count layouts. The "Number of screenshots" option adds .prhero--imgs-N.
   3 = the full collage above (no overrides). 2 and 1 reposition the screenshots
   that show so the group stays balanced without the missing ones; 0 drops the
   visual entirely and the copy takes the row (kept left, like the whitepaper
   hero). A Layout slider set on an instance still wins over these (it is emitted
   as an id + !important rule), so per-count values are just the defaults.
   -------------------------------------------------------------------------- */

/* 2 images — main top-right + editor front-bottom. */
.prhero--imgs-2 .prhero-visual { --visual-ratio: 100 / 80; }
.prhero--imgs-2 .prhero-main   { width: 82%; right: -6%; top: 3%; }
.prhero--imgs-2 .prhero-editor { width: 64%; right: 9%; top: 43%; }

/* 1 image — a single screenshot, larger and roughly centred. */
.prhero--imgs-1 .prhero-visual { --visual-ratio: 100 / 64; }
.prhero--imgs-1 .prhero-main   { width: 98%; right: 1%; top: 7%; }

/* 0 images — no visual column; copy spans the row, section a touch shorter. */
.prhero--imgs-0 { --hero-min-height: 480px; }
.prhero--imgs-0 .prhero-inner  { grid-template-columns: 1fr; }
.prhero--imgs-0 .prhero-copy   { max-width: var(--copy-max-width, 760px); }
.prhero--imgs-0 .prhero-visual { display: none; }

/* Tablet / stacked: the copy goes full width and the collage — unchanged
   internally — simply centres and scales down as one unit. No per-image
   overrides needed; the % geometry above still holds. */
@media (max-width: 1200px) {
	.prhero--home .prhero-inner {
		grid-template-columns: 1fr;
		padding: 60px 30px 56px;
	}
	.prhero--home .prhero-copy {
		max-width: none; width: 100%; padding-left: 0;
	}
	.prhero--home .prhero-visual {
		--visual-max-width: 560px;
		margin-top: 12px;
	}
}

@media (max-width: 768px) {
	.prhero--home { min-height: auto; }
	.prhero--home h1 { font-size: 32px; line-height: 1.22; }
	.prhero--home h2 { margin-top: 26px; font-size: 20px; }
	.prhero--home p { font-size: 16px; line-height: 1.6; }
	.prhero--home .prhero-visual {
		--visual-max-width: 460px;
		--visual-ratio: 100 / 96;   /* a touch taller so the lower screenshots stay in frame */
	}
}