/**
 * Case Study single-template styles.
 *
 * Reproduce the live case study page (Rival / Coliminder / Ingenetix) 1:1.
 * Keep every rule scoped to this template — do not edit shared/global
 * stylesheets (webflow.css / base.css / theme.css / home-figma.css).
 */

/*
 * Vertical column rails ("pinstripes"). On the live Webflow site a fixed
 * full-viewport .pinstripes overlay draws 1px grey rails down both edges of the
 * centered 80rem container. The carried webflow.css leaves the wrapper border at
 * 0px, so the rails never show. Restore the live 1px solid #e6e9ee borders here
 * (case-study.css loads last). `display` is left to webflow.css so the rails
 * stay hidden on mobile exactly as on the live site.
 */
.pinstripes-wrapper {
	border-left: 1px solid #e6e9ee;
	border-right: 1px solid #e6e9ee;
}

/*
 * rgh hero spec strip (Industries / Platform / Delivery scope). The live page
 * builds this as a row of label/value cells (split by 1px dividers) inside a
 * bordered card and applies the styling via runtime inline styles; the shared
 * Webflow CSS has no desktop rules for it. Reproduce it here structurally on the
 * second child of .rgh-hero. The ≤991px layout is handled by the page's
 * cs-custom CSS (loads after this, with !important).
 */
.rgh-hero > div:nth-child(2) {
	box-sizing: border-box;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 40px 140px 0;
}
.rgh-hero > div:nth-child(2) > div {
	display: flex;
	width: 100%;
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
	align-items: stretch;
}
.rgh-hero > div:nth-child(2) > div > div:nth-child(odd) {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 32px 40px;
	box-sizing: border-box;
}
.rgh-hero > div:nth-child(2) > div > div:nth-child(odd) > div:first-child {
	font-family: Geist, sans-serif;
	font-size: 20px;
	line-height: 28px;
	font-weight: 500;
	color: #1a1a1a;
}
.rgh-hero > div:nth-child(2) > div > div:nth-child(odd) > div:last-child {
	font-family: Geist, sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #686868;
}
.rgh-hero > div:nth-child(2) > div > div:nth-child(even) {
	background: #e6e9ee;
}
/*
 * Divider geometry differs by breakpoint: a vertical 1px rule inset 44px on
 * desktop, a full-width 1px horizontal rule on mobile (the latter handled by the
 * page cs-custom @media block). Scope the desktop form so it never leaks into
 * the mobile stack (where the 44px margins would add ~176px of dead space).
 */
@media screen and (min-width: 992px) {
	.rgh-hero > div:nth-child(2) > div > div:nth-child(even) {
		flex: 0 0 auto;
		width: 1px;
		margin: 44px 0;
		align-self: stretch;
	}
}

/* Hero image is centered on the live page. */
.rgh-img {
	background-position: 50% 50%;
}

/*
 * Solution dark-card eyebrow label ("DATA VISIBILITY"): the live page hides it
 * via a runtime inline display:none (same treatment as the rgm/cmpfx eyebrows).
 * The element stays in the DOM for parity but is not shown.
 */
.isol-darkcard-tx .inline-div-1-1,
.cmsol-darkcard-tx .inline-div-1-1 {
	display: none;
}

/*
 * Vertical rails — per-section, like the testimonial pages.
 *
 * The live case-study design draws its column rails from the global fixed
 * .pinstripes overlay (z-index:1). Most case-study sections carry no z-index and
 * an opaque #f7f7f7 background, so they sit BELOW that overlay and the 1px grey
 * rails paint on top of them — including straight across the hero image. The
 * testimonial pages avoid this by zeroing the overlay and letting each section
 * draw its own rails behind its content. Mirror that here.
 */

/* 1) Kill the continuous overlay rails on case studies (mirrors the testimonial
 *    rule in testimonial.css). */
body.single-case_study .pinstripes-wrapper {
	border-left-width: 0;
	border-right-width: 0;
}

/* 2) Surface the per-section rails the overlay design left hidden. These sections
 *    already ship a `*-vlines` element (1px, inset 80px, colour-matched to their
 *    background); they were just display:none. */
.cmc-vlines,
.cmsol-vlines,
.cmdp-vlines,
.cmrbac-vlines,
.cmnotif-vlines,
.cmhelp-vlines,
.cmimp-vlines,
.cmpfx-vlines,
.icat-vlines {
	display: block;
}

/* 3) Sections that ship NO vlines element relied entirely on the overlay, so they
 *    lost their rails when it was zeroed: the hero (cmh/inh/rgh) plus the overview
 *    (cmo2), the Rival/Ingenetix solution (isol), the quality/compliance and
 *    media (iqc / rgm) and the Ingenetix/Rival impact (iimp). Draw their rails
 *    from a ::before, inset 80px to line up with the sections above/below, sitting
 *    BEHIND the content — the section's children are lifted above the rail so any
 *    edge image (notably the hero image) covers it, while the rail still shows in
 *    the surrounding light background. */
.cmh-hero,
.inh-hero,
.rgh-hero,
.cmo2,
.isol,
.iqc,
.iimp,
.rgm {
	position: relative;
	isolation: isolate;
}
.cmh-hero::before,
.inh-hero::before,
.rgh-hero::before,
.cmo2::before,
.isol::before,
.iqc::before,
.iimp::before,
.rgm::before {
	content: "";
	position: absolute;
	inset: 0 80px;
	z-index: 0;
	pointer-events: none;
	border-left: 1px solid #e6e9ee;
	border-right: 1px solid #e6e9ee;
}
.cmh-hero > *,
.inh-hero > *,
.rgh-hero > *,
.cmo2 > *,
.isol > *,
.iqc > *,
.iimp > *,
.rgm > * {
	position: relative;
	z-index: 1;
}

/* 5) Hero left edge aligned with the body sections on wide screens.
 *    The body sections centre their content in a 1440px container (≈1160px inner),
 *    so above 1440px their left content edge sits at calc((100% - 1440px)/2 +
 *    140px). The hero is full-width with a fixed 140px left pad (the ≥1440px
 *    webflow override), so its text drifts left of the sections as the viewport
 *    grows. Push the hero column in by the same centring gutter; the image keeps
 *    flex-growing to the right viewport edge, so the right side is unchanged. */
@media screen and (min-width: 1440px) {
	.cmh-row,
	.inh-row {
		box-sizing: border-box;
		padding-left: calc((100% - 1440px) / 2);
	}
}

/* 4) Mobile: the live case-study design hides the rails entirely (webflow.css
 *    sets .pinstripes-wrapper { display:none } at ≤991px). Match that so the
 *    surfaced per-section rails and the ::before rails don't appear on small
 *    screens. */
@media screen and (max-width: 991px) {
	.cmc-vlines,
	.cmsol-vlines,
	.cmdp-vlines,
	.cmrbac-vlines,
	.cmnotif-vlines,
	.cmhelp-vlines,
	.cmimp-vlines,
	.cmpfx-vlines,
	.icat-vlines,
	.cmh-hero::before,
	.inh-hero::before,
	.rgh-hero::before,
	.cmo2::before,
	.isol::before,
	.iqc::before,
	.iimp::before,
	.rgm::before {
		display: none;
	}
}

/*
 * Challenge cards (.cmc-card) text overflow on mobile. When the row stacks
 * (≤991px) the cards keep their desktop `flex: 1 0 0` (flex-basis:0), so in the
 * now-column row they ignore their own content height and collapse to the
 * min-height:153px floor — the card text then overflows the bottom and overlaps
 * the next card (visible on an iPhone SE). Let each stacked card size to its
 * content instead; min-height:153px still acts as the floor for short cards.
 *
 * Feature-split image (.cmpfx-blanket.inline-div-2) cut off on mobile. This
 * blanket also carries the generic `inline-div-2` combo class, which sets
 * `flex: 1` (grow, flex-basis:0%) — the sibling blankets (inline-div-0/1) have
 * no such rule. In the stacked, column-reverse card-r the flex-basis:0 makes it
 * ignore its `height:196px` and shrink to the leftover space (~50px), cropping
 * the image. Reset the blankets to size by their height so it stays 196px.
 */
@media screen and (max-width: 991px) {
	.cmc-card {
		flex: 0 0 auto;
	}
	.cmpfx-blanket {
		flex: 0 0 auto;
	}
}