/* ============================================================
   CABANA CHILD THEME — MASONRY GALLERY & LIGHTBOX
   ============================================================ */

/* ------------------------------------------------------------
   1. FILTER BAR
   ------------------------------------------------------------ */
.gallery-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.filter-btn {
  background: transparent;
  border: 1px solid rgba(197, 168, 128, 0.4);
  color: var(--color-text, #2c3e50);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 24px;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background-color: #c5a880;
  border-color: #c5a880;
  color: #ffffff;
}

/* ------------------------------------------------------------
   2. MASONRY CONTAINER & ITEM CARDS
   ------------------------------------------------------------ */
.gallery-grid {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: transparent;
}

/* 3 Columns Desktop */
/*.gallery-item {*/
  /*width: 32%;*/  /* ~3 columns with spacing */
  /*margin-bottom: 24px;*/
  /*position: relative;*/
  /*overflow: hidden;*/
  /*background: transparent;*/
  /*box-sizing: border-box;*/
  /*border-radius: 4px; /* Optional subtle rounded corner */
/*}*/
/* 4 Columns Desktop */
.gallery-item {
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
  border-radius: 4px;
  width: 23.5%; /* 4 columns with ~2% spacing gap */
}

/* Link wrapper fits the exact image dimensions to eliminate bottom gaps */
.gallery-link {
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  width: 100%;
}

/* Hardware-accelerated image scaling */
.gallery-item img {
  backface-visibility: hidden;
  display: block;
  height: auto;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0) scale(1);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  vertical-align: bottom;
  will-change: transform;
  width: 100%;
}

.gallery-link:hover img {
  transform: translateZ(0) scale(1.05);
}

/* ------------------------------------------------------------
   3. HOVER OVERLAY & CAPTIONS
   ------------------------------------------------------------ */
.gallery-overlay {
  position: absolute;
  inset: 0;
  /* Dark bottom gradient guarantees contrast on light bedsheets/pools */
/*  background: linear-gradient(
    to top,
    rgba(15, 27, 31, 0.9) 0%,
    rgba(15, 27, 31, 0.3) 45%,
    transparent 100%
  );*/
/*  background: linear-gradient(
  to top,
  rgba(15, 27, 31, 0.95) 0%,
  rgba(15, 27, 31, 0.4) 50%,
  transparent 100%
);*/
background: linear-gradient(
  to top,
  rgba(15, 27, 31, 0.9) 0%,
  rgba(15, 27, 31, 0.2) 30%,
  transparent 70%
);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  transition: opacity 0.35s ease;
  pointer-events: none; /* Allows click events to pass directly to link */
}

.gallery-link:hover .gallery-overlay {
  opacity: 1;
}

.gallery-caption {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.gallery-icon {
  align-items: center;
  background: rgba(15, 27, 31, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  display: flex;
  height: 36px;
  position: absolute;
  top: 16px;
  justify-content: center;
  right: 16px;
  transition: all 0.3s ease;
  width: 36px;
}

.gallery-link:hover .gallery-icon {
  background-color: #c5a880;
  border-color: #c5a880;
  color: #ffffff;
}

/* ------------------------------------------------------------
   4. LIGHTBOX MODAL
   ------------------------------------------------------------ */
.lightbox-modal {
  align-items: center;
  background: rgba(15, 27, 31, 0.95);
  backdrop-filter: blur(8px);
  display: none;
  inset: 0;
  justify-content: center;
  position: fixed;
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
}

.lightbox-modal.active {
  display: flex !important;
}

.lightbox-content {
  max-height: 85vh;
  max-width: 90vw;
  text-align: center;
}

.lightbox-content img {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  max-height: 75vh;
  max-width: 100%;
  object-fit: contain;
}

.lightbox-caption {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 1px;
  margin-top: 16px;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  align-items: center;
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 10px;
  position: absolute;
  transition: color 0.3s ease;
  z-index: 100000;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  color: #c5a880;
}

.lightbox-close { right: 28px; top: 24px;}
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------
   5. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------ */

@media (max-width: 1200px) {
  .gallery-item {
    width: 31.5%; /* 3 Columns on smaller desktops/laptops */
  }
}

@media (max-width: 992px) {
  .gallery-item {
    width: 48%; /* 2 Columns Tablet */
  }
}

@media (max-width: 576px) {
  .gallery-item {
    width: 100%; /* 1 Column Mobile */
  }
}