/*
 * Elementor Timeline.
 *
 * The geometry and semantic anatomy mirror Genotyp's Gutenberg Timeline,
 * while the selector namespace keeps both implementations independent.
 */

.elementor-widget-sggw-timeline,
.sggw-elementor-timeline {
	inline-size: 100%;
}

.sggw-elementor-timeline {
	--sggw-elementor-timeline-parent-surface: var(--sggw-surface-current);
	--sggw-elementor-timeline-axis-center: calc(0px - var(--wp--preset--spacing--40, 24px));
	--sggw-elementor-timeline-indicator-offset: calc(var(--wp--preset--spacing--40, 24px) + 2px);
	--sggw-elementor-timeline-indicator-radius: 8px;
	--sggw-elementor-timeline-indicator-size: 16px;
}

.sggw-elementor-timeline__list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sggw-elementor-timeline__item {
	--sggw-surface-current: var(--sggw-module-default-surface);
	--sggw-surface-alternating: var(--sggw-module-default-alternating);
	--sggw-link-foreground: var(--sggw-module-default-link-foreground);
	--sggw-inline-link-decoration-rest: var(--sggw-module-default-inline-link-decoration-rest);

	align-items: stretch;
	background-color: var(--sggw-module-default-surface);
	border-radius: var(--wp--custom--radius--small, 4px);
	box-sizing: border-box;
	color: var(--sggw-text);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10, 8px);
	list-style: none;
	margin: 0 0 0 var(--wp--preset--spacing--50, 32px);
	min-block-size: 180px;
	min-inline-size: 0;
	padding: var(--wp--preset--spacing--30, 16px);
	position: relative;
}

.sggw-elementor-timeline__item:not(:last-child) {
	margin-block-end: var(--wp--preset--spacing--40, 24px);
}

.sggw-elementor-timeline__date,
.sggw-elementor-timeline__title,
.sggw-elementor-timeline__description {
	margin: 0;
}

.sggw-elementor-timeline__description a {
	color: var(--sggw-link-foreground);
	text-decoration-color: currentColor;
	text-decoration-line: var(--sggw-inline-link-decoration-rest);
	text-decoration-skip-ink: auto;
	text-decoration-thickness: var(--sggw-link-decoration-thickness);
	text-underline-offset: var(--sggw-link-underline-offset);
}

.sggw-elementor-timeline__description a:is(:visited, :hover, :active, :focus-visible) {
	color: var(--sggw-link-foreground);
}

.sggw-elementor-timeline__description a:is(:hover, :active, :focus-visible) {
	text-decoration-line: var(--sggw-link-decoration-interactive);
}

.sggw-elementor-timeline__description a:focus:not(:focus-visible) {
	outline: none;
}

.sggw-elementor-timeline__description a:focus-visible {
	border-radius: var(--wp--custom--radius--x-small, 2px);
	outline: var(--wp--custom--line--focus-ring-width, 3px) solid var(--sggw-line-focus);
	outline-offset: var(--wp--custom--line--focus-ring-offset-compact, 2px);
}

.sggw-elementor-timeline__date {
	color: var(--sggw-timeline-date-accent, var(--sggw-text-muted));
	display: block;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--x-large, 32px);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--semibold, 600);
	line-height: var(--wp--custom--typography--line-height--x-large, 1.2);
	margin-block: var(--wp--preset--spacing--10, 8px);
}

.sggw-elementor-timeline__title {
	color: var(--sggw-text);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--medium, 16px);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--semibold, 600);
	line-height: var(--wp--custom--typography--line-height--medium, 1.5);
}

.sggw-elementor-timeline__description {
	color: var(--sggw-text);
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--medium, 16px);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--regular, 400);
	inline-size: 100%;
	line-height: var(--wp--custom--typography--line-height--supporting, 1.6);
	min-inline-size: 0;
}

.sggw-elementor-timeline__indicator,
.sggw-elementor-timeline__connector {
	display: block;
	pointer-events: none;
	position: absolute;
}

.sggw-elementor-timeline__indicator {
	background-color: var(--sggw-elementor-timeline-parent-surface);
	block-size: var(--sggw-elementor-timeline-indicator-size);
	border: 2px solid var(--sggw-line-decorative);
	border-radius: 50%;
	box-sizing: border-box;
	inline-size: var(--sggw-elementor-timeline-indicator-size);
	inset-block-start: var(--sggw-elementor-timeline-indicator-offset);
	inset-inline-start: calc(
		var(--sggw-elementor-timeline-axis-center) -
			var(--sggw-elementor-timeline-indicator-radius)
	);
	z-index: 1;
}

.sggw-elementor-timeline__connector {
	background-color: var(--sggw-line-decorative);
	inline-size: 2px;
	inset-block-end: calc(
		0px - var(--wp--preset--spacing--40, 24px) -
			var(--sggw-elementor-timeline-indicator-offset)
	);
	inset-block-start: calc(
		var(--sggw-elementor-timeline-indicator-offset) +
			var(--sggw-elementor-timeline-indicator-size)
	);
	inset-inline-start: calc(var(--sggw-elementor-timeline-axis-center) - 1px);
}

.sggw-elementor-timeline__item:last-child
	> .sggw-elementor-timeline__connector {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.sggw-elementor-timeline__item:hover {
		box-shadow: var(--wp--custom--shadow--small, 0 4px 12px rgb(0 0 0 / 20%));
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.sggw-elementor-timeline__item {
		transition: box-shadow 150ms ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sggw-elementor-timeline__item {
		transition: none;
	}
}

@media (max-width: 480px) {
	.sggw-elementor-timeline {
		--sggw-elementor-timeline-axis-center: calc(0px - var(--wp--preset--spacing--30, 16px));
	}

	.sggw-elementor-timeline__item {
		margin-inline-start: var(--wp--preset--spacing--40, 24px);
	}
}

@media (forced-colors: active) {
	.sggw-elementor-timeline__item {
		background: Canvas;
		border: 1px solid CanvasText;
		box-shadow: none !important;
		color: CanvasText;
		forced-color-adjust: none;
	}

	.sggw-elementor-timeline__date,
	.sggw-elementor-timeline__title,
	.sggw-elementor-timeline__description {
		color: CanvasText;
	}

	.sggw-elementor-timeline__description a,
	.sggw-elementor-timeline__description a:is(:visited, :hover, :active) {
		color: LinkText;
		text-decoration-line: underline;
	}

	.sggw-elementor-timeline__description a:focus-visible {
		outline-color: Highlight;
	}

	.sggw-elementor-timeline__indicator {
		background-color: Canvas;
		border-color: CanvasText;
		forced-color-adjust: none;
	}

	.sggw-elementor-timeline__connector {
		background-color: CanvasText;
		forced-color-adjust: none;
	}
}