/* =========================================================
   GALLERY — public section + admin management
   Self-contained: relies on CSS variables already defined in
   style.css (--navy, --gold, --ivory, --font-display, --font-body).
   ========================================================= */

/* ---- Public gallery grid ---- */
.gallery-section-wrap{ padding: 100px 0; background: var(--ivory); }
.gallery-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:16px; margin-top:20px;
}
.gallery-item{
  position:relative; aspect-ratio: 4/3; border-radius:6px; overflow:hidden;
  cursor:pointer; background: var(--navy); box-shadow: 0 10px 24px rgba(14,42,71,.1);
}
.gallery-item img, .gallery-item video{
  width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s var(--ease);
}
.gallery-item:hover img, .gallery-item:hover video{ transform: scale(1.05); }
.gallery-item-video-badge{
  position:absolute; top:10px; right:10px; background: rgba(8,27,48,.7); color: var(--ivory);
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; pointer-events:none;
}
[dir="rtl"] .gallery-item-video-badge{ right:auto; left:10px; }
.gallery-empty{ text-align:center; color:#4a5f78; padding: 30px 0; }

/* ---- Lightbox ---- */
.gallery-lightbox{
  position:fixed; inset:0; z-index:250; background: rgba(8,27,48,.85);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.gallery-lightbox.open{ opacity:1; visibility:visible; }
.gallery-lightbox-content{ max-width:900px; max-height:85vh; width:100%; }
.gallery-lightbox-content img, .gallery-lightbox-content video{
  width:100%; max-height:85vh; object-fit:contain; border-radius:6px; display:block; margin:0 auto;
}
.gallery-lightbox-close{
  position:absolute; top:20px; right:24px; background:none; border:none;
  color: var(--ivory); font-size:32px; cursor:pointer; line-height:1;
}
[dir="rtl"] .gallery-lightbox-close{ right:auto; left:24px; }
.gallery-lightbox-caption{
  text-align:center; color: var(--ivory); font-size:14px; margin-top:16px; max-width:700px;
  margin-left:auto; margin-right:auto;
}

/* ---- Admin: gallery management card ---- */
.admin-gallery-card{ margin-top:24px; }
.admin-gallery-upload-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px; }
.admin-gallery-upload-row .field{ flex-grow:1; min-width:200px; margin-bottom:0; }
.admin-gallery-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:12px;
}
.admin-gallery-item{
  position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden; background: var(--navy);
}
.admin-gallery-item img, .admin-gallery-item video{ width:100%; height:100%; object-fit:cover; }
.admin-gallery-item-delete{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
  background: rgba(8,27,48,.75); color:#fff; border:none; font-size:15px; cursor:pointer; line-height:1;
}
.admin-gallery-item-caption{
  position:absolute; bottom:0; left:0; right:0; background: rgba(8,27,48,.75); color: var(--ivory);
  font-size:10.5px; padding:4px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.admin-gallery-upload-progress{ font-size:12px; color: var(--gold); margin-bottom:12px; }

@media (max-width: 600px){
  .gallery-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}