/* Gallery page — masonry showcase + submit section (v2 gazette) */
/* (content-photo helper .photo lives in styles.css) */

/* CSS multi-column masonry: the browser auto-picks 1–4+ columns by width,
   so the layout reflows and rebalances on every resize with no JS. */
.gallery-grid {
  columns: 16rem 4;
  column-gap: clamp(.6rem, 1.6vw, 1rem);
  list-style: none; padding: 0; margin: 0;
}

.gallery-grid .shot {
  break-inside: avoid;
  -webkit-column-break-inside: avoid; /* legacy Safari */
  margin: 0 0 clamp(.6rem, 1.6vw, 1rem);
}

.gallery-grid figure {
  margin: 0; background: var(--card); border: 1px solid var(--rule);
  border-top: 3px solid var(--ink); overflow: hidden;
  transition: border-top-color .15s ease, transform .15s var(--ease),
              box-shadow .15s var(--ease);
}
/* Alternating gazette accents — ink / crimson / green */
.gallery-grid .shot:nth-child(3n+2) figure { border-top-color: var(--accent); }
.gallery-grid .shot:nth-child(3n)   figure { border-top-color: var(--green); }
.gallery-grid figure:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px -12px rgba(26, 22, 19, .45);
}

.gallery-grid img {
  width: 100%; height: auto; display: block; border: 0;
}

.gallery-grid figcaption {
  padding: .7rem .9rem .85rem; margin: 0;
  display: flex; flex-direction: column; gap: .15rem;
  font-family: var(--sans);
}
.gallery-grid figcaption strong {
  font-family: var(--serif); font-size: 1.05rem; color: var(--ink); line-height: 1.18;
}
.gallery-grid figcaption span {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.gallery-grid figcaption span:empty { display: none; }

/* Submit section (inside .section--green) */
.submit { gap: clamp(1.6rem, 5vw, 3.5rem); align-items: start; }
.submit .features .no { color: #cfe6d6; }
.submit .features h3 { color: #fff; }
.submit .features p { color: #d7e7dc; }
.submit .features a { color: #fff; text-decoration: underline; }
.submit__hint { color: #bcd6c4; font-size: .85rem; margin-top: 1.2rem; }
.submit__how { padding-top: .3rem; }
.submit__lead { font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.45; color: #eef5f0; }