/* =========================
   TIMELINE – BASE
========================= */

.band-timeline-ref {
  padding: 140px 0;
}

/* TIMELINE PANEL (specialized soft-panel) */
.timeline-panel {
  /* override generic soft-panel limits */
  max-width: 100%;
  width: 100%;

  padding: 48px 56px;

  margin: 48px auto 0;
}

/* =========================
   HORIZONTAL TIMELINE (DESKTOP)
========================= */

.timeline-ref {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: flex-start;
}

/* horizontal line */
.timeline-ref::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 28px;
  height: 2px;
  background: rgba(63, 75, 47, 0.35);
}

/* item */
.timeline-item {
  position: relative;
  text-align: center;
  z-index: 1;
}

/* year dot */
.timeline-dot {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;

  border-radius: 50%;
  background: #3f4b2f;
  color: #fff;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* text */
.timeline-text {
  font-size: 15px;
  line-height: 1.45;
  max-width: 22ch;
  margin: 0 auto;
}

/* =========================
   MOBILE (VERTICAL)
========================= */

@media (max-width: 768px) {

  .band-timeline-ref {
    padding: 96px 0 120px;
  }

  .timeline-panel {
    padding: 32px 24px;
  }

  .timeline-ref {
    display: flex;
    flex-direction: column;
    gap: 36px;

    padding-left: 36px;
  }

  /* vertical line */
  .timeline-ref::before {
    left: 28px;
    top: 0;
    bottom: 0;
    width: 2px;
  }

  .timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    text-align: left;
  }

  .timeline-dot {
    margin: 0;
    flex-shrink: 0;
    transform: translateX(-28px);
  }

  .timeline-text {
    max-width: 100%;
  }
}