/* Baseline / horizon gallery (galerie.html) — reuses .gallery-page chrome from gallery-page.css */

.gallery-axis-page #gallery-scroller {
    position: relative;
}

.gallery-axis-page .gallery-axis-rail {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2rem;
    width: max-content;
    max-width: none;
    min-height: 100%;
    height: 100%;
    padding-inline: 2rem;
    /* Clear the fixed header above and the legal strip below; the JS derives
       the half-height from these paddings, so the images shrink to fit. */
    padding-top: 5.5rem;
    padding-bottom: 3rem;
    box-sizing: border-box;
}

/* Columns shrink-wrap their image: every image gets the same fixed height
   (half the strip), its width follows from the aspect ratio, and the column
   hugs it — so the 2rem rail gap is the real, even distance between works.
   --axis-col-w (from JS) still sizes text cells and the overlap shift. */
.gallery-axis-page .gallery-axis-col {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    min-height: 0;
}

.gallery-axis-page .gallery-axis-col--span2 {
    flex: 0 0 auto;
}

/* Pull panel left by one column + rail gap so it shares one track with the previous span2 */
.gallery-axis-page .gallery-axis-col--overlap-prev-1 {
    margin-left: calc(-1 * (var(--axis-col-w, 12rem) + 2rem));
    z-index: 1;
}

/* Triptych column: two flank images sit below the axis at the normal rail
   gap; the middle image rides above the axis, centered over the seam. */
.gallery-axis-page .gallery-axis-col--triptych .gallery-axis-half--below {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
}

.gallery-axis-page .gallery-axis-col--triptych .gallery-axis-half--above {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
}

/* Family cluster of four: two below at the normal rail gap, two above —
   shifted right by roughly half an image so each top one straddles a seam. */
.gallery-axis-page .gallery-axis-col--quartet .gallery-axis-half--below {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
}

.gallery-axis-page .gallery-axis-col--quartet .gallery-axis-half--above {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 2rem;
    padding-left: calc(0.65 * var(--axis-half-h, calc((100vh - 6rem) / 2)));
}

/* Full-height column: the image spans both rows, cutting through the axis
   instead of sitting on it. */
.gallery-axis-page .gallery-axis-col--full {
    justify-content: center;
}

.gallery-axis-page .gallery-axis-col--full > .gallery-axis-img {
    display: block;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: flex-start;
    height: calc(2 * var(--axis-half-h, calc((100vh - 6rem) / 2)));
    width: auto;
    max-width: none;
}

/* Each half is half of the visible strip height (100vh minus sticky vertical padding) */
.gallery-axis-page .gallery-axis-half {
    flex: 0 0 var(--axis-half-h, calc((100vh - 6rem) / 2));
    height: var(--axis-half-h, calc((100vh - 6rem) / 2));
    max-height: var(--axis-half-h, calc((100vh - 6rem) / 2));
    min-height: 0;
    box-sizing: border-box;
}

.gallery-axis-page .gallery-axis-half--above {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding-bottom: 0.35rem;
}

.gallery-axis-page .gallery-axis-half--below {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 0.35rem;
}

/* Fixed height, intrinsic width: the image dictates the column width. */
.gallery-axis-page .gallery-axis-half--above > .gallery-axis-img,
.gallery-axis-page .gallery-axis-half--below > .gallery-axis-img {
    display: block;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: flex-start;
    height: calc(var(--axis-half-h, calc((100vh - 6rem) / 2)) - 0.75rem);
    width: auto;
    max-width: none;
    margin-inline: 0;
}

.gallery-axis-page .gallery-axis-text {
    font-family: 'Fira Mono', monospace;
    font-size: 1rem;
    line-height: 1.45;
    color: #1e2023;
    /* Always wrap to one column wide even when the parent column is --span2,
       so the text never bleeds into the next column's overlapping image. */
    max-width: var(--axis-col-w, 12rem);
}

.gallery-axis-page .gallery-axis-text h3 {
    font-family: 'Bungee', cursive;
    font-size: 1rem;
    line-height: 1.15;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

/* —— Mobile only: rail stacks; images full width; no overlap.
   Tablet keeps the horizontal axis layout. —— */
@media (max-width: 767.98px) {
    .gallery-axis-page .gallery-axis-rail {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        height: auto;
        align-items: stretch;
        gap: 1.5rem;
        padding-inline: 1rem;
        padding-top: 0;
        padding-bottom: 1.5rem;
        box-sizing: border-box;
    }

    .gallery-axis-page .gallery-axis-col,
    .gallery-axis-page .gallery-axis-col--span2 {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100%;
    }

    .gallery-axis-page .gallery-axis-col--overlap-prev-1 {
        margin-left: 0 !important;
        z-index: auto;
    }

    /* Triptych / quartet stack like everything else on mobile */
    .gallery-axis-page .gallery-axis-col--triptych .gallery-axis-half--below,
    .gallery-axis-page .gallery-axis-col--quartet .gallery-axis-half--below,
    .gallery-axis-page .gallery-axis-col--quartet .gallery-axis-half--above {
        flex-direction: column;
        gap: 1.5rem;
        padding-left: 0;
    }

    /* The horizontal layout uses empty halves to align baselines; on mobile
       those empties become random gaps between images. Hide them. */
    .gallery-axis-page .gallery-axis-half:empty {
        display: none !important;
    }

    .gallery-axis-page .gallery-axis-half {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    /* Image: stretch full width, cap at 90vh. When max-height kicks in
       (very tall portraits), object-fit: contain centers the image
       horizontally within the full-width box. */
    .gallery-axis-page .gallery-axis-half--above > .gallery-axis-img,
    .gallery-axis-page .gallery-axis-half--below > .gallery-axis-img,
    .gallery-axis-page .gallery-axis-col--full > .gallery-axis-img {
        display: block;
        flex: 0 1 auto;
        width: 100%;
        height: auto;
        max-height: 90vh;
        object-fit: contain;
        object-position: center;
    }

    /* Text stretches the full column width on mobile — drop the desktop
       per-column max-width clamp (only needed when text shares a span-2
       column with an overlapping image). */
    .gallery-axis-page .gallery-axis-text {
        max-width: 100%;
    }

    /* Any cell where the caption sits in the --below half (horizontal layout
       puts text below the central axis) should be flipped on mobile so the
       text reads ABOVE the image. Covers Monotypie Schwarz, Türen, Serie
       Druck — and any future cell with the same structure.
       The padding swap mirrors the desktop 0.35rem-each-side spacing so
       these flipped cells have the same gap between text and image as the
       cells where text was already in --above. */
    .gallery-axis-page .gallery-axis-col:has(.gallery-axis-half--below .gallery-axis-text) .gallery-axis-half--above {
        order: 2;
        padding-top: 0.35rem;
        padding-bottom: 0;
    }
    .gallery-axis-page .gallery-axis-col:has(.gallery-axis-half--below .gallery-axis-text) .gallery-axis-half--below {
        order: 1;
        padding-top: 0;
        padding-bottom: 0.35rem;
    }
}