/* Masonry-grid. Positionerna räknas ut i js/site.js utifrån variablerna i theme.css */

.grid {
  position: relative;
  margin: var(--outer-margin);
  min-height: 100vh;
}

.tile {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  background: var(--placeholder);
  cursor: zoom-in;
  transition:
    transform var(--duration) var(--ease),
    width var(--duration) var(--ease),
    height var(--duration) var(--ease),
    opacity var(--fade) ease;
  will-change: transform;
}
.grid.no-anim .tile { transition: none; }
.tile.is-hidden { opacity: 0; pointer-events: none; }

.tile img, .tile video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--fade) ease, transform var(--duration) var(--ease);
}
.tile.is-loaded img, .tile.is-loaded video { opacity: 1; }

/* hover-effekter, väljs på adminsidan */
.hover-dim .tile:hover img, .hover-dim .tile:hover video { opacity: var(--hover-dim); }
.hover-zoom .tile:hover img, .hover-zoom .tile:hover video { transform: scale(var(--hover-zoom)); }

.tile:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.grid-empty {
  position: absolute; inset: 40vh 0 auto 0;
  text-align: center;
  font-size: var(--nav-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--nav-transform);
  opacity: .5;
}

/* Bildtext (kund + info) längst ner på bilden. Svart ruta bara bakom texten, en ruta per rad (som logotexten) */
.tile-caption, .lb-caption {
  position: absolute;
  left: var(--caption-offset); right: var(--caption-offset); bottom: var(--caption-offset);
  display: flex;
  flex-direction: column;
  align-items: var(--caption-align);
  text-align: var(--caption-text-align);
  gap: var(--caption-line-gap);
  color: var(--caption-color);
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  line-height: 1.3;
  pointer-events: none;
  transition: opacity var(--fade) ease;
}
.cap-client, .cap-text {
  display: block;
  max-width: 100%;
  background: var(--caption-bg);
  padding: var(--caption-padding);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.cap-client {
  font-weight: 700;
  letter-spacing: var(--caption-client-letter-spacing);
  text-transform: var(--caption-client-transform);
}
.caption-never .tile-caption { display: none; }
.caption-hover .tile-caption { opacity: 0; }
.caption-hover .tile:hover .tile-caption,
.caption-hover .tile:focus-visible .tile-caption { opacity: 1; }