/* ==========================================================================
   timeline — horizontal chronology (EXALCO-Istoria "Οι σταθμοί μας"), text only
   since the beta audit v3 (client screenshot): decade chips (active = red), a
   "ΔΕΚΑΕΤΙΑ 1970" label over the line at the first milestone of each decade,
   small red squares on the line, red year in Uniform Pro Medium, title as a
   red-square bullet with the text under it.
   The decade chips + arrows are not in the mockup (func. spec 15.1.4): they sit
   in the right-hand slot of the section head, so the section keeps the
   mockup's vertical rhythm (head → 34px → track with 60px above the line).
   Without JS: a horizontally scrollable list; the year chips are anchors.
   ========================================================================== */
.ex-timeline__head { --ex-head-gap: 34px; }
.ex-section-head__aside.ex-timeline__nav { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 18px; min-width: 0; }
.ex-timeline__years-nav { min-width: 0; }
.ex-timeline__years { margin: 0; padding: 0; list-style: none; }
.ex-timeline__years > li { display: flex; }
.ex-timeline__years .ex-chip { background: var(--ex-white); }
.ex-timeline__years .ex-chip.is-active,
.ex-timeline__years .ex-chip[aria-current="true"] { border-color: var(--ex-red); background: var(--ex-red); color: var(--ex-white); }

/* Arrows need JS */
.ex-timeline__arrows { display: none; flex: none; gap: 8px; }
.js .ex-timeline__arrows { display: flex; }
.ex-timeline__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: var(--ex-border-w) solid var(--ex-line-ink);
  border-radius: var(--ex-radius);
  background: var(--ex-white);
  color: var(--ex-ink);
  cursor: pointer;
  transition: background var(--ex-t-fast), color var(--ex-t-fast), border-color var(--ex-t-fast);
}
.ex-timeline__arrow:hover,
.ex-timeline__arrow:focus-visible { border-color: var(--ex-red); background: var(--ex-red); color: var(--ex-white); }
.ex-timeline__arrow:disabled { border-color: var(--ex-line-input); background: transparent; color: var(--ex-placeholder); cursor: default; }

.ex-timeline__viewport { position: relative; }
/* Edge fades (56px, section tint). JS toggles .is-at-start / .is-at-end. */
.ex-timeline__viewport::before,
.ex-timeline__viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 56px;
  pointer-events: none;
  transition: opacity var(--ex-t-base);
}
.ex-timeline__viewport::before { left: 0; background: linear-gradient(to right, var(--ex-tint), rgba(244, 245, 245, 0)); }
.ex-timeline__viewport::after { right: 0; background: linear-gradient(to left, var(--ex-tint), rgba(244, 245, 245, 0)); }
.ex-timeline__viewport.is-at-start::before,
.ex-timeline__viewport.is-at-end::after { opacity: 0; }

.ex-timeline__track {
  padding: 60px 2px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.ex-timeline__track:focus-visible { outline-offset: 2px; }
/* The mockup hides the scrollbar; only do so when JS provides drag + buttons. */
.js .ex-timeline__track { scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.js .ex-timeline__track::-webkit-scrollbar { display: none; width: 0; height: 0; }
.js .ex-timeline__track.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }

.ex-timeline__list {
  position: relative;
  display: inline-flex;
  min-width: min-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ex-timeline__list::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: rgba(35, 31, 32, .2); }

.ex-timeline__item {
  position: relative;
  flex: none;
  width: clamp(220px, 16vw, 270px);
  padding: 0 clamp(12px, 1.4vw, 22px);
  scroll-margin-top: calc(var(--ex-scroll-offset) + 60px);
}
/* "ΔΕΚΑΕΤΙΑ 1970": over the line, starting at the decade's first milestone. */
.ex-timeline__decade {
  position: absolute;
  left: clamp(12px, 1.4vw, 22px);
  bottom: calc(100% + 18px);
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .2em;
  white-space: nowrap;
  color: var(--ex-ink);
}
.ex-timeline__dot {
  position: absolute;
  left: clamp(12px, 1.4vw, 22px);
  top: -5px;
  display: block;
  width: 10px;
  height: 10px;
  background: var(--ex-red);
}
.ex-timeline__year { margin: 32px 0 18px; font-size: clamp(30px, 2.4vw, 40px); font-weight: var(--ex-fw-title); line-height: 1; letter-spacing: -.01em; color: var(--ex-red); }
.ex-timeline__item > .ex-timeline__dot + :not(.ex-timeline__year) { margin-top: 32px; }
.ex-timeline__title { position: relative; margin: 0 0 6px; padding-left: 15px; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--ex-ink); }
.ex-timeline__title::before { content: ''; position: absolute; left: 0; top: .45em; width: 6px; height: 6px; background: var(--ex-red); }
.ex-timeline__text { margin: 0; padding-left: 15px; font-size: 13px; line-height: 1.6; color: var(--ex-ink); }

.ex-timeline__hint { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--ex-ink); }
.ex-timeline__hint-line { display: block; flex: none; width: 26px; height: 1.5px; background: var(--ex-red); }

@media (max-width: 899px) {
  .ex-timeline__head { --ex-head-gap: 12px; }
  .ex-section-head__aside.ex-timeline__nav { display: block; width: 100%; }
  .ex-timeline__track { padding-top: 48px; }
  .ex-timeline__arrows { display: none; }
  .js .ex-timeline__arrows { display: none; }
  .ex-timeline__viewport { margin-inline: calc(-1 * var(--ex-gutter)); }
  .ex-timeline__viewport::before,
  .ex-timeline__viewport::after { width: 28px; }
  .ex-timeline__track { padding-inline: calc(var(--ex-gutter) - 12px); scroll-snap-type: x proximity; scroll-padding-inline: calc(var(--ex-gutter) - 12px); }
  .ex-timeline__item { width: min(78vw, 300px); scroll-snap-align: start; }
  .ex-timeline__text { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-timeline__track { scroll-behavior: auto; }
  .ex-timeline__arrow,
  .ex-timeline__viewport::before,
  .ex-timeline__viewport::after { transition: none; }
}