/* Mighty Gallery – visning i butikken */
.mg { --mg-cols: 3; --mg-gap: 12px; --mg-radius: 8px; --mg-ratio: 1/1; --mg-h: 220px; position: relative; margin: 1.5em 0; }
.mg__track { display: grid; gap: var(--mg-gap); }
.mg__i { margin: 0; position: relative; overflow: hidden; border-radius: var(--mg-radius); background: #eceae4; min-width: 0; }
.mg__a { display: block; color: inherit; text-decoration: none; }
a.mg__a { cursor: zoom-in; }
.mg__i img { display: block; width: 100%; height: auto; transition: transform .35s ease; }
a.mg__a:hover img { transform: scale(1.03); }
.mg__c { padding: 8px 2px 0; font-size: .9em; line-height: 1.35; }
.mg--cap-below .mg__i { overflow: visible; background: none; }
.mg--cap-below .mg__a { overflow: hidden; border-radius: var(--mg-radius); background: #eceae4; }
.mg--cap-hover .mg__c { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .68)); opacity: 0; transition: opacity .2s; pointer-events: none; }
.mg--cap-hover .mg__i:hover .mg__c, .mg--cap-hover .mg__i:focus-within .mg__c { opacity: 1; }
@media (hover: none) { .mg--cap-hover .mg__c { opacity: 1; } }
.mg__credits { margin: 10px 0 0; font-size: 12px; opacity: .7; }
.mg__credits a { color: inherit; }

/* Gitter */
.mg--grid .mg__track { grid-template-columns: repeat(var(--mg-cols), minmax(0, 1fr)); }
.mg--grid .mg__i img { aspect-ratio: var(--mg-ratio); object-fit: cover; }

/* Murstensvæg */
.mg--masonry .mg__track { display: block; column-count: var(--mg-cols); column-gap: var(--mg-gap); }
.mg--masonry .mg__i { break-inside: avoid; margin-bottom: var(--mg-gap); }

/* Rækker */
.mg--rows .mg__track { display: flex; flex-wrap: wrap; }
.mg--rows .mg__i { flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--mg-h)); }
.mg--rows .mg__track::after { content: ""; flex-grow: 1000000; }

/* Mosaik */
.mg--mosaic .mg__track { grid-template-columns: repeat(var(--mg-cols), minmax(0, 1fr)); grid-auto-rows: var(--mg-h); grid-auto-flow: dense; }
.mg--mosaic .mg__i img { height: 100%; object-fit: cover; }
.mg--mosaic .mg__a { height: 100%; }
.mg--mosaic .mg__i:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.mg--mosaic .mg__i:nth-child(6n + 4) { grid-column: span 2; }

/* Karrusel */
.mg--carousel .mg__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mg--carousel .mg__track::-webkit-scrollbar { display: none; }
.mg--carousel .mg__i { flex: 0 0 auto; scroll-snap-align: start; }
.mg--carousel .mg__i img { width: auto; height: var(--mg-h); max-width: none; }
.mg__nav { position: absolute; top: calc(var(--mg-h) / 2); transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #1a1d1b; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); display: grid; place-items: center; padding: 0 0 3px; }
.mg__nav[hidden] { display: none; }
.mg__nav--prev { left: 8px; } .mg__nav--next { right: 8px; }
.mg__nav:disabled { opacity: .35; cursor: default; }

@media (max-width: 900px) {
  .mg[data-cols="4"], .mg[data-cols="5"], .mg[data-cols="6"] { --mg-cols: 3 !important; }
  .mg--carousel .mg__i img { height: calc(var(--mg-h) * .8); }
}
@media (max-width: 560px) {
  .mg[data-cols="3"], .mg[data-cols="4"], .mg[data-cols="5"], .mg[data-cols="6"] { --mg-cols: 2 !important; }
  .mg--mosaic .mg__track { grid-auto-rows: calc(var(--mg-h) * .6); }
  .mg--mosaic .mg__i:nth-child(6n + 4) { grid-column: auto; }
  .mg--carousel .mg__i img { height: calc(var(--mg-h) * .65); }
  .mg__nav { display: none; }
}

/* Åbn stort */
.mg-lb { position: fixed; inset: 0; z-index: 99999; background: rgba(8, 12, 10, .94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 64px 24px; }
.mg-lb[hidden] { display: none; }
.mg-lb__img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 4px; user-select: none; -webkit-user-drag: none; }
.mg-lb__cap { color: #e9eeea; text-align: center; margin-top: 14px; font-size: 15px; max-width: 760px; line-height: 1.4; }
.mg-lb__cap small { display: block; opacity: .65; font-size: 12px; margin-top: 4px; }
.mg-lb__cap a { color: inherit; }
.mg-lb__n { position: absolute; top: 18px; left: 22px; color: #cfd6d1; font-size: 13px; }
.mg-lb button { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; }
.mg-lb button:hover { background: rgba(255, 255, 255, .24); }
.mg-lb__x { top: 12px; right: 14px; font-size: 22px; padding: 0 !important; }
.mg-lb__p { left: 12px; top: 50%; transform: translateY(-50%); }
.mg-lb__nx { right: 12px; top: 50%; transform: translateY(-50%); }
body.mg-lock { overflow: hidden; }
@media (max-width: 640px) {
  .mg-lb { padding: 56px 8px 16px; }
  .mg-lb__p, .mg-lb__nx { top: auto; bottom: 14px; transform: none; width: 40px; height: 40px; }
  .mg-lb__p { left: 14px; } .mg-lb__nx { right: 14px; }
  .mg-lb__img { max-height: calc(100vh - 200px); }
}