/**
 * object-detail.css
 * Styles shared by detail pages (object.php, request.php).
 * Content box, sticky sidebar, GLightbox overrides, mobile image gallery.
 */

/* Content box card styling */
.content-box {
  background-color: #fff;
  padding: 2.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
}

@media (max-width: 991.98px) {
  .content-box {
    padding: 1rem;
  }
}

/* Sticky sidebar card styling (scoped to col-lg-4 detail sidebars) */
.col-lg-4 > .sticky-lg-top {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
  margin-bottom: 2rem;
  top: 90px;
}

@media (max-width: 991.98px) {
  .col-lg-4 > .sticky-lg-top {
    padding: 1rem;
  }
}

/* Dark, semi-transparent overlay */
.goverlay {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* Center media & keep correct aspect ratio */
.glightbox-container .gslide-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.glightbox-container .gslide-image img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100vh !important;
  object-fit: contain !important;
}

/* No inner scrollbars */
.glightbox-container .ginner-container,
.glightbox-container .gslide-media {
  overflow: hidden !important;
}

/* Nicer GLightbox buttons: close / prev / next */
.glightbox-container .gbtn {
  background-color: #ffffff !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
  opacity: 0.95;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
}

.glightbox-container .gbtn svg {
  width: 18px;
  height: 18px;
  fill: #212529;
}

.glightbox-container .gbtn:hover,
.glightbox-container .gbtn:focus-visible {
  background-color: #f8f9fa !important;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.25);
  transform: scale(1.06);
  opacity: 1;
}

.glightbox-container .gbtn.disabled {
  opacity: 0.35 !important;
  box-shadow: none;
  cursor: default;
}

.glightbox-container .gclose svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   Mobile image gallery  (< 768px)
   ============================================================ */
@media (max-width: 767.98px) {

  .js-gallery {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }

  .js-gallery .row {
    --fn-gutter-x: 0 !important;
    --fn-gutter-y: 0 !important;
  }

  .js-gallery .rounded {
    border-radius: 0 !important;
  }

  .js-gallery i.hover-effect-target,
  .js-gallery span.hover-effect-target {
    display: none !important;
  }

  .js-gallery .js-gallery-side {
    display: none !important;
  }

  .js-gallery .js-gallery-overflow {
    display: none;
  }

  /* ---- Expanded state ---- */

  .js-gallery.gallery-expanded .js-gallery-side {
    display: flex !important;
    flex-direction: column;
    gap: 4px !important;
  }

  .js-gallery.gallery-expanded .js-gallery-side .ratio {
    --fn-aspect-ratio: calc(450 / 856 * 100%) !important;
  }

  .js-gallery.gallery-expanded .js-gallery-overflow {
    display: block;
  }

  .js-gallery.gallery-expanded .js-gallery-overflow-item {
    margin-top: 4px;
  }

  .js-gallery.gallery-expanded .js-gallery-photo-count {
    display: none !important;
  }

  .js-gallery .col-md-12,
  .js-gallery .col-md-8,
  .js-gallery .js-gallery-side {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .js-gallery.gallery-expanded .js-gallery-side {
    margin-top: 4px;
  }
}

/* 100% black overlay for lightbox on mobile */
@media (max-width: 767.98px) {
  .goverlay {
    background: rgba(0, 0, 0, 1) !important;
  }
}

/* Desktop: keep overflow div hidden */
@media (min-width: 768px) {
  .js-gallery-overflow {
    display: none !important;
  }
}