/* ==========================================================
   GALLERY — [gallery] shortcode (Classic editor / Add Media)
   ----------------------------------------------------------
   Темата има add_theme_support( 'html5', [ 'gallery' ] ), па
   WordPress НЕ го печати својот default inline CSS за галерии.
   Овој фајл го заменува: grid со колони според „Columns“ од
   Edit gallery (gallery-columns-1 … gallery-columns-9).
========================================================== */

.gallery {
  --gallery-cols: 3;
  --gallery-gap: 12px;

  display: grid;
  grid-template-columns: repeat(var(--gallery-cols), minmax(0, 1fr));
  gap: var(--gallery-gap);
  margin: 24px 0;
  padding: 0;
}

.gallery-columns-1 { --gallery-cols: 1; }
.gallery-columns-2 { --gallery-cols: 2; }
.gallery-columns-3 { --gallery-cols: 3; }
.gallery-columns-4 { --gallery-cols: 4; }
.gallery-columns-5 { --gallery-cols: 5; }
.gallery-columns-6 { --gallery-cols: 6; }
.gallery-columns-7 { --gallery-cols: 7; }
.gallery-columns-8 { --gallery-cols: 8; }
.gallery-columns-9 { --gallery-cols: 9; }

/* Кога wpautop ќе вметне <br> / празен <p> меѓу ставките. */
.gallery > br,
.gallery > p:empty {
  display: none;
}

.gallery .gallery-item {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gallery .gallery-icon {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: #f2f2f2;
  aspect-ratio: 4 / 3;
}

.gallery .gallery-icon a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Специфичноста е намерно повисока од `.page-content__body img`
   (height:auto), за сликите да го пополнат полето. */
.gallery .gallery-icon img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border: 0;
  transition: transform .3s ease;
}

.gallery .gallery-icon a:hover img,
.gallery .gallery-icon a:focus-visible img {
  transform: scale(1.04);
}

.gallery .gallery-icon a:focus-visible {
  outline: 3px solid #2b92d0;
  outline-offset: -3px;
}

/* Една колона: без кропирање, сликата во природен сооднос. */
.gallery-columns-1 .gallery-icon {
  aspect-ratio: auto;
}
.gallery-columns-1 .gallery-icon img {
  height: auto;
}

.gallery .gallery-caption {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #555;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .gallery-columns-4,
  .gallery-columns-5,
  .gallery-columns-6,
  .gallery-columns-7,
  .gallery-columns-8,
  .gallery-columns-9 {
    --gallery-cols: 3;
  }
}

@media (max-width: 600px) {
  .gallery {
    --gallery-gap: 8px;
  }
  .gallery:not(.gallery-columns-1) {
    --gallery-cols: 2;
  }
}


/* ==========================================================
   LIGHTBOX — assets/js/gallery-lightbox.js
   Позадината е иста како кај search overlay-от
   (header-extras.css → .search-overlay).
========================================================== */

.gallery .gallery-icon a,
.wp-block-gallery .wp-block-image a {
  cursor: zoom-in;
}

.finki-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(44, 49, 121, 0.85);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.finki-lightbox.is-active {
  opacity: 1;
  visibility: visible;
}

.finki-lightbox__stage {
  margin: 0;
  max-width: calc(100vw - 220px);
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.finki-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  transition: opacity .2s ease;
}

.finki-lightbox.is-loading .finki-lightbox__img {
  opacity: .35;
}

.finki-lightbox__caption {
  margin-top: 12px;
  max-width: 720px;
  color: #fff;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.finki-lightbox__caption[hidden] {
  display: none;
}

/* ---------- Копчиња ---------- */

.finki-lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}

.finki-lightbox__btn:hover {
  background: rgba(255, 255, 255, .28);
}

.finki-lightbox__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.finki-lightbox__btn[hidden] {
  display: none;
}

.finki-lightbox__btn svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finki-lightbox__close {
  top: 20px;
  right: 20px;
  width: 58px;
  height: 58px;
}

.finki-lightbox__prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.finki-lightbox__next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.finki-lightbox__counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 15px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.finki-lightbox__counter[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .finki-lightbox__stage {
    max-width: calc(100vw - 24px);
  }
  .finki-lightbox__img {
    max-height: calc(100vh - 160px);
  }
  .finki-lightbox__btn {
    width: 46px;
    height: 46px;
  }
  .finki-lightbox__btn svg {
    width: 22px;
    height: 22px;
  }
  .finki-lightbox__close {
    top: 12px;
    right: 12px;
  }
  .finki-lightbox__prev,
  .finki-lightbox__next {
    top: auto;
    bottom: 14px;
    transform: none;
  }
  .finki-lightbox__prev { left: 12px; }
  .finki-lightbox__next { right: 12px; }
  .finki-lightbox__counter {
    bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finki-lightbox,
  .finki-lightbox__img,
  .gallery .gallery-icon img {
    transition: none;
  }
}