/* ==========================================================================
   Website-Galerie (FrontendGallery/List.html, Js/gallery.js): Abschnitte je
   Festivaltag, Filter nach Fotograf:in und die Bildunterschrift im
   Bildbetrachter. Raster selbst: festival.css (Mauerwerk) und
   element-looks.css (Raster, Streifen).

   Farben aus den Tokens von festival.css (--fest-*), mit Fallback; die
   dunkle Variante kommt von dort (html[data-bs-theme="dark"]).
   ========================================================================== */

.gallery-days,
.gallery-chips {
    --x-ink: var(--fest-ink, #14181f);
    --x-muted: var(--fest-ink-muted, #4a5568);
    --x-line: var(--fest-linie, rgba(20, 24, 31, .12));
    --x-primary: var(--fest-primary, var(--brand-primary, #175da9));
    --x-on-primary: var(--fest-on-primary, var(--brand-on-primary, #fff));
    --x-display: var(--fest-font-display, var(--brand-font-display, inherit));
}

/* --------------------------------------------------------------------------
   Abschnitte je Festivaltag
   -------------------------------------------------------------------------- */
.gallery-day + .gallery-day {
    margin-top: var(--fest-space-m, 2rem);
}

.gallery-day__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin: 0 auto 1rem;
    padding-inline: 1rem;
    max-width: 1320px;
}

.gallery-day__title {
    margin: 0;
    font-family: var(--x-display);
}

.gallery-day__date {
    color: var(--x-muted);
}

/* Nach Tagen in Abschnitten: die Ueberschrift beim Scrollen kurz oben halten. */
@supports (position: sticky) {
    .gallery-day__head {
        position: sticky;
        top: calc(var(--fest-header-h, 0px) + .5rem);
        z-index: 2;
        width: fit-content;
        max-width: calc(100% - 2rem);
        padding: .35rem 1rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--fest-flaeche, #fff) 88%, transparent);
        backdrop-filter: blur(6px);
    }
}

/* --------------------------------------------------------------------------
   Filter nach Fotograf:in
   -------------------------------------------------------------------------- */
.gallery-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.gallery-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    border: 1px solid var(--x-line);
    border-radius: 999px;
    color: var(--x-ink);
    text-decoration: none;
    font-size: .9rem;
    transition: background-color .15s ease, border-color .15s ease;
}

.gallery-chip:hover,
.gallery-chip:focus-visible {
    border-color: var(--x-primary);
    color: var(--x-ink);
}

.gallery-chip.is-active {
    border-color: var(--x-primary);
    background: var(--x-primary);
    color: var(--x-on-primary);
}

.gallery-chip__count {
    font-size: .75rem;
    opacity: .7;
}

/* --------------------------------------------------------------------------
   Bildunterschrift im Bildbetrachter (Fancybox, immer dunkel)
   -------------------------------------------------------------------------- */
.gallery-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    text-align: center;
}

.gallery-caption__credit {
    color: #fff;
}

a.gallery-caption__credit {
    text-decoration: underline;
    text-underline-offset: .2em;
}

a.gallery-caption__credit:hover {
    color: #fff;
    text-decoration-thickness: 2px;
}

.gallery-caption__exif {
    color: rgba(255, 255, 255, .6);
    font-size: .8em;
}