/**
 * Timeline FERROCAMPUS.
 * Desktop : timeline horizontale en quinconce (cartes alternées au-dessus/
 * en dessous d'une ligne continue centrale qui se dessine de gauche à droite).
 * Mobile  : timeline verticale (ligne continue à gauche, cartes à droite).
 * Toutes les couleurs/dimensions passent par des variables CSS
 * (--fct-line-color, --fct-point-color, --fct-line-thickness, --fct-point-size),
 * injectées en inline par le plugin (réglages globaux ou surcharge par étape/shortcode).
 * Chaque étape reçoit --fct-delay (calculé côté PHP selon sa position sur la ligne) :
 * son point et sa carte apparaissent exactement quand la ligne "arrive" dessus.
 */

.ferrocampus-timeline {
	--fct-anim-duration: 0.6s;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden; /* la timeline ne doit jamais provoquer de barre de défilement */
	font-family: 'Sulphur Point', sans-serif;
}

.ferrocampus-timeline *,
.ferrocampus-timeline *::before,
.ferrocampus-timeline *::after {
	box-sizing: border-box;
}

/* --- Desktop : grille (ligne centrale fixe, cartes en quinconce) --- */

.ferrocampus-timeline__items {
	position: relative;
	display: grid;
	grid-template-rows: auto auto auto; /* rangée haute / ligne+points / rangée basse */
	align-items: stretch;
	width: 100%;
}

.ferrocampus-timeline__item {
	display: contents; /* la carte et le connecteur deviennent des enfants directs de la grille */
}

.ferrocampus-timeline__card {
	grid-row: 1;
	align-self: end;
}

.ferrocampus-timeline__item--flip .ferrocampus-timeline__card {
	grid-row: 3;
	align-self: start;
}

.ferrocampus-timeline__connector {
	grid-row: 2;
}

/* --- Ligne continue (un seul trait, se dessine de gauche à droite) --- */

.ferrocampus-timeline__line {
	grid-row: 2;
	grid-column: 1 / -1;
	align-self: center;
	width: 100%;
	height: var(--fct-line-thickness, 3px);
	background: var(--fct-line-color, #c0392b);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--fct-line-duration, 1.6s) linear;
}

.ferrocampus-timeline.is-visible .ferrocampus-timeline__line {
	transform: scaleX(1);
}

/* --- Carte --- */

.ferrocampus-timeline__card {
	margin: 0 10px 22px;
	text-align: center;

	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--fct-anim-duration) ease, transform var(--fct-anim-duration) ease;
	transition-delay: var(--fct-delay, 0ms);
}

.ferrocampus-timeline__item--flip .ferrocampus-timeline__card {
	margin: 22px 10px 0;
	transform: translateY(-24px);
}

.ferrocampus-timeline.is-visible .ferrocampus-timeline__card {
	opacity: 1;
	transform: translateY(0);
}

.ferrocampus-timeline__photo {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 10px;
}

.ferrocampus-timeline__date {
	display: inline-block;
	font-family: 'Sulphur Point', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fct-item-color, var(--fct-line-color, #c0392b));
	margin-bottom: 4px;
}

.ferrocampus-timeline__title {
	margin: 0 0 6px;
	font-family: 'Maven Pro', sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
}

.ferrocampus-timeline__text {
	font-family: 'Sulphur Point', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #444;
	overflow-wrap: break-word;
}

.ferrocampus-timeline__text p:last-child {
	margin-bottom: 0;
}

/* --- Point --- */

.ferrocampus-timeline__connector {
	grid-column: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	height: var(--fct-point-size, 18px);
	position: relative;
	z-index: 1;
}

.ferrocampus-timeline__point {
	flex: 0 0 auto;
	width: var(--fct-point-size, 18px);
	height: var(--fct-point-size, 18px);
	border-radius: 50%;
	background: var(--fct-item-color, var(--fct-point-color, #c0392b));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;

	transform: scale(0);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: var(--fct-delay, 0ms);
}

.ferrocampus-timeline.is-visible .ferrocampus-timeline__point {
	transform: scale(1);
}

.ferrocampus-timeline__point .dashicons {
	font-size: calc(var(--fct-point-size, 18px) * 0.6);
	width: calc(var(--fct-point-size, 18px) * 0.6);
	height: calc(var(--fct-point-size, 18px) * 0.6);
}

/* --- Accessibilité : réduction des animations --- */

@media (prefers-reduced-motion: reduce) {
	.ferrocampus-timeline__card,
	.ferrocampus-timeline__line,
	.ferrocampus-timeline__point {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.ferrocampus-timeline__point {
		transform: scale(1) !important;
	}
}

/* --- Mobile : timeline verticale (pas de quinconce, ligne continue à gauche) --- */

@media (max-width: 782px) {
	.ferrocampus-timeline__items {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.ferrocampus-timeline__item {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		text-align: left;
	}

	.ferrocampus-timeline__card,
	.ferrocampus-timeline__item--flip .ferrocampus-timeline__card {
		order: 2;
		margin: 0 0 28px 16px;
		transform: translateY(24px);
		align-self: auto;
	}

	.ferrocampus-timeline.is-visible .ferrocampus-timeline__card {
		transform: translateY(0);
	}

	.ferrocampus-timeline__connector {
		order: 1;
		width: var(--fct-point-size, 18px);
		height: auto;
		flex: 0 0 auto;
		padding: 0;
	}

	.ferrocampus-timeline__line {
		grid-column: auto;
		left: calc((var(--fct-point-size, 18px) - var(--fct-line-thickness, 3px)) / 2);
		position: absolute;
		top: 0;
		bottom: 0;
		width: var(--fct-line-thickness, 3px);
		height: auto;
		transform: scaleY(0);
		transform-origin: top center;
		transition: transform var(--fct-line-duration, 1.6s) linear;
	}

	.ferrocampus-timeline.is-visible .ferrocampus-timeline__line {
		transform: scaleY(1);
	}
}