/* ZB Slider front-end */

.zb-slider{
  position:relative;
  width:100%;
  margin:0;
}

.zb-slider-full{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.zb-slider-inner{
  position:relative;
  width:100%;
}

.zb-slide-link{
  display:block;
  text-decoration:none;
  cursor:pointer;
}

.zb-slide{
  width:100%;
  height:200px;
  display:flex;
  align-items:stretch;
  box-sizing:border-box;
}

.zb-slide-content{
  max-width:1064px;
  margin:0 auto;
  height:100%;
  display:flex;
  align-items:center;
  gap:22px;
  padding:0 18px;
  box-sizing:border-box;
}

/* Always keep image + text side-by-side (also on small screens) */
.zb-slide-content{
  flex-wrap:nowrap;
}

.zb-slide-img{
  flex:0 0 auto;
  width:180px;
  height:180px;
  margin:10px 0;
  border-radius:12px;
  overflow:hidden;
  opacity:0;
  /* Fade-in timing: image first (300ms) */
  transition:opacity 300ms ease;
}

.zb-slide-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.zb-slide-text{
  flex:1 1 auto;
  min-width:0;
  font-family:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:#fff;
}

.zb-line{
  font-size:28px;
  line-height:1.12;
  margin:6px 0;
  opacity:0;
  /* Fade-in timing: text after image (300ms) */
  transition:opacity 300ms ease;
}

/* If one line empty: keep layout space by hiding, not collapsing */
.zb-line.is-empty{
  visibility:hidden;
}

.zb-slide.zb-img-in .zb-slide-img{
  opacity:1;
}

.zb-slide.zb-text-in .zb-line{
  opacity:1;
}
/* Dots */
.zb-dots{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:10px;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
}

.zb-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #333;
  box-sizing:border-box;
  opacity:.75;
  transition:width 500ms ease, opacity 500ms ease;
  cursor:pointer;
}

.zb-dot.is-active{
  width:26px;
  opacity:1;
}

/* On small screens, scale text a bit down but keep side-by-side */
@media (max-width: 600px){
  .zb-line{font-size:22px;}
  .zb-slide-content{gap:14px;padding:0 14px;}
}