/* ==========================================================================
   Soterion Hero Block
   Static hero: background image + eyebrow/headline/subheadline/CTAs/trust
   line. Deliberately shorter than the previous rotating video hero so more
   of the page (nav, next section) sits above the fold — see Recommendation
   1 (June/July 2026 proposal) and the follow-up note on reducing hero height.
   ========================================================================== */

.soterion-hero-block {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column; /* the inner row and the optional logo marquee stack; with only one child this behaves exactly as before */
	min-height: 483px; /* was 420px — increased 15% Sept 2026 */
	background-color: #001c33; /* fallback while image loads / if none set */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	padding: 48px 20px; /* 20px matches the site container's own outer gutter so the edges still line up once the viewport is too narrow for 1200px */
	box-sizing: border-box;
}

.soterion-hero-block__overlay {
	position: absolute;
	inset: 0;
	/* Navy gradient tint for text contrast against arbitrary photos, echoing
	   the site's brand navy (#003E6A) rather than a flat black scrim. */
	background: transparent; /* Sept 2026: dark tint removed at client request — hero photography is now supplied pre-darkened */
	z-index: 1;
}

.soterion-hero-block__inner {
	position: relative;
	z-index: 2;
	max-width: 1200px; /* matches the site-wide content container (the UAGB/Gutenberg blocks below the hero are all max-width:1200px centred), so the hero copy sits on the same left edge as the rest of the page */
	text-align: center;
	color: #fff;
}

.soterion-hero-block__placeholder {
	position: relative;
	z-index: 2;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	padding: 16px 20px;
	border-radius: 4px;
	font-size: 14px;
}

.soterion-hero-block__eyebrow {
	color: #de6626;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1.5px;
	font-size: 14px;
	margin: 0;
}

.soterion-hero-block__headline {
	font-family: aktivgrotesk, ui-sans-serif, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	color: #fff;
	margin: 0;
}

.soterion-hero-block__subheadline {
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
}

.soterion-hero-block__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-bottom: 20px;
}

.soterion-hero-block__cta {
	display: inline-block;
	padding: 13px 32px;
	border-radius: 4px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	transform: scale(1);
	transition: transform 0.3s linear, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Matches the site's global .button CTA styling (same size/hover as the
   footer "Book A Demo" button): orange fill, orange-to-gold gradient and
   a slight scale-up on hover. */
.soterion-hero-block__cta--primary {
	background-color: #de6626;
	color: #fff;
}
.soterion-hero-block__cta--primary:hover,
.soterion-hero-block__cta--primary:focus {
	background: linear-gradient(90deg, #de6626, #faad1c 90%);
	color: #fff;
	transform: scale(1.05);
}

.soterion-hero-block__cta--secondary {
	background-color: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.5); /* half-strength at rest, solid white on hover — matches .scs-btn--ghost on the case study pages. Width stays 2px, so the padding pairing above is untouched. */
	padding: 11px 30px; /* 2px less than the primary on every side — the 2px border makes up the difference, so both buttons end up the same size and the label stays centred */
}
.soterion-hero-block__cta--secondary:hover,
.soterion-hero-block__cta--secondary:focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: #fff;
	color: #fff;
	transform: scale(1);
}

.soterion-hero-block__trust {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

@media (max-width: 768px) {
	.soterion-hero-block {
		min-height: 437px; /* was 380px — increased 15% Sept 2026 */
		padding: 36px 20px;
	}
	.soterion-hero-block__headline {
		font-size: 28px;
	}
	.soterion-hero-block__subheadline {
		font-size: 16px;
	}
	.soterion-hero-block__cta {
		padding: 8px 24px;
		font-size: 13px;
	}
}


/* ==========================================================================
   Two-column layout: copy on the left, optional image on the right.
   Added September 2026. The __media column is always rendered so the hero
   is a two-column layout in both states — it simply sits empty when no
   "Right-Hand Image" has been set on the block.
   ========================================================================== */

.soterion-hero-block__inner {
	display: flex;
	align-items: center;
	gap: 48px;
	width: 100%;
}

.soterion-hero-block__content {
	flex: 1 1 0; /* basis 0, not auto — auto lets long copy claim max-content and squeeze the image column */
	min-width: 0;
	text-align: left;
}

.soterion-hero-block__media {
	flex: 0 0 var(--shb-media-basis, 45%); /* no shrink — the configured percentage is the width */
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.soterion-hero-block__media-img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Wider measure only when an image is actually present, so the image-less
   hero keeps its original 1000px container. */
/* The image variant used to widen to 1280px, which put the hero copy 40px left of
   every other section. Both states now share the 1200px site container — the
   modifier class is kept because the template still writes it and the mobile
   rules below key off it. */
.soterion-hero-block__inner--has-side-image {
	max-width: 1200px;
}

/* Stack below 900px: image drops under the copy. Empty media column is
   hidden so it doesn't add dead space on phones. */
@media (max-width: 900px) {
	.soterion-hero-block__inner {
		flex-direction: column;
		gap: 28px;
	}
	.soterion-hero-block__content,
	.soterion-hero-block__media {
		flex: 0 0 auto;
		width: 100%;
	}
	.soterion-hero-block__media {
		justify-content: center;
	}
	.soterion-hero-block__inner:not(.soterion-hero-block__inner--has-side-image) .soterion-hero-block__media {
		display: none;
	}
	.soterion-hero-block__media-img {
		width: 440px;
		max-width: 100%;
	}
}


/* ==========================================================================
   Headline accent bar.
   The theme decorates every h2 with an 80x4px orange bar pinned to left:50%,
   which assumes a centred heading. The hero's copy is left-aligned, so the
   bar was landing in the middle of a wide headline box, stranded away from
   the text. Re-anchor it to follow the headline's own alignment setting —
   the block writes that as an inline style, hence the attribute selectors.
   ========================================================================== */

.soterion-hero-block .soterion-hero-block__headline::before {
	left: 0;
	right: auto;
	margin-left: 0;
}

.soterion-hero-block .soterion-hero-block__headline[style*="text-align:center"]::before {
	left: 50%;
	right: auto;
	margin-left: -40px;
}

.soterion-hero-block .soterion-hero-block__headline[style*="text-align:right"]::before {
	left: auto;
	right: 0;
	margin-left: 0;
}


/* ==========================================================================
   Sept 2026 mock-up alignment.
   ========================================================================== */

/* The theme's decorative orange h2 rule is not in the mock-up — hide it inside
   the hero only. Every other h2 on the site keeps it. (The alignment rules
   above are left in place so the bar still tracks the headline if re-enabled.) */
.soterion-hero-block .soterion-hero-block__headline::before {
	display: none;
}

/* Eyebrow runs a left-to-right orange-to-gold gradient, sampled from the
   mock-up artwork. Passes through the brand orange (#DE6626) at 35%.
   width:fit-content keeps the gradient spanning the TEXT rather than the full
   column, so the full colour range is visible however short the line is. */
.soterion-hero-block__eyebrow {
	background-image: linear-gradient(90deg, #C4501B 0%, #DE6626 35%, #F5A031 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	width: fit-content;
	max-width: 100%;
}

/* fit-content shrinks the box to the text, so re-centre / right-align it to
   follow the block's own Eyebrow Alignment setting. */
.soterion-hero-block__eyebrow[style*="text-align:center"] {
	margin-left: auto;
	margin-right: auto;
}
.soterion-hero-block__eyebrow[style*="text-align:right"] {
	margin-left: auto;
}


/* ==========================================================================
   Logo marquee — optional, switched on per block with "Show Logo Marquee".
   Off by default, so product pages using this block are unaffected.
   ========================================================================== */

.soterion-hero-block__logos {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin-top: 64px;
}

.soterion-hero-block__logos-heading {
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

/* Fades both ends so logos arrive and leave rather than being cut off. */
.soterion-hero-block__logos-viewport {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.soterion-hero-block__logos-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: var(--shb-logo-gap, 70px);
	animation: shb-marquee var(--shb-logo-speed, 30s) linear infinite;
}

/* Paused on hover and while a logo has keyboard focus — the logos can be
   links, and you cannot reliably click a moving target. */
.soterion-hero-block__logos-viewport:hover .soterion-hero-block__logos-track,
.soterion-hero-block__logos-track:focus-within {
	animation-play-state: paused;
}

.soterion-hero-block__logo {
	display: block;
	flex: none;
	line-height: 0;
}

a.soterion-hero-block__logo {
	transition: opacity 0.2s ease;
}

a.soterion-hero-block__logo:hover,
a.soterion-hero-block__logo:focus-visible {
	opacity: 0.6;
}

.soterion-hero-block__logo img {
	display: block;
	height: var(--shb-logo-height, 26px);
	width: auto;
}

/* The template renders the row twice; -50% lands exactly on the start of the
   second copy and the flex gap is identical across the seam, so the loop has
   no visible jump. */
@keyframes shb-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* No motion: drop the animation, hide the duplicate row (the clones are the
   aria-hidden ones) and let the logos wrap as a static block. */
@media (prefers-reduced-motion: reduce) {
	.soterion-hero-block__logos-track {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 20px;
	}
	.soterion-hero-block__logos-track .soterion-hero-block__logo[aria-hidden="true"] {
		display: none;
	}
	.soterion-hero-block__logos-viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media (max-width: 900px) {
	.soterion-hero-block__logos {
		margin-top: 36px;
	}
	.soterion-hero-block__logos-track {
		gap: calc(var(--shb-logo-gap, 70px) * 0.6);
	}
}

/* Blog list header (Soterion Settings > Blog page content via [soterion_hero_pattern]).
   The theme centres everything in .content-panel with display:grid + justify-items:center,
   which shrink-wraps the hero. Let its wrapper span the full width like the old Vimeo banner. */
.content-panel > .mb-20:has(> .soterion-hero-block) { justify-self: stretch; width: 100%; }

/* The theme sets "#main-container .content-panel h2 { margin-bottom: 3rem }" for the blog
   listing. Inside that wrapper (blog header via [soterion_hero_pattern]) its ID selector
   beats the headline's own margin:0 and opens a 48px gap above the subheadline. Spacing in
   this block is controlled by the per-element padding fields, so pin the margin back to 0. */
#main-container .soterion-hero-block .soterion-hero-block__headline { margin: 0; }