/* Zohi Timeline Vertical Layout - base styles (best-effort) */

/* Turn swiper into normal vertical flow */
.swiper.zohi-tlv,
.zohi-tlv .swiper {
  overflow: visible !important;
}

/* Force wrapper to stack items vertically */
.zohi-tlv .swiper-wrapper,
.swiper.zohi-tlv .swiper-wrapper{
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 48px !important;
  height: auto !important;
}

/* Slides should be full width and not positioned by Swiper */
.zohi-tlv .swiper-slide,
.swiper.zohi-tlv .swiper-slide{
  width: 100% !important;
  max-width: 1100px;
  margin: 0 auto !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Hide swiper pagination / nav if present (optional) */
.zohi-tlv .swiper-pagination,
.swiper.zohi-tlv .swiper-pagination,
.zohi-tlv .swiper-button-prev,
.zohi-tlv .swiper-button-next,
.swiper.zohi-tlv .swiper-button-prev,
.swiper.zohi-tlv .swiper-button-next {
  display: none !important;
}

/* Item layout: image left, content right */
.zohi-tlv .timeline-box{
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  align-items: start !important;
  gap: 28px !important;
  text-align: left !important;
}

/* Content column may use utility classes like text-center / items-center. Override to left. */
.zohi-tlv .timeline-box .content,
.zohi-tlv .timeline-box .content.panel,
.zohi-tlv .timeline-box .content.panel.vstack{
  text-align: left !important;
  align-items: flex-start !important;
}

/* Remove per-item dot/line decorations (theme leftovers) */
.zohi-tlv .timeline-box::before,
.zohi-tlv .timeline-box::after{
  content: none !important;
  display: none !important;
}

.zohi-tlv .timeline-box hr,
.zohi-tlv .timeline-box .dot,
.zohi-tlv .timeline-box .dots,
.zohi-tlv .timeline-box .timeline-dot,
.zohi-tlv .timeline-box .timeline-dots,
.zohi-tlv .timeline-box .line,
.zohi-tlv .timeline-box .lines,
.zohi-tlv .timeline-box .timeline-line,
.zohi-tlv .timeline-box .timeline-lines,
.zohi-tlv .timeline-box .connector,
.zohi-tlv .timeline-box .connectors{
  display: none !important;
}

/* Ensure image area behaves */
.zohi-tlv .image-wrap{
  position: relative !important;
  width: 220px !important;
  max-width: 220px !important;
}

/* Keep the image square/cropped nicely */
.zohi-tlv .image-wrap img{
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  border-radius: 16px;
  display: block;
}

/*
  YEAR
  - We keep the year on the content side (right column) and left-aligned.
  - If the theme still renders a year badge inside the image area, we hide it.
*/

/* Hide year inside the image wrapper if it exists there */
.zohi-tlv .image-wrap .year,
.zohi-tlv .image-wrap .timeline-year,
.zohi-tlv .image-wrap [data-year],
.zohi-tlv .image-wrap .timeline-year-text,
.zohi-tlv .image-wrap .timeline__year{
  display: none !important;
}

/* Style year in content */
.zohi-tlv .timeline-box .zohi-tlv-year,
.zohi-tlv .timeline-box .year,
.zohi-tlv .timeline-box .timeline-year,
.zohi-tlv .timeline-box [data-year],
.zohi-tlv .timeline-box .timeline-year-text,
.zohi-tlv .timeline-box .timeline__year{
  position: static !important;
  display: block !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #000 !important;
  opacity: 1 !important;
  font-weight: 900 !important;
  font-size: 44px !important;
  line-height: 1.05 !important;
  text-align: left !important;
  /* Some themes center children via flex (items-center) + auto margins. Force left. */
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* If the year is rendered inside a heading like h3.title, it can inherit centering. */
.zohi-tlv .timeline-box .content .title.zohi-tlv-year,
.zohi-tlv .timeline-box .content h1.zohi-tlv-year,
.zohi-tlv .timeline-box .content h2.zohi-tlv-year,
.zohi-tlv .timeline-box .content h3.zohi-tlv-year,
.zohi-tlv .timeline-box .content h4.zohi-tlv-year{
  text-align: left !important;
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* If year is a heading, make it look consistent */
.zohi-tlv .timeline-box h2.year,
.zohi-tlv .timeline-box h2.timeline-year{
  margin: 0 !important;
}

/* Content spacing */
.zohi-tlv .content{
  padding: 0 !important;
}

/* Title + description */
.zohi-tlv .content h3,
.zohi-tlv .content h2,
.zohi-tlv .content .title{
  margin: 0 0 10px 0 !important;
  font-weight: 800;
  color: #000 !important;
}

.zohi-tlv .content p{
  margin: 0 !important;
  color: #000 !important;
  opacity: 1 !important;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px){
  .zohi-tlv .timeline-box{
    grid-template-columns: 1fr !important;
  }
  .zohi-tlv .image-wrap{
    width: 100% !important;
    max-width: 100% !important;
  }
  .zohi-tlv .image-wrap img{
    height: 220px !important;
  }
  .zohi-tlv .timeline-box .zohi-tlv-year,
  .zohi-tlv .timeline-box .year,
  .zohi-tlv .timeline-box .timeline-year,
  .zohi-tlv .timeline-box [data-year],
  .zohi-tlv .timeline-box .timeline-year-text,
  .zohi-tlv .timeline-box .timeline__year{
    font-size: 34px !important;
  }
}