/* IPS Card Stack Scroll Reveal.
   The stacking itself (each card pinning in place while the next one
   scrolls over it) is pure CSS: position:sticky combined with an
   increasing z-index per card, and each card's own outer container
   being taller than the card, so there's scroll room for the next
   card to catch up and cover it. No JavaScript is needed for the
   stacking mechanic itself.
   The tilt-to-flat entry animation specifically does need JS (see
   frontend.js), since it has to read each card's live position on
   scroll and translate it into a rotateX value every frame, this is
   deliberately NOT eased with a CSS transition on transform: the
   scroll position itself already provides smooth, continuous input,
   and a transition on top of a value already being updated every
   frame via requestAnimationFrame would just add unwanted lag rather
   than smoothing anything. */

.ips-csr-wrap {
	position: relative;
}

.ips-csr-card-outer {
	position: relative;
	height: calc(var(--ips-csr-height, 480px) + var(--ips-csr-gap, 300px));
}

.ips-csr-card {
	position: sticky;
	top: var(--ips-csr-top, 100px);
	height: var(--ips-csr-height, 480px);
	perspective: var(--ips-csr-perspective, 1000px);
}

.ips-csr-card__inner {
	display: flex;
	align-items: center;
	gap: 48px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	transform-style: preserve-3d;
	transform-origin: bottom center;
	will-change: transform;
}

.ips-csr-image-left .ips-csr-card__inner {
	flex-direction: row-reverse;
}

.ips-csr-card__content {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ips-csr-card__image {
	flex: 1 1 50%;
	min-width: 0;
	height: 100%;
}

.ips-csr-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ips-csr-number {
	display: block;
	font-weight: 800;
}

.ips-csr-category {
	display: block;
	text-transform: uppercase;
}

.ips-csr-headline {
	margin: 0;
}

.ips-csr-description {
	margin: 0;
}

/* Below tablet, stack content above the image, a side-by-side split
   doesn't have enough width to stay legible on narrow screens. */
/* Below tablet width, the sticky-stacking mechanic itself is turned
   off entirely, not just re-laid-out. A fixed-height pinned card
   combined with stacked content (headline + description + image)
   very easily runs out of room on a narrow screen, and adding
   internal scrolling inside a pinned card is confusing, disagreeable
   UX no matter how generous the height is made. Simplest, most
   robust fix: cards just stack normally in the page's own scroll on
   small screens, each taking exactly as much height as its own
   content needs, so there's no fixed height for anything to overflow
   against in the first place. frontend.js mirrors this by not
   attaching its scroll listener at all below this same width, since
   there's no settling/covering to track once nothing pins. */
@media (max-width: 767px) {
	.ips-csr-card-outer {
		height: auto !important;
		margin-bottom: 24px;
	}
	.ips-csr-card {
		position: static;
		top: auto;
		height: auto;
	}
	.ips-csr-card__inner {
		flex-direction: column !important;
		height: auto;
		transform: none !important;
	}
	.ips-csr-card__image {
		height: auto;
		aspect-ratio: 16 / 10;
		flex: none;
		width: 100%;
	}
	.ips-csr-card__content {
		flex: none;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ips-csr-card__inner {
		transform: none !important;
	}
}