/* ===== Joosep-style Hero Carousel (RIGHT side) ===== */

.jg-hero{
  transition: background-color .35s ease;
}

/* Make the carousel a "positioning context" */
.jg-carousel{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;   /* viewport | controls (optional) */
  align-items: center;
  gap: 18px;
}

/* Viewport */
.jg-viewport{
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

/* Track/Slides */
.jg-track{
  display: flex;
  transition: transform .45s ease;
  will-change: transform;
}

.jg-slide{
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  padding: 22px;
}

.jg-slide img{
  width: min(420px, 100%);
  height: auto;
  display: block;
}

/* ===== VERTICAL progress bars on the RIGHT (like screenshot #2) ===== */
.jg-bars{
  position: absolute;
  right: -48px;               /* pushes outside the card; tweak */
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 14px;
  z-index: 5;
}

/* base bar = short */
.jg-bar{
  display:block;
  will-change: height, opacity;
  width: 10px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  opacity: .5;

  transition: 
	  height .55s cubic-bezier(.22,1,.36,1), 
	  opacity .35s ease, 
	  background-color .35s ease;

  transform-origin: center top;
}

.jg-bar.is-active{
  height: 92px;
  background: rgba(0,0,0,.8);
  opacity: 1;
}



/* ===== Controls ===== */
.jg-controls{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.jg-btn{
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: #2b6cb0;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.jg-btn:hover{ filter: saturate(1.05); transform: translateY(-1px); }

/* ===== Scroll indicator ===== */
.jg-scroll-indicator{
  display: grid;
  place-items: center;
  margin-top: 18px;
}
.jg-mouse{
  width: 34px;
  height: 54px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
  position: relative;
}
.jg-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  animation: jg-scroll-dot 1.2s infinite ease-in-out;
}
@keyframes jg-scroll-dot{
  0%{ transform: translate(-50%,0); opacity: 1; }
  70%{ transform: translate(-50%,18px); opacity: .2; }
  100%{ transform: translate(-50%,0); opacity: 1; }
}

/* ===== Responsive: keep bars inside on smaller screens ===== */
@media (max-width: 1024px){
  .jg-bars{
    right: 14px;              /* keep inside the carousel on tablet */
  }
}
@media (max-width: 767px){
  .jg-bars{
    right: 10px;
    gap: 10px;
  }
  .jg-bar{ width: 8px; height: 34px; }
  .jg-bar.is-active{ height: 70px; }
}