/* Fab Χρονολόγιο — στα πρότυπα της Βιογραφίας: Helight για κείμενα, HelMed για ετικέτες, μαύρο / γκρι / λευκό. */

@font-face { font-family: "Helight"; font-display: swap; src: url("/wp-content/uploads/et-fonts/HelLig.otf") format("opentype"); }
@font-face { font-family: "HelMed";  font-display: swap; src: url("/wp-content/uploads/et-fonts/HelMed.otf") format("opentype"); }

/* Το Divi βάζει overflow-y:hidden στο #page-container, που ακυρώνει το position:sticky. */
body.fab-tl-page #page-container { overflow: visible !important; }

.fab-tl {
	--tl-wave: 42%;
	--tl-gap: 64px;
	position: relative;
	color: #666;
}

/* ---------- Χωρίς JavaScript: απλή κατακόρυφη λίστα ---------- */

.fab-tl__event { max-width: 760px; margin: 0 auto 64px; padding: 0 6vw; text-align: center; }
.fab-tl__line, .fab-tl__decades, .fab-tl__hint { display: none; }

/* ---------- Με JavaScript: σταθερή σκηνή, η γραμμή κυλάει οριζόντια ---------- */

.fab-tl--ready .fab-tl__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	overflow: clip;
	animation: fab-tl-in 1.6s ease .1s both;
}
@keyframes fab-tl-in { from { opacity: 0; } to { opacity: 1; } }

.fab-tl--ready .fab-tl__event {
	position: absolute;
	inset: 0;
	max-width: none;
	margin: 0;
	padding: 0 6vw;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.fab-tl--ready .fab-tl__event.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .6s ease .2s, visibility 0s;
}

.fab-tl--ready .fab-tl__head,
.fab-tl--ready .fab-tl__body {
	position: absolute;
	left: 6vw;
	right: 6vw;
	display: flex;
	justify-content: center;
	transition: transform .95s cubic-bezier(.22, .7, .18, 1);
}
/* --tl-x: -1 = φεύγει/έρχεται αριστερά, 1 = δεξιά, 0 = κέντρο. Η χρονιά ταξιδεύει περισσότερο από το κείμενο. */
.fab-tl--ready .fab-tl__head { transform: translateX(calc(var(--tl-x, 0) * 22vw)); }
.fab-tl--ready .fab-tl__body { transform: translateX(calc(var(--tl-x, 0) * 9vw)); }
.fab-tl--ready .fab-tl__photo { transform: translateX(calc(var(--tl-x, 0) * 6vw)); transition: transform .95s cubic-bezier(.22, .7, .18, 1); }
.fab-tl--ready .fab-tl__event.is-entering,
.fab-tl--ready .fab-tl__event.is-entering .fab-tl__head,
.fab-tl--ready .fab-tl__event.is-entering .fab-tl__body,
.fab-tl--ready .fab-tl__event.is-entering .fab-tl__photo { transition: none; }
.fab-tl--ready .fab-tl__head {
	top: 0;
	bottom: calc(100% - var(--tl-wave) + var(--tl-gap));
	align-items: flex-end;
	gap: clamp(20px, 3vw, 48px);
}
.fab-tl--ready .fab-tl__body {
	top: calc(var(--tl-wave) + var(--tl-gap));
	bottom: 90px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding-top: 26px;
	text-align: center;
	transition-delay: .06s;
}

/* Χρονιά — μεγάλη, λεπτή, όπως οι τονισμένες λέξεις της Βιογραφίας */
.fab-tl .fab-tl__year {
	margin: 0;
	padding: 0;
	font-family: 'Helight', Helvetica, Arial, Lucida, sans-serif;
	font-weight: 400;
	font-size: clamp(64px, min(10.5vw, 19vh), 172px);
	line-height: .82;
	letter-spacing: -.045em;
	color: #000;
	white-space: nowrap;
}

.fab-tl__photo { margin: 0; flex: 0 0 auto; }
.fab-tl__photo img {
	display: block;
	height: min(30vh, 300px);
	width: auto;
	max-width: 30vw;
	object-fit: cover;
}

/* Μήνας / εποχή — όπως το κουμπί «Λήψη Βιογραφικού» */
.fab-tl .fab-tl__period {
	margin: 0 0 18px;
	padding: 0 0 0 8px;
	font-family: 'HelMed', Helvetica, Arial, Lucida, sans-serif;
	font-size: 12px;
	line-height: 1.7em;
	letter-spacing: 8px;
	text-transform: uppercase;
	color: #000;
}

.fab-tl__text {
	max-width: 760px;
	font-family: 'Helight', Helvetica, Arial, Lucida, sans-serif;
	font-size: clamp(17px, min(1.75vw, 3.3vh), 27px);
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #666;
}
.fab-tl__text p { margin: 0 0 .6em; padding: 0; }
.fab-tl__text p:last-child { margin-bottom: 0; }

/* Κυματιστή γραμμή */
.fab-tl--ready .fab-tl__line {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--tl-wave) - 100px);
	height: 200px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.fab-tl__track { position: absolute; left: 0; right: 0; top: 100px; }
.fab-tl__svg { position: absolute; left: 0; overflow: visible; }
.fab-tl__wave { fill: none; stroke: #000; stroke-width: 1; }
.fab-tl__bg { fill: none; stroke-width: 1; }
.fab-tl__bg--1 { stroke: #d6d6d6; }
.fab-tl__bg--2 { stroke: #ececec; }
.fab-tl__dot {
	fill: #fff;
	stroke: #000;
	stroke-width: 1;
	transform-box: fill-box;
	transform-origin: center;
	transition: transform .4s ease, fill .4s ease;
}
.fab-tl__dot.is-active { fill: #000; transform: scale(2); }
.fab-tl__label {
	font-family: 'HelMed', Helvetica, Arial, Lucida, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	fill: #C3C3C3;
	transition: fill .4s ease;
}
.fab-tl__label.is-active { fill: #000; }

/* Δεκαετίες */
.fab-tl--ready .fab-tl__decades {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px clamp(14px, 2.4vw, 34px);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 30px;
}
.fab-tl__decades button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 6px 0 6px 4px;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: 'HelMed', Helvetica, Arial, Lucida, sans-serif;
	font-size: 12px;
	letter-spacing: 4px;
	color: #C3C3C3;
	transition: color .3s ease;
}
.fab-tl__decades button:hover,
.fab-tl__decades button:focus-visible,
.fab-tl__decades button.is-active { color: #000; }

/* Ένδειξη κύλισης — χάνεται μόλις ξεκινήσει η διαδρομή */
.fab-tl--ready .fab-tl__hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	position: absolute;
	right: 4vw;
	bottom: 30px;
	padding-left: 4px;
	font-family: 'HelMed', Helvetica, Arial, Lucida, sans-serif;
	font-size: 11px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #000;
	transition: opacity .5s ease;
}
.fab-tl__hint span {
	display: block;
	width: 1px;
	height: 34px;
	background: #000;
	transform-origin: top;
	animation: fab-tl-hint 1.8s ease-in-out infinite;
}
.fab-tl--moved .fab-tl__hint { opacity: 0; }
@keyframes fab-tl-hint {
	0%   { transform: scaleY(0); }
	50%  { transform: scaleY(1); transform-origin: top; }
	51%  { transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Κινητό ---------- */

@media all and (max-width: 767px) {
	.fab-tl { --tl-wave: 46%; --tl-gap: 44px; }
	.fab-tl--ready .fab-tl__head {
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		gap: 16px;
		top: 70px;
	}
	.fab-tl--ready .fab-tl__body { bottom: 74px; }
	.fab-tl .fab-tl__year { font-size: clamp(56px, min(19vw, 10vh), 86px); }
	.fab-tl__photo img { height: 19vh; max-width: 70vw; }
	.fab-tl .fab-tl__period { letter-spacing: 6px; padding-left: 6px; margin-bottom: 12px; }
	.fab-tl__text { font-size: clamp(16px, min(4.4vw, 2.3vh), 19px); line-height: 1.22; }
	.fab-tl--ready .fab-tl__decades { bottom: 22px; gap: 4px 14px; }
	.fab-tl__decades button { letter-spacing: 2px; padding-left: 2px; }
	.fab-tl--ready .fab-tl__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fab-tl--ready .fab-tl__head,
	.fab-tl--ready .fab-tl__body,
	.fab-tl--ready .fab-tl__photo { transform: none !important; transition: none; }
	.fab-tl--ready .fab-tl__sticky { animation-duration: .01s; }
	.fab-tl__hint span { animation: none; transform: none; }
}