/* ==========================================================================
   Gallery Page Styles - Alex Krawczyk Theme
   ========================================================================== */

.gallery-page-wrapper {
  position: relative;
  width: 100%;
}

.gallery-page-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.gallery-page-header .gallery-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.gallery-page-header .gallery-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: #6c757d;
  max-width: 680px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Justified Row Layout (Max 3 Items Per Row - 100% Flush)
   -------------------------------------------------------------------------- */
.justified-gallery {
  --padding: 0;
  --space: 30px;

  padding: var(--padding);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space);
  width: 100%;
  margin-bottom: var(--space);
  align-items: stretch;
}

/* Base gallery item rules */
.justified-gallery>a,
.justified-gallery>.video-item,
.gallery-compound-1-block a,
.gallery-compound-1-block .video-item,
.gallery-compound-2-block a,
.gallery-compound-2-block .video-item,
.gallery-compound-3-block a,
.gallery-compound-3-block .video-item {
  overflow: hidden !important;
  opacity: 1;
  transition: all 0.05s ease-in-out;
  text-decoration: none;
  display: block;
  background-color: #f2f0eb;
  /* border-radius: 4px; */
  position: relative;
  box-sizing: border-box;
}

.justified-gallery>a,
.justified-gallery>.video-item {
  flex: calc(var(--width) / var(--height)) 1 0px;
  height: clamp(260px, 26vw, 420px);
  aspect-ratio: auto !important;
}

/* Solo item rule: Spans 100% width flush with exact natural aspect-ratio height */
.justified-gallery>a:only-child,
.justified-gallery>.video-item:only-child {
  flex: 1 1 100% !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--width) / var(--height) !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.justified-gallery img,
.gallery-compound-1-block img,
.gallery-compound-2-block img,
.gallery-compound-3-block img,
.justified-gallery video,
.gallery-compound-1-block video,
.gallery-compound-2-block video,
.gallery-compound-3-block video {
  display: block;
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: transform 0.15s ease;
}

.justified-gallery a:hover img,
.justified-gallery a:hover video,
.justified-gallery .video-item:hover img,
.justified-gallery .video-item:hover video,
.gallery-compound-1-block a:hover img,
.gallery-compound-1-block a:hover video,
.gallery-compound-1-block .video-item:hover img,
.gallery-compound-1-block .video-item:hover video,
.gallery-compound-2-block a:hover img,
.gallery-compound-2-block a:hover video,
.gallery-compound-2-block .video-item:hover img,
.gallery-compound-2-block .video-item:hover video,
.gallery-compound-3-block a:hover img,
.gallery-compound-3-block a:hover video,
.gallery-compound-3-block .video-item:hover img,
.gallery-compound-3-block .video-item:hover video {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   COMPOUND 1: Hero Block (3 Landscapes 3:2 + 1 Right Portrait 1:2)
   -------------------------------------------------------------------------- */
.gallery-compound-1-block {
  display: flex;
  gap: var(--space, 30px);
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-bottom: var(--space, 30px);
}

.gallery-compound-1-block a,
.gallery-compound-1-block .video-item {
  aspect-ratio: auto !important;
}

.compound-left {
  display: flex;
  flex-direction: column;
  gap: var(--space, 30px);
  flex: 2 1 0px;
  height: 100%;
}

.compound-top-row {
  display: flex;
  gap: var(--space, 30px);
  flex: 1 1 0px;
  height: calc(33.333% - (var(--space, 30px) * 2 / 3));
}

.compound-top-row>a,
.compound-top-row>.video-item {
  flex: 1 1 0px;
  width: calc(50% - (var(--space, 30px) / 2));
  height: 100%;
}

.compound-bottom-row {
  flex: 2 1 0px;
  height: calc(66.666% - (var(--space, 30px) / 3));
  width: 100%;
}

.compound-bottom-row>a,
.compound-bottom-row>.video-item {
  width: 100%;
  height: 100%;
}

.compound-right {
  flex: 1 1 0px;
  height: 100%;
}

.compound-right>a,
.compound-right>.video-item {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   COMPOUND 2: Dual Pair Block (Landscape 3:2 + Portrait 5:7 Side-by-Side)
   -------------------------------------------------------------------------- */
.gallery-compound-2-block {
  display: flex;
  gap: var(--space, 30px);
  width: 100%;
  aspect-ratio: 2.214 / 1;
  margin-bottom: var(--space, 30px);
  align-items: stretch;
}

.gallery-compound-2-block>a,
.gallery-compound-2-block>.video-item {
  flex: calc(var(--width) / var(--height)) 1 0px;
  height: 100%;
  aspect-ratio: auto !important;
}

/* --------------------------------------------------------------------------
   COMPOUND 3: Trio Portrait Block (3 Portraits 2:3 Side-by-Side)
   -------------------------------------------------------------------------- */
.gallery-compound-3-block {
  display: flex;
  gap: var(--space, 30px);
  width: 100%;
  aspect-ratio: 2 / 1;
  margin-bottom: var(--space, 30px);
  align-items: stretch;
}

.gallery-compound-3-block>a,
.gallery-compound-3-block>.video-item {
  flex: 1 1 0px;
  width: calc(33.333% - (var(--space, 30px) * 2 / 3));
  height: 100%;
  aspect-ratio: auto !important;
}

/* --------------------------------------------------------------------------
   Hover Overlay & Caption (Hidden in grid; caption shown in Fancybox lightbox only)
   -------------------------------------------------------------------------- */
.gallery-item .item-overlay,
.gallery-compound-1-block .item-overlay,
.gallery-compound-2-block .item-overlay,
.gallery-compound-3-block .item-overlay {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Video Badges & Controls
   -------------------------------------------------------------------------- */
.video-item .play-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  z-index: 2;
  transition: background-color 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.video-item .play-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  margin-left: 2px;
}

.video-item:hover .play-badge {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.1);
}

.video-item::after {
  content: attr(data-audio);
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 6px;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 3;
}

.video-item.has-audio {
  cursor: pointer;
}

.video-item:not(.has-audio)::after {
  display: none;
}

/* --------------------------------------------------------------------------
   Fancybox Custom Overrides
   -------------------------------------------------------------------------- */
.fancybox__container {
  --f-bg: rgba(15, 15, 15, 0.94);
  --f-caption-color: #f1f1f1;
}

.fancybox__caption {
  font-family: inherit;
  font-size: 1rem;
  text-align: center;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {

  .justified-gallery,
  .gallery-compound-1-block,
  .gallery-compound-2-block,
  .gallery-compound-3-block {
    --space: 20px;
  }

  .gallery-compound-1-block,
  .gallery-compound-2-block,
  .gallery-compound-3-block {
    gap: 20px;
    margin-bottom: 20px;
  }

  .compound-left,
  .compound-top-row {
    gap: 20px;
  }

  .justified-gallery>a,
  .justified-gallery>.video-item {
    height: clamp(220px, 26vw, 340px);
  }
}

@media (max-width: 768px) {
  .justified-gallery {
    flex-wrap: wrap !important;
    gap: 14px;
    margin-bottom: 14px;
  }

  .justified-gallery>a,
  .justified-gallery>.video-item {
    flex: 1 1 calc(50% - 7px) !important;
    width: calc(50% - 7px) !important;
    height: auto !important;
    aspect-ratio: var(--width) / var(--height) !important;
  }

  .justified-gallery>a:only-child,
  .justified-gallery>.video-item:only-child {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Compound 1 Mobile Reflow */
  .gallery-compound-1-block {
    flex-direction: column !important;
    aspect-ratio: auto !important;
    height: auto !important;
    gap: 14px;
    margin-bottom: 14px;
  }

  .compound-left {
    flex: none !important;
    height: auto !important;
    gap: 14px;
  }

  .compound-top-row {
    flex: none !important;
    height: auto !important;
    gap: 14px;
  }

  .compound-top-row>a,
  .compound-top-row>.video-item {
    flex: 1 1 calc(50% - 7px) !important;
    width: calc(50% - 7px) !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
  }

  .compound-bottom-row {
    flex: none !important;
    height: auto !important;
    width: 100% !important;
  }

  .compound-bottom-row>a,
  .compound-bottom-row>.video-item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
  }

  .compound-right {
    flex: none !important;
    height: auto !important;
    width: 100% !important;
  }

  .compound-right>a,
  .compound-right>.video-item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 5 / 7 !important;
  }

  /* Compound 2 Mobile Reflow */
  .gallery-compound-2-block {
    flex-direction: column !important;
    aspect-ratio: auto !important;
    height: auto !important;
    gap: 14px;
    margin-bottom: 14px;
  }

  .gallery-compound-2-block>a,
  .gallery-compound-2-block>.video-item {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--width) / var(--height) !important;
  }

  /* Compound 3 Mobile Reflow */
  .gallery-compound-3-block {
    flex-direction: row;
    gap: 14px;
    aspect-ratio: auto !important;
    height: auto !important;
    margin-bottom: 14px;
  }

  .gallery-compound-3-block>a,
  .gallery-compound-3-block>.video-item {
    flex: 1 1 calc(33.333% - 9.33px) !important;
    width: calc(33.333% - 9.33px) !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
  }
}

@media (max-width: 576px) {
  .justified-gallery {
    gap: 14px;
  }

  .justified-gallery>a,
  .justified-gallery>.video-item {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
  }

  .gallery-compound-3-block {
    flex-direction: column !important;
    aspect-ratio: auto !important;
    height: auto !important;
    gap: 14px;
  }

  .gallery-compound-3-block>a,
  .gallery-compound-3-block>.video-item {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
  }

  .video-item .play-badge {
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
  }

  .video-item .play-badge svg {
    width: 11px;
    height: 11px;
  }
}