/**
 * Peek Carousel — Native dialog lightbox (centered)
 * Version: 1.3.4
 *
 * Key change: lightbox uses the browser's built-in <dialog> centering.
 * We DO NOT set position/inset/display on the dialog itself.
 */

.peek-carousel,
.peek-carousel * { box-sizing: border-box; }

/* Container + variables */
.peek-carousel {
  --peek-letterbox: transparent;
  --peek-arrow-space: 2.25rem;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0;
  background: transparent !important;
}

/* Keep arrows off the image with side padding */
.peek-carousel-viewport {
  position: relative;
  display: block;
  padding-left: var(--peek-arrow-space);
  padding-right: var(--peek-arrow-space);
  overflow: hidden;
  max-height: 80vh;
  background: transparent !important;
}

/* Track + slides */
.peek-carousel-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.peek-carousel .peek-slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: visible !important;
  background: var(--peek-letterbox);
  border: none;
  position: relative;
}

/* Kill overlays/pseudo-elements some themes inject */
.peek-carousel .peek-slide::before,
.peek-carousel .peek-slide::after,
.peek-carousel figure::before,
.peek-carousel figure::after,
.peek-carousel .wp-block-image::before,
.peek-carousel .wp-block-image::after {
  content: none !important;
  background: none !important;
  display: none !important;
  box-shadow: none !important;
}

/* Clickable image area */
.peek-carousel .peek-slide-button {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent !important;
  overflow: hidden;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: zoom-in;
  box-shadow: none !important;
  outline: none !important;
}
.peek-carousel .peek-slide-button::before,
.peek-carousel .peek-slide-button::after {
  content: none !important;
}

/* Image never crops; shrink proportionally */
.peek-carousel .peek-slide-button img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  margin: 0 auto;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Captions below image — white box, black text */
.peek-carousel .peek-caption,
.peek-carousel .peek-caption * {
  position: static !important;
  background: #fff !important;
  color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.peek-carousel .peek-caption {
  order: 2;
  margin: 0.5rem auto 0 !important;
  padding: 0.5rem 0.75rem !important;
  max-width: 90% !important;
  line-height: 1.4 !important;
  border: 0 !important;
  border-radius: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-align: center;
}

/* Arrows */
.peek-carousel .peek-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s;
  background: rgba(255, 255, 255, 0.7);
  color: #000;
  font-size: 2.5rem;
}
.peek-carousel .peek-nav.prev { left: 0.25rem; }
.peek-carousel .peek-nav.next { right: 0.25rem; }
.peek-carousel .peek-nav:hover { background: rgba(255, 255, 255, 0.9); }

/* -------------------------------
   LIGHTBOX — revert to native dialog
   ------------------------------- */

/* DO NOT set position/inset/display on the dialog.
   Let the browser center it natively in the top layer when showModal() runs. */
.peek-lightbox {
  border: none;
  margin: auto;           /* allow UA to center */
  padding: 0;             /* we style the inner wrapper */
  background: transparent;/* the backdrop does the dimming */
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 0;
}

/* Backdrop tint */
.peek-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

/* Inner wrapper: lay out image + caption */
.peek-lightbox .peek-lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Ensure inner doesn’t overflow dialog bounds */
  max-width: 90vw;
  max-height: 90vh;
  padding: 0.75rem;
}

/* Image + caption */
.peek-lightbox-img {
  max-width: 90vw;
  max-height: 80vh; /* leave room for caption and close button */
  object-fit: contain;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.peek-lightbox-caption {
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 0.5rem 1rem;
  text-align: center;
  max-width: 80vw;
  margin-top: 0.75rem;
  border-radius: 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* Close button */
.peek-lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  background: transparent;
  border: none;
}

/* Optional lightbox arrows (inside dialog) */
.peek-lightbox-arrows {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* click-through except buttons */
}
.peek-lightbox-prev,
.peek-lightbox-next {
  pointer-events: auto;
  background: rgba(255,255,255,0.7);
  border: none;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
  .peek-carousel .peek-nav {
    font-size: 2rem;
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
  }
  .peek-carousel-viewport {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

/* Subtle transitions */
.peek-carousel .peek-slide,
.peek-carousel .peek-slide-button img,
.peek-carousel .peek-caption {
  transition: all 0.3s ease-in-out;
}
/* === No-crop fixes (Carousel) =========================================== */

/* 1) Don’t clamp the whole viewport height; let caption have its space. */
.peek-carousel-viewport {
  max-height: none !important;    /* was 80vh — remove the global clamp */
  overflow: visible !important;   /* avoid clipping when image+caption exceed previous cap */
}

/* 2) Make the image area itself the thing that fits the screen,
      so captions can sit below without forcing a crop. */
.peek-carousel .peek-slide-button {
  /* reserve a comfortable max image height; tweak as you like */
  --peek-max-image: 75vh;
  align-items: center;
  justify-content: center;
}

/* 3) Image: always shrink-to-fit (never crop, never stretch). */
.peek-carousel .peek-slide-button img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: var(--peek-max-image) !important; /* fit screen */
  object-fit: contain !important;               /* no crop */
}

/* 4) Ensure the caption never gets clipped. */
.peek-carousel .peek-caption {
  overflow: visible !important;
}

/* === No-crop fixes (Lightbox) =========================================== */

.peek-lightbox .peek-lightbox-inner {
  max-width: 100vw !important;
  max-height: 100vh !important;
  padding: 0.75rem;
}

/* Give the image the bulk of the screen height; leave room for caption/close */
.peek-lightbox-img {
  width: auto !important;
  height: auto !important;
  max-width: 94vw !important;
  max-height: calc(100vh - 6rem) !important;  /* room for caption + close */
  object-fit: contain !important;             /* no crop */
  display: block;
  margin: 0 auto;
}

/* Caption should wrap and never force the image to crop */
.peek-lightbox-caption {
  max-width: 90vw !important;
  white-space: normal !important;
  overflow: visible !important;
}