/* ——— Shared photo mosaic (feed · chat · compose) ——— */

.vy-mosaic {
  display: grid;
  gap: 2px;
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}

.vy-mosaic--feed {
  width: 100%;
}

.vy-mosaic--bubble {
  border-radius: 14px;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.vy-mosaic--preview {
  border-radius: 14px;
  margin-top: 4px;
}

/* Layout: 1 */
.vy-mosaic[data-count="1"] {
  grid-template-columns: 1fr;
}

.vy-mosaic--feed[data-count="1"] .vy-mosaic__cell,
.vy-mosaic--feed[data-count="1"] .feed-grid__cell {
  aspect-ratio: auto;
  max-height: 480px;
}

.vy-mosaic--feed[data-count="1"] img,
.vy-mosaic--feed[data-count="1"] video {
  width: 100%;
  max-height: 480px;
  height: auto;
  object-fit: cover;
}

/* Layout: 2 — side by side */
.vy-mosaic[data-count="2"] {
  grid-template-columns: 1fr 1fr;
}

.vy-mosaic--feed[data-count="2"] {
  height: clamp(200px, 42vw, 320px);
}

.vy-mosaic--bubble[data-count="2"],
.vy-mosaic--preview[data-count="2"] {
  height: clamp(140px, 36vw, 220px);
}

/* Layout: 3 — hero left + stack right */
.vy-mosaic[data-count="3"] {
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: 1fr 1fr;
}

.vy-mosaic[data-count="3"] .vy-mosaic__cell:first-child,
.vy-mosaic[data-count="3"] .feed-grid__cell:first-child,
.vy-mosaic[data-count="3"] .mosaic-cell:first-child {
  grid-row: span 2;
}

.vy-mosaic--feed[data-count="3"] {
  height: clamp(220px, 48vw, 360px);
}

.vy-mosaic--bubble[data-count="3"],
.vy-mosaic--preview[data-count="3"] {
  height: clamp(160px, 40vw, 260px);
}

/* Layout: 4+ — 2×2 */
.vy-mosaic[data-count="4"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.vy-mosaic--feed[data-count="4"] {
  height: clamp(220px, 48vw, 360px);
}

.vy-mosaic--bubble[data-count="4"],
.vy-mosaic--preview[data-count="4"] {
  height: clamp(160px, 40vw, 260px);
}

/* Cells */
.vy-mosaic__cell,
.feed-grid__cell,
.mosaic-cell {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  margin: 0;
  padding: 0;
  border: none;
}

.vy-mosaic--feed .vy-mosaic__cell,
.vy-mosaic--feed .feed-grid__cell {
  cursor: zoom-in;
}

.vy-mosaic--bubble .mosaic-cell {
  cursor: zoom-in;
}

.vy-mosaic__cell img,
.vy-mosaic__cell video,
.feed-grid__cell img,
.feed-grid__cell video,
.mosaic-cell img,
.mosaic-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* +N overlay on last visible cell */
.vy-mosaic__more,
.feed-grid__more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  z-index: 1;
  pointer-events: none;
}

/* Legacy floating badge — hide when unified overlay is used */
.bubble-mosaic .mosaic-more {
  display: none;
}

@media (min-width: 861px) {
  .vy-mosaic--feed[data-count="2"],
  .vy-mosaic--feed[data-count="3"],
  .vy-mosaic--feed[data-count="4"] {
    height: 320px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .vy-mosaic--feed .vy-mosaic__cell:active {
    opacity: 0.92;
  }
}