/* NGSL Horizontal Timeline (v1.0.4) — default structure matches orange reference */
.ngsl-htl{
  --ngsl-accent: var(--ngsl-ring-color);
  --ngsl-header-h: 170px;

  --ngsl-track-pad: 18px;
  --ngsl-scroll-pad: 30px;
  --ngsl-item-gap: 28px;

  --ngsl-cols-desktop: 5;
  --ngsl-cols-tablet: 3;
  --ngsl-cols-mobile: 1;

  --ngsl-card-bg: #ffffff;
  --ngsl-card-border: rgba(0,0,0,0.10);
  --ngsl-card-radius: 10px;
  --ngsl-card-pad: 16px;
  --ngsl-card-min-h: 0px;
  --ngsl-card-max-w: 360px;

  --ngsl-circle-size: 84px;
  --ngsl-ring-thickness: 6px;
  --ngsl-ring-color: #E58A2A;
  --ngsl-fill-color: #ffffff;
  --ngsl-year-fs: 16px;
  --ngsl-year-fw: 600;

  --ngsl-stem-h: 120px;
  --ngsl-lane-gap: 12px;
  --ngsl-stem-thickness: 2px;
  --ngsl-stem-color: rgba(0,0,0,0.45);

  --ngsl-line-thick: 6px;
  --ngsl-line-color: var(--ngsl-ring-color);

  --ngsl-arrow-size: 42px;
  --ngsl-arrow-color: #111827;
  --ngsl-arrow-bg: rgba(255,255,255,0.88);
  --ngsl-arrow-border: rgba(17,24,39,0.16);

  --ngsl-dot-size: 8px;
  --ngsl-dot-gap: 8px;
  --ngsl-dot-active: #111827;
  --ngsl-dot-inactive: rgba(17,24,39,0.25);

  position: relative;
  width: 100%;

  --ngsl-title-fw: 800;}

.ngsl-htl, .ngsl-htl *{ box-sizing: border-box; }

.ngsl-htl::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: var(--ngsl-header-h);
  background: var(--ngsl-accent);
  z-index:0;
}

.ngsl-htl-shell, .ngsl-htl-viewport{ position:relative; z-index:0; }
.ngsl-htl-viewport{ outline:none; }
.ngsl-htl-viewport:focus-visible{ box-shadow: 0 0 0 3px rgba(59,130,246,0.25); border-radius: 14px; }

.ngsl-htl-track{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--ngsl-item-gap) * (var(--ngsl-cols-desktop) - 1))) / var(--ngsl-cols-desktop));
  gap: var(--ngsl-item-gap);
  overflow-x:auto;
  overflow-y:visible;
  padding: calc(var(--ngsl-header-h) - var(--ngsl-circle-size)) var(--ngsl-track-pad) var(--ngsl-track-pad);
  margin:0;
  list-style:none;
  scroll-padding-left: var(--ngsl-scroll-pad);
  scroll-padding-right: var(--ngsl-scroll-pad);
  -webkit-overflow-scrolling: touch;
}

@media (max-width:1024px){
  .ngsl-htl .ngsl-htl-track{
    grid-auto-columns: calc((100% - (var(--ngsl-item-gap) * (var(--ngsl-cols-tablet) - 1))) / var(--ngsl-cols-tablet));
  }
}
@media (max-width:767px){
  .ngsl-htl .ngsl-htl-track{
    grid-auto-columns: calc((100% - (var(--ngsl-item-gap) * (var(--ngsl-cols-mobile) - 1))) / var(--ngsl-cols-mobile));
  }
}

.ngsl-htl-hide-scrollbar .ngsl-htl-track{ scrollbar-width:none; }
.ngsl-htl-hide-scrollbar .ngsl-htl-track::-webkit-scrollbar{ display:none; }

/* Main horizontal line (runs behind circles) */
.ngsl-htl-line{
  position:absolute;
  left:0;
  right:0;
  top: calc(var(--ngsl-header-h) - (var(--ngsl-circle-size) / 2) - (var(--ngsl-line-thick) / 2));
  height: var(--ngsl-line-thick);
  background: var(--ngsl-line-color);
  border-radius: 999px;
  z-index:0;
  pointer-events:none;
}
.ngsl-htl-line-fill{ display:none; } /* not needed for this structure */

/* Item layout: circle on line, connector down to card */
.ngsl-htl-item{
  position:relative;
  display:grid;
  grid-template-rows: auto auto auto;
  align-items:center;
  min-width:0;
}

/* Node (circle) */
.ngsl-htl-node{
  grid-row: 1;
  position:relative;
  display:grid;
  grid-template-rows: var(--ngsl-stem-h) auto var(--ngsl-stem-h);
  justify-items:center;
  align-items:center;
  z-index:3;
}

.ngsl-htl-circle{
  width: var(--ngsl-circle-size);
  height: var(--ngsl-circle-size);
  border-radius: 999px;
  background: var(--ngsl-fill-color);
  border: var(--ngsl-ring-thickness) solid var(--ngsl-ring-color);
  box-shadow: 0 0 0 8px rgba(255,255,255,0.96), inset 0 0 0 1px rgba(0,0,0,0.06);
  display:grid;
  place-items:center;
  user-select:none;
}

.ngsl-htl-year{
font-size: var(--ngsl-year-fs) !important;
  font-weight: var(--ngsl-year-fw) !important;
  color: var(--ngsl-year-color) !important;
  letter-spacing: 0.2px;
}
.ngsl-htl-circle i{
  font-size: var(--ngsl-title-fs);
  color: var(--ngsl-body-color);
}

/* Connector line from circle to card */

/* Card */
.ngsl-htl-card{
  grid-row: 3;
  width: min(100%, var(--ngsl-card-max-w));
  margin: 0 auto;
  background: var(--ngsl-card-bg);
  border: 1px solid var(--ngsl-card-border);
  border-radius: var(--ngsl-card-radius);
  padding: var(--ngsl-card-pad);
  box-shadow: 0 12px 24px rgba(0,0,0,0.10);
  min-height: var(--ngsl-card-min-h);
  z-index:2;
}

.ngsl-htl-month{
font-size: var(--ngsl-meta-fs) !important;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ngsl-meta-color) !important;
}
.ngsl-htl-title{
margin: 10px 0 12px;
  font-size: var(--ngsl-title-fs) !important;
  font-weight: var(--ngsl-title-fw) !important;
  line-height: 1.15;
  color: var(--ngsl-title-color) !important;
}
.ngsl-htl-tag{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--ngsl-meta-fs);
  font-weight: 800;
  background: rgba(17,24,39,0.06);
  color: rgba(17,24,39,0.9);
  margin-bottom: 10px;
}

/* No bullets: clean text lines */
.ngsl-htl-lines{
margin: 0;
  display: grid;
  gap: 8px;
  font-size: var(--ngsl-body-fs) !important;
  line-height: 1.45;
  color: var(--ngsl-body-color) !important;
}
.ngsl-htl-lineitem{
font-size: var(--ngsl-body-fs) !important;
  line-height: 1.45 !important;
  color: var(--ngsl-body-color) !important;
  margin: 0 !important;
}

/* Arrows */
.ngsl-htl-arrow{
  position:absolute;
  top: calc(var(--ngsl-header-h) - (var(--ngsl-circle-size) / 2) - (var(--ngsl-line-thick) / 2));
  transform: translateY(-50%);
  width: var(--ngsl-arrow-size);
  height: var(--ngsl-arrow-size);
  border-radius: 999px;
  display:grid;
  place-items:center;
  color: var(--ngsl-arrow-color);
  border: 1px solid var(--ngsl-arrow-border);
  background: var(--ngsl-arrow-bg);
  cursor:pointer;
  z-index:6;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.ngsl-htl-arrow span{ font-size: 26px; line-height:1; transform: translateY(-1px); }
.ngsl-htl-prev{ left: 10px; }
.ngsl-htl-next{ right: 10px; }
.ngsl-htl-arrow:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(59,130,246,0.28); }

/* Dots */
.ngsl-htl-dots{
  display:flex;
  gap: var(--ngsl-dot-gap);
  align-items:center;
  justify-content:center;
  margin-top: 14px;
  padding: 0 var(--ngsl-track-pad);
}
.ngsl-htl-dot{
  width: var(--ngsl-dot-size);
  height: var(--ngsl-dot-size);
  border-radius: 999px;
  background: var(--ngsl-dot-inactive);
  border:0;
  padding:0;
  cursor:pointer;
}
.ngsl-htl-dot.is-active{ background: var(--ngsl-dot-active); }

/* Mobile stacked (optional) */
@media (max-width: 767px){
  .ngsl-htl-mobile-stacked .ngsl-htl-track{
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }
  .ngsl-htl-mobile-stacked .ngsl-htl-line,
  .ngsl-htl-mobile-stacked .ngsl-htl-arrow{ display:none; }
}

/* Animations */
.ngsl-htl[data-ngsl-revealanim="true"] .ngsl-htl-item{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.ngsl-htl[data-ngsl-revealanim="true"] .ngsl-htl-item.is-visible{
  opacity:1;
  transform: translateY(0);
}
.ngsl-htl[data-ngsl-stemanimate="true"] .ngsl-htl[data-ngsl-stemanimate="true"] .ngsl-htl-item.is-visible

/* Connector: use circle pseudo-elements so the line is always centered and touching the circle */
.ngsl-htl-stem{ display:none !important; } /* legacy DOM stems hidden */

.ngsl-htl-circle{ position:relative; }

.ngsl-htl-circle::after,
.ngsl-htl-circle::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width: var(--ngsl-stem-thickness);
  background: var(--ngsl-stem-color);
  border-radius:999px;
  z-index:1;
}

/* Down connector (circle -> card below) */
.ngsl-htl-circle::after{
  top: 100%;
  height: var(--ngsl-conn-down, calc(var(--ngsl-stem-h) + var(--ngsl-lane-gap)));
}

/* Up connector (circle -> card above) */
.ngsl-htl-circle::before{
  bottom: 100%;
  height: var(--ngsl-conn-up, calc(var(--ngsl-stem-h) + var(--ngsl-lane-gap)));
}

/* Default: bottom layout = only DOWN connector */
.ngsl-htl[data-layout="bottom"] .ngsl-htl-circle::before{ display:none; }
.ngsl-htl[data-layout="bottom"] .ngsl-htl-circle::after{ display:block; }

/* Top layout = only UP connector */
.ngsl-htl[data-layout="top"] .ngsl-htl-circle::after{ display:none; }
.ngsl-htl[data-layout="top"] .ngsl-htl-circle::before{ display:block; }

/* Alternate: per-item lane decides */
.ngsl-htl[data-layout="alternate"] .ngsl-htl-item[data-lane="top"] .ngsl-htl-circle::after{ display:none; }
.ngsl-htl[data-layout="alternate"] .ngsl-htl-item[data-lane="top"] .ngsl-htl-circle::before{ display:block; }

.ngsl-htl[data-layout="alternate"] .ngsl-htl-item[data-lane="bottom"] .ngsl-htl-circle::before{ display:none; }
.ngsl-htl[data-layout="alternate"] .ngsl-htl-item[data-lane="bottom"] .ngsl-htl-circle::after{ display:block; }

/* Ensure card touches connector (no gap) */
.ngsl-htl-card{ margin: 0 auto !important; }
.ngsl-htl[data-layout="bottom"] .ngsl-htl-card{ margin-top: 0 !important; }
.ngsl-htl[data-layout="top"] .ngsl-htl-card{ margin-bottom: 0 !important; }

/* Line behind circles */
.ngsl-htl-line{ z-index:0 !important; }
.ngsl-htl-node, .ngsl-htl-circle{ z-index:3; }


/* AXISWI v1.1.0 overrides: reliable layout + connectors */

.ngsl-htl{
  --ngsl-top-space: 230px; /* reserved space for top cards */
}

/* center line through circle */
.ngsl-htl-line{
  top: calc(var(--ngsl-header-h) - (var(--ngsl-circle-size)/2) - (var(--ngsl-line-thick)/2));
}

/* item layout */
.ngsl-htl-item{
  display:grid;
  grid-template-rows: auto auto auto;
  align-items:center;
  justify-items:center;
  row-gap: var(--ngsl-lane-gap);
}

/* keep node in middle row; card default bottom */
.ngsl-htl-node{ grid-row: 2; }
.ngsl-htl-card{ grid-row: 3; }

.ngsl-htl[data-layout="top"] .ngsl-htl-card{ grid-row: 1; }
.ngsl-htl[data-layout="top"] .ngsl-htl-node{ grid-row: 2; }

.ngsl-htl[data-layout="alternate"] .ngsl-htl-item[data-lane="top"] .ngsl-htl-card{ grid-row: 1; }
.ngsl-htl[data-layout="alternate"] .ngsl-htl-item[data-lane="top"] .ngsl-htl-node{ grid-row: 2; }

.ngsl-htl[data-layout="alternate"] .ngsl-htl-item[data-lane="bottom"] .ngsl-htl-card{ grid-row: 3; }
.ngsl-htl[data-layout="alternate"] .ngsl-htl-item[data-lane="bottom"] .ngsl-htl-node{ grid-row: 2; }

/* reserve top space when any top cards exist */
.ngsl-htl[data-layout="top"] .ngsl-htl-track{
  padding-top: calc(var(--ngsl-header-h) - var(--ngsl-circle-size) + var(--ngsl-top-space));
}
.ngsl-htl[data-layout="alternate"] .ngsl-htl-track{
  padding-top: calc(var(--ngsl-header-h) - var(--ngsl-circle-size) + (var(--ngsl-top-space) * 0.75));
}

/* connector: pseudo on circle, centered, enabled per lane */
.ngsl-htl-stem{ display:none !important; }
.ngsl-htl-circle{ position:relative; }
.ngsl-htl-circle::after,
.ngsl-htl-circle::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width: var(--ngsl-stem-thickness);
  background: var(--ngsl-stem-color);
  border-radius: 999px;
  display:none;
}

.ngsl-htl-circle::after{
  top: 100%;
  height: var(--ngsl-conn-down, calc(var(--ngsl-stem-h) + var(--ngsl-lane-gap)));
}
.ngsl-htl-circle::before{
  bottom: 100%;
  height: var(--ngsl-conn-up, calc(var(--ngsl-stem-h) + var(--ngsl-lane-gap)));
}

.ngsl-htl[data-layout="bottom"] .ngsl-htl-circle::after{ display:block; }
.ngsl-htl[data-layout="top"] .ngsl-htl-circle::before{ display:block; }

.ngsl-htl[data-layout="alternate"] .ngsl-htl-item[data-lane="bottom"] .ngsl-htl-circle::after{ display:block; }
.ngsl-htl[data-layout="alternate"] .ngsl-htl-item[data-lane="top"] .ngsl-htl-circle::before{ display:block; }

/* typography */
.ngsl-htl-title{ font-size: var(--ngsl-title-fs); color: var(--ngsl-title-color); }
.ngsl-htl-month{ font-size: var(--ngsl-meta-fs); color: var(--ngsl-meta-color); }
.ngsl-htl-lines{ font-size: var(--ngsl-body-fs); color: var(--ngsl-body-color); }
.ngsl-htl-year{ font-size: var(--ngsl-year-fs); color: var(--ngsl-year-color); }
.ngsl-htl-circle i{ color: var(--ngsl-year-color); }

/* force card background visible */
.ngsl-htl-card{ background: var(--ngsl-card-bg) !important; }


.ngsl-htl-lineitem, .ngsl-htl-lineitem *{
font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}


.ngsl-htl-card ul, .ngsl-htl-card ol, .ngsl-htl-card li{
font-size: var(--ngsl-body-fs) !important;
  line-height: 1.45 !important;
  color: var(--ngsl-body-color) !important;
}