/* =========================================================
   Gallery Page — masonry-style grid + lightbox
   Loaded only on pages using page-templates/template-gallery.php
   ========================================================= */

/* --- Empty state (no images yet) --- */
.gallery-empty-state{ padding: 3rem 1rem; }
.gallery-empty-state p{ color: var(--color-text-muted); }
.gallery-empty-state a{ color: var(--color-primary); font-weight:600; }

/* --- Masonry-style grid ---
   Uses native CSS multi-column layout (no JS needed for the layout itself):
   images flow top-to-bottom then wrap into the next column, which
   naturally creates a masonry look for photos of varying heights.
   This scopes to the Gallery block's own markup so image management stays
   100% native WordPress (Add/remove/reorder via the block editor). */
.gallery-page-content .wp-block-gallery{
  display:block !important; /* overrides the block's own flex/grid layout */
  column-count: 1;
  column-gap: var(--carousel-gap, 1.5rem);
  margin: 0 0 2rem;
}
@media(min-width:480px){
  .gallery-page-content .wp-block-gallery{ column-count: 2; }
}
@media(min-width:768px){
  .gallery-page-content .wp-block-gallery{ column-count: 3; }
}
@media(min-width:1024px){
  .gallery-page-content .wp-block-gallery{ column-count: 4; }
}

.gallery-page-content .wp-block-gallery .wp-block-image{
  display:block; width:100%; break-inside: avoid; margin: 0 0 var(--carousel-gap, 1.5rem) !important;
}
.gallery-page-content .wp-block-gallery .wp-block-image a{ display:block; cursor: zoom-in; }
.gallery-page-content .wp-block-gallery .wp-block-image img{
  width:100%; height:auto; display:block; margin:0;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease;
}
.gallery-page-content .wp-block-gallery .wp-block-image:hover img,
.gallery-page-content .wp-block-gallery .wp-block-image:focus-within img{
  transform: scale(1.03);
  box-shadow: var(--shadow-lg);
}
.gallery-page-content .wp-block-gallery .wp-block-image figcaption{
  font-size:.85rem; color: var(--color-text-muted); text-align:center; padding:.6rem 0 0;
}

/* Video items — the image still acts as the cover; a play badge marks it
   as playable. Added by js/gallery-lightbox.js when a gallery image's own
   "Link" (Custom URL) points to a video rather than an image file — no
   new admin field, this reuses the Image block's existing Link option. */
.gallery-page-content .has-gallery-video{ position:relative; }
.gallery-play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  background: rgba(0,72,168,.85); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  transition: background var(--transition), transform var(--transition);
  pointer-events:none;
}
.gallery-page-content .has-gallery-video:hover .gallery-play-badge,
.gallery-page-content .has-gallery-video:focus-within .gallery-play-badge{
  background: var(--color-secondary); color: var(--color-text);
  transform: translate(-50%,-50%) scale(1.08);
}

/* If an editor uses a plain Image block instead of a Gallery block, give
   it the same rounded/hover treatment for visual consistency. */
.gallery-page-content > .wp-block-image{
  margin-bottom: var(--carousel-gap, 1.5rem);
}
.gallery-page-content > .wp-block-image img{
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease;
}
.gallery-page-content > .wp-block-image:hover img{
  transform: scale(1.02); box-shadow: var(--shadow-lg);
}

/* --- Lightbox --- */
.gallery-lightbox{
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  background: rgba(15, 20, 28, 0.92);
  padding: 1.5rem;
}
.gallery-lightbox.is-open{ display: flex; }

.gallery-lightbox-figure{
  position: relative; max-width: 92vw; max-height: 86vh;
  display:flex; flex-direction:column; align-items:center;
}
.gallery-lightbox-img{
  max-width: 92vw; max-height: 80vh; width:auto; height:auto;
  object-fit: contain; border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  background: #0b0f14;
}

/* Video items play in a responsive 16:9 iframe instead of the <img>. Width
   is capped so it never exceeds the same visual bounds as an image slide,
   height follows automatically from the aspect-ratio. */
.gallery-lightbox-video-wrap{
  display:none;
  width: min(92vw, 1100px);
  max-height: 80vh;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  background: #000;
}
.gallery-lightbox-iframe{
  width:100%; height:100%; display:block; border:0;
}
.gallery-lightbox-caption{
  color:#fff; opacity:.85; font-size:.9rem; margin-top:1rem; text-align:center; max-width:80vw;
}
.gallery-lightbox-counter{
  color:#fff; opacity:.65; font-size:.8rem; margin-top:.35rem; letter-spacing:.03em;
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next{
  position: fixed; z-index: 10001;
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: background var(--transition), transform var(--transition);
}
.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover{
  background: var(--color-secondary); color: var(--color-text);
}
.gallery-lightbox-close{ top:1.25rem; right:1.25rem; }
.gallery-lightbox-prev{ left:1.25rem; top:50%; transform: translateY(-50%); }
.gallery-lightbox-next{ right:1.25rem; top:50%; transform: translateY(-50%); }
.gallery-lightbox-prev:hover, .gallery-lightbox-next:hover{ transform: translateY(-50%) scale(1.06); }

@media(max-width:600px){
  .gallery-lightbox-prev, .gallery-lightbox-next{ width:40px; height:40px; }
  .gallery-lightbox-close{ top:.75rem; right:.75rem; width:40px; height:40px; }
  .gallery-lightbox-prev{ left:.5rem; }
  .gallery-lightbox-next{ right:.5rem; }
}

/* Respect reduced-motion preferences for the hover/zoom transitions. */
@media (prefers-reduced-motion: reduce){
  .gallery-page-content .wp-block-image img,
  .gallery-page-content .wp-block-gallery .wp-block-image img{
    transition: none;
  }
}