/* Vimmera Sticky Story – Vimmera Sticky System 0.12.1
 * Prefix: vss
 */

.wp-block-vimmera-sticky-story {
	--vss-media-width: 43%;
	--vss-column-gap: 56px;
	--vss-sticky-offset: 96px;
	--vss-media-height: 66vh;
	--vss-image-ratio: 16 / 9;
	--vss-image-ratio-number: 1.7777778;
	/* Story spacing is content-driven. Outer holds and the inter-section gap
	   are the only vertical rhythm values used by the sticky Story layout. */
	--vss-outer-hold: 0vh;
	--vss-section-gap: 10vh;
	--vss-media-fit: cover;
	--vss-media-position: center;
	--vss-media-radius: 22px;
	--vss-duration: 500ms;
	--vss-inactive-opacity: .42;
	position: relative;
	box-sizing: border-box;
}

.wp-block-vimmera-sticky-story *,
.wp-block-vimmera-sticky-story *::before,
.wp-block-vimmera-sticky-story *::after {
	box-sizing: border-box;
}

.wp-block-vimmera-sticky-story .vss__layout {
	width: 100%;
}

.wp-block-vimmera-sticky-story .vss__media-column,
.wp-block-vimmera-sticky-story .vss__media-sticky,
.wp-block-vimmera-sticky-story .vss__media-stage,
.wp-block-vimmera-sticky-story .vss__steps {
	min-width: 0;
}

.wp-block-vimmera-sticky-story .vss-item__media-source {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--vss-media-radius);
	background: transparent;
}

.wp-block-vimmera-sticky-story .vss-item__media-source img,
.wp-block-vimmera-sticky-story .vss-item__media-source video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: var(--vss-media-fit);
	object-position: var(--vss-media-position);
}

.wp-block-vimmera-sticky-story .vss-item__content > :first-child { margin-top: 0; }
.wp-block-vimmera-sticky-story .vss-item__content > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------
   Sticky desktop/tablet runtime
   --------------------------------------------------------- */

.wp-block-vimmera-sticky-story.vss-runtime-sticky .vss__layout {
	display: grid;
	grid-template-columns: var(--vss-media-width) minmax(0, 1fr);
	gap: var(--vss-column-gap);
	align-items: stretch;
}

.wp-block-vimmera-sticky-story.vss-runtime-sticky.vss--media-right .vss__media-column { order: 2; }
.wp-block-vimmera-sticky-story.vss-runtime-sticky.vss--media-right .vss__steps { order: 1; }
.wp-block-vimmera-sticky-story.vss-runtime-sticky.vss--media-left .vss__media-column { order: 1; }
.wp-block-vimmera-sticky-story.vss-runtime-sticky.vss--media-left .vss__steps { order: 2; }

.wp-block-vimmera-sticky-story.vss-runtime-sticky .vss__media-column {
	position: relative;
	align-self: start;
	min-height: 0;
	margin-block-start: var(--vss-runtime-media-track-start, 0px);
	height: var(--vss-runtime-media-track-height, 100%);
}

.wp-block-vimmera-sticky-story.vss-runtime-sticky .vss__media-sticky {
	position: sticky;
	top: var(--vss-runtime-top, var(--vss-sticky-offset));
	height: auto;
	max-height: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 0;
}

.wp-block-vimmera-sticky-story.vss-runtime-sticky .vss__media-stage {
	position: relative;
	flex: 0 0 auto;
	width: var(--vss-runtime-stage-width, 100%);
	max-width: 100%;
	aspect-ratio: var(--vss-image-ratio);
	min-height: 0;
	border-radius: var(--vss-media-radius);
	overflow: hidden;
	isolation: isolate;
	background: rgba(127,127,140,.06);
}

.wp-block-vimmera-sticky-story.vss-runtime-sticky .vss__media-layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(1.015);
	transition:
		opacity var(--vss-duration) ease,
		transform var(--vss-duration) cubic-bezier(.22,.61,.36,1),
		visibility 0s linear var(--vss-duration);
}

.wp-block-vimmera-sticky-story.vss-runtime-sticky .vss__media-layer.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: scale(1);
	transition-delay: 0s;
}

.wp-block-vimmera-sticky-story.vss--transition-direct.vss-runtime-sticky .vss__media-layer {
	transition: none;
	transform: none;
}

.wp-block-vimmera-sticky-story.vss-runtime-sticky .vss__media-clone {
	width: 100%;
	height: 100%;
	border-radius: var(--vss-media-radius);
}


.wp-block-vimmera-sticky-story.vss-runtime-sticky .vss__steps {
	padding-block-start: var(--vss-runtime-outer-hold-start, var(--vss-outer-hold-start, var(--vss-runtime-outer-hold, var(--vss-outer-hold))));
	padding-block-end: var(--vss-runtime-outer-hold-end, var(--vss-outer-hold-end, var(--vss-runtime-outer-hold, var(--vss-outer-hold))));
	display: flex;
	flex-direction: column;
	gap: var(--vss-runtime-section-gap, var(--vss-section-gap));
}

.wp-block-vimmera-sticky-story.vss-runtime-sticky .vss-item {
	min-height: 0;
	padding: 0;
	display: block;
	margin: 0;
	transition: opacity 300ms ease;
}

.wp-block-vimmera-sticky-story.vss--dim-inactive.vss-runtime-sticky .vss-item {
	opacity: var(--vss-inactive-opacity);
}

.wp-block-vimmera-sticky-story.vss--dim-inactive.vss-runtime-sticky .vss-item.is-active {
	opacity: 1;
}

.wp-block-vimmera-sticky-story.vss-runtime-sticky .vss-item > .vss-item__media-source {
	display: none;
}

.wp-block-vimmera-sticky-story .vss__progress {
	display: flex;
	gap: 5px;
	width: var(--vss-runtime-stage-width, 100%);
	max-width: 100%;
	padding-top: 12px;
	flex: 0 0 auto;
}

/* In sticky Story mode the progress rail hangs below the image instead of
   contributing to the sticky box height. This lets the first image top align
   with the first text content and the last image bottom align with the last
   text content while the progress rail remains visually below the image. */
.wp-block-vimmera-sticky-story.vss-runtime-sticky .vss__progress {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.wp-block-vimmera-sticky-story .vss__progress .vss__progress-step {
	display: block;
	height: 4px;
	min-width: 0;
	border: 0;
	padding: 0;
	cursor: pointer;
	position: relative;
	appearance: none;
	color: inherit;
	flex: 1 1 0;
	border-radius: 999px;
	background: rgba(127,127,140,.23);
	transition: background-color 250ms ease;
}

.wp-block-vimmera-sticky-story .vss__progress .vss__progress-step.is-active {
	background: currentColor;
}

.wp-block-vimmera-sticky-story.vss--hide-progress .vss__progress {
	display: none;
}

.wp-block-vimmera-sticky-story.vss-no-media.vss-runtime-sticky .vss__layout {
	grid-template-columns: minmax(0, 1fr);
}
.wp-block-vimmera-sticky-story.vss-no-media.vss-runtime-sticky .vss__media-column {
	display: none;
}

/* ---------------------------------------------------------
   Linear fallback: mobile and optionally tablet
   --------------------------------------------------------- */

.wp-block-vimmera-sticky-story.vss-runtime-linear .vss__media-column {
	display: none;
}

.wp-block-vimmera-sticky-story.vss-runtime-linear .vss__steps {
	display: block;
	padding-block: 0;
}

.wp-block-vimmera-sticky-story.vss-runtime-linear .vss-item {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	opacity: 1;
	transform: none;
}

.wp-block-vimmera-sticky-story.vss-runtime-linear .vss-item + .vss-item {
	margin-top: 56px;
}

.wp-block-vimmera-sticky-story.vss-runtime-linear .vss-item__media-source {
	width: 100%;
	aspect-ratio: var(--vss-image-ratio);
}

.wp-block-vimmera-sticky-story.vss--mobile-above.vss-runtime-linear .vss-item__media-source { order: 1; }
.wp-block-vimmera-sticky-story.vss--mobile-above.vss-runtime-linear .vss-item__content { order: 2; }
.wp-block-vimmera-sticky-story.vss--mobile-below.vss-runtime-linear .vss-item__content { order: 1; }
.wp-block-vimmera-sticky-story.vss--mobile-below.vss-runtime-linear .vss-item__media-source { order: 2; }

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

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

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

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

@media (prefers-reduced-motion: reduce) {
	.wp-block-vimmera-sticky-story .vss__media-layer,
	.wp-block-vimmera-sticky-story .vss-item,
	.wp-block-vimmera-sticky-story .vss__media-clone img,
	.wp-block-vimmera-sticky-story .vss__media-clone video,
	.wp-block-vimmera-sticky-story .vss__progress .vss__progress-step {
		transition: none !important;
	}
}

/* Optional vertical centering for the sticky media column. */
.wp-block-vimmera-sticky-story.vss-runtime-sticky.vss--position-center .vss__media-sticky {
	top: var(--vss-runtime-top, var(--vss-center-top, 17vh));
}

/* One transparent link covers the active Story media area. The source image itself
   is not linked, so a section can have its own link even when it inherits media. */
.wp-block-vimmera-sticky-story .vss__media-link-overlay {
	position: absolute;
	inset: 0;
	z-index: 40;
	display: none;
	border-radius: inherit;
	cursor: pointer;
	background: rgba(255,255,255,0);
	box-shadow: inset 0 0 0 0 rgba(255,255,255,0), inset 0 0 0 0 rgba(0,0,0,0);
	transition: box-shadow 220ms ease, background-color 220ms ease;
}
.wp-block-vimmera-sticky-story .vss__media-stage.vss-has-link .vss__media-link-overlay { display: block; }
.wp-block-vimmera-sticky-story .vss__media-stage.vss-has-link .vss__media-layer.is-active img {
	transition: transform 420ms cubic-bezier(.22,.61,.36,1), opacity var(--vsticky-sequence-fade,.25s) ease;
}
.wp-block-vimmera-sticky-story .vss__media-link-overlay:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.82), inset 0 0 0 3px rgba(0,0,0,.18);
	background: rgba(255,255,255,.035);
}
.wp-block-vimmera-sticky-story .vss__media-stage:focus-within .vss__media-layer.is-active img { transform: scale(1.025); }
@media (hover:hover) and (pointer:fine) {
	.wp-block-vimmera-sticky-story .vss__media-stage.vss-has-link:hover .vss__media-link-overlay {
		box-shadow: inset 0 0 0 2px rgba(255,255,255,.82), inset 0 0 0 3px rgba(0,0,0,.18);
		background: rgba(255,255,255,.035);
	}
	.wp-block-vimmera-sticky-story .vss__media-stage.vss-has-link:hover .vss__media-layer.is-active img { transform: scale(1.025); }
}

/* ---------------------------------------------------------
   Unified block: shared text/media width and slide transition (0.9.4)
   Legacy Story blocks keep --vss-media-width. Once the unified setting is
   used, both modes share the same fr ratio independent of media side.
   --------------------------------------------------------- */
.wp-block-vimmera-sticky-story.vss-runtime-sticky.vst--shared-width.vss--media-left .vss__layout {
	grid-template-columns: minmax(0, var(--vst-media-fr)) minmax(0, var(--vst-text-fr));
}
.wp-block-vimmera-sticky-story.vss-runtime-sticky.vst--shared-width.vss--media-right .vss__layout {
	grid-template-columns: minmax(0, var(--vst-text-fr)) minmax(0, var(--vst-media-fr));
}

.wp-block-vimmera-sticky-story.vss--transition-slide.vss-runtime-sticky .vss__media-layer {
	transform: translateX(5%);
}
.wp-block-vimmera-sticky-story.vss--transition-slide.vss--media-right.vss-runtime-sticky .vss__media-layer {
	transform: translateX(-5%);
}
.wp-block-vimmera-sticky-story.vss--transition-slide.vss-runtime-sticky .vss__media-layer.is-active {
	transform: translateX(0);
}

/* ---------------------------------------------------------
   Original media ratio (0.9.4)
   In sticky mode the active media ratio is applied by story-view.js. In the
   linear fallback each source keeps its own natural dimensions directly.
   --------------------------------------------------------- */
.wp-block-vimmera-sticky-story.vss--ratio-auto.vss-runtime-linear .vss-item__media-source {
	aspect-ratio: auto;
}
.wp-block-vimmera-sticky-story.vss--ratio-auto.vss-runtime-linear .vss-item__media-source img,
.wp-block-vimmera-sticky-story.vss--ratio-auto.vss-runtime-linear .vss-item__media-source video {
	height: auto;
}
.wp-block-vimmera-sticky-story.vss--ratio-auto.vss-runtime-linear .vss-item__media-source > .vsticky-media-link {
	height: auto;
}


/* ---------------------------------------------------------
   Linear/mobile media height cap (0.9.4)
   The configured stage height is evaluated against visualViewport and
   converted into a ratio-preserving max width for each source.
   --------------------------------------------------------- */
.wp-block-vimmera-sticky-story.vss-runtime-linear .vss-item__media-source {
	width: 100%;
	max-width: var(--vss-linear-media-max-width, 100%);
	align-self: center;
}

/* Larger invisible target without altering the thin visual progress bar. */
.wp-block-vimmera-sticky-story .vss__progress .vss__progress-step::before {
	content: "";
	position: absolute;
	inset: -12px 0;
}
.wp-block-vimmera-sticky-story .vss__progress .vss__progress-step:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 5px;
}