/* Stacking Cards Manager: base styles. Values come from CSS variables set per block. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Plus Jakarta Sans for the whole section (overrides theme fonts) */
.wmd, .wmd *, .wmd *::before, .wmd *::after { font-family: var(--wmd-font, "Plus Jakarta Sans", sans-serif) !important; }

html:has(.wmd-card), body:has(.wmd-card) { overflow-x: clip; }

.wmd, .wmd *, .wmd *::before, .wmd *::after { box-sizing: border-box; }

.wmd {
	width: 100%;
	padding: var(--wmd-pt, 90px) 5vw var(--wmd-pb, 110px);
	background: var(--wmd-bg, transparent);
	color: #fff;
	font-family: inherit;
	line-height: 1.5;
	overflow: visible;
}
.wmd-inner { max-width: var(--wmd-max, 1200px); margin: 0 auto; overflow: visible; }

.wmd-h2 {
	margin: 0 0 56px;
	text-align: center;
	color: var(--wmd-h-color, #fff);
	font-size: var(--wmd-h-size, 46px);
	font-weight: 700;
	line-height: 1.2;
}

.wmd-grid {
	display: flex;
	align-items: flex-start;
	gap: var(--wmd-gap, 56px);
	overflow: visible;
}

/* Left navigation */
.wmd-nav {
	position: sticky;
	top: var(--wmd-top, 100px);
	align-self: flex-start;
	flex: 0 0 var(--wmd-nav-w, 260px);
	width: var(--wmd-nav-w, 260px);
}
.wmd-nav ul { list-style: none; margin: 0; padding: 0; }
.wmd-nav li { border-bottom: 1px solid var(--wmd-nav-line, #2e3550); }
.wmd-nav li:first-child { border-top: 1px solid var(--wmd-nav-line, #2e3550); }
.wmd-nav-link {
	display: block;
	position: relative;
	padding: 14px 16px 14px 0;
	text-align: right;
	font-size: var(--wmd-nav-size, 16px);
	line-height: 1.4;
	color: var(--wmd-nav-color, #9aa3b8);
	text-decoration: none;
	transition: color .25s ease;
}
.wmd-nav-link:hover { color: var(--wmd-nav-active, #fff); }
.wmd-nav-link.is-active { color: var(--wmd-nav-active, #fff); font-weight: 600; }
.wmd-nav-link.is-active::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -56px;
	width: 44px;
	height: 1px;
	background: var(--wmd-nav-active, #fff);
	opacity: .7;
}

/* Stacked cards */
.wmd-stack { position: relative; flex: 1 1 auto; min-width: 0; overflow: visible; }
.wmd-stack::after { content: ""; display: block; height: var(--wmd-end-space, 45vh); }

.wmd-card {
	position: sticky;
	top: calc(var(--wmd-top, 100px) + var(--i, 0) * var(--wmd-peek, 36px));
	margin: 0 0 var(--wmd-slide-gap, 0px);
	overflow: hidden;
	border-radius: var(--wmd-radius, 14px);
	background: linear-gradient(180deg, var(--wmd-card-from, #0c1640), var(--wmd-card-to, #080d26));
	box-shadow: 0 -14px 30px rgba(0, 0, 0, .45);
	transform-origin: 50% 0;
	will-change: transform;
}
.wmd-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(3, 8, 31, var(--dim, 0));
	pointer-events: none;
	border-radius: inherit;
}

.wmd-media {
	height: var(--wmd-media-h, 400px);
	background-size: cover;
	background-position: center;
}
.wmd-img {
	display: block;
	width: 100%;
	height: var(--wmd-media-h, 400px);
	object-fit: cover;
}

.wmd-body {
	display: flex;
	flex-direction: column;
	position: static;
	height: var(--wmd-body-h, 250px);
	padding: 24px 28px 28px;
	overflow: hidden;
}
.wmd-title {
	flex: 0 0 auto;
	margin: 0 0 10px;
	font-size: var(--wmd-title-size, 22px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wmd-title-color, #fff);
}
.wmd-text {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	font-size: var(--wmd-text-size, 15px);
	line-height: 1.6;
	color: var(--wmd-text-color, #c7cbd6);
}
.wmd-text p { margin: 0 0 8px; }
.wmd-text p:last-child { margin: 0; }

.wmd-btn {
	display: inline-flex;
	align-self: flex-start;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 11px 18px;
	border-radius: var(--wmd-btn-radius, 4px);
	background: var(--wmd-btn-bg, #1f4fff);
	color: var(--wmd-btn-text, #fff);
	font-size: var(--wmd-btn-size, 13px);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}
.wmd-btn:hover { background: var(--wmd-btn-hover, #1640e6); color: var(--wmd-btn-text, #fff); }

@media (prefers-reduced-motion: reduce) {
	.wmd-card { will-change: auto; }
	.wmd-nav-link { transition: none; }
}

/* Text is always below the image (overlay mode disabled for a fixed layout) */
.wmd-mode-overlay .wmd-body {
	position: static;
	background: var(--wmd-body-bg, transparent);
}

/* ==========================================================================
   CLEAN LAYOUT (final): no card/container background, no dim color, no shadow.
   Image, title, paragraph and button stacked with a fixed 20px gap.
   Nothing is clipped: body height is automatic.
   ========================================================================== */
.wmd .wmd-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: auto;
	overflow: visible;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0;
}
.wmd .wmd-card::after { display: none !important; }

.wmd .wmd-card .wmd-media {
	position: relative;
	flex: 0 0 auto;
	height: var(--wmd-media-h, 400px);
	overflow: hidden;
	border-radius: var(--wmd-radius, 14px);
}
.wmd .wmd-card .wmd-media .wmd-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	display: block;
}

.wmd .wmd-card .wmd-body {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: auto;
	margin: 0;
	padding: 0;
	background: transparent !important;
	overflow: visible;
	text-shadow: none;
}
.wmd .wmd-card .wmd-title { flex: 0 0 auto; margin: 0; text-shadow: none; }
.wmd .wmd-card .wmd-text  { flex: 0 0 auto; min-height: 0; overflow: visible; margin: 0; text-shadow: none; }
.wmd .wmd-card .wmd-text p { margin: 0; }
.wmd .wmd-card .wmd-text p + p { margin-top: 20px; }
.wmd .wmd-card .wmd-btn   { flex: 0 0 auto; align-self: flex-start; margin: 0; }

/* Space below the button, before the next card */
.wmd .wmd-card .wmd-body {
	padding-bottom: 40px !important;
}

/* ==========================================================================
   SMALL-LAPTOP FIT: each card is never taller than the space left below its
   sticky position, so text and button always stay on screen. Only the image
   shrinks (down to 80px) to make room. On large screens nothing changes,
   because the image already has its full height and the card fits.
   ========================================================================== */
.wmd .wmd-card {
	max-height: calc(100vh - var(--wmd-top, 100px) - var(--i, 0) * var(--wmd-peek, 36px));
	max-height: calc(100dvh - var(--wmd-top, 100px) - var(--i, 0) * var(--wmd-peek, 36px));
}
.wmd .wmd-card .wmd-media {
	flex: 0 1 var(--wmd-media-h, 400px);
	min-height: 80px;
}

/* Very short screens (small laptops, browser toolbars): tighten the spacing inside each card a little more. */
@media (max-height: 720px) {
	.wmd .wmd-card .wmd-body { gap: 14px; padding-bottom: 16px !important; }
	.wmd .wmd-card { gap: 14px; }
}

/* Short desktop screens (12-13 inch laptops, browser toolbars, Windows scaling):
   the sticky offset itself is compressed to the viewport height, so the stack
   leaves room for the card text and button. Taller screens keep the exact values. */
@media (max-height: 720px) and (min-width: 901px) {
	.wmd .wmd-nav {
		top: min(var(--wmd-top, 100px), 8vh);
	}
	.wmd .wmd-card {
		top: calc(min(var(--wmd-top, 100px), 8vh) + var(--i, 0) * min(var(--wmd-peek, 36px), 3vh));
		max-height: calc(100vh - min(var(--wmd-top, 100px), 8vh) - var(--i, 0) * min(var(--wmd-peek, 36px), 3vh));
		max-height: calc(100dvh - min(var(--wmd-top, 100px), 8vh) - var(--i, 0) * min(var(--wmd-peek, 36px), 3vh));
	}
}