/* Shared collage component — used on homepage and admin live preview */

.collage {
  --collage-sharp: 600px;
  --bg-soft: #e7e7e4;
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: 0.5rem 0 0;
  max-height: calc(var(--collage-sharp) + 14rem);
}

.collage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--collage-sharp);
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 40%,
    rgba(255, 255, 255, 0.82) 75%,
    #fff 100%
  );
}

.collage-track {
  --collage-gap: 8px;
  --collage-col: 50vw;
  display: grid;
  grid-template-columns: var(--collage-col) var(--collage-col) var(--collage-col);
  width: calc(var(--collage-col) * 3 + var(--collage-gap) * 2);
  margin-left: calc(50% - var(--collage-col) / 2 - var(--collage-col) - var(--collage-gap));
  gap: var(--collage-gap);
  align-items: start;
}

.collage-col {
  display: flex;
  flex-direction: column;
  gap: var(--collage-gap);
  min-width: 0;
  padding-top: 0;
}

.collage-item {
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-soft);
}

.collage-item[data-lightbox-src] {
  cursor: zoom-in;
}

.collage-col--mid .collage-item {
  position: relative;
  overflow: hidden;
}

.collage-col--mid .collage-item img,
.collage-col--mid .collage-item video {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--mid-base-h, 100%);
  object-fit: cover;
  object-position: center;
}

.collage-item img,
.collage-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.collage-item--a { aspect-ratio: 4 / 5; }
.collage-item--b { aspect-ratio: 5 / 4; }
.collage-item--c { aspect-ratio: 3 / 4; }
.collage-item--d { aspect-ratio: 1 / 1; }
.collage-item--e { aspect-ratio: 5 / 4; }
.collage-item--f { aspect-ratio: 3 / 4; }
.collage-item--g { aspect-ratio: 4 / 3; }
.collage-item--h { aspect-ratio: 1 / 1; }
.collage-item--i { aspect-ratio: 5 / 4; }
.collage-item--j { aspect-ratio: 3 / 4; }
.collage-item--k { aspect-ratio: 4 / 3; }
.collage-item--l { aspect-ratio: 1 / 1; }
.collage-item--m { aspect-ratio: 5 / 6; }

@media (min-width: 768px) {
  .collage {
    padding: 0.35rem 0 0;
    max-height: calc(var(--collage-sharp) + 16rem);
  }

  .collage-track {
    --collage-col: min(420px, 42vw);
  }
}