/*!
 * foundation26 – Timeline (content-timeline): default, centered, horizontal and changelog layouts
 * © 2026 Atelier 26 AG – part of digiscapes®. All rights reserved. digiscapes® and brandscapes® are registered trademarks.
 */

.content-timeline {
  container-type: inline-size;
}
.timeline {
  --tl-line: hsl(from var(--bs-border-color) h s l / var(--bs-border-opacity));
  --tl-icon: var(--bs-svg-icon-size);    /* never smaller than other site icons */
  --tl-dot: calc(var(--tl-icon) * .55);
  --tl-box: calc(var(--tl-icon) * 1.6);  /* marker with an icon or a number */
  --tl-rail: var(--tl-box);
  --tl-gap: var(--bs-gutter-y); /* between the entries */
  --tl-pad: calc(var(--bs-gutter-y) * .75);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Timeline Color: icon as mask, number as text fill, so gradients work */
.timeline-icon-size-1 { --tl-icon: 0.75rem; }
.timeline-icon-size-2 { --tl-icon: 0.875rem; }
.timeline-icon-size-3 { --tl-icon: 1rem; }
.timeline-icon-size-4 { --tl-icon: 1.125rem; }
.timeline-icon-size-5 { --tl-icon: 1.25rem; }
.timeline-icon-size-6 { --tl-icon: 1.375rem; }
.timeline-icon-size-7 { --tl-icon: 1.5rem; }
.timeline-icon-size-8 { --tl-icon: 1.75rem; }
.timeline-icon-size-9 { --tl-icon: 2rem; }
.timeline-icon-size-10 { --tl-icon: 2.25rem; }
.timeline-icon-size-11 { --tl-icon: 2.5rem; }
.timeline-icon-size-12 { --tl-icon: 2.75rem; }
.timeline-icon-size-13 { --tl-icon: 3rem; }
.timeline-icon-size-14 { --tl-icon: 3.5rem; }
.timeline-icon-size-15 { --tl-icon: 4rem; }
.timeline-icon-size-16 { --tl-icon: 4.5rem; }
.timeline-icon-size-17 { --tl-icon: 5rem; }
.timeline-icon-size-18 { --tl-icon: 6rem; }
.timeline-icon-size-19 { --tl-icon: 8rem; }
.timeline-icon-size-20 { --tl-icon: 10rem; }
.timeline-icon-size-21 { --tl-icon: 15rem; }
.timeline-item {
  --tl-mark: var(--tl-dot);      /* Date only as wide as its text, so a gradient spans the words */
  --tl-mark-top: .3em;
  position: relative;
  display: grid;
  column-gap: calc(var(--bs-gutter-x) * .75);
  margin: 0;
}
.timeline-item:has(> .timeline-marker.is-box) {
  --tl-mark: var(--tl-box);
  --tl-mark-top: 0px;
}

/* Outline: ring in the text colour; filled: solid circle with readable icon and number */
.timeline-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--bs-body-bg);
}
.timeline-marker.is-box {
  width: var(--tl-box);
  height: var(--tl-box);
  border-width: 1px;
  border-color: var(--tl-line);
}
.timeline-icon {
  display: block;
  width: var(--tl-icon);
  height: var(--tl-icon);
}
.timeline-numbers {
  counter-reset: timeline;
}
.timeline-numbers > .timeline-item {
  counter-increment: timeline;
}
.timeline-number {
  font-size: calc(var(--tl-box) * .42);
  font-weight: var(--bs-font-weight-semibold, 600);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.timeline-number::before {
  content: counter(timeline);
}
.timeline-filled .timeline-marker {
  border: 0;
  background: currentColor;
}
.timeline-filled .timeline-marker:not([class*="bg-"]) > * {
  color: var(--bs-body-bg);
}

/* Timeline Color: ring, icon (mask) and number (text fill), so gradients work; filled: marker surface */
.timeline-marker:has(> .timeline-ring) {
  border-color: transparent;
}
.timeline-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
.timeline-icon-mask {
  -webkit-mask: var(--icon-url) no-repeat center / contain;
          mask: var(--icon-url) no-repeat center / contain;
}
.timeline-number[class*="bg-"],
.timeline-date[class*="bg-"] {
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

.timeline-date {
  margin: 0;
}
p.timeline-date:not(.timeline-date-100) {
  font-size: var(--bs-font-size-small, .875em);
  opacity: .7;
}
.timeline-date[class*="bg-"] {
  width: fit-content;
  max-width: 100%;
  opacity: 1 !important;
}
.timeline-title {
  margin-bottom: calc(var(--bs-gutter-y) * .25);
}
.timeline-text > :last-child {
  margin-bottom: 0;
}
.timeline-image {
  margin-bottom: calc(var(--bs-gutter-y) * .5);
}

/* Image left/right (imageorient 26/25) from 440px entry width, at most two fifths */
.timeline-content {
  container: timeline-entry / inline-size;
}
@container timeline-entry (min-width: 440px) {
  .timeline-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: calc(var(--bs-gutter-x) * .75);
    align-items: start;
  }
  .timeline-split-right {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .timeline-split-right > .timeline-image {
    order: 2;
  }
  .timeline-split > .timeline-image {
    margin-bottom: 0;
  }
}
.timeline-content:is([class*="bg-"], [class*="shadow-"], .border-position-10) {
  padding: var(--tl-pad);
}

/* Line on the left; also centered when narrow, changelog when very narrow */
.timeline-default > .timeline-item,
.timeline-centered > .timeline-item,
.timeline-changelog > .timeline-item {
  grid-template-columns: var(--tl-rail) minmax(0, 1fr);
  padding-bottom: var(--tl-gap);
}
.timeline-default > .timeline-item > *,
.timeline-centered > .timeline-item > *,
.timeline-changelog > .timeline-item > * {
  grid-column: 2;
}
.timeline-default > .timeline-item > .timeline-marker,
.timeline-centered > .timeline-item > .timeline-marker,
.timeline-changelog > .timeline-item > .timeline-marker {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
  align-self: start;
  margin-top: var(--tl-mark-top);
}
/* Line from the first marker to the last */
.timeline-default > .timeline-item::before,
.timeline-centered > .timeline-item::before,
.timeline-changelog > .timeline-item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--tl-rail) / 2 - .5px);
  width: 1px;
  background: var(--tl-line);
}
.timeline-default > .timeline-item:first-child::before,
.timeline-centered > .timeline-item:first-child::before,
.timeline-changelog > .timeline-item:first-child::before {
  top: calc(var(--tl-mark-top) + var(--tl-mark) / 2);
}
.timeline-default > .timeline-item:last-child,
.timeline-centered > .timeline-item:last-child,
.timeline-changelog > .timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-default > .timeline-item:last-child::before,
.timeline-centered > .timeline-item:last-child::before,
.timeline-changelog > .timeline-item:last-child::before {
  bottom: auto;
  height: calc(var(--tl-mark-top) + var(--tl-mark) / 2);
}
.timeline-default > .timeline-item:only-child::before,
.timeline-centered > .timeline-item:only-child::before,
.timeline-changelog > .timeline-item:only-child::before {
  display: none;
}

/* Subgrid over three rows (date, marker, content) keeps the rows aligned */
/* Alternating from 768px container width */
@container (min-width: 768px) {
  .timeline-centered > .timeline-item {
    grid-template-columns: minmax(0, 1fr) var(--tl-rail) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .timeline-centered > .timeline-item::before {
    inset-inline-start: calc(50% - .5px);
  }
  .timeline-centered > .timeline-item > .timeline-marker {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  /* Odd entries: date left, content right; even ones reversed */
  .timeline-centered > .timeline-item:nth-child(odd) > .timeline-date {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    text-align: end;
    align-self: start;
    padding-top: .15em;
  }
  .timeline-centered > .timeline-item:nth-child(odd) > .timeline-content {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .timeline-centered > .timeline-item:nth-child(even) > .timeline-date {
    grid-column: 3;
    grid-row: 1;
    padding-top: .15em;
  }
  .timeline-centered > .timeline-item:nth-child(even) > .timeline-content {
    grid-column: 1;
    grid-row: 1 / span 2;
    text-align: end;
  }
}

/* === Changelog === */
/* Date in its own column from 440px container width */
@container (min-width: 440px) {
  .timeline-changelog > .timeline-item {
    grid-template-columns: 8rem var(--tl-rail) minmax(0, 1fr);
  }
  .timeline-changelog > .timeline-item::before {
    inset-inline-start: calc(8rem + var(--bs-gutter-x) * .75 + var(--tl-rail) / 2 - .5px);
  }
  .timeline-changelog > .timeline-item > .timeline-date {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    text-align: end;
    padding-top: .15em;
  }
  .timeline-changelog > .timeline-item > .timeline-marker {
    grid-column: 2;
  }
  .timeline-changelog > .timeline-item > .timeline-content {
    grid-column: 3;
    grid-row: 1;
  }
}

/* === Horizontal === */
/* Three-row grid (date, marker, content); entries span it as subgrid so rows line up */
.timeline-horizontal {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto var(--tl-rail) auto;
  grid-auto-columns: minmax(12rem, 1fr);
  column-gap: var(--tl-gap);
  row-gap: calc(var(--bs-gutter-y) * .5);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-top: 0;
  padding-bottom: calc(var(--bs-gutter-y) * .5);
}
.timeline-horizontal > .timeline-item {
  grid-row: 1 / span 3;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
}
.timeline-horizontal > .timeline-item > .timeline-date { grid-row: 1; grid-column: 1; }
.timeline-horizontal > .timeline-item > .timeline-marker { grid-row: 2; grid-column: 1; align-self: center; justify-self: start; }
.timeline-horizontal > .timeline-item > .timeline-content { grid-row: 3; grid-column: 1; }
.timeline-horizontal > .timeline-item::before {
  content: "";
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  height: 1px;
  margin-inline-end: calc(var(--tl-gap) * -1);
  background: var(--tl-line);
}
.timeline-horizontal > .timeline-item:last-child::before {
  margin-inline-end: 0;
}