/* ==========================================================================
   Gallery: bento grid + native <dialog> lightbox (site.js).
   ========================================================================== */
.rm-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(160px, 18vw, 260px);
	gap: clamp(8px, 1.2vw, 16px);
}
.rm-gallery > * { margin: 0 !important; }
.rm-gallery figure { position: relative; overflow: hidden; border-radius: 14px; cursor: zoom-in; height: 100%; }
.rm-gallery img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .7s var(--rm-ease); }
.rm-gallery figure:hover img, .rm-gallery figure:focus-visible img { transform: scale(1.04); }
.rm-gallery figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(14 14 14 / .35), transparent 40%); opacity: 0; transition: opacity .3s; }
.rm-gallery figure:hover::after { opacity: 1; }
/* 7 images on a 4x3 grid, no holes:
   row1: 1 1 2 3 · row2: 1 1 4 5 · row3: 6 6 4 7 */
.rm-gallery > :nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.rm-gallery > :nth-child(2) { grid-column: 3; grid-row: 1; }
.rm-gallery > :nth-child(3) { grid-column: 4; grid-row: 1; }
.rm-gallery > :nth-child(4) { grid-column: 3; grid-row: 2 / 4; }
.rm-gallery > :nth-child(5) { grid-column: 4; grid-row: 2; }
.rm-gallery > :nth-child(6) { grid-column: 1 / 3; grid-row: 3; }
.rm-gallery > :nth-child(7) { grid-column: 4; grid-row: 3; }
@media (max-width: 781px) {
	.rm-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; }
	.rm-gallery > :nth-child(n) { grid-column: auto; grid-row: auto; }
	/* 2 columns: first image full width, then 3 rows of pairs (7 tiles, no holes) */
	.rm-gallery > :nth-child(1) { grid-column: span 2; }
}

.rm-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.rm-lightbox::backdrop { background: rgb(10 10 10 / .92); }
.rm-lightbox[open] { display: grid; place-items: center; }
.rm-lightbox img { max-width: min(92vw, 1400px); max-height: 82vh; width: auto; height: auto; border-radius: 12px; }
.rm-lightbox button { position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.rm-lightbox button:hover { background: var(--rm-orange); color: var(--rm-ink); }
.rm-lightbox__close { top: 20px; right: 20px; }
.rm-lightbox__prev { left: 20px; top: 50%; margin-top: -24px; }
.rm-lightbox__next { right: 20px; top: 50%; margin-top: -24px; }
.rm-lightbox__count { position: fixed; bottom: 20px; left: 0; right: 0; text-align: center; color: rgb(255 255 255 / .7); font-size: .875rem; }