/* Timeline / étapes — formasuisse/timeline
   One sequential engine: marker × orientation × style.
   - horizontal + cards     → ex fs/steps (top-border navy cards)
   - horizontal + connector → process band (numbered boxes on a line)
   - vertical   + rail      → history (dots on a left line)
   - vertical   + marker=day → agenda (ruled list, filled navy day badges)

   Marker glyph COLOUR is driven by the marker *type* (its meaning), not the
   layout style: number → CTA red (process), year → accent blue (history),
   day → white-on-navy badge, dot → hidden. So the four marker options stay
   visually distinct in any orientation/style. */

.wp-block-formasuisse-timeline {
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--color-paper-alt, #f6f7f8);
}

.wp-block-formasuisse-timeline .eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-sub, #5a5a5a);
  margin-bottom: 16px;
  display: inline-block;
}

.wp-block-formasuisse-timeline .eyebrow.accent {
  color: var(--color-accent, #328efe);
}

.wp-block-formasuisse-timeline .tl-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 0 0 56px;
  max-width: 24ch;
  color: var(--color-primary, #062343);
}

.wp-block-formasuisse-timeline .tl-item h3 {
  color: var(--color-primary, #062343);
  margin: 4px 0 6px;
  font-size: 1.15rem;
}

.wp-block-formasuisse-timeline .tl-item p {
  font-size: 0.95rem;
  color: var(--color-text-sub, #5a5a5a);
  margin: 0;
  line-height: 1.55;
}

/* Marker glyph colour is driven by the marker *type* (its meaning), not the
   layout style — so number (process) and year (history) stay visually distinct
   in any orientation/style. day uses a filled navy badge (see vertical+day
   below); dot hides the glyph entirely. */
.wp-block-formasuisse-timeline[data-marker="number"] .tl-marker {
  color: var(--color-cta, #f00);
}
.wp-block-formasuisse-timeline[data-marker="year"] .tl-marker {
  color: var(--color-accent, #328efe);
}

/* ---------- horizontal track ---------- */
.wp-block-formasuisse-timeline[data-orientation="horizontal"] .tl-track {
  display: grid;
  grid-template-columns: repeat(var(--tl-cols, 4), 1fr);
  gap: 32px;
  position: relative;
}

/* horizontal + cards (ex fs/steps) */
.wp-block-formasuisse-timeline[data-style="cards"] .tl-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--color-paper, #ffffff);
  border-top: 4px solid var(--color-primary, #062343);
}

.wp-block-formasuisse-timeline[data-style="cards"] .tl-marker {
  font-family: var(--font-title, "Barlow", sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.wp-block-formasuisse-timeline[data-style="cards"] .tl-item p {
  font-size: 0.92rem;
  line-height: 1.6;
}

/* horizontal + connector (process band) */
.wp-block-formasuisse-timeline[data-style="connector"] .tl-track::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: var(--color-rule, #d8dde3);
  z-index: 0;
}

.wp-block-formasuisse-timeline[data-style="connector"] .tl-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wp-block-formasuisse-timeline[data-style="connector"] .tl-marker {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  background: var(--color-paper-alt, #f6f7f8);
  border: 2px solid var(--color-primary, #062343);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title, "Barlow", sans-serif);
  font-weight: 600;
}

.wp-block-formasuisse-timeline[data-style="connector"] .tl-item h3 {
  font-size: 1.05rem;
}

.wp-block-formasuisse-timeline[data-style="connector"] .tl-item p {
  font-size: 0.9rem;
}

/* ---------- vertical track (rail) ---------- */
.wp-block-formasuisse-timeline[data-orientation="vertical"] .tl-track {
  position: relative;
  padding-left: 32px;
  max-width: 780px;
}

.wp-block-formasuisse-timeline[data-orientation="vertical"] .tl-track::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-rule, #d8dde3);
}

.wp-block-formasuisse-timeline[data-orientation="vertical"] .tl-item {
  position: relative;
  padding: 0 0 32px 0;
}

/* No :last-child padding trim — the à propos history rail keeps a short line
   tail below the final dot (about.html .timeline), so we match it. The day
   agenda overrides .tl-item padding above and is unaffected. */

.wp-block-formasuisse-timeline[data-orientation="vertical"] .tl-item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 8px;
  width: 16px;
  height: 16px;
  background: var(--color-primary, #062343);
  border: 3px solid var(--color-paper-alt, #f6f7f8);
  border-radius: 50%;
}

.wp-block-formasuisse-timeline[data-orientation="vertical"] .tl-marker {
  display: block;
  font-family: var(--font-title, "Barlow", sans-serif);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

/* ---------- vertical + marker=day → ruled agenda (matches design .offer-list) ---------- */
/* The day-by-day agenda is a ruled two-column list with filled navy day badges,
   not the dotted history rail. Overrides the vertical rail above for marker=day. */
.wp-block-formasuisse-timeline[data-orientation="vertical"][data-marker="day"] .tl-track {
  padding-left: 0;
  max-width: none;
  border-top: 1px solid var(--color-rule, #d8dde3);
}
.wp-block-formasuisse-timeline[data-orientation="vertical"][data-marker="day"] .tl-track::before {
  display: none; /* no rail line */
}
.wp-block-formasuisse-timeline[data-orientation="vertical"][data-marker="day"] .tl-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0 32px;
  align-items: start;
  padding: 28px 0;
  /* Neutralise any leakage from the default tlStyle=cards (white card bg +
     navy top border) so the agenda is a clean ruled list regardless of style. */
  background: none;
  border-top: 0;
  border-bottom: 1px solid var(--color-rule, #d8dde3);
}
.wp-block-formasuisse-timeline[data-orientation="vertical"][data-marker="day"] .tl-item::before {
  display: none; /* no dot */
}
.wp-block-formasuisse-timeline[data-orientation="vertical"][data-marker="day"] .tl-marker {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: start;
  align-self: start;
  background: var(--color-primary, #062343);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 10px 14px;
}
.wp-block-formasuisse-timeline[data-orientation="vertical"][data-marker="day"] .tl-item h3 {
  grid-column: 2;
  font-size: 1.2rem;
  margin: 0 0 8px;
}
.wp-block-formasuisse-timeline[data-orientation="vertical"][data-marker="day"] .tl-item p {
  grid-column: 2;
  font-size: 0.95rem;
  margin: 0;
}
@media (max-width: 600px) {
  .wp-block-formasuisse-timeline[data-orientation="vertical"][data-marker="day"] .tl-item {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .wp-block-formasuisse-timeline[data-orientation="vertical"][data-marker="day"] .tl-marker {
    grid-row: auto;
  }
  .wp-block-formasuisse-timeline[data-orientation="vertical"][data-marker="day"] .tl-item h3,
  .wp-block-formasuisse-timeline[data-orientation="vertical"][data-marker="day"] .tl-item p {
    grid-column: 1;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .wp-block-formasuisse-timeline[data-orientation="horizontal"] .tl-track {
    grid-template-columns: 1fr 1fr;
  }
  .wp-block-formasuisse-timeline[data-style="connector"] .tl-track::before {
    display: none;
  }
}

@media (max-width: 540px) {
  .wp-block-formasuisse-timeline[data-orientation="horizontal"] .tl-track {
    grid-template-columns: 1fr;
  }
}

/* Side gutter below .wrapper's 1200px centering (theme .wrapper has no
   horizontal padding) — matches the design --gutter. */
@media (max-width: 1199px) {
  .wp-block-formasuisse-timeline .wrapper {
    padding: 0 clamp(20px, 4vw, 56px);
  }
}

/* ── Session mode (source=session) ──────────────────────────────────────────
   A per-session milestone frieze: coloured dots joined by connectors, date +
   label anchored to each dot. The track is a flex row of alternating dots and
   connectors; each connector's flex-grow (set inline) is proportional to the
   elapsed time to the next milestone (capped in PHP), so spacing reflects the
   real schedule. The début → fin connector is emphasised as the course span.
   Horizontal on desktop, vertical on mobile. Rendered inside the course column,
   so the block's full-section chrome is neutralised. */
/* Neutralise the static timeline's full-section chrome (padding + paper
   background) so the session frieze sits flush in the course column. Scoped to
   the block class so it beats the base .wp-block-formasuisse-timeline padding. */
.wp-block-formasuisse-timeline.is-session {
  margin: 1.25rem 0;
  padding: 0;
  background: none;
}

.fs-timeline {
  --fst-c1: #f5a623; /* amber */
  --fst-c2: #7ac043; /* green */
  --fst-c3: #e6007e; /* magenta — navy is reserved for the bold course span */
  --fst-c4: #e6007e; /* magenta */
  --fst-c5: #328efe; /* blue */
  --fst-line: #c4ccd6;
  --fst-line-w: 2px;
  --fst-span-w: 5px; /* bold début → fin course span */
  --fst-dot: 33px;
  --fst-dot-border: 4px;
  --fst-gap: 1.4rem;
  margin: 1.25rem 0;
}

.fs-timeline .fst-head {
  text-align: center;
  margin-bottom: 1.5rem;
}
.fs-timeline .fst-title {
  margin: 0.15rem 0 0;
}

/* Track: flex row, dots sitting on the baseline, labels floating above. The
   inline padding gives the first/last labels room so they aren't clipped. */
.fs-timeline .fst-track {
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 3rem 2.5rem 0.75rem;
}

/* A node is just the dot; its label is absolutely anchored to it so the node
   stays dot-width and the connectors own the horizontal spacing. */
.fs-timeline .fst-node {
  position: relative;
  flex: 0 0 auto;
  width: var(--fst-dot);
  height: var(--fst-dot);
}

.fs-timeline .fst-dot {
  display: block;
  box-sizing: border-box;
  width: var(--fst-dot);
  height: var(--fst-dot);
  border-radius: 50%;
  border: var(--fst-dot-border) solid var(--_c, var(--fst-c1));
  background: var(--color-surface, #fff);
  position: relative;
  z-index: 1;
}

/* Connector: grows proportionally (flex-grow set inline), drawn at dot centre. */
.fs-timeline .fst-conn {
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 4rem;
  align-self: flex-end;
  height: var(--fst-line-w);
  margin-bottom: calc(var(--fst-dot) / 2 - var(--fst-line-w) / 2);
  /* dashed grey line (the original graphic's non-course segments) */
  background-image: repeating-linear-gradient(
    to right,
    var(--fst-line) 0 15px,
    transparent 15px 24px
  );
  z-index: 0;
}
.fs-timeline .fst-conn.is-span {
  height: var(--fst-span-w);
  margin-bottom: calc(var(--fst-dot) / 2 - var(--fst-span-w) / 2);
  background: var(--color-primary, #062343);
  border-radius: 3px;
}

/* Short line leading into the first dot, and a line ending in an arrowhead
   leading away from the last — matches the original graphic. */
.fs-timeline .fst-lead,
.fs-timeline .fst-tail {
  flex: 0 0 1.75rem;
  min-width: 0;
}
.fs-timeline .fst-tail {
  flex-basis: 2.5rem;
  position: relative;
}
.fs-timeline .fst-tail::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid var(--fst-line);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* Label — upright: centred above the dot. */
.fs-timeline .fst-text {
  position: absolute;
  left: 50%;
  bottom: calc(var(--fst-dot) + 0.5rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: max-content;
  max-width: 8.5rem;
  text-align: center;
}
.fs-timeline .fst-date {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--color-primary, #062343);
  line-height: 1.2;
}
.fs-timeline .fst-label {
  font-size: 0.72rem;
  color: var(--color-text, #282827);
  line-height: 1.2;
}

/* Label — angled: bottom-left corner anchored on the dot, then rotated about
   that corner. Labels wrap within a capped width; the date stays one line. */
.fs-timeline[data-label-angle="angled"] .fst-track {
  padding-top: 7.25rem;
}
.fs-timeline[data-label-angle="angled"] .fst-text {
  left: 50%;
  bottom: var(--fst-dot);
  transform: rotate(-42deg);
  transform-origin: bottom left;
  align-items: flex-start;
  text-align: left;
  max-width: 9em; /* caps the diagonal label box */
}
.fs-timeline[data-label-angle="angled"] .fst-date {
  white-space: nowrap;
}
/* The free-text node (exam) can hold a longer string than a date — let it wrap
   within the capped box, and clamp to three lines so an over-long value can't
   grow the frieze past the box. */
.fs-timeline[data-label-angle="angled"] .fst-node--text .fst-date {
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ── Vertical (mobile) ───────────────────────────────────────────────────────
   Stacked rows: dot on the left, label to the right, a continuous line drawn by
   each node down to the next dot (bold for the début → fin span). The inline
   proportional connectors are desktop-only. */
@media (max-width: 640px) {
  .fs-timeline .fst-track {
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 0;
  }
  .fs-timeline .fst-node {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: var(--fst-gap); /* room for the line down to the next dot */
  }
  .fs-timeline .fst-node:last-child {
    padding-bottom: 0;
  }
  .fs-timeline .fst-dot {
    order: -1; /* dot before the label */
    flex: 0 0 auto;
  }
  /* Continuous vertical line from this dot down to the next. */
  .fs-timeline .fst-node::after {
    content: "";
    position: absolute;
    left: calc(var(--fst-dot) / 2 - var(--fst-line-w) / 2);
    top: calc(var(--fst-dot) / 2);
    height: 100%;
    width: var(--fst-line-w);
    background-image: repeating-linear-gradient(
      to bottom,
      var(--fst-line) 0 15px,
      transparent 15px 24px
    );
    z-index: 0;
  }
  .fs-timeline .fst-node:last-child::after {
    display: none;
  }
  .fs-timeline .fst-node.is-span-start::after {
    width: var(--fst-span-w);
    left: calc(var(--fst-dot) / 2 - var(--fst-span-w) / 2);
    background: var(--color-primary, #062343);
    border-radius: 3px;
  }
  /* Label back in flow, to the right of the dot. */
  .fs-timeline .fst-text,
  .fs-timeline[data-label-angle="angled"] .fst-text {
    position: static;
    transform: none;
    align-items: flex-start;
    text-align: left;
    max-width: none;
    width: auto;
  }
  .fs-timeline .fst-conn {
    display: none; /* proportional connectors are desktop-only */
  }
  .fs-timeline[data-label-angle="angled"] .fst-track {
    padding-top: 0.5rem;
  }
}