/* gallery — this component's own styles, put in the head by the renderer where it is drawn.
   Colours and sizes only through var(--*), so the design drives these too. */

/* ---------- Gallery (sections/gallery) ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}

.gallery-item {
  margin: 0;
  border-radius: var(--radius-small);
  overflow: hidden;
  aspect-ratio: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}


.gallery-item:hover img { transform: scale(1.04); }

@media (max-width: 960px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* masonry — natural heights instead of a uniform crop; portrait shots stop
   losing their tops and bottoms. */
.gallery--masonry .gallery-grid {
  display: block;
  columns: 4;
  column-gap: 1rem;
}


.gallery--masonry .gallery-grid .gallery-item {
  break-inside: avoid;
  margin: 0 0 1rem;
}


.gallery--masonry .gallery-grid .gallery-item img { height: auto; aspect-ratio: auto; }

/* strip — one scrolling row. */
.gallery--strip .gallery-grid {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .6rem;
  scrollbar-width: thin;
}


.gallery--strip .gallery-grid .gallery-item { flex: 0 0 min(20rem, 70vw); scroll-snap-align: start; }

@media (max-width: 960px) {
    .gallery--masonry .gallery-grid { columns: 3; }
}

@media (max-width: 640px) {
    .gallery--masonry .gallery-grid { columns: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item img { transition: none; }
}