/* workshop-progress — visual progress through workshops. Three variants:
   - module (default): horizontal segments with varying heights for one module
   - stacked: cumulative stacking visualization showing skills building
   - program: full program view grouped by modules */

.workshop-progress {
	margin: 40px 0;
	border: 2px solid black;
	padding: 20px;
	background: #f5f5f5;

	.workshop-progress-bar {
		display: flex;
		height: 50px;
		border: 2px solid black;
		overflow: hidden;
		background: white;
	}

	.progress-segment {
		height: 100%;
		border-right: 1px solid rgb(0 0 0 / 0.2);
		position: relative;
		transition: opacity 0.2s, transform 0.1s;
		cursor: default;
		flex: 1;

		&:last-child {
			border-right: none;
		}

		&.locked {
			opacity: 0.3;
			cursor: not-allowed;
		}

		&.awaiting {
			opacity: 0.6;
			background-image: repeating-linear-gradient(
				45deg,
				transparent,
				transparent 10px,
				rgb(0 0 0 / 0.1) 10px,
				rgb(0 0 0 / 0.1) 20px
			);
		}
	}

	a.progress-segment {
		display: block;
		height: 100%;
		text-decoration: none;
		cursor: pointer;

		&:hover {
			opacity: 1 !important;
			transform: scaleY(1.05);
		}
	}

	.current-marker {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 12px solid red;
		z-index: 10;
	}

	.workshop-progress-legend {
		margin-top: 15px;
		text-align: center;

		.divider {
			color: #666;
			padding: 0 5px;
		}
	}

	/* Program variant */
	&.program-variant {
		.workshop-progress-bar {
			height: 60px;
		}

		.progress-module {
			display: flex;
		}
	}

	/* Stacked variant */
	&.stacked-variant {
		.workshop-progress-bar {
			align-items: flex-end;
			min-height: 80px;
		}

		.progress-stack {
			display: flex;
			flex-direction: column-reverse;
			position: relative;
			flex: 1;
			border-left: 1px solid rgb(0 0 0 / 0.2);
			border-right: 1px solid rgb(0 0 0 / 0.2);

			&:hover {
				border-color: rgb(0 0 0 / 0.8);
				z-index: 10;
			}
		}

		.progress-segment {
			height: 20px;
			flex: none;
			border-top: 1px solid rgb(0 0 0 / 0.2);
			border-bottom: 1px solid rgb(0 0 0 / 0.2);
			border-left: none;
			border-right: none;
		}
	}
}