/**
 * SSRP LP — Sticky Image + Cards.
 *
 * Two-column: one side is a photo that stays pinned while the visitor scrolls
 * through the cards in the other column. On mobile the image stops sticky
 * and renders above the card list.
 */

.ssrp-lp-sticky-image-cards__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.ssrp-lp-sticky-image-cards--image-right .ssrp-lp-sticky-image-cards__media { order: 2; }

.ssrp-lp-sticky-image-cards__media {
	position: sticky;
	top: calc(var(--ssrp-lp-topbar-height) + 2rem);
}

.ssrp-lp-sticky-image-cards__media-inner {
	position: relative;
	overflow: hidden;
	border-radius: var(--ssrp-lp-radius);
	aspect-ratio: 4 / 5;
	background: var(--ssrp-lp-surface-muted);
}

.ssrp-lp-sticky-image-cards__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ssrp-lp-sticky-image-cards__list {
	list-style: none !important;  /* override any ol decimal counter inherited from site css */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.ssrp-lp-sticky-image-cards__list li::marker { content: ''; }
.ssrp-lp-sticky-image-cards__list li { margin: 0; }

.ssrp-lp-sticky-image-cards__card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: var(--ssrp-lp-surface);
	border: 1px solid var(--ssrp-lp-border);
	border-radius: var(--ssrp-lp-radius);
}

.ssrp-lp-sticky-image-cards__icon,
.ssrp-lp-sticky-image-cards__num {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ssrp-lp-brand-soft);
	color: var(--ssrp-lp-brand);
	flex-shrink: 0;
	font-weight: 600;
}

.ssrp-lp-sticky-image-cards__heading {
	margin: 0 0 0.375rem;
	font-family: var(--ssrp-lp-font);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ssrp-lp-ink);
}

.ssrp-lp-sticky-image-cards__content {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ssrp-lp-ink-muted);
}
.ssrp-lp-sticky-image-cards__content p:first-child { margin-top: 0; }
.ssrp-lp-sticky-image-cards__content p:last-child  { margin-bottom: 0; }

@media (max-width: 900px) {
	.ssrp-lp-sticky-image-cards__grid {
		grid-template-columns: 1fr;
	}
	.ssrp-lp-sticky-image-cards__media {
		position: static;
	}
	.ssrp-lp-sticky-image-cards--image-right .ssrp-lp-sticky-image-cards__media { order: unset; }
	.ssrp-lp-sticky-image-cards__media-inner { aspect-ratio: 16 / 10; }
}