/* ============================================================
   1. LIGHTGALLERY CORE & TYPOGRAPHY
   ============================================================ */

/* Force Open Sans across lightGallery UI */
.lg-container,
.lg-sub-html,
.lg-toolbar .lg-counter {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Backdrop Overlay */
.lg-backdrop {
  background-color: rgba(58, 108, 133, 0.95) !important;
}

/* Toolbar Icons & Buttons */
.lg-toolbar .lg-icon {
  color: #ffffff !important;
  font-size: 1.4rem !important;
  opacity: 0.95 !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lg-toolbar .lg-icon:hover {
  opacity: 1 !important;
  transform: scale(1.1);
}

/* Image Counter Badge */
.lg-toolbar .lg-counter {
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  opacity: 1 !important;
}

/* Captions & Subtitles */
.lg-sub-html,
.lg-sub-html p {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

/* ============================================================
   2. NAVIGATION CONTROLS (ARROWS)
   ============================================================ */

/* Base Arrow Buttons */
.lg-outer button.lg-prev,
.lg-outer button.lg-next {
  background-color: #ffffff !important;
  background-image: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  opacity: 0.5 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Arrow SVG Vectors */
.lg-outer button.lg-prev::after,
.lg-outer button.lg-next::before,
.lg-outer .lg-actions .lg-prev svg,
.lg-outer .lg-actions .lg-next svg,
.lg-outer .lg-actions .lg-prev path,
.lg-outer .lg-actions .lg-next path {
  color: #009444 !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Arrow Hover State */
.lg-outer button.lg-prev:hover,
.lg-outer button.lg-next:hover {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* Desktop Arrow Sizing */
@media (min-width: 769px) {
  .lg-outer button.lg-prev,
  .lg-outer button.lg-next {
    width: 48px !important;
    height: 48px !important;
  }
}

/* Mobile: Hide Arrow Controls */
@media (max-width: 768px) {
  .lg-outer button.lg-prev,
  .lg-outer button.lg-next,
  .lg-outer .lg-actions {
    display: none !important;
  }
}

/* ============================================================
   3. IN-PAGE GALLERY GRID LAYOUT
   ============================================================ */

/* Main Grid Container */
.gallery-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin: 2rem auto !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Gallery Items & Images */
.gallery-item {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 4px;
  overflow: hidden;
}

.gallery-item img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  object-fit: cover;
}

/* ============================================================
   4. IMAGE PROTECTION & OVERLAYS
   ============================================================ */

/* Disable Touch Highlights & Selection */
.gallery-grid img,
.lg-outer img {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}