/* ===== Uniball Timeline (namespaced) ===== */
#ub-timeline{
  /* tokens */
  --tl-dark:#081C34;
  --tl-black:#393939;
  --tl-muted:#575757;
  --tl-cyan:#119DB8;
  --tl-max:1240px;
  --tl-pad-x:100px;
  --tl-row-gap:80px;
  --tl-chip-h:59px;
  --tl-center-gap:48px;
  --tl-tail:70px;

  background:#fff;
  padding:80px var(--tl-pad-x);
}

#ub-timeline .ub-tl__wrap{
  width:min(100%, 1440px);
  margin:0 auto;
}

#ub-timeline .ub-tl__head{
  width:min(100%, var(--tl-max));
  margin:0 auto 60px;
}

#ub-timeline .ub-tl__title{
  margin:0 0 16px;
  font-weight:800;
  font-size:38px;
  line-height:50px;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:var(--tl-dark);
}

#ub-timeline .ub-tl__kicker{
  margin:0;
  font-weight:400;
  font-size:16px;
  line-height:19px;
  color:var(--tl-black);
}

/* timeline rail */
#ub-timeline .ub-tl__timeline{
  position:relative;
  width:min(100%, var(--tl-max));
  margin:0 auto;
  padding-bottom: var(--tl-tail);
}

#ub-timeline .ub-tl__line{
  position:absolute;
  left:50%;
  top:0;
  bottom:calc(-1 * var(--tl-tail));
  transform:translateX(-50%);
  border-left:1px solid var(--tl-muted);
}

/* entries */
#ub-timeline .ub-tl__entry{
  position:relative;
  width:100%;
  margin-bottom:var(--tl-row-gap);
  min-height:524px;
}

#ub-timeline .ub-tl__entry:last-child{ margin-bottom:0; }

/* center dot */
#ub-timeline .ub-tl__entry::before{
  content:"";
  position:absolute;
  left:50%;
  top:calc(var(--tl-chip-h)/2);
  width:27px;
  height:27px;
  border:2px solid var(--tl-cyan);
  border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%);
  z-index:2;
}

#ub-timeline .ub-tl__entry::after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(var(--tl-chip-h)/2 - 9.5px);
  width:19px;
  height:19px;
  border-radius:50%;
  background:var(--tl-cyan);
  transform:translateX(-50%);
  z-index:3;
}

/* chip */
#ub-timeline .ub-tl__chip{
  position:absolute;
  top:0;
  height:var(--tl-chip-h);
  display:flex;
  align-items:center;
  z-index:2;
}

#ub-timeline .ub-tl__chip-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--tl-chip-h);
  padding:0 40px;
  border-radius:100px;
  background:var(--tl-dark);
  color:#fff;
  font-weight:700;
  font-size:24px;
  line-height:19px;
  white-space:nowrap;
}

#ub-timeline .ub-tl__entry--right .ub-tl__chip{
  left:calc(50% - var(--tl-center-gap));
  transform:translateX(-100%);
}

#ub-timeline .ub-tl__entry--left .ub-tl__chip{
  left:calc(50% + var(--tl-center-gap));
}

/* card */
#ub-timeline .ub-tl__card{
  width:567px;
  display:flex;
  flex-direction:column;
  gap:16px;
  position:relative;
  z-index:1;
}

#ub-timeline .ub-tl__card-head{
  display:flex;
  flex-direction:column;
  gap:21px;
}

#ub-timeline .ub-tl__card-title{
  margin:0;
  font-weight:800;
  font-size:28px;
  line-height:1;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:var(--tl-dark);
}

#ub-timeline .ub-tl__card-text{
  margin:0;
  font-weight:400;
  font-size:16px;
  line-height:24px;
  color:var(--tl-muted);
}

/* ✅ Place cards correctly */
#ub-timeline .ub-tl__entry--right .ub-tl__card{ margin-left:auto; }
#ub-timeline .ub-tl__entry--left  .ub-tl__card{ margin-right:auto; }

/* poster
   ✅ IMPORTANT: remove any “white box” feel when image loads late/missing */
#ub-timeline .ub-tl__poster{
  width:567px;
  height:323px;
  border-radius:12px;
  overflow:hidden;
  background-color: transparent;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

#ub-timeline .ub-tl__poster--tall{ height:515px; }

/* posters mapping */
#ub-timeline .ub-tl__poster--1{ background-image:url('/res/aboutus/ourstory1.png'); }
#ub-timeline .ub-tl__poster--2{ background-image:url('/res/aboutus/ourstory2.png'); }
#ub-timeline .ub-tl__poster--3{ background-image:url('/res/aboutus/our_story3.JPG'); }
#ub-timeline .ub-tl__poster--4{ background-image:url('/res/aboutus/ourstory3.png'); }
#ub-timeline .ub-tl__poster--5{ background-image:url('/res/aboutus/ourstory4.png'); }

/* ✅ FIXED collaborations images */
#ub-timeline .ub-tl__poster--6{ background-image:url('/res/homepage/kitlaunch.png'); }
#ub-timeline .ub-tl__poster--7{ background-image:url('/res/homepage/prime.png'); }
#ub-timeline .ub-tl__poster--8{ background-image:url('/res/homepage/rumba.png'); }
#ub-timeline .ub-tl__poster--9{ background-image:url('/res/homepage/HealthcareBcn.png'); }
/* button */
#ub-timeline .ub-tl__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:100px;
  border:1px solid var(--tl-dark);
  color:var(--tl-dark);
  font-weight:700;
  font-size:14px;
  line-height:21px;
  text-transform:uppercase;
  padding:16px 32px;
  width:auto;
  transition:background .2s,color .2s,border-color .2s;
  text-decoration:none;
}

#ub-timeline .ub-tl__btn:hover{
  background:var(--tl-dark);
  color:#fdfdfd;
}

/* ✅ nicer spacing for multiple buttons in the "From now on" card */
#ub-timeline .ub-tl__links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}

/* ===== responsive: single column, rail on left ===== */
@media (max-width:1024px){
  #ub-timeline{ --tl-pad-x:64px; }
  #ub-timeline .ub-tl__timeline{ width:100%; }
  #ub-timeline .ub-tl__line{ left:0; transform:none; }

  #ub-timeline .ub-tl__entry{
    display:grid;
    grid-template-columns: 32px 1fr;
    column-gap:16px;
    min-height:unset;
    margin-bottom:64px;
  }

  #ub-timeline .ub-tl__entry::before{ left:0; transform:translate(-50%,-50%); }
  #ub-timeline .ub-tl__entry::after{ left:0; transform:translateX(-50%); }

  #ub-timeline .ub-tl__chip{
    position:relative;
    grid-column:2;
    left:auto;
    transform:none;
    margin-bottom:40px;
  }

  #ub-timeline .ub-tl__entry--right .ub-tl__card,
  #ub-timeline .ub-tl__entry--left  .ub-tl__card{
    grid-column:2;
    margin:0;
    width:100%;
  }

  #ub-timeline .ub-tl__poster{
    width:100%;
    height:auto;
    aspect-ratio: 567/323;
  }

  #ub-timeline .ub-tl__poster--tall{ aspect-ratio: 567/515; }
}

@media (max-width:768px){
  #ub-timeline{ --tl-pad-x:32px; }
  #ub-timeline .ub-tl__title{ font-size:32px; line-height:42px; }
  #ub-timeline .ub-tl__chip-label{ padding:0 24px; font-size:20px; }
  #ub-timeline .ub-tl__entry{ margin-bottom:56px; }
}

@media (max-width:480px){
  #ub-timeline{ --tl-pad-x:20px; }
  #ub-timeline .ub-tl__title{ font-size:28px; line-height:36px; }
  #ub-timeline .ub-tl__chip-label{ padding:0 18px; font-size:18px; }
  #ub-timeline .ub-tl__entry{ margin-bottom:48px; }
}