/* ============================================================
   Vandelay Companies — Photo grid
   Active only inside .vc-design-context.

   Square thumbnail grid used by the Development photo stream
   and the "recent photos" panel on the dashboard.
   ============================================================ */

.vc-design-context .vc-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--vc-space-3);
}

/* Phones are ~390px wide: two columns keeps thumbnails legible without
   forcing a horizontal scroll (mobile rule 3). */
@media (max-width: 575.98px) {
  .vc-design-context .vc-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vc-space-2);
  }
}

.vc-design-context .vc-photo-tile {
  position: relative;
  display: block;
  padding-bottom: 100%;
  overflow: hidden;
  border: 1px solid var(--vc-rule);
  border-radius: var(--vc-r-lg);
  background: var(--vc-paper-2);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.vc-design-context .vc-photo-tile:hover {
  border-color: var(--vc-navy);
  box-shadow: var(--vc-shadow-md);
  transform: translateY(-1px);
}

.vc-design-context .vc-photo-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vc-design-context .vc-photo-tile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 10px 7px;
  font-family: var(--vc-sans);
  font-size: 11.5px;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(transparent, rgba(10, 16, 25, 0.72));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Caption block under a tile, when the grid needs more than a name. */
.vc-design-context .vc-photo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vc-rule);
  border-radius: var(--vc-r-lg);
  overflow: hidden;
  background: var(--vc-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.vc-design-context .vc-photo-card:hover {
  border-color: var(--vc-navy);
  box-shadow: var(--vc-shadow-md);
  transform: translateY(-1px);
  color: inherit;
}

.vc-design-context .vc-photo-card__thumb {
  position: relative;
  padding-bottom: 100%;
  background: var(--vc-paper-2);
}

.vc-design-context .vc-photo-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vc-design-context .vc-photo-card__meta {
  padding: var(--vc-space-2) var(--vc-space-3);
}

.vc-design-context .vc-photo-card__caption {
  font-family: var(--vc-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--vc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vc-design-context .vc-photo-card__sub {
  font-family: var(--vc-mono);
  font-size: 11px;
  color: var(--vc-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}