/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 10 2026 | 11:32:53 */
/* ========================================= Timeline ========================================= */
.timeline-section {
	--tl-gap: clamp(1.5rem, 4vw, 3.5rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: var(--tl-gap);
	background-color: var(--white-dyn-2);
	transition: background-color 0.4s;
	
	@media screen and (max-width: 991px) {
		grid-template-columns: 1fr;
	}
	
	.timeline-left {
		min-width: 0;
		padding-block: 2rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		@media screen and (max-width: 991px) {
			order: 1;
		}
		
		.timeline-content {
			display: grid;
			min-width: 0;

			> .acf-innerblocks-container {
				display: contents;
			}

			.timeline-content-wrapper {
				grid-area: 1 / 1;
				min-width: 0;
				opacity: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;

				&:first-child {
					opacity: 1;
				}
				
				&.is-active {
					opacity: 1;
				}

				.acf-innerblocks-container {
					> *:first-child {
						margin-top: 0;
					}
					> *:last-child {
						margin-bottom: 0;
					}
				}

				.wp-block-image,
				figure {
					margin: 0 0 1rem;
				}
				
				img {
					max-width: 100%;
					height: auto;
				}

				* {
					color: var(--green-dark-2-dyn-1);
					transition: color 0.4s;
					font-size: 1.2rem;

					@media screen and (min-width: 1200px) {
						font-size: 1.5rem;
					}
				}
				
				h2,
				h3 {
					font-size: 2em;
					font-weight: 700;
					margin-bottom: 1.5rem;

					@media screen and (min-width: 1200px) {
						font-size: 3.5rem;
					}
				}
			}
		}
		
		.timeline-nav {
			display: flex;
			justify-content: end;
			margin-top: 1rem;
			
			.timeline-nav__btn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: auto;
				aspect-ratio: 1/1;
				padding: 0.5rem;
				border: 0;
				cursor: pointer;
				background-color: transparent;
				outline: none;
				transition: background-color 0.3s ease;

				&:focus-visible,
				&:hover {
					background-color: var(--green-dark-1);
				}

				svg {
					display: block;
					width: 1rem;
					height: auto;

					path {
						fill: var(--green-light-1);
					}
				}
			}
		}
	}
	
	.timeline-track {
		position: relative;
		min-height: 600px;
		overflow: hidden;
		
		@media screen and (max-width: 991px) {
			order: 2;
			min-height: 220px;
		}
		
		.timeline-arc {
			position: absolute;
			inset: 0;
			pointer-events: none;
			
			.timeline-arc__line {
				stroke: var(--green-light-2);
				stroke-width: 2;
				stroke-linecap: round;
				fill: none;
			}
		}
		
		.timeline-markers {
			position: absolute;
			inset: 0;
			
			.timeline-marker {
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 0;
				padding: 0;
				border: 0;
				margin: 0;
				background: none;
				overflow: visible;
				cursor: pointer;
				opacity: 0;
				will-change: transform, opacity;
				
				@media (prefers-reduced-motion: reduce) {
					transition: none;
				}
				
				.timeline-marker__dot {
					position: absolute;
					left: 0;
					top: 0;
					width: 1rem;
					height: 1rem;
					border-radius: 50%;
					background: var(--green-light-1);
					transform: translate(-50%, -50%) scale(calc(1 + (var(--p, 0) * 0.65)));
				}
				
				.timeline-marker__label {
					position: absolute;
					left: 0;
					top: 0;
					transform: translate(calc(-100% - 18px), -50%);
					white-space: nowrap;
					text-align: right;
					font-weight: 700;
					font-size: 1.5rem;
					line-height: 1;
					color: var(--green-light-1);
					transition: font-size .2s ease;
					
					@media screen and (max-width: 991px) {
						font-size: 1.2rem;
						text-align: center;
						transform: translate(-50%, calc(-100% - 0.75rem));
					}
				}
				
				&.is-active {
					.timeline-marker__dot {
						background-color: var(--green-dark-1-dyn-1);
					}
					
					.timeline-marker__label {
						color: var(--green-dark-1-dyn-1);
						font-size: 1.65rem;
						
						@media screen and (max-width: 991px) {
							font-size: 1.3rem;
						}
					}
				}
				
				@supports (background: color-mix(in srgb, red, blue)) {
					.timeline-marker__dot {
						background: color-mix(in srgb,
							var(--green-dark-1) calc(var(--p, 0) * 100%),
							var(--green-light-1));
					}
					
					.timeline-marker__label {
						color: color-mix(in srgb,
							var(--green-dark-1) calc(var(--p, 0) * 100%),
							var(--green-light-1));
					}
				}
			}
		}
	}
}