/* ==========================================================================
   Portfolio — grid view (portfolio-grid.html)
   Loaded after css/portfolio.css. Replaces the horizontal slider with a
   masonry grid; everything else (hero, section heads, lightbox) is shared.
   ========================================================================== */

.pf-grid {
  columns: 3;
  column-gap: clamp(14px, 2.2vw, 26px);
}

.pf-grid .pf-shot {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 clamp(14px, 2.2vw, 26px);
  break-inside: avoid;
  page-break-inside: avoid; /* older engines */
  scroll-snap-align: none;
}

.pf-grid .pf-shot img {
  width: 100%;
  height: auto;
}

/* the reel stays a normal tile, just at its natural 9:16 ratio */
.pf-grid .pf-shot--video {
  overflow: hidden;
  aspect-ratio: 1080 / 1922;
  background: var(--ink);
}

.pf-grid .pf-shot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .pf-grid { columns: 2; }
}

@media (max-width: 620px) {
  .pf-grid {
    columns: 2;
    column-gap: 14px;
  }

  .pf-grid .pf-shot { margin-bottom: 14px; }
}