/* Stäng av WP block lightbox helt så vår Bootstrap-modal används */
.wp-lightbox-overlay { display: none !important; }
.wp-lightbox-container .lightbox-trigger { display: none !important; }

/* Modalens yttre storlek + lite toppmarginal */
#phBsLightbox .modal-dialog {
  max-width: min(1200px, 96vw);
  margin: 0 auto;
  margin-top: 5vh; /* tryck ner från toppen */
}
#phBsLightbox .modal-dialog.modal-dialog-centered { align-items: flex-start; }
#phBsLightbox .modal-content { background: #000; }

/* Scenen där bilden ligger */
.ph-lb-body { overflow: hidden; }
.ph-lb-stage { width: 100%; height: clamp(50dvh, 86dvh, 86dvh); }

/* Bilden håller sig inom skärmen */
.ph-lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  inline-size: 100%;
  block-size: auto;
}

/* Caption scrollar snyggt om den blir lång */
.ph-lb-caption { max-height: 12dvh; overflow: auto; }

/* Navigationsknappar – rundade och lite gloss */
#phPrevBtn, #phNextBtn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, transform .2s;
}
#phPrevBtn:hover, #phNextBtn:hover { background: rgba(255,255,255,0.4); transform: scale(1.1); }
#phPrevBtn { left: 15px; } 
#phNextBtn { right: 15px; }

/* Stängknappen */
#phBsLightbox .btn[data-bs-dismiss="modal"] {
  background: rgba(255,255,255,0.2);
  color:#fff;
  font-size:1.5rem;
  border-radius:50%;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}
#phBsLightbox .btn[data-bs-dismiss="modal"]:hover { background: rgba(255,255,255,0.4); }