/* ═══════════════════════════════════════════════════════════
   EnkrOma GPhotos – Front-end Gallery Styles
   CSS custom properties (set by JS from shortcode attrs):
     --eg-gap      tile gap in px   (default 12)
     --eg-radius   border-radius px (default 6)
     --eg-columns  grid col count   (default 4)
   ═══════════════════════════════════════════════════════════ */

/* ── Outer wrapper ──────────────────────────────────────── */
.enkroma-gp-wrap-outer {
  margin-bottom: 24px;
}

/* ── Shared gallery base ────────────────────────────────── */
.enkroma-gp-gallery {
  --eg-gap:    12px;
  --eg-radius: 6px;
  --eg-columns: 4;
}

/* Pagination: hide tiles until JS reveals them */
.enkroma-gp-gallery .eg-hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   LAYOUT: MASONRY  (CSS Grid row-span masonry — left to right)
   JS sets --eg-columns and assigns grid-row: span N per tile.
   ═══════════════════════════════════════════════════════════ */
.enkroma-gp-layout-masonry {
  display: grid;
  grid-template-columns: repeat(var(--eg-columns, 4), 1fr);
  /* Row unit = 1px; JS assigns the correct span per tile */
  grid-auto-rows: 1px;
  gap: var(--eg-gap);
}

@media (max-width: 1200px) {
  .enkroma-gp-layout-masonry[data-columns="5"],
  .enkroma-gp-layout-masonry[data-columns="6"] { --eg-columns: 4; }
}
@media (max-width: 960px) {
  .enkroma-gp-layout-masonry { --eg-columns: 3 !important; }
}
@media (max-width: 640px) {
  .enkroma-gp-layout-masonry { --eg-columns: 2 !important; }
}
@media (max-width: 400px) {
  .enkroma-gp-layout-masonry { --eg-columns: 1 !important; }
}

.enkroma-gp-layout-masonry .enkroma-gp-tile {
  /* grid-row span is set inline by JS after image dimensions are known */
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT: GRID  (CSS grid, equal-size cells)
   ═══════════════════════════════════════════════════════════ */
.enkroma-gp-layout-grid {
  display: grid;
  grid-template-columns: repeat(var(--eg-columns), 1fr);
  gap: var(--eg-gap);
}

@media (max-width: 960px) {
  .enkroma-gp-layout-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .enkroma-gp-layout-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 400px) {
  .enkroma-gp-layout-grid { grid-template-columns: 1fr !important; }
}

.enkroma-gp-layout-grid .enkroma-gp-tile {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--eg-radius);
}

.enkroma-gp-layout-grid .enkroma-gp-item {
  display: block;
  width: 100%;
  height: 100%;
}

.enkroma-gp-layout-grid .enkroma-gp-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--eg-radius);
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT: SLIDESHOW  (single cover → Fancybox slideshow)
   ═══════════════════════════════════════════════════════════ */
.enkroma-gp-slideshow-mode {
  display: block;
}

.enkroma-gp-slideshow-thumb {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  border-radius: var(--eg-radius);
  overflow: hidden;
  cursor: pointer;
}

.enkroma-gp-slideshow-launch img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--eg-radius);
}

.enkroma-gp-slideshow-thumb::after {
  content: "▶  View Slideshow";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
  text-align: center;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   SHARED TILE & ITEM STYLES
   ═══════════════════════════════════════════════════════════ */
.enkroma-gp-tile {
  display: block;
  position: relative;
}

.enkroma-gp-item {
  display: block;
  overflow: hidden;
  border-radius: var(--eg-radius);
  position: relative;
}

/* ── Lazy-load fade-in ────────────────────────────────────── */
.enkroma-gp-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--eg-radius);
  /* Start invisible; fade in once src is swapped by IO */
  opacity: 0;
  transition: opacity .35s ease, transform .25s ease;
}

.enkroma-gp-item img.eg-loaded {
  opacity: 1;
}

/* Hover zoom — only after loaded */
.enkroma-gp-item:hover img.eg-loaded {
  transform: scale(1.03);
  opacity: .92;
}

/* ── Video play icon overlay ──────────────────────────────── */
.enkroma-gp-video-tile .enkroma-gp-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   CAPTIONS
   ═══════════════════════════════════════════════════════════ */
.enkroma-gp-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px 8px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 0 0 var(--eg-radius) var(--eg-radius);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enkroma-gp-caption--hover {
  opacity: 0;
  transition: opacity .2s ease;
}
.enkroma-gp-item:hover .enkroma-gp-caption--hover {
  opacity: 1;
}

.enkroma-gp-caption--always {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   LOAD MORE BUTTON
   ═══════════════════════════════════════════════════════════ */
.enkroma-gp-loadmore-wrap {
  text-align: center;
  margin-top: 18px;
}

.enkroma-gp-loadmore {
  display: inline-block;
  padding: 10px 32px;
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}

.enkroma-gp-loadmore:hover {
  background: #1558b0;
  transform: translateY(-1px);
}

.enkroma-gp-loadmore:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   ERROR
   ═══════════════════════════════════════════════════════════ */
.enkroma-gp-error {
  color: #b00;
  border-left: 4px solid #b00;
  padding: 8px 12px;
  background: #fff5f5;
}