/**
 * Timeline Component Styles
 * Displays a vertical timeline with status tracking for PPWR compliance
 * Color scheme and sizing follows design system in rem units
 */

/* ====================================
   WRAPPER (Level 1) - ws-timeline-wrap
   ==================================== */
.ws-timeline-wrap {
	position: relative;
}

/* Individual timeline item */
.ws-timeline__item {
	position: relative;
	border-bottom: 1px solid var(--border);
	opacity: 0;
	animation: fadeInUp 0.6s ease-out forwards;
}

/* Timeline card container */
.ws-timeline__card {
	flex: 1;
}
.ws-timeline__item--visible .ws-timeline__card {
	animation: slideInRight 0.6s ease-out forwards;
}

/* Date text */
.ws-timeline__date {
	flex-basis: 24.7%;
	min-width: 11rem;
	flex-shrink: 0;
	border-right: 1px solid var(--border)
}

/* Status badge */
.ws-timeline-badge {
	margin-right: auto !important;
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: white;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Badge for completed status */
.ws-timeline-badge--done {
	background-color: var(--brand);
}

/* Badge for planned status */
.ws-timeline-badge--upcoming {
	background-color: var(--light-brand);
	color: var(--brand);
}

/* Badge for pending status */
.ws-timeline-badge--pending {
	background-color: var(--lightgrey);
	color: var(--text);
}

/* Card title */
.ws-timeline__title {
	color: var(--heading);
}

/* Card description */
.ws-timeline__description {
	color: var(--text);
	line-height: 1.5;
}
.ws-timeline__req_title {
	color: var(--heading);
	font-weight: 500;
	margin-bottom: .5rem
}
/* Requirements list */
ul.ws-timeline__requirements {
	padding: 0 0 0 1rem!important;
	margin: 0;
}
li.ws-timeline__requirement {
	color: var(--text);
	line-height: 1.25;
}
li.ws-timeline__requirement:not(:last-child) {
	margin-bottom: 0.5rem;
}
/* Empty state message */
.ws-timeline__empty {
	text-align: center;
	padding: 2rem;
	font-size: 1rem;
	color: var(--heading);
}

/* Animation classes */
.ws-timeline__item--animated {
	animation-duration: 0.6s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/* Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(-1rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Expanded state for mobile cards */
.ws-timeline__card--expanded {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive design - tablet */
@media (min-width: 768px) {
	.ws-timeline__item > * {
		padding: 2rem 2rem 5rem;
	}
}
@media (min-width: 1200px) {
	.ws-timeline__item > * {
		padding: 2.5rem 2.5rem 5rem;
	}
}
@media (max-width: 767px) {
	.ws-timeline__item {
		flex-wrap: wrap;
	}
	.ws-timeline__item > * {
		padding: 2rem 1.25rem 4rem;
	}
	.ws-timeline__date, .ws-badge-wrap {
		flex-basis: 50%;
		min-width: unset;
	}
	.ws-timeline__date {
		padding-right: .5rem;
		border-right-width: 0;
	}
	.ws-badge-wrap {
		padding-left: .5rem;
		align-self: center;
	}
	.ws-timeline-badge {
		float: right
	}
	.ws-timeline__card {
		order: 3;
		flex-basis: 100%;
		border-top: 1px solid var(--border);
	}
}