/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-telex-company-timeline {
	display: flex;
	gap: 60px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
	position: relative;

	.timeline-sidebar {
		flex: 0 0 200px;
		position: sticky;
		top: 100px;
		height: fit-content;
		align-self: flex-start;

		.timeline-years {
			background: #f8f9fa;
			border-radius: 8px;
			padding: 24px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

			h3 {
				margin: 0 0 20px 0;
				font-size: 18px;
				font-weight: 700;
				color: #1e293b;
				border-bottom: 2px solid #e2e8f0;
				padding-bottom: 12px;
			}

			.year-link {
				display: block;
				padding: 12px 16px;
				margin-bottom: 8px;
				text-decoration: none;
				color: #64748b;
				font-weight: 600;
				font-size: 16px;
				border-radius: 6px;
				transition: all 0.3s ease;
				cursor: pointer;
				background: transparent;
				border: none;
				width: 100%;
				text-align: left;

				&:hover {
					background: #e2e8f0;
					color: #1e293b;
					transform: translateX(4px);
				}

				&.active {
					background: #3b82f6;
					color: white;
					box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
				}
			}
		}
	}

	.timeline-content {
		flex: 1;
		min-width: 0;

		.timeline-entry {
			margin-bottom: 80px;
			scroll-margin-top: 100px;

			&:last-child {
				margin-bottom: 0;
			}

			.timeline-year-marker {
				margin-bottom: 24px;
				position: relative;
				padding-left: 40px;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 24px;
					height: 24px;
					background: #3b82f6;
					border-radius: 50%;
					box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
				}

				h2 {
					margin: 0;
					font-size: 32px;
					font-weight: 800;
					color: #1e293b;
					line-height: 1;
				}
			}

			.timeline-entry-content {
				background: white;
				border-radius: 12px;
				padding: 32px;
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
				border-left: 4px solid #3b82f6;

				.timeline-title {
					margin: 0 0 16px 0;
					font-size: 24px;
					font-weight: 700;
					color: #1e293b;
				}

				.timeline-description {
					margin: 0 0 24px 0;
					font-size: 16px;
					line-height: 1.8;
					color: #475569;
				}

				.timeline-media {
					margin-top: 24px;

					img {
						width: 100%;
						height: auto;
						border-radius: 8px;
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
					}
				}
			}
		}
	}

	@media (max-width: 768px) {
		flex-direction: column;
		gap: 30px;
		padding: 20px 15px;

		.timeline-sidebar {
			position: static;
			flex: 1;

			.timeline-years {
				padding: 16px;

				h3 {
					font-size: 16px;
					margin-bottom: 12px;
				}

				.year-link {
					padding: 10px 12px;
					font-size: 14px;
				}
			}
		}

		.timeline-content {
			.timeline-entry {
				margin-bottom: 50px;

				.timeline-year-marker {
					padding-left: 30px;

					&::before {
						width: 18px;
						height: 18px;
					}

					h2 {
						font-size: 24px;
					}
				}

				.timeline-entry-content {
					padding: 20px;

					.timeline-title {
						font-size: 20px;
					}

					.timeline-description {
						font-size: 15px;
					}
				}
			}
		}
	}
}
