/* ==========================================================================
   ISAGO ARCHITECTURE — project pages: collage photo layout
   Loaded after style.css on Project-Page-*.html only.
   A repeating 5-image rhythm on a 12-column grid with staggered offsets,
   so galleries read as a curated collage rather than a uniform grid.
   ========================================================================== */
.collage{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start}
.collage .c-item{position:relative;overflow:hidden}
.collage .c-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-med) var(--ease-panel)}
.collage .c-item:hover img{transform:scale(1.03)}

/* repeating rhythm */
.collage .c-item:nth-child(5n+1){grid-column:1/13;aspect-ratio:21/9}
.collage .c-item:nth-child(5n+2){grid-column:1/8;aspect-ratio:4/3}
.collage .c-item:nth-child(5n+3){grid-column:8/13;aspect-ratio:3/4;margin-top:64px}
.collage .c-item:nth-child(5n+4){grid-column:1/6;aspect-ratio:4/5}
.collage .c-item:nth-child(5n){grid-column:6/13;aspect-ratio:16/10;margin-top:48px}
/* the first image is always the full-width opener — no offset on the row after it */
.collage .c-item:nth-child(2){margin-top:0}

@media (max-width:820px){
  .collage .c-item:nth-child(5n+3){margin-top:32px}
  .collage .c-item:nth-child(5n){margin-top:24px}
}
@media (max-width:578px){
  .collage .c-item{grid-column:1/13 !important;margin-top:0 !important;aspect-ratio:4/3 !important}
  .collage .c-item:nth-child(5n+1){aspect-ratio:16/9 !important}
}