/* ============================================================
   12 · Image & Video Gallery — grey; bento grid of mixed media
   ============================================================ */
.gal { background: var(--c-grey); }

/* justified rows: each tile keeps its file's own aspect ratio (--ar, set per
   item from the media library) and grows in proportion to it, so every tile in
   a row shares one height and no photo or video is ever cropped */
.gal__grid {
  --gal-row: clamp(240px, 22vw, 340px);   /* target row height */
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.1vw, 16px);
}
/* leftover width in the last row lands here instead of stretching its tiles */
.gal__grid::after { content: ""; flex: 999999 1 0; }

.gal__item {
  --ar: 1.4;
  flex: var(--ar) 1 calc(var(--ar) * var(--gal-row));
  aspect-ratio: var(--ar);
  min-width: 0;
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #2c2a22;
  box-shadow: 0 16px 34px -22px rgba(38, 37, 31, .6);
}
.gal__item img,
.gal__item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease);
}
.gal__item:hover img,
.gal__item:hover video { transform: scale(1.05); }

/* video tiles: shade + the theme's play ring */
.gal__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 24, 18, .1), rgba(28, 24, 18, .45));
}
.gal__item--video .play-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(44px, 4.4vw, 62px);
  height: clamp(44px, 4.4vw, 62px);
  border-radius: 50%;
  border: 1.6px solid var(--c-cream-lt);
  color: var(--c-cream-lt);
  background: rgba(28, 24, 18, .3);
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gal__item--video .play-ring svg { width: 40%; height: 40%; fill: currentColor; margin-left: 3px; }
.gal__item--video:hover .play-ring { background: var(--c-maroon); transform: translate(-50%, -50%) scale(1.08); }

/* mobile + tablet: open on six tiles, "Show more" reveals six at a time.
   Desktop is untouched — a long grid is fine on a wide screen. */
.gal__more { display: none; margin-top: clamp(22px, 3vw, 32px); text-align: center; }

@media (max-width: 1024px) {
  .gal__grid { --gal-row: 280px; }
  .gal__item[data-over] { display: none; }
  .gal__more { display: block; }
}
@media (max-width: 600px) {
  .gal__grid { --gal-row: clamp(200px, 56vw, 260px); }
}