/**
 * Block: timeline-eventi
 *
 * Layout: barra verticale guida + marker su ogni tappa + content allineato a destra.
 */

@layer blocks {

	.lv-timeline-eventi {
		padding-block: var(--space-l);
	}

	.lv-timeline-eventi__inner {
		max-inline-size: var(--container-narrow);
		margin-inline: auto;
		padding-inline: var(--container-padding-inline);
	}

	.lv-timeline-eventi__header {
		margin-block-end: var(--space-l);
	}

	.lv-timeline-eventi__eyebrow {
		font-family: var(--font-body);
		font-size: var(--font-size-caption);
		font-weight: 600;
		letter-spacing: var(--letter-spacing-caps);
		text-transform: uppercase;
		color: var(--color-vino);
		margin: 0 0 var(--space-xs);
	}

	.lv-timeline-eventi__title {
		font-family: var(--font-display);
		font-size: var(--font-size-h2);
		font-weight: 500;
		line-height: var(--line-height-headings);
		color: var(--color-inchiostro-terra);
		margin: 0;
		text-wrap: balance;
	}

	.lv-timeline-eventi__list {
		list-style: none;
		padding: 0;
		margin: 0;
		position: relative;
	}

	.lv-timeline-eventi__list::before {
		content: "";
		position: absolute;
		inset-block: 0.5rem 0.5rem;
		inset-inline-start: 7px;
		inline-size: 2px;
		background-color: var(--color-border);
	}

	.lv-timeline-eventi__item {
		position: relative;
		padding-inline-start: var(--space-l);
		padding-block: var(--space-s);
	}

	.lv-timeline-eventi__marker {
		position: absolute;
		inset-block-start: calc(var(--space-s) + 0.3em);
		inset-inline-start: 0;
		inline-size: 16px;
		block-size: 16px;
		border-radius: var(--radius-full);
		background-color: var(--color-vino);
		border: 3px solid var(--color-bg);
		box-shadow: 0 0 0 1px var(--color-border);
	}

	.lv-timeline-eventi__content {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
	}

	.lv-timeline-eventi__anno {
		font-family: var(--font-display);
		font-size: var(--font-size-h3);
		font-weight: 500;
		line-height: var(--line-height-headings);
		color: var(--color-vino);
		margin: 0;
		font-variant-numeric: tabular-nums;
	}

	.lv-timeline-eventi__luogo {
		font-family: var(--font-body);
		font-size: var(--font-size-caption);
		font-weight: 600;
		letter-spacing: var(--letter-spacing-caps);
		text-transform: uppercase;
		color: var(--color-text-muted);
		margin: 0;
	}

	.lv-timeline-eventi__descrizione {
		font-family: var(--font-body);
		font-size: var(--font-size-body);
		line-height: var(--line-height-body);
		color: var(--color-inchiostro-terra);
	}

	.lv-timeline-eventi__descrizione p {
		margin: 0;
	}
}