/* ==========================================================================
   VIC Theme — VIC Stack Cards (.vic-stack)

   Cards that stick below the header and stack as the page scrolls (pure CSS
   position: sticky). assets/js/stack-cards.js equalises the card heights and
   drives the optional depth effect (--vic-stack-cover 0 → 1 on each item).

     --media-{right|left|alternate}  --split-{50-50|45-55|55-45|60-40}
     --depth-{none|subtle}  --mobile-stack  --equal
     card: --bg-{white|soft|mist|sky|dawn|horizon|glow|aurora|navy|ocean|custom}

   Backgrounds use VIC tokens only; tints are mixed from VIC Blue / Orange.
   ========================================================================== */

.vic-stack {
	--vic-stack-top: calc(var(--header-height) + var(--space-6));
	--vic-stack-peek: var(--space-4);                 /* 16 */
	--vic-stack-gap: var(--space-8);                  /* 32 */
	--vic-stack-min: 0px;
	--vic-stack-radius: var(--radius-panel);          /* 24 */
	--vic-stack-tint-blue: color-mix(in srgb, var(--vic-blue) 8%, var(--color-background));
	--vic-stack-tint-orange: color-mix(in srgb, var(--vic-orange) 12%, var(--color-background));
}

@media (min-width: 1024px) {
	.vic-stack { --vic-stack-min: 420px; }
}

.vic-stack__list {
	display: grid;
	gap: var(--vic-stack-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   Stacking: each item sticks a little lower than the previous one, so the
   edges of the cards behind stay visible.
   -------------------------------------------------------------------------- */
.vic-stack__item {
	position: sticky;
	top: calc(var(--vic-stack-top) + var(--wp-admin--admin-bar--height, 0px) + var(--vic-stack-i, 0) * var(--vic-stack-peek));
	margin: 0;
}

@media (max-width: 767px) {
	.vic-stack:not(.vic-stack--mobile-stack) .vic-stack__item {
		position: relative;
		top: auto;
	}
}

/* Editor: a normal list (easier to edit; stacking shows on the live page). */
body.elementor-editor-active .vic-stack__item {
	position: relative;
	top: auto;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.vic-stack__card {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
	align-items: center;
	min-height: max(var(--vic-stack-min), var(--vic-stack-h, 0px));
	padding: var(--panel-pad);
	border: 1px solid color-mix(in srgb, var(--vic-blue) 8%, transparent);
	border-radius: var(--vic-stack-radius);
	background: var(--color-background);
	box-shadow: 0 -4px 24px rgba(0, 30, 64, 0.06);
	color: var(--color-body);
	transform-origin: center top;
	transform: scale(calc(1 - var(--vic-stack-cover, 0) * 0.05));
	will-change: transform;
}

.vic-stack--depth-none .vic-stack__card {
	transform: none;
	will-change: auto;
}

/* Depth: a covered card fades a little (overlay, so text contrast is unchanged until covered). */
.vic-stack__card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: var(--vic-blue-deep);
	opacity: calc(var(--vic-stack-cover, 0) * 0.08);
	pointer-events: none;
}

.vic-stack__card {
	position: relative;
}

.vic-stack--depth-none .vic-stack__card::after {
	display: none;
}

/* While measuring heights (JS), cards take their natural height. */
.vic-stack.is-measuring .vic-stack__card {
	min-height: 0;
}

@media (min-width: 1024px) {
	.vic-stack__card:not(.vic-stack__card--no-media) {
		grid-template-columns: var(--vic-stack-cols, minmax(0, 1fr) minmax(0, 1fr));
		gap: var(--space-16);
	}

	.vic-stack--split-45-55 { --vic-stack-cols: minmax(0, 45fr) minmax(0, 55fr); --vic-stack-cols-rev: minmax(0, 55fr) minmax(0, 45fr); }
	.vic-stack--split-55-45 { --vic-stack-cols: minmax(0, 55fr) minmax(0, 45fr); --vic-stack-cols-rev: minmax(0, 45fr) minmax(0, 55fr); }
	.vic-stack--split-60-40 { --vic-stack-cols: minmax(0, 60fr) minmax(0, 40fr); --vic-stack-cols-rev: minmax(0, 40fr) minmax(0, 60fr); }

	.vic-stack--media-left .vic-stack__card:not(.vic-stack__card--no-media),
	.vic-stack--media-alternate .vic-stack__item:nth-child(even) .vic-stack__card:not(.vic-stack__card--no-media) {
		grid-template-columns: var(--vic-stack-cols-rev, minmax(0, 1fr) minmax(0, 1fr));
	}

	.vic-stack--media-left .vic-stack__media,
	.vic-stack--media-alternate .vic-stack__item:nth-child(even) .vic-stack__media {
		order: -1;
	}
}

/* Content: big number beside the text (stacked on small screens). */
.vic-stack__content {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-2) var(--space-6);
	min-width: 0;
}

@media (min-width: 768px) {
	.vic-stack__content {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
	}
}

.vic-stack__number {
	color: var(--vic-blue);
	font-size: var(--text-display-size);
	font-weight: var(--weight-bold);
	line-height: 0.9;
	letter-spacing: var(--text-display-tracking);
	font-variant-numeric: tabular-nums;
	opacity: 0.12;
}

.vic-stack__body {
	min-width: 0;
}

.vic-stack__body > * {
	margin: 0;
}

.vic-stack__eyebrow {
	margin-block-end: var(--gap-eyebrow);
}

.vic-stack__heading {
	color: var(--color-heading);
	font-size: var(--text-h2-size);
	font-weight: var(--weight-bold);
	line-height: var(--text-h2-line);
	letter-spacing: var(--text-h2-tracking);
	text-wrap: balance;
}

.vic-stack__text {
	max-width: var(--measure-body);
	margin-block-start: var(--gap-heading);
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
}

.vic-stack__text > * {
	margin-block: 0;
}

.vic-stack__text > * + * {
	margin-block-start: var(--gap-paragraph);
}

.vic-stack__cta {
	margin-block-start: var(--space-6);
}

.vic-stack__media {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.vic-stack__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 26rem;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Backgrounds
   -------------------------------------------------------------------------- */
.vic-stack__card--bg-white   { background: var(--color-background); }
.vic-stack__card--bg-soft    { background: var(--color-surface-soft); }
.vic-stack__card--bg-mist    { background: linear-gradient(135deg, var(--vic-stack-tint-blue) 0%, var(--color-surface-soft) 100%); }
.vic-stack__card--bg-sky     { background: linear-gradient(180deg, var(--color-background) 0%, color-mix(in srgb, var(--vic-blue) 12%, var(--color-background)) 100%); }
.vic-stack__card--bg-dawn    { background: linear-gradient(135deg, var(--color-background) 0%, var(--vic-stack-tint-orange) 100%); }
.vic-stack__card--bg-horizon { background: linear-gradient(120deg, var(--vic-stack-tint-blue) 0%, var(--color-background) 55%, var(--vic-stack-tint-orange) 100%); }

.vic-stack__card--bg-glow {
	background:
		radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--vic-orange) 20%, transparent) 0, transparent 42%),
		linear-gradient(180deg, var(--color-background) 0%, var(--color-surface-soft) 100%);
}

.vic-stack__card--bg-aurora {
	background:
		radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--vic-blue) 16%, transparent) 0, transparent 48%),
		radial-gradient(circle at 96% 100%, color-mix(in srgb, var(--vic-orange) 16%, transparent) 0, transparent 44%),
		var(--color-background);
}

.vic-stack__card--bg-navy  { background: linear-gradient(135deg, var(--vic-blue-deep) 0%, color-mix(in srgb, var(--vic-blue-deep) 55%, var(--vic-blue)) 100%); }
.vic-stack__card--bg-ocean { background: linear-gradient(135deg, var(--vic-blue) 0%, var(--vic-blue-deep) 100%); }

/* Dark cards: light text (theme .on-dark rules cover headings, links, buttons, focus). */
.vic-stack__card.on-dark {
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--color-on-dark-muted);
}

.vic-stack__card.on-dark .vic-stack__heading { color: var(--color-on-dark); }
.vic-stack__card.on-dark .vic-stack__number  { color: var(--color-on-dark); opacity: 0.2; }

/* --------------------------------------------------------------------------
   Reduced motion: stacking stays (it is plain scrolling); no shrinking.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.vic-stack__card {
		transform: none !important;
	}

	.vic-stack__card::after {
		display: none;
	}
}