/* ==========================================================================
   1. AUTOMATISK BILDETILPASNING (Gjelder både i editor og frontend)
   ========================================================================== */
.wpg-grid img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 16 !important; /* Tvinger alle bilder til 16:9-format */
  object-fit: cover !important;    /* Klipper bildene perfekt så de har lik høyde */
  display: block !important;
  opacity: 1 !important;           /* Alltid synlig */
  visibility: visible !important;  /* Alltid synlig */
  transition: transform 0.2s ease !important;
}

.wpg-grid img:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   2. MODAL OVERLAY (Helt usynlig og deaktivert som standard)
   ========================================================================== */
#wpg-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Potent sikring: Modalen er 100% usynlig og blokkerer ingen klikk */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Vises KUN når denne klassen legges på av JS */
#wpg-modal.wpg-is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}

/* ==========================================================================
   3. KONTROLLER & PILER (Skjult som standard, vises KUN inni åpen modal)
   ========================================================================== */
#wpg-close,
.wpg-arrow {
  display: none !important; /* Skjuler dem fullstendig fra siden */
}

/* Vises KUN når modalen faktisk er åpen */
#wpg-modal.wpg-is-open #wpg-close,
#wpg-modal.wpg-is-open .wpg-arrow {
  display: flex !important;
}

/* ==========================================================================
   4. STYLING AV ELEMENTER INNI MODALEN
   ========================================================================== */
#wpg-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  border-radius: 3px;
  transition: opacity 0.15s ease;
}

#wpg-img.wpg-fading {
  opacity: 0;
}

#wpg-close {
  position: fixed;
  top: 36px;
  right: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 3rem;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
#wpg-close:hover { background: rgba(255, 255, 255, 0.25); }

.wpg-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 2;
}
.wpg-arrow:hover { background: rgba(255, 255, 255, 0.25); }
#wpg-prev { left: 16px; }
#wpg-next { right: 16px; }

/* Skjul piler hvis det bare er ett bilde i galleriet */
#wpg-modal.wpg-single #wpg-prev,
#wpg-modal.wpg-single #wpg-next { 
  display: none !important; 
}

body.wpg-open { 
  overflow: hidden; 
}

/* ==========================================================================
   5. MOBIL-TILPASNING
   ========================================================================== */
@media (max-width: 767px) {
  .wpg-arrow { display: none !important; }
  #wpg-modal { height: var(--wpg-vh, 100vh); }
  #wpg-img {
    max-width: 100vw;
    max-height: var(--wpg-vh, 100vh);
  }
}