@import url('../../piece.css?v=15');

/* Earlier can use the full page. The detail-story rail belongs to the prose
   pages; this is an image collection on the same twelve-column foundation. */
.collection { max-width: 1680px; margin-inline: auto; padding: var(--space-6) var(--margin); }
.collection-header { display: grid; grid-template-columns: repeat(var(--cols),minmax(0,1fr)); gap: var(--gutter); align-items: start; }
.collection-header .back { grid-column: 1 / 5; font-size: var(--text-meta); line-height: var(--leading-meta); }
.collection-controls { grid-column: 10 / -1; display: flex; gap: var(--space-3); justify-content: end; font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-text-secondary); }
.collection-controls button { min-height: var(--space-3); }
.collection-intro { display: grid; grid-template-columns: repeat(var(--cols),minmax(0,1fr)); gap: var(--gutter); margin-block-start: var(--space-8); }
.collection-intro h1 { grid-column: 1 / 5; font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.collection-intro .lede { grid-column: 5 / 10; margin: 0; color: var(--color-text-secondary); }
.layout-picker { display: flex; align-items: baseline; gap: var(--space-2); margin-block-start: var(--space-6); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-text-secondary); }
/* The comparison harness deliberately uses a native select, distinct from
   the portfolio design. Selection is a URL, so each direction is shareable. */
.layout-picker select { font: inherit; max-width: 100%; }
.layout-picker a { margin-inline-start: auto; }
.gallery { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--space-4) var(--gutter); padding: 0; margin: var(--space-3) 0 0; list-style: none; }
.gallery-item { grid-column: span 4; min-width: 0; }
.gallery-item figure { display: flex; flex-direction: column; height: 100%; }
.gallery-media { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--color-bg-media); border-radius: var(--radius-media); overflow: hidden; cursor: zoom-in; }
.gallery-media img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-image); outline: 1px solid var(--color-border-image); outline-offset: -1px; }
.gallery-item figcaption { margin: var(--space-1) 0 0; max-width: none; text-align: start; text-wrap: pretty; font-size: var(--text-meta); line-height: var(--leading-meta); }
.gallery-title { display: block; color: var(--color-text-primary); }
.gallery-meta { display: block; color: var(--color-text-tertiary); }
.gallery-description { display: none; }
.collection .end { margin-block-start: var(--space-8); margin-block-end: 0; }
.collection main { display: block; }
.guides .rows { top: var(--space-6); }

/* Mosaic: two broad columns with each composition at its own aspect ratio.
   Natural heights make the images the rhythm, without padding empty tiles. */
body[data-layout="mosaic"] .gallery { display: block; columns: 2; column-gap: var(--gutter); }
body[data-layout="mosaic"] .gallery-item { display: inline-block; width: 100%; break-inside: avoid; margin-block-end: var(--space-4); }
body[data-layout="mosaic"] .gallery-media { aspect-ratio: auto; background: transparent; }
body[data-layout="mosaic"] .gallery-media img { width: 100%; height: auto; }

/* Rows: each composition gets eight columns, with its short account beside
   it. The denser detail sits in the caption rather than a second narrative. */
body[data-layout="rows"] .gallery { grid-template-columns: minmax(0,1fr); row-gap: var(--space-6); column-gap: 0; }
body[data-layout="rows"] .gallery-item { grid-column: 1 / -1; }
body[data-layout="rows"] .gallery-item figure { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: var(--gutter); }
body[data-layout="rows"] .gallery-media { grid-column: 1 / 9; aspect-ratio: auto; background: transparent; }
body[data-layout="rows"] .gallery-media img { height: auto; }
body[data-layout="rows"] .gallery-item figcaption { grid-column: 9 / -1; margin: 0; padding-block-start: var(--space-3); }
body[data-layout="rows"] .gallery-title { font-size: var(--text-body); line-height: var(--leading-body); }
body[data-layout="rows"] .gallery-description { display: block; margin-block-start: var(--space-3); color: var(--color-text-body); font-size: var(--text-body); line-height: var(--leading-body); max-width: 60ch; }

@media (max-width: 1100px) {
  .collection-controls { grid-column: 9 / -1; }
  .gallery-item { grid-column: span 6; }

}
@media (max-width: 760px) {
  .guides .rows { top: var(--space-3); }
  .collection { padding-block: var(--space-3) var(--space-6); }
  .collection-header .back { grid-column: 1 / 3; }
  .collection-controls { grid-column: 3 / -1; }
  .collection-intro { margin-block-start: var(--space-6); row-gap: var(--space-3); }
  .collection-intro h1,.collection-intro .lede { grid-column: 1 / -1; }
  .layout-picker { flex-wrap: wrap; margin-block-start: var(--space-4); }
  .layout-picker a { margin-inline-start: 0; }
  .gallery { gap: var(--space-3) var(--space-2); }
  .gallery-item { grid-column: 1 / -1; }
  body[data-layout="mosaic"] .gallery { columns: 1; }
  body[data-layout="rows"] .gallery-item figure { display: block; }
  body[data-layout="rows"] .gallery-item figcaption { margin-block-start: var(--space-2); padding: 0; }
  body[data-layout="rows"] .gallery-description { margin-block-start: var(--space-1); }
}