/* WG Alternating Timeline
   Uses Elementor Global Styles tokens where available.
*/

.wg-tl{
  --wg-line-w: 2px;
  --wg-axis-w: 100px;
  --wg-marker: 44px;

  /* Global tokens (Elementor) with safe fallbacks */
  --wg-color-text: var(--e-global-color-text, #111);
  --wg-color-accent: var(--e-global-color-accent, #2563eb);
  --wg-color-muted: color-mix(in srgb, var(--wg-color-text) 18%, transparent);
  --wg-color-surface: var(--e-global-color-secondary, #fff); /* often "secondary" is light surface in setups */
  --wg-radius: 18px;
  --wg-shadow: 0 10px 28px rgba(0,0,0,0.10);

  width: 100%;
  color: var(--wg-color-text);
}

/* Layout with optional nav */
.wg-tl--with-nav{
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 28px;
}
.wg-tl--with-nav.wg-tl--nav-right{
  grid-template-columns: 1fr minmax(180px, 260px);
}
.wg-tl--no-nav{
  display: block;
}

.wg-tl__nav{
  position: sticky;
  top: 16px;
  align-self: start;
  padding: 14px 14px;
  border-radius: 16px;
  background: var(--wg-color-surface);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.wg-tl__nav-title{
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--wg-color-text);
}

.wg-tl__nav-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.wg-tl__nav-link{
  display: inline-block;
  text-decoration: none;
  color: var(--wg-color-text);
  font-size: 14px;
  line-height: 1.3;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--wg-color-text) 12%, transparent);
  background: color-mix(in srgb, var(--wg-color-surface) 88%, transparent);
}

.wg-tl__nav-link:hover{
  border-color: color-mix(in srgb, var(--wg-color-accent) 55%, transparent);
}

/* The actual timeline track */
.wg-tl__track{
  display: grid;
  gap: 40px;
}

/* Item grid */
.wg-tl__item{
  display: grid;
  grid-template-columns: 1fr var(--wg-axis-w) 1fr;
  align-items: stretch;
  scroll-margin-top: 90px; /* nice for sticky headers */
}

.wg-tl__axis{
  position: relative;
  display: flex;
  justify-content: center;
}

.wg-tl__axis::before{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;
  width: var(--wg-line-w);
  background: var(--wg-color-muted);
  left: 50%;
  transform: translateX(-50%);
}

.wg-tl__marker{
  position: sticky;
  top: 30vh;
  width: var(--wg-marker);
  height: var(--wg-marker);
  border-radius: 999px;
  background: var(--wg-color-surface);
  border: 1px solid color-mix(in srgb, var(--wg-color-text) 18%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  color: var(--wg-color-accent);
}

.wg-tl__col{
  display:flex;
}
.wg-tl__col--left{ justify-content: flex-end; }
.wg-tl__col--right{ justify-content: flex-start; }

.wg-tl__card{
  max-width: 520px;
  width: 100%;
  border-radius: var(--wg-radius);
  overflow: hidden;
  background: var(--wg-color-surface);
  box-shadow: var(--wg-shadow);
  border: 1px solid color-mix(in srgb, var(--wg-color-text) 10%, transparent);
}

.wg-tl__media img{
  width: 100%;
  height: auto;
  display:block;
}

.wg-tl__content{
  padding: 18px 18px 20px;
}

.wg-tl__title{
  margin: 0 0 8px 0;
  font-size: 20px;
  line-height: 1.2;
  color: var(--wg-color-text);
}

.wg-tl__text{
  font-size: 16px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--wg-color-text) 88%, transparent);
}

.wg-tl__link{
  color: inherit;
  text-decoration: none;
  display: block;
}

/* Responsive */
@media (max-width: 1024px){
  .wg-tl--with-nav{
    grid-template-columns: 1fr;
  }
  .wg-tl__nav{
    position: relative;
    top: auto;
  }
}

@media (max-width: 767px){
  .wg-tl__item{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .wg-tl__axis{ display:none; }
  .wg-tl__col--left,
  .wg-tl__col--right{
    justify-content: stretch;
  }
  .wg-tl__card{ max-width: 100%; }
}