/* ==========================================================================
   OERL ABOUT  —  page-scoped component styles for about.html
   Loaded after oerl-enhance.css. Theme-aware via the shared --oerl-* vars.
   Section:  1) ROADMAP / TIMELINE
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) ROADMAP  (.rm-*)
   Horizontal timeline ≥1200px, vertical timeline ≤1199px. The connector line
   and its nodes share one coordinate zone at the top of the track so the nodes
   sit ON the line; cards hang below.
   -------------------------------------------------------------------------- */
.rm-area { position: relative; overflow: hidden; }

.rm-area .rm-bg-word {
  position: absolute; top: 120px; left: 50%; transform: translateX(-50%);
  font-size: 190px; font-weight: 800; letter-spacing: .04em; line-height: 1;
  white-space: nowrap; color: var(--tg-theme-primary-500); opacity: .04;
  pointer-events: none; z-index: 0; user-select: none;
}

/* Track: the top 72px is the connector zone (line + nodes); cards start below. */
.rm-track { position: relative; display: flex; gap: 26px; padding-top: 72px; z-index: 1; }

.rm-line {
  position: absolute; top: 35px; left: 6px; right: 6px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--tg-theme-primary-500), var(--tg-theme-secondary-500));
  z-index: 0;
}

.rm-item { position: relative; flex: 1 1 0; min-width: 0; }

/* Node: pulled up (-49px from the card top) so its centre lands on the line. */
.rm-node {
  position: absolute; top: -49px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--tg-theme-primary-500);
  box-shadow: 0 0 0 5px rgba(63, 163, 215, .16); z-index: 2;
}
.rm-item.is-current .rm-node {
  background: var(--tg-theme-secondary-500);
  box-shadow: 0 0 0 6px rgba(250, 108, 32, .22); animation: rmPulse 2s infinite;
}
@keyframes rmPulse {
  0%   { box-shadow: 0 0 0 4px rgba(250, 108, 32, .28); }
  70%  { box-shadow: 0 0 0 14px rgba(250, 108, 32, 0); }
  100% { box-shadow: 0 0 0 4px rgba(250, 108, 32, 0); }
}

.rm-card {
  position: relative; height: 100%;
  background: var(--oerl-surface); border: 1px solid var(--oerl-border-soft);
  border-radius: 16px; padding: 26px 24px 24px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rm-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -28px rgba(20, 24, 60, .34); }
[data-bs-theme="dark"] .rm-card:hover { box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .8); }
.rm-item.is-current .rm-card {
  border-color: var(--tg-theme-secondary-500);
  box-shadow: 0 20px 44px -26px rgba(250, 108, 32, .5);
}

.rm-ico {
  width: 46px; height: 46px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(63, 163, 215, .12); color: var(--tg-theme-primary-500); margin-bottom: 16px;
}
.rm-item.is-current .rm-ico { background: rgba(250, 108, 32, .14); color: var(--tg-theme-secondary-500); }
.rm-ico i { width: 24px; height: 24px; }

/* Year + optional "Now" badge share a baseline row so the badge never wraps
   under the icon. */
.rm-year {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: .05em;
  color: var(--tg-theme-primary-500); margin-bottom: 6px;
}
.rm-item.is-current .rm-year { color: var(--tg-theme-secondary-500); }
.rm-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: var(--tg-theme-secondary-500);
  padding: 3px 10px; border-radius: 30px; line-height: 1.4;
}

.rm-title { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--tg-heading-color); }
[data-bs-theme="dark"] .rm-title { color: var(--oerl-heading); }
.rm-desc { font-size: 14.5px; line-height: 1.7; color: var(--tg-body-color); margin: 0; }
[data-bs-theme="dark"] .rm-desc { color: var(--oerl-text); }

/* Vertical timeline for tablet + mobile (≤1199px): the 5-across layout is too
   cramped below 1200px, so stack into a rail with the line down the left. */
@media (max-width: 1199.98px) {
  .rm-area .rm-bg-word { display: none; }
  .rm-track { flex-direction: column; gap: 0; padding-top: 6px; padding-left: 4px; }
  .rm-line { top: 8px; bottom: 8px; left: 11px; right: auto; width: 3px; height: auto;
    background: linear-gradient(180deg, var(--tg-theme-primary-500), var(--tg-theme-secondary-500)); }
  .rm-item { padding-left: 46px; padding-bottom: 30px; }
  .rm-node { top: 4px; left: 0; transform: none; }
  .rm-card { height: auto; }
  .rm-item:last-child { padding-bottom: 0; }
}