/* ====== 5-képes mozaik: 1 nagy + mellette 4 kicsi ====== */
/* 4 oszlopos, 1:1 arányú csempék – az első kép 2×2-t foglal (50%×50%) */
.wp-gallery-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr; /* az aspect-ratio tartja négyzetté a csempéket */
  gap: 10px;
  position: relative;
}

/* Alapelemet négyzetté tesszük (modern böngészők) */
.wp-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.wp-gallery-item::before {
  content: '';
  display: block;
  aspect-ratio: 1 / 1; /* négyzetes csempe */
}

/* Képek kitöltik a csempét */
.wp-gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform .35s ease, opacity .35s ease;
}

/* Finom hover zoom */
.wp-gallery-item img:hover {
  transform: scale(1.03);
}

/* Elrendezés:
   - item-0: 2 oszlop × 2 sor (50% × 50%)
   - item-1..4: a nagy mellett, 2 oszlopban, 2 sorban (4 db kis négyzet)
*/
.wp-gallery-item-0 {
  grid-column: 1 / span 2; /* oszlop 1–2 */
  grid-row: 1 / span 2;    /* sor 1–2   */
}

/* A következő 4 elem pozicionálása (két oszlop × két sor) */
.wp-gallery-item-1 { grid-column: 3; grid-row: 1; }
.wp-gallery-item-2 { grid-column: 4; grid-row: 1; }
.wp-gallery-item-3 { grid-column: 3; grid-row: 2; }
.wp-gallery-item-4 { grid-column: 4; grid-row: 2; }

/* ====== Popup (változatlan, kis finomításokkal) ====== */
#wp-gallery-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 99999;
  opacity: 1;
  backdrop-filter: blur(8px);
  transition: opacity .25s ease;
}
#wp-gallery-popup.hidden { opacity: 0; pointer-events: none; }

#wp-gallery-close {
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 28px;
  line-height: 1;
  padding: 6px 10px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

.wp-gallery-stage {
  position: relative;
  max-width: min(92vw, 1200px);
  max-height: 82vh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}

#wp-gallery-popup-img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: opacity .25s ease, transform .25s ease;
  opacity: 0;
  transform: translateY(6px);
}
#wp-gallery-popup:not(.hidden) #wp-gallery-popup-img.ready {
  opacity: 1;
  transform: translateY(0);
}

.wp-gallery-meta {
  color: #fff;
  text-align: center;
  padding: 4px 10px 0;
}
.wp-gallery-meta h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.wp-gallery-meta #wp-gallery-caption {
  font-size: 14px;
  opacity: .9;
  margin-top: 4px;
}

#wp-gallery-nav {
  position: absolute;
  bottom: 28px;
  display: flex;
  gap: 28px;
}
#wp-gallery-nav button {
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: transform .2s ease, background .2s ease;
  padding: 0px;
}
#wp-gallery-nav button:hover {
  transform: scale(1.06);
  background: rgba(255,255,255,.18);
}

/* Swipe/drag UX finomítások */
#wp-gallery-popup-img {
  touch-action: pan-y; /* függőleges görgetés mehet, vízszintre mi figyelünk */
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
}

#wp-gallery-popup-img.dragging {
  cursor: grabbing;
}

/* (opcionális) kicsi tehetetlenségi érzet – már a JS kezeli az átmenetet */

/* ====== Mobil: első kép 100% széles (2 oszlop), a többi két oszlopban, négyzetesen ====== */
@media (max-width: 680px) {
  /* Két oszlopos rács mobilon 
  .wp-gallery-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .wp-gallery-item-0 {
    grid-column: 1 / span 2;
    grid-row: auto;
  }

  .wp-gallery-item-1,
  .wp-gallery-item-2,
  .wp-gallery-item-3,
  .wp-gallery-item-4 {
    grid-column: auto;
    grid-row: auto;
  }
  */
}