/* Helskärmsvisning. Klick var som helst stänger och går tillbaka till griden. */

.lightbox {
  position: fixed; inset: 0;
  z-index: 100;
  background: var(--lightbox-bg);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity var(--fade) ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox-stage {
  position: absolute;
  inset: var(--lightbox-padding);
}
.lightbox-stage > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-stage .lb-full { opacity: 0; transition: opacity var(--fade) ease; }
.lightbox-stage .lb-full.is-loaded { opacity: 1; }

/* videokontroller */
.video-controls {
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 32px));
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  color: var(--lightbox-ui);
  cursor: default;
  mix-blend-mode: difference;
  --lightbox-ui: #fff;
}
.video-controls[hidden] { display: none; }
.video-controls button { width: 22px; height: 22px; flex: none; position: relative; }
.vc-play::before {
  content: ""; position: absolute; inset: 3px 4px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.is-playing .vc-play::before { clip-path: none; background: none; inset: 3px 5px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.vc-sound::before {
  content: ""; position: absolute; inset: 4px 2px;
  background: currentColor;
  clip-path: polygon(0 30%, 30% 30%, 65% 0, 65% 100%, 30% 70%, 0 70%);
}
.vc-sound::after {
  content: ""; position: absolute; right: 0; top: 5px; bottom: 5px; width: 4px;
  border: 2px solid currentColor; border-left: 0; border-radius: 0 10px 10px 0;
}
.is-muted .vc-sound::after { border: 0; width: 8px; background: linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%); }
.vc-bar { flex: 1; height: 16px; display: flex; align-items: center; cursor: pointer; }
.vc-bar { background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.vc-progress { height: 3px; width: 0; background: currentColor; }

/* bildtext i helskärm: längst ner, videokontrollerna flyttas upp när den finns */
.lb-caption { z-index: 2; cursor: zoom-out; }
body:not(.caption-lightbox) .lb-caption { display: none; }
.caption-lightbox .lightbox.has-caption .video-controls { bottom: calc(24px + 4.5em); }
.lb-caption { left: 24px; right: 24px; bottom: 24px; }

/* Bildtext som ruta nere till vänster: en ruta, texten radbryts snyggt efter mängden text */
.lb-caption.panel {
  display: block;
  width: max-content;
  max-width: min(var(--caption-panel-width, 26em), var(--cap-avail, 100%));
  background: var(--caption-bg);
  padding: .9em 1.1em;
  text-align: left;
  line-height: 1.45;
  text-wrap: pretty;
}
.lb-caption.panel .cap-client,
.lb-caption.panel .cap-text { display: block; background: none; padding: 0; }
.lb-caption.panel .cap-client { margin-bottom: .4em; }
/* tona bort och tillbaka */
.lb-caption { transition: opacity .6s ease; }
.lb-caption.is-faded { opacity: 0; }

/* Laddning av film: tunn linje i huvudfärgen längs filmens nederkant (läggs på plats av site.js) */
.lb-loader { position: fixed; height: 4px; z-index: 3; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .3s ease; pointer-events: none; overflow: hidden; }
.lb-loader.show { opacity: 1; }
.lb-loader i { display: block; height: 100%; width: 30%; background: var(--nav-color, #e1ff00); }   /* samma gula som menyn */
/* innan webbläsaren vet hur mycket som laddats: en bit som glider fram och tillbaka */
.lb-loader:not(.known) i { animation: lb-load 1.1s ease-in-out infinite alternate; }
.lb-loader.known i { transition: width .3s ease; }
@keyframes lb-load { from { transform: translateX(-100%); } to { transform: translateX(333%); } }