/* MG Gallery — global styling (namespacet) */

.mg-gallery{
  --mg-cols:3;          /* desktop columns */
  --mg-cols-md:2;       /* tablet columns */
  --mg-cols-sm:1;       /* mobile columns */
  --mg-gap:14px;
  --mg-radius:8px;
  --mg-ratio:1/1;       /* kvadratisk som default. Overstyres via inline style fra shortcode */

  display:grid;
  gap:var(--mg-gap);
  grid-template-columns:repeat(var(--mg-cols), minmax(0,1fr));
}

@media (max-width: 992px){
  .mg-gallery{grid-template-columns:repeat(var(--mg-cols-md), minmax(0,1fr))}
}
@media (max-width: 640px){
  .mg-gallery{grid-template-columns:repeat(var(--mg-cols-sm), minmax(0,1fr))}
}

.mg-g-item{
  position:relative;
  margin:0;               /* sikrer at det ikke kommer ekstra spacing mellom rader */
}

.mg-g-media{
  border-radius:var(--mg-radius);
  overflow:hidden;
  background:#f7f7f7;
  aspect-ratio:var(--mg-ratio);  /* holder ruten kvadratisk / etter ønsket forhold */
}

.mg-g-media > a,
.mg-g-media > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;        /* fyller boksen uten “letterboxing” */
}

/* Captions (hover) */
.mg-g-cap{
  position:absolute;
  inset:auto 0 0 0;
  background:linear-gradient(transparent, rgba(0,0,0,.55));
  color:#fff;
  font-size:13px;
  padding:10px 12px;
  opacity:0;
  transition:opacity .2s ease;
}
.mg-g-item:hover .mg-g-cap{opacity:1}

/* Dark mode hint */
@media (prefers-color-scheme: dark){
  .mg-g-media{background:#111}
}