/* RD-Timeline – beam + list, layout variants, scroll indicator, responsive */

/* --- Base (side_left) --- */
.rd-timeline {
  position: relative;
  padding-left: 1.5rem;
}

.rd-timeline__beam {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
}

.rd-timeline__beam:not([class*="uk-background-"]) {
  background-color: var(--rd-beam-color, #d1d5db);
}

.rd-timeline__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rd-timeline__item {
  position: relative;
  padding-bottom: 1.5rem;
}

.rd-timeline__item::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.35em;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  border: 2px solid #fff;
}

[data-beam="custom"] .rd-timeline__item::before {
  background-color: var(--rd-beam-color);
  box-shadow: 0 0 0 1px var(--rd-beam-color);
}

[data-beam="muted"] .rd-timeline__item::before {
  background-color: #6b7280;
  box-shadow: 0 0 0 1px #6b7280;
}

[data-beam="primary"] .rd-timeline__item::before {
  background-color: #1e87f0;
  box-shadow: 0 0 0 1px #1e87f0;
}

[data-beam="secondary"] .rd-timeline__item::before {
  background-color: #222;
  box-shadow: 0 0 0 1px #222;
}

.rd-timeline__date {
  display: block;
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.rd-timeline__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}

.rd-timeline__content {
  margin-bottom: 0.5rem;
}

.rd-timeline__content p:last-child {
  margin-bottom: 0;
}

.rd-timeline__image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* --- Side right: beam on the right, entries on the left --- */
.rd-timeline--side-right,
.rd-timeline[data-layout="side_right"] {
  padding-left: 0;
  padding-right: 1.5rem;
}

.rd-timeline--side-right .rd-timeline__beam,
.rd-timeline[data-layout="side_right"] .rd-timeline__beam {
  left: auto;
  right: 0;
}

.rd-timeline--side-right .rd-timeline__item::before,
.rd-timeline[data-layout="side_right"] .rd-timeline__item::before {
  left: auto;
  right: -1.5rem;
  margin-left: 0;
  margin-right: -5px;
}

/* --- Center: beam in middle, entries alternating left/right --- */
.rd-timeline--center,
.rd-timeline[data-layout="center"] {
  padding-left: 0;
  padding-right: 0;
}

.rd-timeline--center .rd-timeline__beam,
.rd-timeline[data-layout="center"] .rd-timeline__beam {
  left: 50%;
  margin-left: -2px;
}

.rd-timeline--center .rd-timeline__list,
.rd-timeline[data-layout="center"] .rd-timeline__list {
  display: grid;
  grid-template-columns: 1fr 10px 1fr;
  gap: 0;
}

.rd-timeline--center .rd-timeline__item,
.rd-timeline[data-layout="center"] .rd-timeline__item {
  display: grid;
  grid-template-columns: 1fr 10px 1fr;
  grid-column: 1 / -1;
  padding-bottom: 1.5rem;
}

.rd-timeline--center .rd-timeline__item::before,
.rd-timeline[data-layout="center"] .rd-timeline__item::before {
  position: relative;
  left: auto;
  margin-left: 0;
  grid-column: 2;
  justify-self: center;
}

.rd-timeline--center .rd-timeline__item--left .rd-timeline__item-content,
.rd-timeline[data-layout="center"] .rd-timeline__item--left .rd-timeline__item-content {
  grid-column: 1;
  padding-right: 1.5rem;
  text-align: right;
}

.rd-timeline--center .rd-timeline__item--right .rd-timeline__item-content,
.rd-timeline[data-layout="center"] .rd-timeline__item--right .rd-timeline__item-content {
  grid-column: 3;
  padding-left: 1.5rem;
  text-align: left;
}

/* --- Scroll indicator --- */
/* Beam progress: 4px bar aligned exactly with the beam */
.rd-timeline__beam-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  border-radius: 2px;
  max-height: 100%;
  height: calc(100% * var(--rd-scroll-progress, 0));
  pointer-events: none;
  transition: height 0.1s ease-out;
}

.rd-timeline__beam-progress:not([class*="uk-background-"]) {
  background: var(--rd-beam-progress-color, #86efac);
}

.rd-timeline--side-right .rd-timeline__beam-progress,
.rd-timeline[data-layout="side_right"] .rd-timeline__beam-progress {
  left: auto;
  right: 0;
}

.rd-timeline--center .rd-timeline__beam-progress,
.rd-timeline[data-layout="center"] .rd-timeline__beam-progress {
  left: 50%;
  margin-left: -2px;
}

/* Scroll indicator circle: 14px, centered on beam via margin (like item dots) */
.rd-timeline__scroll-indicator {
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  top: calc(100% * var(--rd-scroll-progress, 0));
  transform: translateY(-50%);
  border: 2px solid #fff;
  border-radius: 50%;
  pointer-events: none;
  transition: top 0.1s ease-out;
}

.rd-timeline__scroll-indicator:not([class*="uk-background-"]) {
  background: var(--rd-beam-progress-color, #86efac);
  box-shadow: 0 0 0 1px var(--rd-beam-progress-color, #86efac);
}

.rd-timeline--side-right .rd-timeline__scroll-indicator,
.rd-timeline[data-layout="side_right"] .rd-timeline__scroll-indicator {
  left: auto;
  right: 0;
  margin-left: 0;
  margin-right: -7px;
}

.rd-timeline--center .rd-timeline__scroll-indicator,
.rd-timeline[data-layout="center"] .rd-timeline__scroll-indicator {
  left: 50%;
  right: auto;
  margin-left: 0;
  margin-right: 0;
  transform: translate(-50%, -50%);
}

/* --- Section context: light beam/dots on dark sections when "Theme Muted" is chosen --- */
.uk-section-primary [data-beam="muted"] .rd-timeline__beam,
.uk-section-secondary [data-beam="muted"] .rd-timeline__beam,
.uk-card-primary [data-beam="muted"] .rd-timeline__beam,
.uk-card-secondary [data-beam="muted"] .rd-timeline__beam,
.uk-tile-primary [data-beam="muted"] .rd-timeline__beam,
.uk-tile-secondary [data-beam="muted"] .rd-timeline__beam,
.uk-light [data-beam="muted"] .rd-timeline__beam {
  background-color: rgba(255, 255, 255, 0.85);
}

.uk-section-primary [data-beam="muted"] .rd-timeline__beam-progress,
.uk-section-secondary [data-beam="muted"] .rd-timeline__beam-progress,
.uk-card-primary [data-beam="muted"] .rd-timeline__beam-progress,
.uk-card-secondary [data-beam="muted"] .rd-timeline__beam-progress,
.uk-tile-primary [data-beam="muted"] .rd-timeline__beam-progress,
.uk-tile-secondary [data-beam="muted"] .rd-timeline__beam-progress,
.uk-light [data-beam="muted"] .rd-timeline__beam-progress {
  background: rgba(255, 255, 255, 0.85);
}

.uk-section-primary [data-beam="muted"] .rd-timeline__scroll-indicator,
.uk-section-secondary [data-beam="muted"] .rd-timeline__scroll-indicator,
.uk-card-primary [data-beam="muted"] .rd-timeline__scroll-indicator,
.uk-card-secondary [data-beam="muted"] .rd-timeline__scroll-indicator,
.uk-tile-primary [data-beam="muted"] .rd-timeline__scroll-indicator,
.uk-tile-secondary [data-beam="muted"] .rd-timeline__scroll-indicator,
.uk-light [data-beam="muted"] .rd-timeline__scroll-indicator {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.uk-section-primary [data-beam="muted"] .rd-timeline__item::before,
.uk-section-secondary [data-beam="muted"] .rd-timeline__item::before,
.uk-card-primary [data-beam="muted"] .rd-timeline__item::before,
.uk-card-secondary [data-beam="muted"] .rd-timeline__item::before,
.uk-tile-primary [data-beam="muted"] .rd-timeline__item::before,
.uk-tile-secondary [data-beam="muted"] .rd-timeline__item::before,
.uk-light [data-beam="muted"] .rd-timeline__item::before {
  background-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

/* --- Responsive --- */
@media (min-width: 960px) {
  .rd-timeline {
    padding-left: 2rem;
  }

  .rd-timeline__item::before {
    left: -2rem;
  }

  .rd-timeline--side-right {
    padding-right: 2rem;
  }

  .rd-timeline--side-right .rd-timeline__item::before {
    right: -2rem;
  }
}

/* Center: on small screens collapse to single column (beam left, all entries right) */
@media (max-width: 959px) {
  .rd-timeline--center .rd-timeline__list {
    grid-template-columns: 1fr;
  }

  .rd-timeline--center .rd-timeline__item {
    grid-template-columns: 1fr;
  }

  .rd-timeline--center .rd-timeline__beam {
    left: 0;
    margin-left: 0;
  }

  .rd-timeline--center {
    padding-left: 1.5rem;
  }

  .rd-timeline--center .rd-timeline__item::before {
    position: absolute;
    left: -1.5rem;
    margin-left: -5px;
    grid-column: 1;
  }

  .rd-timeline--center .rd-timeline__item--left .rd-timeline__item-content,
  .rd-timeline--center .rd-timeline__item--right .rd-timeline__item-content {
    grid-column: 1;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }

  .rd-timeline--center .rd-timeline__beam-progress {
    left: 0;
    margin-left: 0;
  }

  .rd-timeline--center .rd-timeline__scroll-indicator {
    left: 0;
    right: auto;
    margin-left: -7px;
    margin-right: 0;
    transform: translateY(-50%);
  }
}