/**
 * Case Study Sidebar
 *
 * Independent absolutely positioned sidebar that appears alongside hero and intro sections.
 * Uses sticky positioning to follow user scroll, with JavaScript-enhanced behavior.
 * Only visible on desktop (above 1200px).
 */

/* Sidebar Container */
.case-study-sidebar {
	position: absolute;
	/* top value is dynamically calculated by JavaScript to center between hero and intro */
	left: max(20px, calc((100vw - 917px) / 2 - 198px - 39px)); /* Position in left gutter, min 20px */
	z-index: 10; /* Above hero and intro sections */
	width: 198px;
}

/* Sticky Content Box */
.case-study-sidebar__content {
	position: sticky;
	top: 144px;
	width: 198px;
	background-color: #ffffff;
	border-radius: 13.655px;
	box-shadow: 0px 2.731px 23.214px rgba(0, 0, 0, 0.25);
	padding: 21px 16.386px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	transition: opacity 0.3s ease;
}

/* Stats Title */
.case-study-sidebar__stats-title {
	font-family: 'Avenir Next', sans-serif;
	font-weight: 600; /* Demi Bold */
	font-size: 16.386px;
	line-height: normal;
	color: #121c66;
}

/* Stats List */
.case-study-sidebar__stats-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Individual Stat Item */
.case-study-sidebar__stat-item {
	font-family: 'Avenir Next', sans-serif;
	font-weight: 400; /* Regular */
	font-size: 15px;
	line-height: normal;
	color: #121c66;
}

/* Dividers Between Stats */
.case-study-sidebar__stats-divider {
	width: 100%;
	height: 1px;
	background-color: rgba(18, 28, 102, 0.2);
	margin: 8px 0;
}

/* Share Label */
.case-study-sidebar__share-label {
	font-family: 'Avenir Next', sans-serif;
	font-weight: 500; /* Medium */
	font-size: 10.924px;
	line-height: normal;
	color: #121c66;
}

/* Share Icons */
.case-study-sidebar__share-icons {
	display: flex;
	align-items: center;
	gap: 20px;
}

.case-study-sidebar__share-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	transition: opacity 0.2s ease;
}

.case-study-sidebar__share-icons a:hover {
	opacity: 0.7;
}

.case-study-sidebar__share-icons img,
.case-study-sidebar__share-icons svg {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.case-study-sidebar__share-icons svg path {
	fill: #121c66;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Below 1200px - Hide sidebar completely */
@media (max-width: 1200px) {
	.case-study-sidebar {
		display: none;
	}
}

/* Between 1200px - 1400px - Adjust positioning for narrower viewports */
@media (max-width: 1400px) and (min-width: 1201px) {
	.case-study-sidebar {
		left: max(20px, calc((100vw - 917px) / 2 - 198px - 39px));
	}
}