/* Vimmera Sticky Features – Vimmera Sticky System 0.12.1 */

.wp-block-vimmera-sticky-features {
	--vsf-offset: 24px;
	--vsf-stage-height: 75vh;
	--vsf-step-distance: 50vh;
	--vsf-outer-hold: 0vh;
	--vsf-image-ratio: 16 / 9;
	--vsf-image-ratio-number: 1.7777778;
	--vsf-media-fit: cover;
	--vsf-media-position: center;
	--vsf-duration: 250ms;
	--vsf-column-gap: clamp(2rem, 6vw, 6rem);
	--vsf-stack-gap: var(
		--wp--style--block-gap,
		var(--wp--preset--spacing--40, 1.5rem)
	);
	--vsf-card-radius: var(--vis-card-radius, 16px);
	--vsf-mobile-radius: var(--vis-mobile-radius, 14px);
	--vsf-card-shadow: var(
		--vis-card-shadow,
		0 8px 24px rgba(0,0,0,.14),
		0 22px 56px rgba(0,0,0,.10)
	);
	--vsf-media-bg: var(--vis-media-bg, #fff);
	--vsf-right-crop: var(--vis-right-crop, 1px);
	width: 100%;
	/* Sticky feature stages are standalone sections. Do not let preceding floated
	   content (e.g. a styled post featured image) make the stage start beside it. */
	clear: both !important;
	display: flow-root !important;
}

.wp-block-vimmera-sticky-features .vsf__layout,
.wp-block-vimmera-sticky-features .vsf__items,
.wp-block-vimmera-sticky-features .vsf-item {
	min-width: 0;
}

/* ---------------------------------------------------------
   Shared media
   --------------------------------------------------------- */

.wp-block-vimmera-sticky-features .vsf-item__media-source {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--vsf-image-ratio);
	margin: 0;
	overflow: hidden;
	border-radius: var(--vsf-card-radius);
	background: var(--vsf-media-bg);
	box-shadow: var(--vsf-card-shadow);
	transform: translate3d(0,0,0);
}

.wp-block-vimmera-sticky-features .vsf-item__media-source img,
.wp-block-vimmera-sticky-features .vsf-item__media-source video {
	display: block;
	width: calc(100% + var(--vsf-right-crop));
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: var(--vsf-media-fit);
	object-position: var(--vsf-media-position);
	transform: translateX(0);
	background: var(--vsf-media-bg);
}

.wp-block-vimmera-sticky-features .vsf-item__content > :first-child {
	margin-top: 0;
}

.wp-block-vimmera-sticky-features .vsf-item__content > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------
   Linear fallback: mobile, non-captured tablet, reduced motion
   --------------------------------------------------------- */

.wp-block-vimmera-sticky-features .vsf__items {
	display: block;
}

.wp-block-vimmera-sticky-features .vsf-item {
	display: flex;
	flex-direction: column;
	gap: var(--vsf-stack-gap);
	margin: 0;
}

.wp-block-vimmera-sticky-features .vsf-item + .vsf-item {
	margin-top: var(--vsf-stack-gap);
}

.wp-block-vimmera-sticky-features.vsf--mobile-above .vsf-item__media-source { order: 1; }
.wp-block-vimmera-sticky-features.vsf--mobile-above .vsf-item__content { order: 2; }
.wp-block-vimmera-sticky-features.vsf--mobile-below .vsf-item__content { order: 1; }
.wp-block-vimmera-sticky-features.vsf--mobile-below .vsf-item__media-source { order: 2; }
.wp-block-vimmera-sticky-features.vsf--share-0.vsf--fulltext-hidden .vsf-item__content { display: none; }
.wp-block-vimmera-sticky-features.vsf--share-1 .vsf-item__media-source { display: none; }

.wp-block-vimmera-sticky-features.vsf--share-0.vsf--fulltext-above .vsf-item__content { display:block; order:1; }
.wp-block-vimmera-sticky-features.vsf--share-0.vsf--fulltext-above .vsf-item__media-source { display:block; order:2; }
.wp-block-vimmera-sticky-features.vsf--share-0.vsf--fulltext-below .vsf-item__media-source { display:block; order:1; }
.wp-block-vimmera-sticky-features.vsf--share-0.vsf--fulltext-below .vsf-item__content { display:block; order:2; }

/* ---------------------------------------------------------
   Desktop/tablet capture runtime.
   The saved Gutenberg items themselves become the stage.
   All states occupy one grid cell, so the block height is only the
   tallest visible state — never the sum of all states.
   --------------------------------------------------------- */

.wp-block-vimmera-sticky-features.vsf-runtime-capture .vsf__items {
	display: grid;
	position: relative;
	width: 100%;
}

.wp-block-vimmera-sticky-features.vsf-runtime-capture .vsf-item {
	grid-area: 1 / 1;
	display: grid;
	align-items: center;
	gap: var(--vsf-column-gap);
	width: 100%;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--vsf-duration) ease,
		transform var(--vsf-duration) cubic-bezier(.22,.61,.36,1),
		visibility 0s linear var(--vsf-duration);
}

.wp-block-vimmera-sticky-features.vsf-runtime-capture .vsf-item.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.wp-block-vimmera-sticky-features.vsf--direct.vsf-runtime-capture .vsf-item {
	transition: none;
}

.wp-block-vimmera-sticky-features.vsf-runtime-capture .vsf-item__media-source {
	width: min(100%, var(--vsf-panel-media-max-width, 9999px));
	justify-self: center;
}

.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-0 .vsf-item {
	grid-template-columns: minmax(0,1fr);
}
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-0.vsf--fulltext-hidden .vsf-item__content {
	display:none;
}
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-1 .vsf-item {
	grid-template-columns: minmax(0,1fr);
}
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-1 .vsf-item__media-source {
	display:none;
}
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-1-3 .vsf-item {
	grid-template-columns:minmax(0,1fr) minmax(0,2fr);
}
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-1-2 .vsf-item {
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-2-3 .vsf-item {
	grid-template-columns:minmax(0,2fr) minmax(0,1fr);
}

.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--media-right .vsf-item__content { order:1; }
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--media-right .vsf-item__media-source { order:2; }
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--media-left .vsf-item__media-source { order:1; }
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--media-left .vsf-item__content { order:2; }

.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--media-left.vsf--share-1-3 .vsf-item {
	grid-template-columns:minmax(0,2fr) minmax(0,1fr);
}
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--media-left.vsf--share-2-3 .vsf-item {
	grid-template-columns:minmax(0,1fr) minmax(0,2fr);
}

.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-0.vsf--fulltext-above .vsf-item,
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-0.vsf--fulltext-below .vsf-item {
	grid-template-columns:minmax(0,1fr);
	align-content:center;
	gap:var(--vsf-stack-gap);
}
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-0.vsf--fulltext-above .vsf-item__content { display:block; order:1; }
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-0.vsf--fulltext-above .vsf-item__media-source { display:block; order:2; }
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-0.vsf--fulltext-below .vsf-item__media-source { display:block; order:1; }
.wp-block-vimmera-sticky-features.vsf-runtime-capture.vsf--share-0.vsf--fulltext-below .vsf-item__content { display:block; order:2; }

@media (max-width: 600px) {
	.wp-block-vimmera-sticky-features .vsf-item__media-source {
		border-radius: var(--vsf-mobile-radius);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-vimmera-sticky-features .vsf-item {
		transition: none !important;
	}
}

/* One state: natural block height, but keep the selected desktop/tablet layout. */
@media (min-width: 601px) {
	.wp-block-vimmera-sticky-features.vsf-single .vsf-item {
		display:grid;
		align-items:center;
		gap:var(--vsf-column-gap);
		margin:0;
	}
	.wp-block-vimmera-sticky-features.vsf-single.vsf--share-1-3 .vsf-item { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
	.wp-block-vimmera-sticky-features.vsf-single.vsf--share-1-2 .vsf-item { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
	.wp-block-vimmera-sticky-features.vsf-single.vsf--share-2-3 .vsf-item { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
	.wp-block-vimmera-sticky-features.vsf-single.vsf--media-left.vsf--share-1-3 .vsf-item { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
	.wp-block-vimmera-sticky-features.vsf-single.vsf--media-left.vsf--share-2-3 .vsf-item { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
	.wp-block-vimmera-sticky-features.vsf-single.vsf--media-right .vsf-item__content { order:1; }
	.wp-block-vimmera-sticky-features.vsf-single.vsf--media-right .vsf-item__media-source { order:2; }
	.wp-block-vimmera-sticky-features.vsf-single.vsf--media-left .vsf-item__media-source { order:1; }
	.wp-block-vimmera-sticky-features.vsf-single.vsf--media-left .vsf-item__content { order:2; }
	.wp-block-vimmera-sticky-features.vsf-single.vsf--share-0 .vsf-item,
	.wp-block-vimmera-sticky-features.vsf-single.vsf--share-1 .vsf-item { grid-template-columns:minmax(0,1fr); }
	.wp-block-vimmera-sticky-features.vsf-single.vsf--share-0.vsf--fulltext-above .vsf-item,
	.wp-block-vimmera-sticky-features.vsf-single.vsf--share-0.vsf--fulltext-below .vsf-item { display:flex; }
}


/* ---------------------------------------------------------
   Width modes
   --------------------------------------------------------- */

/* Default/content width deliberately has no extra selector. */

.wp-block-vimmera-sticky-features.vsf--width-wide {
	position: relative;
	left: 50%;
	width: min(var(--vsf-wide-max, 1440px), calc(100vw - 32px));
	max-width: none !important;
	transform: translateX(-50%);
}

.wp-block-vimmera-sticky-features.vsf--width-full {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none !important;
	margin-left: -50vw;
	padding-inline: var(--vsf-full-padding, 32px);
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.wp-block-vimmera-sticky-features.vsf--width-wide,
	.wp-block-vimmera-sticky-features.vsf--width-full {
		position: static;
		left: auto;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		padding-inline: 0;
		transform: none;
	}
}

/* ---------------------------------------------------------
   Full viewport-edge slide transition
   --------------------------------------------------------- */

/*
 * Downward transition:
 *   new state's left edge starts exactly at viewport right
 *   old state's right edge exits exactly past viewport left.
 *
 * Upward transition is the mirror image.
 *
 * Distances are measured by JS from the block's real viewport position.
 * This also works when the block itself is only content width.
 */
.wp-block-vimmera-sticky-features.vsf--slide.vsf-runtime-capture {
	overflow-x: clip;
}

.wp-block-vimmera-sticky-features.vsf--slide.vsf-runtime-capture .vsf__items {
	overflow: visible;
}

.wp-block-vimmera-sticky-features.vsf--slide.vsf-runtime-capture .vsf-item {
	visibility: visible;
	will-change: opacity, transform;
}

.wp-block-vimmera-sticky-features.vsf--slide.vsf-runtime-capture .vsf-item[data-vsf-position="before"] {
	transform: translate3d(
		calc(-1 * var(--vsf-slide-from-left, 100vw)),
		0,
		0
	);
}

.wp-block-vimmera-sticky-features.vsf--slide.vsf-runtime-capture .vsf-item[data-vsf-position="after"] {
	transform: translate3d(
		var(--vsf-slide-from-right, 100vw),
		0,
		0
	);
}

.wp-block-vimmera-sticky-features.vsf--slide.vsf-runtime-capture .vsf-item[data-vsf-position="active"],
.wp-block-vimmera-sticky-features.vsf--slide.vsf-runtime-capture .vsf-item.is-active {
	transform: translate3d(0, 0, 0);
}

.wp-block-vimmera-sticky-features.vsf--slide.vsf-runtime-capture .vsf-item:not(.is-active) {
	pointer-events: none;
}



/* ---------------------------------------------------------
   Progress indicator – fixed to the whole stage.
   It must never follow the currently active image/text column.
   --------------------------------------------------------- */
.wp-block-vimmera-sticky-features .vsf__layout {
	position: relative;
}
.wp-block-vimmera-sticky-features .vsf__progress {
	display: none;
	position: relative;
	left: 0;
	width: 100%;
	max-width: none;
	gap: 5px;
	padding-top: 12px;
	box-sizing: border-box;
}
.wp-block-vimmera-sticky-features.vsf-runtime-capture:not(.vsf--hide-progress):not(.vsf-single) .vsf__progress {
	display: flex;
}
.wp-block-vimmera-sticky-features .vsf__progress i {
	display: block;
	height: 4px;
	flex: 1 1 0;
	border-radius: 999px;
	background: rgba(127,127,140,.23);
	transition: background-color 250ms ease;
}
.wp-block-vimmera-sticky-features .vsf__progress i.is-active {
	background: currentColor;
}

/* ---------------------------------------------------------
   0.7 native scroll runway
   --------------------------------------------------------- */
.wp-block-vimmera-sticky-features.vsf-runtime-scroll {
	position: relative;
	min-height: var(--vsf-scroll-block-height, auto);
}

.wp-block-vimmera-sticky-features.vsf-runtime-scroll > .vsf__layout {
	position: sticky;
	top: var(--vsf-sticky-top, 0px);
	z-index: 1;
}

/* The added document height is only scroll travel. The stage stays visible
   while this space passes behind it, so no visible empty spacer is created. */
.wp-block-vimmera-sticky-features.vsf-runtime-scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 0;
	pointer-events: none;
}

@media (max-width: 600px), (prefers-reduced-motion: reduce) {
	.wp-block-vimmera-sticky-features.vsf-runtime-scroll {
		min-height: auto;
	}
	.wp-block-vimmera-sticky-features.vsf-runtime-scroll > .vsf__layout {
		position: relative;
		top: auto;
	}
}

/* ---------------------------------------------------------
   Unified block: shared text/media width (0.9.4)
   The ratio is expressed as fr tracks so the configured share stays
   identical for media-left and media-right and does not overflow the gap.
   Legacy blocks without vst--shared-width keep their established rules.
   --------------------------------------------------------- */
.wp-block-vimmera-sticky-features.vst--shared-width.vsf-runtime-capture.vsf--media-right .vsf-item {
	grid-template-columns: minmax(0, var(--vst-text-fr)) minmax(0, var(--vst-media-fr));
}
.wp-block-vimmera-sticky-features.vst--shared-width.vsf-runtime-capture.vsf--media-left .vsf-item {
	grid-template-columns: minmax(0, var(--vst-media-fr)) minmax(0, var(--vst-text-fr));
}

@media (min-width: 601px) {
	.wp-block-vimmera-sticky-features.vst--shared-width.vsf-single.vsf--media-right .vsf-item {
		grid-template-columns: minmax(0, var(--vst-text-fr)) minmax(0, var(--vst-media-fr));
	}
	.wp-block-vimmera-sticky-features.vst--shared-width.vsf-single.vsf--media-left .vsf-item {
		grid-template-columns: minmax(0, var(--vst-media-fr)) minmax(0, var(--vst-text-fr));
	}
}

/* ---------------------------------------------------------
   Original media ratio (0.9.4)
   Each standard image/video keeps its intrinsic aspect ratio. Runtime sizing
   still respects the configured maximum stage height.
   --------------------------------------------------------- */
.wp-block-vimmera-sticky-features.vsf--ratio-auto .vsf-item__media-source {
	aspect-ratio: auto;
}
.wp-block-vimmera-sticky-features.vsf--ratio-auto .vsf-item__media-source img,
.wp-block-vimmera-sticky-features.vsf--ratio-auto .vsf-item__media-source video {
	height: auto;
}
.wp-block-vimmera-sticky-features.vsf--ratio-auto .vsf-item__media-source > .vsticky-media-link {
	height: auto;
}


/* ---------------------------------------------------------
   Linear/mobile media height cap (0.9.4)
   JS converts the configured stage height against visualViewport and derives
   a ratio-preserving max width for each media source. This avoids portrait
   media exceeding the selected maximum height in the mobile/tablet fallback.
   --------------------------------------------------------- */
.wp-block-vimmera-sticky-features:not(.vsf-runtime-capture) .vsf-item__media-source {
	width: 100%;
	max-width: var(--vsf-linear-media-max-width, 100%);
	align-self: center;
}