/* Block «gallery» — three layouts (grid, masonry, slider), column count per class
   (CSP: no style attributes). --g-cols-m applies in a narrow container,
   --g-cols-d from 681px (the viewport's 721px at the top level) — a gallery in a
   narrow column keeps the narrow count on a wide screen. */
.block-gallery { --g-gap: var(--size-4); --g-cols: var(--g-cols-m, 2); }
@container (min-width: 681px) { .block-gallery { --g-cols: var(--g-cols-d, 4); } }

.gallery-cm-1 { --g-cols-m: 1; }
.gallery-cm-2 { --g-cols-m: 2; }
.gallery-cm-3 { --g-cols-m: 3; }
.gallery-cd-1 { --g-cols-d: 1; }
.gallery-cd-2 { --g-cols-d: 2; }
.gallery-cd-3 { --g-cols-d: 3; }
.gallery-cd-4 { --g-cols-d: 4; }
.gallery-cd-5 { --g-cols-d: 5; }
.gallery-cd-6 { --g-cols-d: 6; }

.block-gallery .gallery-item { margin: 0; }
.block-gallery img { display: block; width: 100%; height: auto; }
.block-gallery .gallery-link { display: block; }
.block-gallery .gallery-link:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 2px; }
.gallery-caption { margin-top: .35rem; font-size: .85rem; color: var(--muted); }

/* Raster: feste Spalten, einheitliches Bildformat */
.gallery--grid { display: grid; grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr)); gap: var(--g-gap); }
.gallery--grid img { aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }

/* Masonry: images at their natural height. Without the script — and in the
   editor's block preview, whose frame runs none — a grid that sets the images
   row by row, each row as tall as its tallest image: no column stays empty.
   CSS columns, the earlier answer, filled one column before starting the
   next, and pictures of a similar height left the last one short or empty
   (four in three columns stood 2 / 2 / 0).
   gallery.js then packs the grid (`is-laid`): rows of 1px, each image spanning
   its own height plus the gap, so the grid's row-by-row placement puts it into
   the column that frees up first. The images only move up; the document order
   — tab order, the lightbox's order — stays as it is. Where the browser paints
   before the deferred script, the pictures below the first row move up once:
   a layout shift only for a masonry gallery standing in the first screen
   (two of them filling a 4000px window measured 0.043). */
.gallery--masonry { display: grid; grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
    gap: var(--g-gap); align-items: start; }
/* Three classes: a theme's gap (`body.theme-neumar .block-gallery`) outweighs
   two, and a row gap between rows of 1px multiplied every image's height by the
   gap — the script adds the theme's column gap to each span instead. */
.block-gallery.gallery--masonry.is-laid { grid-auto-rows: 1px; row-gap: 0; }

/* Bilderslider: Scroll-Snap, --g-cols Bilder pro Ansicht; Pfeile via gallery.js */
.gallery--slider { display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--g-cols) - 1) * var(--g-gap)) / var(--g-cols));
    gap: var(--g-gap); overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; padding-bottom: var(--size-2);
    scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.gallery--slider .gallery-item { scroll-snap-align: start; }
.gallery--slider img { aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }

/* Slider arrows (gallery.js puts them in a bar below the slider) */
.gallery-slider-nav { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .5rem; }
.gallery-slider-nav button { display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; padding: 0; background: transparent;
    border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); cursor: pointer; }
.gallery-slider-nav button:hover, .gallery-slider-nav button:focus-visible { border-color: var(--accent-fg); color: var(--accent-fg); }
.gallery-slider-nav svg { width: 1.1rem; height: 1.1rem; }

/* Lightbox: natives <dialog> (Fokus-Falle + Escape vom Browser), gallery.js */
.gallery-lightbox { border: 0; padding: 0; background: transparent; max-width: min(94vw, 1200px); }
.gallery-lightbox::backdrop { background: rgb(0 0 0 / .85); }
.gallery-lightbox figure { margin: 0; }
.gallery-lightbox img { display: block; margin: 0 auto; max-width: 100%; max-height: 82vh; width: auto; height: auto; }
.gallery-lightbox-caption { padding: .6rem .5rem; text-align: center; color: var(--gray-2); font-size: .9rem; }
.gallery-lightbox-caption:empty { display: none; }
.gallery-lightbox button { position: fixed; display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; padding: 0; background: rgb(0 0 0 / .45);
    border: 1px solid var(--gray-6); border-radius: var(--radius); color: var(--gray-0); cursor: pointer; }
.gallery-lightbox button:hover, .gallery-lightbox button:focus-visible { border-color: var(--gray-0); }
.gallery-lightbox svg { width: 1.3rem; height: 1.3rem; }
.gallery-lightbox-close { top: var(--size-3); right: var(--size-3); }
.gallery-lightbox-prev { left: var(--size-3); top: 50%; transform: translateY(-50%); }
.gallery-lightbox-next { right: var(--size-3); top: 50%; transform: translateY(-50%); }
.gallery-lightbox-prev[hidden], .gallery-lightbox-next[hidden] { display: none; }