/**handles:timeline**/
/* ===== HIA Timeline v2 — single source of truth ===== */
.u-tl{
  /* colours */
  --tl-accent:#1275BB;             /* brand blue */
  --tl-line:#e5e7eb;
  --tl-card-bg:#fff;
  --tl-card-bd:#eef2f7;
  --tl-text:#0f172a;
  --tl-muted:#64748b;

  /* layout vars (desktop) */
  --mid:48px;                      /* centre column width */
  --gap:24px;                      /* gap between columns */
  --connector-top:26px;            /* vertical offset for connector & dot */
  --dot:16px;                      /* dot size */
  --pill-gap:6px;                  /* gap between dot and year pill */
  --pill-h:22px;                   /* approx pill height */

  /* layout vars (mobile) */
  --left-m:56px;                   /* node column width on mobile */
  --gap-m:16px;                    /* gap node → card on mobile */

  position:relative;
  display:grid;
  gap:3rem;
  padding:1rem 0;
  color:var(--tl-text);
}

/* Vertical line */
.u-tl::before{
  content:"";
  position:absolute;
  inset-block:0;
  left:50%;
  width:2px;
  background:var(--tl-line);
  transform:translateX(-1px);
  pointer-events:none;
}

/* Row grid */
.u-tl__row{
  position:relative;                               /* anchor for dot */
  display:grid;
  grid-template-columns:1fr var(--mid) 1fr;
  column-gap:var(--gap);
  align-items:start;
}

/* Cards */
.u-tl__card{
  background:var(--tl-card-bg);
  border:1px solid var(--tl-card-bd);
  border-radius:16px;
  padding:1.1rem 1.25rem;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  position:relative;
  word-wrap:break-word;
}
.u-tl__title{ margin:0 0 .25rem 0; font-size:1.1rem; line-height:1.35; }
.u-tl__when{ display:inline-block; font-size:.9rem; color:var(--tl-muted); }

.u-tl__card--left{  grid-column:1/2; }
.u-tl__card--right{ grid-column:3/4; }

/* Connectors — reach the centre line */
.u-tl__card--left::after,
.u-tl__card--right::after{
  content:"";
  position:absolute;
  top:var(--connector-top);                          /* SAME as dot */
  width:calc(var(--gap) + var(--mid)/2);            /* gap + half centre col */
  border-top:2px solid var(--tl-line);
}
.u-tl__card--left::after{  right:calc(-1 * (var(--gap) + var(--mid)/2)); }
.u-tl__card--right::after{ left: calc(-1 * (var(--gap) + var(--mid)/2)); }

/* Node column: just reserve space; DO NOT position it */
.u-tl__node{
  grid-column:2/3;
  position:static;                                   /* important */
  min-height:calc(var(--connector-top) + var(--dot) + var(--pill-gap) + var(--pill-h));
}

/* Dot — positioned relative to the ROW so it matches connectors */
.u-tl__dot{
  width:var(--dot);
  height:var(--dot);
  border-radius:999px;
  background:var(--tl-accent);
  box-shadow:0 0 0 6px #fff;
  position:absolute;
  top:var(--connector-top);                          /* SAME as connectors */
  left:50%;
  transform:translateX(-50%);
}

/* Year pill — locked under the dot */
.u-tl__date{
  position:absolute;
  top:calc(var(--connector-top) + var(--dot) + var(--pill-gap));
  left:50%;
  transform:translateX(-50%);
  display:inline-block;
  padding:.125rem .5rem;
  font:600 12px/1.4 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--tl-accent);
  background:#fff;
  border:1px solid var(--tl-accent);
  border-radius:999px;
  white-space:nowrap;
}

/* -------- Mobile stack -------- */
@media (max-width:900px){
  /* move the vertical line into the node column */
  .u-tl::before{ left:calc(var(--left-m)/2); }

  /* 2-col grid: node | card */
  .u-tl__row{
    grid-template-columns:var(--left-m) 1fr;
    column-gap:var(--gap-m);
  }

  .u-tl__node{ grid-column:1/2; }
  .u-tl__card{ grid-column:2/3; padding:1rem; }

  /* pin dot & pill to the mobile line */
  .u-tl__dot{  left:calc(var(--left-m)/2); }
  .u-tl__date{ left:calc(var(--left-m)/2); }

  /* short connector from card to dot */
  .u-tl__card--left::after,
  .u-tl__card--right::after{
    left:calc(-1 * (var(--gap-m) + var(--left-m)/2));
    width:calc(var(--gap-m) + var(--left-m)/2);
    top:var(--connector-top);
    display:block;
  }
}

/* Optional dark container */
.u-tl[data-theme="dark"]{
  --tl-line:#334155;
  --tl-card-bg:#0b1220;
  --tl-card-bd:#111827;
  --tl-text:#e5e7eb;
  --tl-muted:#a3aed2;
}