/* ════════════════════════════════════════════════════════
   Integris Journey Timeline — journey.css  v1.2.0
   Dark bg: #022B4F  |  Primary: #025AFF  |  Secondary: #545759

   ROOT FIX: grid-template-columns is written as a concrete
   "Xfr Yfr" inline style on each grid element in PHP render.
   CSS custom properties CANNOT hold <fr> flex values for grids.
════════════════════════════════════════════════════════ */

.ij-wrap {
  --ij-circle-size:      52px;
  --ij-line-w:           3px;
  --ij-node-gap:         14px;
  --ij-line-grad-top:    rgba(255,255,255,0.12);
  --ij-line-grad-bottom: rgba(255,255,255,0.50);
}

.ij-wrap, .ij-wrap * { box-sizing: border-box; margin: 0; padding: 0; }

.ij-wrap  { width: 100%; font-size: 1em; line-height: 1.5; }
.ij-outer { width: 100%; }

/* ── Column header ── */
.ij-col-header-row {
  display: grid;
  /* grid-template-columns injected by PHP inline style */
  margin-bottom: 0.5em;
}
.ij-ch-pill {
  display: inline-block;
    font-size: 1em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 2em;
    padding: 0.3em 1.1em;
    font-family: 'Lexend';
}
.ij-pill-seggeo { background: linear-gradient(135deg,rgba(2,90,255,0.8),rgba(2,90,255,0.4)); border: 1px solid rgba(2,90,255,0.45); }
.ij-pill-ms     { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); }

/* ── Phase row ── */
.ij-phase-row {
  display: grid;
  /* grid-template-columns injected by PHP inline style */
  position: relative;
  align-items: stretch;
}
/* Dashed divider ONLY between phases */
.ij-phase-row + .ij-phase-row { border-top: 1px dashed rgba(255,255,255,0.15); }

/* ── Left column ── */
.ij-left-col {
  padding: 2.4em 1.5em 2.4em 0;
  display: flex; flex-direction: column; gap: 1.5em;
}
.ij-phase-info { display: flex; flex-direction: column; gap: 0.5em; }

.ij-phase-badge {
  display: inline-block; width: fit-content;
  font-size: 1em; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: #025AFF;
  border-radius: 2em; padding: 0.2em 0.85em; white-space: nowrap;
}
.ij-phase-years { font-size: 1em; font-weight: 700; color: rgba(255,255,255,0.75); }
.ij-phase-desc  { font-size: 1em; font-style: italic; color: rgba(255,255,255,0.4); line-height: 1.45; }

.ij-info-block { display: flex; flex-direction: column; gap: 1em; }
.ij-info-label {
  display: inline-block; width: fit-content;
  font-size: 0.7em; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 0.8em; padding: 0.18em 0.6em;
}
.ij-label-seg { background: rgba(2,90,255,0.18);  color: #7eb4ff; }
.ij-label-geo { background: rgba(84,87,89,0.35); color: rgba(255,255,255,0.6); }

.ij-info-content { display: flex; align-items: flex-start; gap: 0.45em; flex-wrap: wrap; }
.ij-info-icon { font-size: 1.4em; line-height: 1; flex-shrink: 0; }

.ij-seg-text { font-size: 1em; font-weight: 700; color: #fff; line-height: 1.4; }
.ij-seg-text small { display: block; font-size: 0.88em; font-weight: 400; color: rgba(255,255,255,0.55); }
.ij-seg-text em    { display: block; font-size: 0.88em; font-style: italic; font-weight: 400; color: rgba(255,255,255,0.5); line-height: 1.4; }

.ij-seg-extra  { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; margin-top: 0.2em; }
.ij-lab-title  { font-size: 0.88em; font-weight: 700; color: rgba(255,255,255,0.7); }
.ij-chip       { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.75); border-radius: 2em; padding: 0.12em 0.55em; font-size: 0.8em; font-weight: 800; }

.ij-geo-text       { font-size: 1em; font-weight: 700; color: rgba(255,255,255,0.85); line-height: 1.4; }
.ij-geo-text small { display: block; font-size: 0.88em; font-weight: 400; color: rgba(255,255,255,0.5); }

.ij-seg-geo-divider {
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(255,255,255,0.15) 0, rgba(255,255,255,0.15) 4px, transparent 4px, transparent 8px);
  margin: 0.1em 0;
}

/* ── Right column — Timeline ──
   JS reads --ij-circle-size and --ij-line-w from .ij-wrap,
   then writes concrete px values:
     .ij-tl-col   → padding-left = circleSize + nodeGap
     .ij-tl-line  → left = circleSize/2 - lineW/2,  width = lineW
     .ij-tl-circle→ left = 0, width = height = circleSize
     .ij-tl-text  → padding-left = circleSize + nodeGap
   This guarantees the circle centre == line centre at any size.
── */
.ij-tl-col {
  position: relative;
  padding: 2.4em 0.5em 2.4em 0; /* padding-left overridden by JS */
  display: flex; flex-direction: column;
}
.ij-tl-line {
  position: absolute; top: 0; bottom: 0;
  /* left + width set by JS */
  background: #fff;
  border-radius: 2px; z-index: 0; pointer-events: none;
}
.ij-last-phase .ij-tl-line::after {
  content: ''; position: absolute;
  bottom: -9px; left: 50%; transform: translateX(-50%);
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 14px solid #fff;
}
.ij-tl-node {
  position: relative; display: flex; align-items: flex-start;
  padding-bottom: 1.6em; z-index: 1;
}
.ij-tl-node:last-child { padding-bottom: 0; }

.ij-tl-circle {
  position: absolute; top: 0; left: 0; /* JS overrides left, width, height */
  width: var(--ij-circle-size); height: var(--ij-circle-size);
  border-radius: 50%; background: #025AFF;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 0 4px rgba(2,90,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1em; font-weight: 900; color: #fff;
  z-index: 3; cursor: default;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
	font-family: 'Lexend';
}
.ij-tl-circle:hover { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(2,90,255,0.3); }

.ij-tl-text {
  padding-top: 0; padding-left: 0; /* JS overrides padding-left */
  display: flex; gap: 0.25em; align-items: center;
  min-height: var(--ij-circle-size); width: 100%;
}
.ij-ms-main   { font-size: 1em; font-weight: 700; color: rgba(255,255,255,0.88); line-height: 1.5; }
.ij-ms-bullets { display: flex; flex-direction: column; gap: 0.28em; }
.ij-ms-bullet {
  position: relative; padding-left: 1em;
  font-size: 1em; color: rgba(255,255,255,0.88); line-height: 1.5;
}
.ij-ms-bullet::before { content: '•'; position: absolute; left: 0; color: #025AFF; font-weight: 900; }

/* ── Animations ── */
.ij-col-header-row          { animation: ij-fdwn  0.5s ease 0.2s  both; }
.ij-phase-row:nth-of-type(1){ animation: ij-sldup 0.6s cubic-bezier(.22,1,.36,1) 0.35s both; }
.ij-phase-row:nth-of-type(2){ animation: ij-sldup 0.6s cubic-bezier(.22,1,.36,1) 0.55s both; }
.ij-phase-row:nth-of-type(3){ animation: ij-sldup 0.6s cubic-bezier(.22,1,.36,1) 0.75s both; }
.ij-phase-row:nth-of-type(4){ animation: ij-sldup 0.6s cubic-bezier(.22,1,.36,1) 0.95s both; }
.ij-phase-row:nth-of-type(5){ animation: ij-sldup 0.6s cubic-bezier(.22,1,.36,1) 1.15s both; }
.ij-info-block { animation: ij-popin  0.4s cubic-bezier(.34,1.56,.64,1) 0.6s  both; }
.ij-tl-node    { animation: ij-ndein  0.45s cubic-bezier(.34,1.56,.64,1) 0.7s  both; }

@keyframes ij-fdwn  { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes ij-sldup { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes ij-popin { from{opacity:0;transform:scale(0.7)}       to{opacity:1;transform:scale(1)} }
@keyframes ij-ndein { from{opacity:0;transform:translateX(-7px)} to{opacity:1;transform:translateX(0)} }

/* ── Mobile ── */
@media (max-width: 600px) {
  .ij-col-header-row { display: none; }
  /* Force single column, overriding inline style */
  .ij-phase-row { grid-template-columns: 1fr !important; }
  .ij-left-col  { border-right: none; border-bottom: 1px dashed rgba(255,255,255,0.12); padding: 1em 0; }
  .ij-tl-col    { padding-top: 1em; padding-bottom: 1em; }
}