/**
 * min_gallery Content Block - Frontend styles
 * ===========================================
 * Eleven views out of one stylesheet: grid 1 to 6, masonry, mosaic, justified
 * rows, slider, carousel tiles and the logo band. None of them needs
 * JavaScript to lay out -- the script only wires the lightbox, the slider and
 * the scroll reveal.
 *
 * Masonry is CSS columns and upgrades itself to the native algorithm where a
 * browser has it. As of September 2026 only Safari ships one and the property
 * name is still being decided, so the column path stays load-bearing and the
 * @supports blocks are pure addition.
 *
 * Rules for this file: no fixed pixel widths, no max-width media queries, no
 * !important outside the reduced-motion block, and no colour without a token
 * fallback.
 *
 * @package min_core
 * @author  made in nature Projektagentur
 * @version 3.0.0
 */

@layer components {

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.min-gallery {
    --min-gallery-gap: clamp(0.5rem, 2vw, 1rem);
    --min-gallery-radius: 8px;
    --min-gallery-ratio: 1 / 1;
    --min-gallery-cols: 3;
    --min-gallery-zeile: 240px;
    --min-gallery-logohoehe: 64px;
    --min-gallery-kachelbreite: clamp(14rem, 32vw, 22rem);
    --min-gallery-caption-color: var(--min-text-secondary, #4a4a4a);
    --min-gallery-caption-size: 0.875rem;
    --min-gallery-focus: var(--min-focus, #1a73e8);
    --min-gallery-dauer: 0.3s;
    --min-gallery-kurve: ease-out;

    display: block;
    background: transparent;
}

.min-gallery__subheader {
    margin: -0.5rem 0 var(--min-gallery-gap);
    color: var(--min-text-secondary, #4a4a4a);
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
}

.min-gallery__text { margin-block-end: var(--min-gallery-gap); }

/* ==========================================================================
   2. Modifiers
   ========================================================================== */

.min-gallery--gap-none   { --min-gallery-gap: 0; }
.min-gallery--gap-small  { --min-gallery-gap: clamp(0.25rem, 1vw, 0.5rem); }
.min-gallery--gap-medium { --min-gallery-gap: clamp(0.5rem, 2vw, 1rem); }
.min-gallery--gap-large  { --min-gallery-gap: clamp(1rem, 3vw, 2rem); }

.min-gallery--radius-none   { --min-gallery-radius: 0; }
.min-gallery--radius-small  { --min-gallery-radius: 4px; }
.min-gallery--radius-medium { --min-gallery-radius: 8px; }
.min-gallery--radius-large  { --min-gallery-radius: 20px; }

.min-gallery--ratio-square     { --min-gallery-ratio: 1 / 1; }
.min-gallery--ratio-landscape  { --min-gallery-ratio: 4 / 3; }
.min-gallery--ratio-widescreen { --min-gallery-ratio: 16 / 9; }
.min-gallery--ratio-portrait   { --min-gallery-ratio: 3 / 4; }

/* ==========================================================================
   3. Views
   ========================================================================== */

.min-gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--min-gallery-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Grid, mobile first: one column, then two, three, the chosen number. Written
   out per view because repeat() does not take a variable through min() yet. */
@media (min-width: 480px) {
    .min-gallery--ansicht-2 .min-gallery__grid,
    .min-gallery--ansicht-3 .min-gallery__grid,
    .min-gallery--ansicht-4 .min-gallery__grid,
    .min-gallery--ansicht-5 .min-gallery__grid,
    .min-gallery--ansicht-6 .min-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 780px) {
    .min-gallery--ansicht-3 .min-gallery__grid,
    .min-gallery--ansicht-4 .min-gallery__grid,
    .min-gallery--ansicht-5 .min-gallery__grid,
    .min-gallery--ansicht-6 .min-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
    .min-gallery--ansicht-4 .min-gallery__grid { grid-template-columns: repeat(4, 1fr); }
    .min-gallery--ansicht-5 .min-gallery__grid { grid-template-columns: repeat(5, 1fr); }
    .min-gallery--ansicht-6 .min-gallery__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Masonry. Columns need no measuring and no waiting. The previous build wrote
   inline row spans after every image had loaded; that made the layout jump. */
.min-gallery--ansicht-masonry .min-gallery__grid {
    display: block;
    columns: 1;
    column-gap: var(--min-gallery-gap);
}
.min-gallery--ansicht-masonry .min-gallery__item {
    break-inside: avoid;
    margin-block-end: var(--min-gallery-gap);
}
@media (min-width: 480px) {
    .min-gallery--ansicht-masonry .min-gallery__grid { columns: 2; }
}
@media (min-width: 1024px) {
    .min-gallery--ansicht-masonry .min-gallery__grid { columns: var(--min-gallery-cols); }
}

/* Native masonry where it exists. Both spellings stand in one block because
   the working group has not settled the name; a browser applies the one it
   knows and drops the other, and the column path above stays in charge
   everywhere else. */
@supports (grid-template-rows: masonry) or (item-flow: row masonry) {
    @media (min-width: 480px) {
        .min-gallery--ansicht-masonry .min-gallery__grid {
            display: grid;
            columns: auto;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: masonry;
            item-flow: row masonry;
        }
        .min-gallery--ansicht-masonry .min-gallery__item { margin-block-end: 0; }
    }
    @media (min-width: 1024px) {
        .min-gallery--ansicht-masonry .min-gallery__grid {
            grid-template-columns: repeat(var(--min-gallery-cols), 1fr);
        }
    }
}

/* Mosaic: every fifth tile wide, every seventh tall. The pattern repeats, so
   it works with any number of images and the editor places nothing. */
@media (min-width: 780px) {
    .min-gallery--ansicht-mosaic .min-gallery__grid {
        grid-template-columns: repeat(var(--min-gallery-cols), 1fr);
        grid-auto-rows: 1fr;
        grid-auto-flow: dense;
    }
    .min-gallery--ansicht-mosaic .min-gallery__item:nth-child(5n + 1) { grid-column: span 2; }
    .min-gallery--ansicht-mosaic .min-gallery__item:nth-child(7n + 3) { grid-row: span 2; }
    .min-gallery--ansicht-mosaic .min-gallery__item:nth-child(5n + 1) .min-gallery__figure { --min-gallery-ratio: 2 / 1; }
    .min-gallery--ansicht-mosaic .min-gallery__item:nth-child(7n + 3) .min-gallery__figure { --min-gallery-ratio: 1 / 2; }
}

/* Justified rows: each item carries its proportion as --min-gallery-ar,
   flex-basis is that times the row height. Equal rows, true shapes, no
   JavaScript. The last item does not grow, so a half row stays half. */
.min-gallery--ansicht-justified .min-gallery__grid { display: flex; flex-wrap: wrap; }
.min-gallery--ansicht-justified .min-gallery__item {
    flex: var(--min-gallery-ar, 1.5) 1 calc(var(--min-gallery-ar, 1.5) * var(--min-gallery-zeile));
}
.min-gallery--ansicht-justified .min-gallery__item:last-child { flex-grow: 0; }
.min-gallery--ansicht-justified .min-gallery__figure {
    aspect-ratio: var(--min-gallery-ar, 1.5);
    block-size: auto;
}

/* Slider and carousel: without JavaScript a scrollable strip with snap points,
   taken over by Swiper when it loads. */
.min-gallery--ansicht-slider .min-gallery__grid,
.min-gallery--ansicht-carousel .min-gallery__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.min-gallery--ansicht-slider .min-gallery__item,
.min-gallery--ansicht-carousel .min-gallery__item {
    flex: 0 0 min(85%, 22rem);
    scroll-snap-align: start;
}
.min-gallery--ansicht-carousel .min-gallery__item { flex-basis: var(--min-gallery-kachelbreite); }
/* The native strip stays scrollable until Swiper has really taken over.
   Keying this on the swiper-wrapper class alone froze it at image one for
   every visitor whose script never arrived. */
.min-gallery .swiper-initialized .min-gallery__grid { overflow-x: visible; }

/* Logo band: same optical height, true proportions, breathing space so wide
   and narrow marks sit evenly. */
.min-gallery--ansicht-logos .min-gallery__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.min-gallery--ansicht-logos .min-gallery__item { padding-inline: calc(var(--min-gallery-gap) / 2); }
.min-gallery--ansicht-logos .min-gallery__figure {
    block-size: var(--min-gallery-logohoehe);
    inline-size: auto;
    aspect-ratio: auto;
    overflow: visible;
}
.min-gallery--ansicht-logos .min-gallery__image {
    block-size: 100%;
    inline-size: auto;
    object-fit: contain;
}
.min-gallery--graustufen .min-gallery__image {
    filter: grayscale(1);
    transition: filter var(--min-gallery-dauer) var(--min-gallery-kurve);
}
.min-gallery--graustufen .min-gallery__item:hover .min-gallery__image,
.min-gallery--graustufen .min-gallery__link:focus-visible .min-gallery__image { filter: none; }

/* ==========================================================================
   4. Item, image, caption
   ========================================================================== */

.min-gallery__item { margin: 0; }

.min-gallery__link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--min-gallery-radius);
}
.min-gallery__link:focus-visible {
    outline: 3px solid var(--min-gallery-focus);
    outline-offset: 3px;
}

.min-gallery__figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--min-gallery-radius);
    aspect-ratio: var(--min-gallery-ratio);
    max-block-size: var(--min-gallery-maxhoehe, none);
}

/* Original keeps each image in its own proportion: no box, no crop, and no
   object-fit, because there is nothing to fit into. */
.min-gallery--ratio-original .min-gallery__figure,
.min-gallery--ansicht-masonry .min-gallery__figure { aspect-ratio: auto; }

.min-gallery__picture { display: block; block-size: 100%; }

.min-gallery__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: var(--min-gallery-pos, 50% 50%);
    transition: transform var(--min-gallery-dauer) var(--min-gallery-kurve),
                filter var(--min-gallery-dauer) var(--min-gallery-kurve);
}
.min-gallery--ratio-original .min-gallery__image,
.min-gallery--ansicht-masonry .min-gallery__image {
    block-size: auto;
    object-fit: unset;
}

/* Hover and focus always together: a keyboard user must get the feedback a
   mouse user gets. */
.min-gallery--hover-zoom .min-gallery__link:hover .min-gallery__image,
.min-gallery--hover-zoom .min-gallery__link:focus-visible .min-gallery__image { transform: scale(1.05); }

.min-gallery--hover-dim .min-gallery__link:hover .min-gallery__image,
.min-gallery--hover-dim .min-gallery__link:focus-visible .min-gallery__image { filter: brightness(0.75); }

.min-gallery--hover-lift .min-gallery__link {
    transition: transform var(--min-gallery-dauer) var(--min-gallery-kurve),
                box-shadow var(--min-gallery-dauer) var(--min-gallery-kurve);
}
.min-gallery--hover-lift .min-gallery__link:hover,
.min-gallery--hover-lift .min-gallery__link:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}

.min-gallery__caption,
.min-gallery__copyright {
    margin-block: 0.5rem 0;
    color: var(--min-gallery-caption-color);
    font-size: var(--min-gallery-caption-size);
    line-height: 1.5;
}
.min-gallery__copyright {
    margin-block-start: 0.15rem;
    font-size: calc(var(--min-gallery-caption-size) * 0.9);
    opacity: 0.85;
}

/* Caption on hover stays reachable: focus reveals it too, and it never leaves
   the accessibility tree. */
.min-gallery--caption-hover .min-gallery__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: rgb(0 0 0 / 0.75);
    color: var(--min-bg-primary, #fff);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity var(--min-gallery-dauer) var(--min-gallery-kurve),
                transform var(--min-gallery-dauer) var(--min-gallery-kurve);
}
.min-gallery--caption-hover .min-gallery__item:hover .min-gallery__caption,
.min-gallery--caption-hover .min-gallery__link:focus-visible .min-gallery__caption {
    opacity: 1;
    transform: translateY(0);
}

/* Live region: read by assistive technology, invisible on screen. */
.min-gallery__status {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==========================================================================
   5. Controls
   ========================================================================== */

.min-gallery__controls {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-block-start: var(--min-gallery-gap);
}
.min-gallery__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px is the smallest comfortable touch target. */
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 1px solid var(--min-border-strong, #80868b);
    border-radius: 50%;
    background: var(--min-bg-primary, #fff);
    color: var(--min-text-primary, #1e1e1e);
    cursor: pointer;
}
.min-gallery__nav:hover { background: var(--min-bg-secondary, #f8f9fa); }
.min-gallery__nav:focus-visible {
    outline: 3px solid var(--min-gallery-focus);
    outline-offset: 2px;
}
.min-gallery__nav[aria-disabled="true"],
.min-gallery__nav.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

.min-gallery__pagination {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    margin-block-start: calc(var(--min-gallery-gap) / 2);
    color: var(--min-text-secondary, #4a4a4a);
}
.min-gallery__pagination .swiper-pagination-bullet {
    background: var(--min-text-secondary, #4a4a4a);
    opacity: 0.35;
    position: relative; /* WCAG 2.2 SC 2.5.8: 8px dot stays visible, ::before below is the 24x24 tap target */
}
.min-gallery__pagination .swiper-pagination-bullet::before {
    content: '';
    position: absolute;
    inset: -8px; /* 8x8 dot + 8px each side = 24x24 */
}
.min-gallery__pagination .swiper-pagination-bullet-active { opacity: 1; }

/* ==========================================================================
   6. What the visitor asked for beats every editor setting
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .min-gallery *,
    .min-gallery *::before,
    .min-gallery *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .min-gallery--hover-zoom .min-gallery__link:hover .min-gallery__image,
    .min-gallery--hover-lift .min-gallery__link:hover { transform: none; }
}

@media (forced-colors: active) {
    .min-gallery__nav {
        border: 1px solid ButtonBorder;
        background: ButtonFace;
        color: ButtonText;
    }
    .min-gallery__link:focus-visible,
    .min-gallery__nav:focus-visible { outline: 3px solid Highlight; }
    .min-gallery--caption-hover .min-gallery__caption { background: Canvas; color: CanvasText; }
    /* A greyed logo must not lose its contrast in a forced palette. */
    .min-gallery--graustufen .min-gallery__image { filter: none; }
}

@media print {
    /* On paper nothing scrolls, so the slider becomes a grid and every image
       is on the page. */
    .min-gallery--ansicht-slider .min-gallery__grid,
    .min-gallery--ansicht-carousel .min-gallery__grid {
        display: grid;
        /* Not a fixed three: on a narrow sheet that pushes content off the
           page. Below 60mm the column becomes the whole width. */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 60mm), 1fr));
        overflow: visible;
    }
    /* Swiper leaves a pixel width and a transform on every slide; on paper
       that cut 32px off the right edge. Inline styles yield to nothing but
       !important, and a sheet has no second chance. */
    .min-gallery--ansicht-slider .min-gallery__item,
    .min-gallery--ansicht-carousel .min-gallery__item {
        flex: none;
        inline-size: auto !important;
        margin-inline-end: 0 !important;
    }
    .min-gallery--ansicht-slider .min-gallery__grid,
    .min-gallery--ansicht-carousel .min-gallery__grid { transform: none !important; }
    .min-gallery__controls,
    .min-gallery__pagination { display: none; }
    .min-gallery__item,
    .min-gallery__figure { break-inside: avoid; }
    /* No printed link target behind every image: a gallery would drown in URLs. */
    .min-gallery__link::after { content: none; }
    .min-gallery--graustufen .min-gallery__image { filter: none; }
}

/* A gallery whose reveal animation failed to load must never stay invisible. */
.min-gallery[data-gallery-reveal-status="nicht-geladen"] .min-gallery__item { opacity: 1; }

}