/* Femorale Articles - shared photo presentation - 2026 */

body.lb-no-scroll{overflow:hidden!important;}

#travelLightbox{
  display:none;
  position:fixed;
  z-index:10000;
  inset:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.92);
}

/* DESKTOP: maximize photo area */
#travelLightbox .lb-stage{
  position:absolute!important;
  left:70px!important;
  right:70px!important;
  top:28px!important;
  bottom:28px!important;
  width:auto!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}

#travelLightboxImage{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}

#travelLightbox .lb-close,
#travelLightbox .lb-prev,
#travelLightbox .lb-next{
  position:absolute;
  z-index:10004;
  border:0;
  background:rgba(0,0,0,.38);
  color:#fff;
  cursor:pointer;
}

#travelLightbox .lb-close{
  top:8px;
  right:16px;
  width:42px;
  height:42px;
  font-size:34px;
  line-height:38px;
}

#travelLightbox .lb-prev,
#travelLightbox .lb-next{
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:72px;
  font-size:38px;
  line-height:72px;
}

#travelLightbox .lb-prev{left:8px;}
#travelLightbox .lb-next{right:8px;}

#travelLightbox .lb-prev:disabled,
#travelLightbox .lb-next:disabled{
  opacity:.18!important;
  cursor:default!important;
}

/* DESKTOP: Netflix-style caption overlay */
#travelLightbox .lb-info{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:38px!important;
  transform:translateX(-50%)!important;
  width:auto!important;
  max-width:82%!important;
  min-width:320px!important;
  height:auto!important;
  min-height:42px!important;
  box-sizing:border-box!important;
  z-index:10005!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:28px!important;
  padding:6px 15px!important;
  border-radius:5px!important;
  background:rgba(0,0,0,.45)!important;
  color:#fff!important;
  font-family:Tahoma,Arial,sans-serif!important;
  font-size:16px!important;
  line-height:1.35!important;
  text-align:center!important;
}

#travelLightboxCaption{
  display:block!important;
  text-align:center!important;
}

#travelLightboxCount{
  position:static!important;
  transform:none!important;
  margin:0!important;
  white-space:nowrap!important;
  font-size:13px!important;
  opacity:.85!important;
}

/* MOBILE: caption stays BELOW the image, with larger readable type */
@media (max-width:760px){
  #travelLightbox .lb-stage{
    left:42px!important;
    right:42px!important;
    top:48px!important;
    bottom:155px!important;
  }

  #travelLightbox .lb-info{
    left:38px!important;
    right:38px!important;
    bottom:10px!important;
    transform:none!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:115px!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:7px!important;
    padding:8px 10px!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:16px!important;
    line-height:1.35!important;
    text-align:center!important;
  }

  #travelLightboxCaption{
    max-width:100%!important;
    text-align:center!important;
  }

  #travelLightboxCount{
    position:static!important;
    transform:none!important;
    margin:0!important;
    text-align:center!important;
    font-size:14px!important;
    opacity:.82!important;
  }

  #travelLightbox .lb-prev,
  #travelLightbox .lb-next{
    width:38px;
    height:60px;
    font-size:30px;
    line-height:60px;
  }

  #travelLightbox .lb-prev{left:2px;}
  #travelLightbox .lb-next{right:2px;}
}