/* Timeline Section — SD-82
 * Single phase column in a horizontal timeline.
 * At S: narrow tall column, label rotated -90deg.
 * At M/L: wide short horizontal bar, label reads normally.
 * Desktop-first: default = L/M (≥376px), @max-width 375px = S
 */

/* --- Wrapper for the full timeline (used by parent) --- */
.timeline {
  display: flex;
  flex-direction: column;  /* M/L: stacked rows */
  align-items: stretch;
  overflow-x: visible;
  gap: 0;
}

/* --- Single section (M/L: full width row) --- */
.timeline-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  width: 100%;
}

/* M/S: equal-width columns, no scroll — each section fills flex share */

/* --- Month label area --- */
.timeline-section__month {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dk-space-00);   /* 4px */
  width: 100%;
  flex-shrink: 0;
}

.timeline-section__month-label {
  font-family: var(--dk-font-family);
  font-weight: var(--dk-font-weight-regular);
  font-size: 1.25rem;     /* 20px at M/L */
  line-height: 1.2;
  color: var(--dk-color-black);
}

@media (max-width: 79.9375rem) {
  .timeline-section__month-label {
    width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

@media (max-width: 63.9375rem) {
  .timeline-section__month-label {
    font-size: 1rem;  /* 16px at S */
  }
}

/* --- Tick line (small vertical tick connecting label to phase) --- */
.timeline-section__tick {
  width: 2px;
  height: 1.75rem;    /* 28px */
  background-color: var(--dk-color-black);
  margin-left: 0;
}

/* --- Phase block --- */
.timeline-section__phase {
  border-left: 2px solid var(--dk-color-black);
  display: flex;
  align-items: center;     /* M/L: text centered vertically */
  min-height: 6.5rem;      /* ~104px at L */
  padding: var(--dk-space-03) var(--dk-space-02);
  width: 100%;
  overflow: hidden;
  position: relative;
  flex: 1;
}

@media (max-width: 79.9375rem) {
  .timeline-section__phase {
    align-items: flex-end;  /* M/S: text at bottom, rotated */
    min-height: 17.375rem;  /* 278px */
    max-height: 18.75rem;   /* 300px */
    padding: var(--dk-space-03) var(--dk-space-01) var(--dk-space-02);
    flex: 1;
  }
}

/* --- Background colors --- */
.timeline-section--inactive .timeline-section__phase {
  background-color: var(--dk-color-brand-primary);
}

.timeline-section--active .timeline-section__phase {
  /* Default active color when no patternUrl or activeColor is passed */
  background-color: var(--dk-color-brand-secondary-01);
  background-size: cover;
  background-repeat: no-repeat;
}

/* --- Phase label text --- */
.timeline-section__label {
  line-height: 1.3;
  color: var(--dk-color-black);
  writing-mode: horizontal-tb;
  transform: none;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

@media (max-width: 79.9375rem) {
  .timeline-section__label {
    /* M/S: rotated -90deg, reads bottom-to-top */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}