/**
 * @file
 * Base timeline component styles.
 *
 * This file contains the core timeline structure and layout.
 * Theme-specific styling should extend this in theme libraries.
 */

.timeline-wrapper {
  margin: 1rem auto;
  padding: 1rem 1rem;
  position: relative;
}

.timeline-wrapper:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--wx-timeline-border-color, #e0e0e0);
  transform: translate(10px, 10px);
}

@media (min-width: 768px) {
  .timeline-wrapper:before {
    left: 50%;
    transform: translateX(-50%);
  }
}

.timeline-wrapper .views-element-container {
  position: relative;
  z-index: 1;
}

/* Year separator */
.timeline-year {
  text-align: center;
  margin: 3rem 0 2rem;
  position: relative;
}

.timeline-year-text {
  display: inline-block;
  font-size: var(--wx-timeline-font-size, 1.2rem);
  font-weight: var(--wx-timeline-font-weight, 700);
  padding: 0.5rem 2rem;
  background: var(--wx-timeline-background-color, #fff);
  color: var(--wx-timeline-text-color, #333);
  border: 2px solid var(--wx-timeline-border-color, #e0e0e0);
  border-radius: 50px;
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .timeline-year-text {
    font-size: var(--wx-timeline-font-size, 1rem);
    padding: 0.4rem 1.5rem;
  }
}

/* Timeline item base */
.timeline-item {
  position: relative;
  margin-bottom: 2rem;
}

.timeline-item[data-aos] {
  transition-property: transform, opacity;
}

/* Alternating layout */
@media (min-width: 768px) {
  .timeline-item.timeline-item--odd {
    padding-right: calc(50% + 2rem);
  }

  .timeline-item.timeline-item--even {
    padding-left: calc(50% + 2rem);
  }
}

/* Timeline dot */
.timeline-item:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--wx-timeline-dot-color, #333);
  border-radius: 50%;
  left: -9px;
  top: 30%;
  z-index: 3;
}

@media (min-width: 768px) {
  .timeline-item:after {
    left: 50%;
    transform: translate(-50%, -30%);
  }
}

/* Mobile layout */
@media (max-width: 767px) {
  .timeline-item {
    padding-left: 20px;
    padding-right: 0;
  }
}

/* Empty state */
.timeline-empty,
.timeline-error {
  text-align: center;
  padding: 3rem 1rem;
  color: #666;
  font-size: 1.1rem;
}