/* ======================================
   Lightbox ja yleiset asetukset
====================================== */

/* estää sivun scrollauksen lightboxissa */
html.lightbox-open,
body.lightbox-open{
  overflow: hidden;
}

/* fullscreen overlay */
#lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85); /* tumma overlay */
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* kuva skaalautuu ruutuun oikein */
#lightbox img{
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.7s ease-in-out; /* fade kesto 0.7s */
}

#lb-img.show {
  opacity: 1; /* näkyvä fade-in */
}

/* caption (tekstin alla gradient) */
#lb-caption {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 24px;
  color: white;
  z-index: 2; /* gradientin päällä */
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  pointer-events: none;
}

/* nuolipainikkeet ja sulku */
.prev,.next,.close{
  position: absolute;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  user-select: none;
}

.prev{ left: 30px; top: 50%; transform: translateY(-50%); }
.next{ right: 30px; top: 50%; transform: translateY(-50%); }
.close{ top: 20px; right: 30px; }





/* laskuri 1/36 */
#lb-counter{
  position:absolute;
  top:20px;
  left:25px;
  color:#fff;
  font-size:1.2em;
  z-index:2;
}

@media (max-width: 600px){
  #lb-counter{
    font-size: 1em;
    top: 15px;
    left: 15px;
  }
}

/* ======================================
   Gallery blockit
====================================== */

.trip-block{
  margin-bottom: 40px;
}

.trip-images{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
}

.trip-images img{
  width:220px;
  border-radius:6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.trip-images img:hover {
  transform: scale(1.05);
}

#gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#gallery img {
  width: 220px;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
}

/* ======================================
   Gradient tummennus kuvan alaosaan
   ja captionin päällä
====================================== */
.lb-gradient {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;      /* gradientin leveys, pienempi kuin kuva */
  height: 10%;     /* kuinka korkea gradient on */
  pointer-events: none;
  z-index: 1;      /* captionin alla */
  background: radial-gradient(
    ellipse at bottom center,
    rgba(0,0,0,0.80) 0%,    /* tummin kohta alareunassa */
    rgba(0,0,0,0.75) 35%,
    rgba(0,0,0,0.25) 60%,
    rgba(0,0,0,0) 65%      /* häivytys ylös */
  );
}

@media (max-width: 768px) {
  .lb-gradient {
    width: 70%;
    height: 12%;
  }
}

/* ======================================
   Responsiivisuus
====================================== */
@media (max-width: 768px) {
  #lb-caption {
    font-size: 18px;
  }
}

html, body {
  height: 100%;
}

body.lightbox-open {
  overflow: hidden;
}

/* HTML5 UP fix */
#wrapper,
#page-wrapper,
#main {
  transform: none !important;
}