/* GALLERY — panorama, portrait feature, asymmetric groups, vertical strip.
   Every frame uses object-fit: contain inside a mat: nothing is cropped. */
.gal-head { background: var(--parchment); }
.gal-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.gal-head h1 { font-size: clamp(3rem, 1.5rem + 6vw, 7.5rem); line-height: .9; }
.gal-head h1 em { color: var(--wheat-ink); }
.gal-head__count { font-family: var(--serif); font-size: 4rem; line-height: 1; color: var(--soil); text-align: right; }
.gal-head__count span { display: block; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }

.panorama { background: var(--indigo); padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.panorama .plate__frame { background: var(--indigo-2); aspect-ratio: 21 / 9; }
.panorama .plate__frame img { width: 100%; height: 100%; object-fit: contain; }

.gal-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3rem 5rem; align-items: center; }
.gal-feature .plate--mat { --ar: 4 / 5; }

.gal-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.6rem; align-items: start; }
.g-7 { grid-column: span 7; } .g-5 { grid-column: span 5; } .g-4 { grid-column: span 4; } .g-6 { grid-column: span 6; } .g-8 { grid-column: span 8; }
.gal-group .plate--mat { --ar: 3 / 2; }

.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: var(--wheat) transparent; }
.strip .plate { scroll-snap-align: start; }
.strip .plate--mat { --ar: 3 / 4; }

.gal-label { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; margin-bottom: 1.6rem; }
.gal-label h2 { font-size: var(--fs-xl); margin: 0; }
.gal-label .rule { height: 1px; }

@media (max-width: 900px) {
  .gal-feature { grid-template-columns: minmax(0, 1fr); }
  .gal-feature .plate--mat { --ar: 1 / 1; }
  .g-7, .g-5, .g-4, .g-6, .g-8 { grid-column: span 12; }
  .gal-group .plate--mat { --ar: 16 / 10; }
  .panorama .plate__frame { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .gal-head .wrap { grid-template-columns: minmax(0, 1fr); }
  .gal-head__count { text-align: left; }
  .strip { grid-auto-columns: 78%; }
}
.gal-mini { max-width: 260px; margin-top: 2rem; }