/* Super Timeline Frontend Styles */

:root{
  --stl-blue:#29589F;
  --stl-red:#BA2332;
  --stl-grey:#cccccc;
  --stl-light:#e0e0e0;
}

/* Apply Lato font globally inside the plugin */
.stl-wrapper {
  font-family: 'Lato', sans-serif;
}

.stl-title   { font-weight: 700; }  /* bold */
.stl-year    { font-weight: 900; }  /* extra bold */
.stl-keyword { font-weight: 700; }  /* bold red */
.stl-desc    { font-weight: 400; }  /* normal */

.stl-wrapper {
  position:relative;
  width:100%;
  padding:20px 10px 60px;
}

/* EVENTS (Top timeline section) */
.stl-events {
  position: relative;
  display: flex;
  gap: 40px;
  padding: 60px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* Hide scrollbar */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}
.stl-events::-webkit-scrollbar { display: none; }

.stl-event {
  flex: 0 0 calc(100% / 3.5); /* Show 4.5 events by default */
  scroll-snap-align: center;
  opacity: 0.4;
  transition: opacity .25s ease, transform .25s ease;
  text-align: center;
}

/* Flip bottom events so text is above the circle */
.stl-event.stl-bottom {
  display: flex;
  flex-direction: column-reverse;
}

.stl-event.active {
  opacity:1;
  z-index:2;
}

/* Circles */
.stl-circle {
  width:300px;
  height:300px;
  border-radius:50%;
  margin:0 auto 14px;
  overflow:hidden;
  border:8px solid var(--stl-grey);
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stl-event.active .stl-circle {
  width:320px;
  height:320px;
  border-radius: 50%;
  border: 6px solid transparent;
  background: 
    linear-gradient(white, white) padding-box, 
    linear-gradient(90deg, var(--stl-blue), var(--stl-red)) border-box;
}

.stl-circle img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.stl-placeholder {
  font-weight:700;
  font-size:28px;
  color:#666;
}

/* Text styles */
.stl-title { margin:0; font-size:22px; line-height:1.2; }
.stl-year { color:var(--stl-blue); font-weight:800; }
.stl-keyword { color:var(--stl-red); font-weight:700; }
.stl-desc { color:#222; margin-top:10px; }

.stl-event:not(.active) .stl-desc { display:none; }
.stl-event:not(.active) .stl-title,
.stl-event:not(.active) .stl-text { color:var(--stl-grey); }
.stl-event:not(.active) .stl-year,
.stl-event:not(.active) .stl-keyword { color:var(--stl-grey); }

/* ROAD (behind events) */
.stl-road {
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:44px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, var(--stl-blue), var(--stl-red));
  border-radius:6px;
  box-shadow:0 2px 12px rgba(0,0,0,.15) inset;
  z-index:0;
}

.stl-road-dash {
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:6px;
  transform:translateY(-50%);
  background-image:linear-gradient(to right, #fff 50%, rgba(255,255,255,0) 50%);
  background-size:28px 6px;
}

/* SLIDER (bottom navigation) */
.stl-slider {
  position:relative;
  margin-top:40px;
  padding-top:40px;
}

.stl-progress-track {
  position:relative;
  height:8px;
  background:var(--stl-light);
  border-radius:4px;
}

.stl-progress-fill {
  position:absolute;
  left:0;
  top:0;
  height:8px;
  width:0%;
  background:linear-gradient(90deg, var(--stl-blue), var(--stl-red));
  border-radius:4px;
}

.stl-years {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:18px;
}

.stl-year-btn {
  background:none;
  border:none;
  color:var(--stl-grey);
  font-size:16px;
  cursor:pointer;
  padding:6px 8px;
}
.stl-year-btn.active {
  font-weight: 800;
  background: linear-gradient(90deg, var(--stl-blue), var(--stl-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}


/* Marker (slider knob) */
.stl-marker {
  position:absolute;
  top:50%;
  left:0;
  transform:translate(-50%, -50%);
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(90deg, var(--stl-blue), var(--stl-red));
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  cursor:grab;
  z-index:5;
}
.stl-marker:active { cursor:grabbing; }

.stl-marker-inner {
  display:block;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#fff;
  line-height:34px;
  text-align:center;
  font-weight:900;
  color:var(--stl-red);
}

/* Responsive */
@media (max-width: 900px){
  .stl-events { gap:24px; }
  .stl-event { width:220px; }
  .stl-circle { width:180px; height:180px; }
}

@media (max-width: 680px){
  .stl-events {
    flex-direction: row;       /* keep horizontal scroll */
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .stl-event {
    flex: 0 0 100%;            /* show 1 event per view */
    scroll-snap-align: center;
  }
}