/**
 * Cardiovascular Process styles
 * Variable --cvpm-step-width is set inline on .cvpm-section
 * via the shortcode's `width` attribute.
 *
 * Desktop: marquee design (gold line + alternating above/below circles)
 * Tablet/Mobile: normal stacked section (icon → label → title → description)
 */

.cvpm-section {
	--cvpm-cream: #f7f1e6;
	--cvpm-navy: #1a2a4a;
	--cvpm-gold: #c9a063;
	--cvpm-text-muted: #6b6b6b;

	font-family: 'Montserrat', sans-serif;
	background: var(--cvpm-cream);
	padding: 60px 0 40px;
	position: relative;
	overflow: hidden;
}

/* Decorative flowing background lines (Figma's subtle wavy pattern) */
.cvpm-section::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* ---------- Heading ---------- */
.cvpm-heading {
	text-align: center;
	/* margin-bottom: 80px; */
	/* padding: 0 20px 50px; */
	position: relative;
	z-index: 2;
}
.cvpm-heading h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: clamp(26px, 4vw, 42px);
	color: var(--cvpm-navy);
	letter-spacing: 0.5px;
	margin: 0 0 12px;
}
.cvpm-heading p {
	font-size: 14px;
	color: var(--cvpm-text-muted);
	letter-spacing: 1px;
	font-weight: 400;
	margin: 0;
}

/* ---------- Marquee frame (desktop) ---------- */
.cvpm-marquee {
	position: relative;
	width: 100%;
	padding: 100px 0;
	z-index: 2;
	text-align: center; /* centers the inline-flex track */
}

.cvpm-line {
	position: absolute;
	top: 48%;
	/* Inset by half a step on each side so the line begins at the
	   center of the first icon and ends at the center of the last icon. */
	left: calc(var(--cvpm-step-width, 320px) / 2);
	right: calc(var(--cvpm-step-width, 320px) / 2);
	height: 2px;
	background: var(--cvpm-gold);
	opacity: 0.55;
	transform: translateY(-50%);
	z-index: 1;
	pointer-events: none;
}

/* ---------- Track (desktop horizontal row) ---------- */
.cvpm-track {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;
	position: relative; /* contains the line */
	text-align: left;   /* reset center inherited from .cvpm-marquee */
	z-index: 2;
	vertical-align: top;
}

/* ---------- Step (desktop) ---------- */
.cvpm-step {
	flex: 0 0 var(--cvpm-step-width, 320px);
	width: var(--cvpm-step-width, 320px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 530px;
	padding: 0 10px;
}

.cvpm-content {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 280px;
	text-align: center;
	padding: 0 8px;
}

.cvpm-step.cvpm-above .cvpm-content { bottom: calc(50% + 85px); }
.cvpm-step.cvpm-below .cvpm-content {
	top: calc(50% + 55px);
	display: flex;
	flex-direction: column;
}

.cvpm-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--cvpm-navy);
	margin-bottom: 10px;
	letter-spacing: 0.2px;
	line-height: 1.3;
}

.cvpm-desc {
	font-size: 15px;
	line-height: 1.55;
	color: var(--cvpm-text-muted);
	font-weight: 400;
	margin-bottom: 10px;
}

.cvpm-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--cvpm-gold);
	letter-spacing: 2.5px;
	text-transform: uppercase;
}

.cvpm-step.cvpm-above .cvpm-label { margin-top: 14px; }
.cvpm-step.cvpm-below .cvpm-label { margin-bottom: 14px; }

/* ---------- Circle / Icon wrapper ----------
 * No styling — Figma-designed featured image renders at natural size.
 */
.cvpm-circle img.wp-post-image,
.cvpm-circle .wp-post-image {
	max-height: none !important;
	width: auto !important;
	height: auto !important;
	object-fit: initial !important;
	-o-object-fit: initial !important;
}

/* =========================================================================
   RESPONSIVE — Normal stacked section, no marquee logic
   ========================================================================= */

/* Tablet: 2 columns, stacked normally */
@media (max-width: 900px) {
	.cvpm-section {
		padding: 50px 20px 30px;
	}

	/* Kill the marquee line */
	.cvpm-line { display: none; }

	/* Convert track to a normal 2-column grid */
	.cvpm-track {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 50px 20px;
		max-width: 800px;
		margin: 0 auto;
	}

	/* Step becomes a normal stacked card — kill all marquee positioning */
	.cvpm-step,
	.cvpm-step.cvpm-above,
	.cvpm-step.cvpm-below {
		flex: initial;
		width: auto;
		height: auto;
		padding: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/* DOM order is .cvpm-content then .cvpm-circle — flip via flex order
	   so the icon appears at the top of each card on tablet/mobile. */
	.cvpm-step .cvpm-circle  { order: 1; margin-bottom: 18px; }
	.cvpm-step .cvpm-content { order: 2; }

	/* Content flows naturally below the icon — no absolute positioning */
	.cvpm-step .cvpm-content,
	.cvpm-step.cvpm-above .cvpm-content,
	.cvpm-step.cvpm-below .cvpm-content {
		position: static;
		transform: none;
		top: auto;
		bottom: auto;
		left: auto;
		max-width: 100%;
		display: flex;
		flex-direction: column;
	}

	/* Unified order within content: label → title → description */
	.cvpm-step.cvpm-above .cvpm-label,
	.cvpm-step.cvpm-below .cvpm-label {
		order: 1;
		margin: 0 0 8px;
	}
	.cvpm-step.cvpm-above .cvpm-title,
	.cvpm-step.cvpm-below .cvpm-title {
		order: 2;
	}
	.cvpm-step.cvpm-above .cvpm-desc,
	.cvpm-step.cvpm-below .cvpm-desc {
		order: 3;
		margin-bottom: 0;
	}

	.cvpm-heading {
		margin-bottom: 30px;
		padding-bottom: 20px;
	}
}

/* Mobile: 1 column */
@media (max-width: 600px) {
	.cvpm-section {
		padding: 40px 20px 30px;
	}
	.cvpm-marquee {
    position: relative;
    width: 100%;
    padding: 10px 0 !important;
    z-index: 2;
    text-align: center;
}
	.cvpm-track {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.cvpm-heading {
		margin-bottom: 1px !important;
		padding: 0 0 10px;
	}
	.cvpm-heading h2 {
		font-size: 24px;
	}
.cvpm-content {
    margin-top: -38px !important;
}
	
	.cvpm-step .cvpm-content {
		max-width: 360px;
		margin: 0 auto;
	}
	.cvpm-step .cvpm-title { font-size: 18px; margin-bottom: 6px; }
	.cvpm-step .cvpm-desc  { font-size: 14px; line-height: 1.5; }
	.cvpm-step .cvpm-label { font-size: 10px; letter-spacing: 2px; }

	/* Trim any default margin the WP featured image might add */
	.cvpm-circle,
	.cvpm-circle img {
		margin: 0 !important;
	}
	.cvpm-step .cvpm-circle { margin-bottom: 16px !important; }
}

/* Extra small phones */
@media (max-width: 380px) {
		.cvpm-content {
    margin-top: -38px !important;
}
	.cvpm-step .cvpm-title { font-size: 17px; }
	.cvpm-step .cvpm-desc  { font-size: 13px; }
}