/* ==========================================================================
   Sticky Cards (FSE) – v1.0.0
   Structure (standard blocks only):

   Group  .is-style-sticky-cards | .is-style-sticky-cards-depth   ← container
   ├─ Heading / Group  .sticky-cards__header                      ← sticky header (optional)
   ├─ Group  .sticky-card                                         ← card (any content; module adds no inner styles)
   ├─ Group  .sticky-card
   └─ …
   ========================================================================== */

:is(.is-style-sticky-cards, .is-style-sticky-cards-depth) {
	/* --- Settings (override in your CSS) --- */
	--sc-header-top: 40px;          /* header offset from top of viewport       */
	--sc-card-top: -15vh;           /* cards offset from top of viewport        */
	--sc-peek: 0px;                 /* offset for subsequent cards (e.g. 16px)  */
	--sc-first-gap: 20px;           /* gap header → first card         		    */
	--sc-gap: 15vh;                 /* scroll “duration” between cards          */
	--sc-end-space: 15vh;           /* how long the last card stays at the top. */
	--sc-card-min-height: min(560px, calc(100vh - var(--sc-card-top) - 40px));
	--sc-card-bg: var(--wp--preset--color--base, #ffffff);
	--sc-card-color: inherit;
	--sc-depth-scale: 0.06;         /* how much a covered card scales down      */
	--sc-depth-dim: 0.35;           /* how much a covered card darkens          */
	--sc-shift: 10%;                /* .sticky-cards--shift: next card offset to the right */
	/* .sticky-cards--shift: stop height for cards 1–4 (pattern repeats) — as on daldrup.eu */
	--sc-shift-stop-1: 0px;
	--sc-shift-stop-2: var(--wp--preset--spacing--xx-large, clamp(4rem, 9vw, 7rem));
	--sc-shift-stop-3: var(--wp--preset--spacing--medium, clamp(1.5rem, 4vw, 2rem));
	--sc-shift-stop-4: var(--wp--preset--spacing--large, clamp(2rem, 5vw, 3rem));

	--sc-admin-bar: var(--wp-admin--admin-bar--height, 0px);
	position: relative;
}

/* Trailing space so the last card can “rest” briefly. */
:is(.is-style-sticky-cards, .is-style-sticky-cards-depth)::after {
	content: "";
	display: block;
	height: var(--sc-end-space);
}

/* --- Header ----------------------------------------------------------- */
:is(.is-style-sticky-cards, .is-style-sticky-cards-depth) > .sticky-cards__header {
	position: sticky;
	top: calc(var(--sc-admin-bar) + var(--sc-header-top));
	z-index: 0;
}

/* --- Card -------------------------------------------------------------- */
:is(.is-style-sticky-cards, .is-style-sticky-cards-depth) > .sticky-card {
	position: sticky;
	top: calc(var(--sc-admin-bar) + var(--sc-card-top) + var(--sc-stop, 0px) + var(--sc-index, 0) * var(--sc-peek));
	z-index: 1;

	min-height: var(--sc-card-min-height);
	margin-block-start: var(--sc-gap);

	background-color: var(--sc-card-bg);
	color: var(--sc-card-color);
	overflow: hidden;
	transform-origin: 50% 0;
}

:is(.is-style-sticky-cards, .is-style-sticky-cards-depth) > .sticky-card:first-child,
:is(.is-style-sticky-cards, .is-style-sticky-cards-depth) > .sticky-cards__header + .sticky-card {
	margin-block-start: var(--sc-first-gap);
}

/* --- Depth variant: covered card scales down and darkens slightly --------- */
.is-style-sticky-cards-depth > .sticky-card {
	transform: scale(calc(1 - var(--sc-progress, 0) * var(--sc-depth-scale)));
	will-change: transform;
}

.is-style-sticky-cards-depth > .sticky-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #000;
	opacity: calc(var(--sc-progress, 0) * var(--sc-depth-dim));
	pointer-events: none;
}

/* --- Modifier .sticky-cards--shift: each card shifted right by --sc-shift
       and narrowed so right edges align. ----- */
@media (min-width: 782px) {
	:is(.is-style-sticky-cards, .is-style-sticky-cards-depth).sticky-cards--shift > .sticky-card {
		box-sizing: border-box;
		width: calc(100% - var(--sc-index, 0) * var(--sc-shift)) !important;
		max-width: calc(100% - var(--sc-index, 0) * var(--sc-shift)) !important;
		margin-left: calc(var(--sc-index, 0) * var(--sc-shift)) !important;
		margin-right: 0 !important;
	}

	.is-style-sticky-cards-depth.sticky-cards--shift > .sticky-card {
		transform-origin: 100% 0;
	}
}

/* --- .sticky-cards--shift: cards stop at different heights ---
   Card 1: at --sc-card-top, 2: lower by xx-large, 3: by medium, 4: by large,
   then the pattern repeats (daldrup.eu: 0 / ~91 / 32 / 48 px). */
:is(.is-style-sticky-cards, .is-style-sticky-cards-depth).sticky-cards--shift > .sticky-card:nth-child(4n + 1 of .sticky-card) {
	--sc-stop: var(--sc-shift-stop-1);
}

:is(.is-style-sticky-cards, .is-style-sticky-cards-depth).sticky-cards--shift > .sticky-card:nth-child(4n + 2 of .sticky-card) {
	--sc-stop: var(--sc-shift-stop-2);
}

:is(.is-style-sticky-cards, .is-style-sticky-cards-depth).sticky-cards--shift > .sticky-card:nth-child(4n + 3 of .sticky-card) {
	--sc-stop: var(--sc-shift-stop-3);
}

:is(.is-style-sticky-cards, .is-style-sticky-cards-depth).sticky-cards--shift > .sticky-card:nth-child(4n + 4 of .sticky-card) {
	--sc-stop: var(--sc-shift-stop-4);
}

/* --- Mobile: no sticky, cards stacked -------------------------- */
@media (max-width: 781px) {
	:is(.is-style-sticky-cards, .is-style-sticky-cards-depth) {
		--sc-gap: 24px;
		--sc-first-gap: 32px;
		--sc-end-space: 0px;
	}

	:is(.is-style-sticky-cards, .is-style-sticky-cards-depth) > :is(.sticky-card, .sticky-cards__header) {
		position: relative;
		top: auto;
	}

	:is(.is-style-sticky-cards, .is-style-sticky-cards-depth) > .sticky-card {
		min-height: 0;
		transform: none;
	}

	.is-style-sticky-cards-depth > .sticky-card::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-sticky-cards-depth > .sticky-card {
		transform: none;
		will-change: auto;
	}

	.is-style-sticky-cards-depth > .sticky-card::after {
		display: none;
	}
}

/* --- Block editor: disable sticky, keep card appearance ----------- */
.editor-styles-wrapper :is(.is-style-sticky-cards, .is-style-sticky-cards-depth) {
	--sc-gap: 32px;
	--sc-first-gap: 32px;
}

.editor-styles-wrapper :is(.is-style-sticky-cards, .is-style-sticky-cards-depth)::after {
	display: none;
}

.editor-styles-wrapper :is(.is-style-sticky-cards, .is-style-sticky-cards-depth) > :is(.sticky-card, .sticky-cards__header) {
	position: relative;
	top: auto;
	transform: none;
}

.editor-styles-wrapper .is-style-sticky-cards-depth > .sticky-card::after {
	display: none;
}