/**
 * Extra-web Timeline for Elementor
 *
 * Tutti i valori regolabili dall'editor passano da custom properties impostate
 * sul wrapper: qui il CSS resta statico e non serve alcun !important.
 */

.ewtl-timeline {
	--ewtl-line-color: #f5efe4;
	--ewtl-line-width: 8px;
	--ewtl-line-radius: 0px;
	--ewtl-line-top: 0px;
	--ewtl-line-bottom: 0px;

	--ewtl-dot-color: #8a6212;
	--ewtl-dot-size: 22px;
	--ewtl-dot-offset: 8px;

	--ewtl-icon-size: 62px;
	--ewtl-icon-rotate: 0deg;
	--ewtl-icon-gap: 6px;
	--ewtl-icon-color: #8a6212;
	--ewtl-icon-offset-y: 0px;

	--ewtl-items-gap: 40px;
	--ewtl-content-gap: 44px;
	--ewtl-column-width: 42%;

	/* Sfalsamento verticale delle colonne. --ewtl-item-offset-y non va dichiarata
	   qui: resta indefinita apposta, così il fallback nella translateY() degli item
	   ricade sul valore di colonna finché non la imposta il singolo elemento. */
	--ewtl-offset-left: 0px;
	--ewtl-offset-right: 0px;

	position: relative;
	display: grid;
	grid-template-columns: var(--ewtl-column-width) var(--ewtl-line-width) var(--ewtl-column-width);
	justify-content: center;
	column-gap: var(--ewtl-content-gap);
	row-gap: var(--ewtl-items-gap);
}

/* Linea continua: è fuori dal flusso della griglia, così non viene spezzata
   dai singoli elementi e resta ininterrotta per tutta l'altezza. */
.ewtl-timeline::before {
	content: "";
	position: absolute;
	top: var(--ewtl-line-top);
	bottom: var(--ewtl-line-bottom);
	left: 50%;
	transform: translateX(-50%);
	width: var(--ewtl-line-width);
	border-radius: var(--ewtl-line-radius);
	background-color: var(--ewtl-line-color);
	pointer-events: none;
}

.ewtl-item {
	position: relative;
	min-width: 0;
}

/* Lo spostamento verticale passa da transform e non dai margini: resta visivo,
   non cambia l'altezza della griglia e non trascina gli elementi successivi.
   Il valore del singolo elemento, se impostato, prevale su quello di colonna. */
.ewtl-item--left {
	grid-column: 1;
	transform: translateY(var(--ewtl-item-offset-y, var(--ewtl-offset-left)));
}

.ewtl-item--right {
	grid-column: 3;
	transform: translateY(var(--ewtl-item-offset-y, var(--ewtl-offset-right)));
}

/* Allineamento dei testi verso la linea, come nella grafica di riferimento.
   La classe sul wrapper è generata dal controllo "Allinea i testi verso la linea". */
.ewtl-aligned-yes .ewtl-item--left {
	text-align: right;
}

.ewtl-aligned-yes .ewtl-item--right {
	text-align: left;
}

/* --- Pallini ---------------------------------------------------------- */

.ewtl-item--year::after {
	content: "";
	position: absolute;
	top: var(--ewtl-dot-offset);
	width: var(--ewtl-dot-size);
	height: var(--ewtl-dot-size);
	border-radius: 50%;
	background-color: var(--ewtl-dot-color);
	box-sizing: border-box;
}

.ewtl-item--year.ewtl-item--left::after {
	right: calc((var(--ewtl-content-gap) + var(--ewtl-line-width) / 2) * -1);
	transform: translateX(50%);
}

.ewtl-item--year.ewtl-item--right::after {
	left: calc((var(--ewtl-content-gap) + var(--ewtl-line-width) / 2) * -1);
	transform: translateX(-50%);
}

/* --- Contenuti -------------------------------------------------------- */

.ewtl-item__year {
	margin: 0 0 10px;
	line-height: 1.2;
	font-size: 28px;
	font-weight: 700;
	color: #8a6212;
}

/* Senza il controllo di allineamento il titolo eredita quello dell'elemento,
   cioè l'allineamento verso la linea. */
.ewtl-item__title {
	text-align: var(--ewtl-title-align, inherit);
	margin: 0 0 14px;
	line-height: 1.2;
	font-size: 40px;
	font-weight: 400;
}

.ewtl-item__title-bold {
	font-weight: 700;
}

.ewtl-item__text {
	line-height: 1.6;
}

.ewtl-item__text p:last-child {
	margin-bottom: 0;
}

.ewtl-item__image {
	display: inline-block;
	margin: 20px 0 0;
	max-width: 100%;
}

.ewtl-item__image img {
	display: block;
	width: 100%;
	height: auto;
}

.ewtl-item__caption {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: #6b6b6b;
}

/* --- Icona separatore ------------------------------------------------- */

.ewtl-item--icon {
	grid-column: 2;
	justify-self: center;
	/* L'icona sta sulla colonna della linea: riduce lo spazio verticale
	   standard fra gli elementi, altrimenti resterebbe troppo isolata. */
	margin-block: calc(var(--ewtl-icon-gap) - var(--ewtl-items-gap));
	z-index: 1;
	line-height: 0;
	/* Spostamento verticale su transform, non su margin: l'icona si alza o si abbassa
	   senza trascinare con sé gli elementi successivi della timeline. */
	transform: translateY(var(--ewtl-icon-offset-y));
}

.ewtl-item__icon {
	display: block;
	transform: rotate(var(--ewtl-icon-rotate));
}

.ewtl-item--flipped .ewtl-item__icon {
	transform: rotate(var(--ewtl-icon-rotate)) scaleX(-1);
}

.ewtl-item--icon i {
	font-size: var(--ewtl-icon-size);
	line-height: 1;
	color: var(--ewtl-icon-color);
}

.ewtl-item--icon svg {
	display: block;
	width: var(--ewtl-icon-size);
	height: auto;
	max-width: none;
}

/* Icone della libreria Elementor: sono monocromatiche, si colorano sempre. */
.ewtl-item--icon .e-font-icon-svg {
	fill: var(--ewtl-icon-color);
}

/* SVG caricati dall'utente: per impostazione predefinita conservano i colori
   del file. Il ricolore si attiva dal controllo dedicato. */
.ewtl-recolor-svg-yes .ewtl-item--icon svg,
.ewtl-recolor-svg-yes .ewtl-item--icon svg path,
.ewtl-recolor-svg-yes .ewtl-item--icon svg circle,
.ewtl-recolor-svg-yes .ewtl-item--icon svg polygon,
.ewtl-recolor-svg-yes .ewtl-item--icon svg rect {
	fill: var(--ewtl-icon-color);
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {

	.ewtl-timeline {
		grid-template-columns: var(--ewtl-line-width) minmax(0, 1fr);
		justify-content: start;
	}

	.ewtl-timeline::before {
		left: calc(var(--ewtl-line-width) / 2);
	}

	/* In colonna singola lo sfalsamento fra i due lati non ha più senso e
	   creerebbe sovrapposizioni: resta valido solo l'offset del singolo elemento. */
	.ewtl-item--left,
	.ewtl-item--right {
		grid-column: 2;
		transform: translateY(var(--ewtl-item-offset-y, 0px));
	}

	.ewtl-aligned-yes .ewtl-item--left,
	.ewtl-aligned-yes .ewtl-item--right {
		text-align: left;
	}

	.ewtl-item--year.ewtl-item--left::after,
	.ewtl-item--year.ewtl-item--right::after {
		right: auto;
		left: calc((var(--ewtl-content-gap) + var(--ewtl-line-width) / 2) * -1);
		transform: translateX(-50%);
	}

	.ewtl-item--icon {
		grid-column: 1;
		justify-self: center;
	}
}