/* Foto-Galerien — Single-View + Tile */

/* Eigene Galerie-Variable — einfach an einer Stelle justierbar.
   Default: halber Metro-Gap (10px statt 20px) — wirkt bei vielen Bildern luftiger. */
:root {
    --gallery-gap: 16px;
}

.gallery-single {
    box-sizing: border-box;
    max-width: var(--metro-max-width, 1496px);
    margin: 0 auto;
    /* Horizontales Padding 20px = fluchtet mit Header-Logo (72px vom Viewport)
       und innerer Footer-Box. Vertikales Padding via --gallery-gap. */
    padding: var(--gallery-gap) 20px calc(var(--gallery-gap) * 2);
}
/* Mobil: schmaler 4px-Rand → Bilder fast randlos, aber dezent gerahmt (die
   runden Ecken wirken am nackten Viewport-Rand sonst seltsam). Der Header
   behält sein eigenes Padding, der Text klebt also nicht am Rand. */
@media (max-width: 600px) {
    .gallery-single { padding-left: 6px; padding-right: 6px; }
    /* Logo bündig zur 6px-Fotokante: weiße Logo-Lasche + Schriftzug beginnen bei
       6px, damit sie beim Scrollen mit der Foto-Spalte fluchten. Nur auf
       Galerie-Seiten (body.single-galerie) — globaler Header bleibt unberührt.
       .header-left: 10px header-inner-padding − 4px = 6px; svg margin-left 0. */
    body.single-galerie .header-left { margin-left: -4px; }
    body.single-galerie .logo svg { margin-left: 0; }
}

/* --- Galerie-Header — identisch zum Magazin-Archiv-Header --- */
.gallery-header {
    text-align: center;
    padding: 24px 20px 20px;
}

.gallery-header__title {
    font-size: 2.5rem;
    font-weight: 500;
    margin: 0 0 12px;
    /* --page-text wird in header.php gesetzt wenn crb_page_bg_color
       definiert ist (auto-Kontrast WCAG). Fallback inherit = Theme-Default. */
    color: var(--page-text, inherit);
}

.gallery-header__subtitle {
    font-size: 1.1rem;
    color: var(--page-text-muted, #999);
    margin: 0;
}

/* --- Pulsierender Glow für Liquid-Pills ---
   Atmender Halo (~2.4s) auf .tile-galerie__pill UND .gallery-item__story-link,
   damit die Pills auch ohne Hover-Interaktion auffällig bleiben. Die volle
   box-shadow-Stack-Liste wird in den Keyframes wiederholt — nur der zweite
   Layer (Halo) variiert. So bleiben Outer-Drop + Inset-Highlights stabil
   und nur der Glow atmet.
   Hover-Styles der Pills überschreiben die Animation für die Hover-Phase
   (eigene box-shadow + transform), das ist erwünscht: aktiver Hover = klare
   Interaktion statt Pulse. */
/* Liquid-Pulse: weißer Halo + paralleler Inner-Highlight-Boost. Zwei
   gleichzeitig animierte Lagen machen das Atmen sichtbarer als ein
   reiner Outer-Glow allein, ohne dass der Pill seine Form verlässt.
   Cycle 1.8s mit cubic-bezier(.45,.05,.55,.95) — sinusähnlich, hält
   kurz am Peak, damit das Auge die Spitze erwischt. */
@keyframes liquid-pulse {
    0%, 100% {
        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.18),
            0 0 0 0 rgba(255, 255, 255, 0),
            inset 0  1px 0 rgba(255, 255, 255, 0.45),
            inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    }
    50% {
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.22),
            0 0 22px 8px rgba(255, 255, 255, 0.95),
            inset 0  1px 0 rgba(255, 255, 255, 0.85),
            inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    }
}
.tile-galerie .tile-galerie__pill,
.gallery-item--story .gallery-item__story-link {
    animation: liquid-pulse 1.8s cubic-bezier(.45, .05, .55, .95) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .tile-galerie .tile-galerie__pill,
    .gallery-item--story .gallery-item__story-link {
        animation: none;
    }
}

/* --- Filter-Transitions ---
   Wenn der User im Kalender/Chip einen Tag wählt, dippt der Grid-Container
   kurz auf 0.4 Opacity (~120ms in / ~240ms out), damit die Filter-Änderung
   überhaupt wahrnehmbar wird — vorher: items.hidden-Toggle = unsichtbar.
   Klasse wird in gallery-calendar.js per setTimeout(360ms) wieder entfernt. */
.gallery-grid {
    transition: opacity 0.24s ease-out;
}
.gallery-grid.is-filtering {
    opacity: 0.4;
    transition: opacity 0.12s ease-in;
}

/* Story-Tile Reveal: Wenn ein Tag mit Story angeklickt wird, slidet die
   Story-Kachel sichtbar von oben + bekommt einen kurzen warmen Glow,
   damit der "Aha"-Moment sichtbar wird (ohne Animation zappt sie sonst
   einfach rein und der User blinzelt sie weg). Bewusst langsam (700ms
   Slide, Glow danach), single-shot — Klasse wird nach 1100ms entfernt. */
/* Slide entspricht der eigenen Tile-Höhe (translateY -100%): die Story
   kommt sichtbar "von oben" in ihren Slot, parallel zur Foto-Kachel, die
   per JS um storyHeight+gap nach unten in Position 2 slidet. Sonst wirkt
   die Story-Animation neben dem großen Foto-Slide wie ein abrupter Cut. */
@keyframes gallery-story-reveal-slide {
    0%   { opacity: 0; transform: translateY(-100%); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes gallery-story-reveal-glow {
    0%   { box-shadow: 0 0 0 0 rgba(255, 196, 110, 0);   }
    35%  { box-shadow: 0 0 0 6px rgba(255, 196, 110, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(255, 196, 110, 0); }
}
/* Slide auf dem ganzen Tile (Visual + Caption gleiten zusammen rein),
   Glow nur ums .gallery-item__media — sonst legt sich der Shadow auch um
   die darunterliegende Caption-Spalte und wirkt zerfasert. */
.gallery-item--story.is-story-revealing {
    animation: gallery-story-reveal-slide 0.7s cubic-bezier(.2, .8, .25, 1) both;
}
.gallery-item--story.is-story-revealing .gallery-item__media {
    animation: gallery-story-reveal-glow 1.0s ease-out 0.15s both;
}

/* Reduced motion: keine Pulses, keine Reveals — Items erscheinen sofort. */
@media (prefers-reduced-motion: reduce) {
    .gallery-grid,
    .gallery-grid.is-filtering {
        transition: none;
        opacity: 1;
    }
    .gallery-item--story.is-story-revealing,
    .gallery-item--story.is-story-revealing .gallery-item__media {
        animation: none;
    }
}

/* --- Zurück-Button (oben links, unter dem Kalender) ---
   Analog zu .artikel-panel-back auf single-artikel.php; vereinheitlicht
   die Browser-Back-UX zwischen Artikel- und Galerie-Single. Zeigt nur
   wenn document.referrer auf derselben Site liegt — sonst kein Sinn. */
.gallery-back-nav {
    padding: 4px 4px 12px;
}
.gallery-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 8px 0;
    color: var(--page-text, #111);
    font-family: 'MatterSQ', Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
}
.gallery-back:hover { opacity: 0.7; }
.gallery-back svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Filter-Pills — Chip-Stil wie Magazin-Archiv --- */
.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 40px;
}

.gallery-filter__pill {
    background: transparent;
    border: 1px solid rgba(42, 44, 45, .25);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9rem;
    cursor: pointer;
    color: inherit;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gallery-filter__pill:hover {
    border-color: rgba(42, 44, 45, .6);
}
.gallery-filter__pill.is-active {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}
.gallery-filter__count {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
    opacity: .6;
}

/* „Alle anzeigen" — Text-Link statt Pill, analog zu .magazin-filter__all */
.gallery-filter__all {
    background: none;
    border: none;
    padding: 8px 4px;
    font-size: 0.9rem;
    cursor: pointer;
    color: #555;
    transition: color 0.2s;
}
.gallery-filter__all:hover { color: #000; }
.gallery-filter__all.is-active {
    color: #000;
    font-weight: 400;
}

/* Versteckte Items beim aktiven Filter — display:none, damit auch das margin
   wegfällt und das Masonry-Layout sauber neu fließt. */
.gallery-item[hidden] { display: none !important; }

/* === Filter-Area: Toggle (Kalender ↔ Chips) ============================ */
.gallery-filter-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 16px 32px;
}
.gallery-filter-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: rgba(0,0,0,.05);
    border-radius: 999px;
}
.gallery-filter-toggle__btn {
    background: transparent;
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: #666;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.gallery-filter-toggle__btn:hover { color: #000; }
.gallery-filter-toggle__btn.is-active {
    background: #fff;
    color: #000;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

/* gallery-filter wenn in der Area: ohne eigenen Padding (Area macht das) */
.gallery-filter-area .gallery-filter { padding: 4px 0 8px; }

/* HTML [hidden]-Attribut erzwingen — sonst übersteuert .gallery-filter
   (display:flex) und .gallery-calendar (display:block) das Default-none. */
.gallery-filter-area > [hidden] { display: none !important; }

/* === Kalender ========================================================== */
.gallery-calendar {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
}
/* Mit Navigation: 3-Spalten-Grid → Pfeil | Monat | Pfeil */
.gallery-calendar.has-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px;
    max-width: 420px;
}
.gallery-calendar__viewport {
    /* overflow:clip + clip-margin lässt Rand-Überstände (scale+outline beim
       aktiven Sonntag/Montag) sichtbar, schneidet aber weiterhin den
       Nachbarmonat des Tracks ab. Browser-Support 2022+ (Safari 16.4+). */
    overflow: clip;
    overflow-clip-margin: 6px;
    touch-action: pan-y pinch-zoom;
    min-width: 0;
}
.gallery-calendar__track {
    display: flex;
    transition: transform .25s ease;
    will-change: transform;
}
.gallery-calendar__month {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
}
.gallery-calendar__title {
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 10px;
    letter-spacing: .02em;
    color: var(--page-text, inherit);
}
.gallery-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    font-size: .72rem;
    color: #999;
    text-align: center;
    margin-bottom: 4px;
}
.gallery-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.gallery-calendar__pad { aspect-ratio: 1; min-width: 0; }

/* Tag-Zelle: füllt die Grid-Spalte (width:100%), aspect-ratio macht den
   Kreis. Kein min-height/min-width — sonst kann die Zelle größer als die
   Spalte werden und seitlich aus dem viewport ragen (Mo/So-Clipping). */
.gallery-calendar__day {
    position: relative;       /* Anker für ::before-Ring (has-story) */
    width: 100%;
    aspect-ratio: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    border-radius: 50%;
    padding: 0;
    font-family: inherit;
}
.gallery-calendar__day.has-photos {
    color: #fff;
    cursor: pointer;
    /* Heatmap: Deckkraft = min(c/7, 1). 1 Bild ≈ 14%, 7+ Bilder = 100%. */
    --opacity: min(calc(var(--c, 0) / 7), 1);
    background-color: hsla(210, 80%, 48%, var(--opacity));
    transition: transform .12s, box-shadow .12s;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
/* Aktiv-State: voller schwarzer Hintergrund, kein Ring, kein scale.
   Effekt bleibt zu 100% innerhalb der Zelle → kein Clipping. */
.gallery-calendar__day.has-photos[aria-pressed="true"],
.gallery-calendar__day.has-photos:focus-visible {
    background-color: #000;
}

/* has-story = es gibt einen Tagebuch-Eintrag für diesen Tag.
   Ring sitzt INNEN im Kreis, in der Page-Background-Farbe → visuell
   wirkt es wie ein Donut: außen Heatmap-Farbe, dann schmaler Ring in
   Page-bg, dann wieder Heatmap-Farbe innen. Kein Größenverlust am
   Heatmap-Kreis, kein Clipping (alles innerhalb der Zelle).
   Geometrie: ::before mit inset:2px (2 px Heatmap-Schale außen),
   border:2px solid var(--page-bg) (Ring 2-4 px tief). */
.gallery-calendar__day.has-story { cursor: pointer; }
.gallery-calendar__day.has-story::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 2px solid var(--page-bg, #fff);
    pointer-events: none;
    box-sizing: border-box;
}
/* Tag ohne Bilder, nur Story: heller-grauer Kreis (Page-bg-Ring zeigt
   sich darin als heller Donut-Streifen). */
.gallery-calendar__day.has-story:not(.has-photos) {
    background-color: #d8d8d8;
    color: #555;
}
/* Aktiv: schwarzer Fill — Page-bg-Ring bleibt als heller Donut sichtbar */
.gallery-calendar__day.has-story[aria-pressed="true"] {
    background-color: #000;
    color: #fff;
}

/* Monats-Navigation: Pfeile links/rechts vom Monats-Viewport */
.gallery-calendar__nav-btn {
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, opacity .15s;
    flex: 0 0 auto;
}
.gallery-calendar__nav-btn:hover:not(:disabled) {
    background: rgba(0,0,0,.06);
    color: #000;
}
.gallery-calendar__nav-btn:disabled { opacity: .2; cursor: default; }

@media (min-width: 640px) {
    .gallery-calendar { max-width: 380px; }
    .gallery-calendar.has-nav { max-width: 440px; }
    .gallery-calendar__day { font-size: .85rem; }
    .gallery-calendar__nav-btn { width: 36px; height: 36px; }
}

/* Desktop ≥720 px: bei ≤2 Monaten Galerie zeigt JS sie nebeneinander
   (Klasse .is-multi vom JS gesetzt). Bei ≥3 Monaten bleibt klassisches
   1-Monats-Karussell, dann aber mit größerer Schrift + max-width. */
@media (min-width: 720px) {
    .gallery-calendar          { max-width: 460px; }
    .gallery-calendar.has-nav  { max-width: 540px; }
    .gallery-calendar__day     { font-size: 1rem; }
    .gallery-calendar.is-multi,
    .gallery-calendar.is-multi.has-nav { max-width: 880px; }
    .gallery-calendar.is-multi .gallery-calendar__month { flex: 0 0 50%; padding: 0 16px; }
}

/* Masonry via CSS columns — 6 Spalten desktop, responsive Reduktion. */
.gallery-grid {
    column-count: 6;
    column-gap: var(--gallery-gap);
}

@media (max-width: 1400px) { .gallery-grid { column-count: 5; } }
@media (max-width: 1100px) { .gallery-grid { column-count: 4; } }
@media (max-width:  860px) { .gallery-grid { column-count: 3; } }
@media (max-width:  600px) { .gallery-grid { column-count: 2; } }
@media (max-width:  400px) { .gallery-grid { column-count: 1; } }

.gallery-item {
    position: relative;
    display: block;
    margin: 0 0 var(--gallery-gap);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    line-height: 0;
    cursor: zoom-in;
}

.gallery-item__media {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden;
    border-radius: 20px;
    background: #f0eee9;
}

.gallery-item__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* Live Photo: stummer Bewegungs-Clip über dem Standbild.
   Standardmäßig unsichtbar, wird per JS (Hover bzw. Viewport) eingeblendet.
   pointer-events: none → Klick geht durch zum <a> (Lightbox). */
.gallery-item__live {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
/* gilt für Live Photos UND Bunny-Videos (beide nutzen .gallery-item__live
   als stummen Hover-/Viewport-Clip) */
.gallery-item.is-playing .gallery-item__live { opacity: 1; }

/* LIVE-Hinweis (oben rechts, weiß) — reine Affordance, ohne Funktion.
   Auf Desktop wie Mobile sichtbar; bleibt auch beim Abspielen stehen. */
.gallery-item__live-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .32);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    pointer-events: none;
    transition: opacity .25s ease;
}
.gallery-item__live-badge::before {
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    /* konzentrische "Live"-Anmutung: Ring (border) + Mittelpunkt */
    background: radial-gradient(circle, currentColor 0 2px, transparent 2.6px);
}
/* Video-Tile (Bunny): Eck-Icon oben rechts, analog LIVE-Badge — signalisiert
   „Video-Inhalt" (nicht „Player"). Das eigentliche Abspielen passiert in der
   Lightbox; im Grid läuft bei Hover/Viewport ein stummer Loop. Bleibt sichtbar. */
.gallery-item__video-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .32);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    pointer-events: none;
}
.gallery-item__video-badge::before {
    content: "";
    flex: 0 0 auto;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
}

/* Redaktions-Preview: Checkbox „auf Live behalten" direkt im LIVE-Badge,
   rechts neben dem Text. Nur für eingeloggte Redakteure serverseitig gerendert.
   Das Pill selbst nimmt keine Klicks (pointer-events:none) — nur die Checkbox. */
.gallery-item__live-badge.has-keeplive {
    pointer-events: none;
    gap: 5px;
}
.gallery-item__keeplive {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: opacity .2s ease;
}
.gallery-item__keeplive input {
    width: 14px;
    height: 14px;
    margin: 0;
    display: block;
    cursor: pointer;
    accent-color: #2bb673;
}
.gallery-item__keeplive.is-saving { opacity: .5; }
.gallery-item__keeplive.is-error  input { outline: 2px solid #d63638; }
/* Editor-Preview: Video-Badge 4px niedriger (war zu hoch) — knapper als das
   LIVE-Badge, Public unverändert. */
.gallery-grid.is-editor-preview .gallery-item__video-badge {
    min-height: 16px;
    padding-top: 1px;
    padding-bottom: 1px;
}

/* Live Photo in der PhotoSwipe-Lightbox: Clip-Overlay über dem Bild.
   z-index unter der Toolbar (.pswp__top-bar ~ 10), damit Close/Share/EXIF
   klickbar bleiben. */
.pswp-live-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 9;
    /* deckt das (formatfüllend skalierte) PhotoSwipe-Poster vollständig ab —
       sonst schaut es in den Contain-Letterbox-Rändern durch. */
    background: #000;
    cursor: pointer;
}
/* Bunny-Video-Player in der Lightbox (mit nativen Controls). */
.pswp-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 9;
    background: #000;
}
/* LIVE-Toolbar-Button + Klassen rund um „live playing" wurden entfernt —
   Live Photos starten jetzt automatisch beim Slide-Wechsel (siehe playLive
   in gallery-lightbox.js). Stummschaltung läuft über den Audio-Button
   wurde komplett entfernt — Ton spielt einfach mit (oder fällt auf muted */

/* Hover: transparenter Gradient (20% schwarz oben → 0% unten),
   exakt auf das Bild beschränkt — Caption darunter bleibt unbeeinflusst.
   NUR auf Geräten mit echter Hover-Fähigkeit (Desktop-Maus). Auf Touch
   würde `:hover` beim Tap feuern und HDR-Rendering deaktivieren — Safari
   schaltet HDR ab, sobald ein Overlay-Layer mit Opacity-Transition über
   einem HDR-`<img>` sitzt. */
@media (hover: hover) {
    .gallery-item__media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,0));
        opacity: 0;
        transition: opacity .25s ease;
        pointer-events: none;
    }
    .gallery-item:hover .gallery-item__media::after { opacity: 1; }
}

/* Touch: Tap-Highlight-Overlay von Safari unterdrücken (würde sonst kurz
   semi-transparent über den `<img>` flackern und HDR deaktivieren). */
.gallery-item, .gallery-item__media { -webkit-tap-highlight-color: transparent; }
.gallery-item__media img { -webkit-touch-callout: none; }

/* Caption-Block unter dem Bild — Farben binden an --page-text (auto-
   Kontrast aus header.php). Fallback bleibt die Original-Palette. */
.gallery-item__caption {
    display: block;
    padding: 8px 4px 4px;
    line-height: 1.35;
    color: var(--page-text, #2a2c2d);
    font-size: .85rem;
}

.gallery-item__title {
    display: block;
    font-weight: 500;
    font-size: .92rem;
}

.gallery-item__headline {
    display: block;
    margin-top: 2px;
    color: var(--page-text-muted, #555);
}

/* Wenn nur Bildbeschreibung vorhanden (kein Titel), Beschreibung als primärer Text */
.gallery-item__caption .gallery-item__headline:first-child {
    color: var(--page-text, #2a2c2d);
    font-weight: 500;
}

.gallery-empty {
    text-align: center;
    padding: 4em 1em;
    color: #888;
}

/* --- Galerie-Dialoge (native <dialog>) --- */
.gallery-dialog {
    border: none;
    border-radius: 16px;
    padding: 28px 32px 32px;
    max-width: 480px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px); /* dynamische Viewport-Höhe (mobile Toolbars) */
    overflow: auto;                  /* langer EXIF-Inhalt scrollt im Dialog statt abgeschnitten */
    box-sizing: border-box;
    background: #fff;
    color: #2a2c2d;
    box-shadow: 0 24px 64px rgba(0,0,0,.3);
    font-family: inherit;
}
/* Mobile: Dialog als Bottom-Sheet-Drawer — full width, von unten, abgerundete
   obere Ecken, iPhone-Home-Indicator (safe-area) respektiert. ESC + ×-Button
   schließen wie gehabt, das native <dialog>-Verhalten bleibt unverändert. */
@media (max-width: 600px) {
    .gallery-dialog {
        /* Position: am unteren Rand andocken, volle Breite */
        inset: auto 0 0 0;
        margin: 0;
        width: 100%;
        max-width: none;
        /* Höhe: max 85% der dyn. Viewport-Höhe, damit oben noch ein Streifen
           Foto sichtbar bleibt; Inhalt scrollt im Drawer. */
        max-height: 85dvh;
        /* Form: oben rund, unten kantig (sitzt am Bildschirm-Rand) */
        border-radius: 18px 18px 0 0;
        /* Padding: oben 40px lassen Platz fürs 44px-Handle + Close-Button,
           damit der Titel nicht unter den Handle-Bar rutscht.
           Unten env() für iPhone-Home-Indicator. */
        padding: 40px 18px max(22px, env(safe-area-inset-bottom));
        /* dezenter Schatten nach oben */
        box-shadow: 0 -12px 40px rgba(0,0,0,.35);
    }
    /* Drag-Handle als echtes DOM-Element (.gallery-dialog__handle):
       füllt die oberen 44px des Drawers, fängt Drag-to-dismiss ab.
       touch-action:none unterbindet iOS-Scroll-Stealing in genau dieser
       Zone — der Rest des Drawers (EXIF-Liste) bleibt scrollbar. */
    .gallery-dialog__handle {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 44px;
        touch-action: none;
        cursor: grab;
        z-index: 2;
    }
    .gallery-dialog__handle::before {
        content: "";
        position: absolute;
        top: 8px; left: 50%;
        transform: translateX(-50%);
        width: 40px; height: 4px;
        border-radius: 2px;
        background: rgba(0,0,0,.22);
    }
    .gallery-dialog__handle:active { cursor: grabbing; }
    .gallery-dialog__title { font-size: 1.05rem; margin: .2em 0 .8em; }
    .gallery-dialog__close { padding: 8px 12px; } /* größere Tap-Fläche */
    /* EXIF-Liste darf den restlichen Drawer-Höhenrahmen nutzen */
    .gallery-dialog__exif { max-height: none; }

    /* Slide-in/out-Animation — nutzt @starting-style + allow-discrete,
       damit der display-Wechsel mit animiert wird. iOS Safari 17.5+
       und Chrome 117+ unterstützen das; ältere Browser sehen einfach
       das Auftauchen ohne Bewegung (kein Bruch). */
    .gallery-dialog {
        transform: translateY(100%);
        opacity: 0;
        /* Transform + Opacity gleich lang, sonst fadet das Bild weg bevor
           es sichtbar gleitet (Schleier-Effekt). 700ms ist für Drawer in
           Bottom-Sheet-Größe deutlich spürbar, ohne träge zu wirken. */
        transition:
            transform 700ms cubic-bezier(.16, 1, .3, 1),
            opacity  700ms cubic-bezier(.16, 1, .3, 1),
            overlay  700ms allow-discrete,
            display  700ms allow-discrete;
    }
    .gallery-dialog[open] {
        transform: translateY(0);
        opacity: 1;
    }
    @starting-style {
        .gallery-dialog[open] {
            transform: translateY(100%);
            opacity: 0;
        }
    }
    .gallery-dialog::backdrop {
        opacity: 0;
        transition: opacity 500ms ease, overlay 700ms allow-discrete, display 700ms allow-discrete;
    }
    .gallery-dialog[open]::backdrop {
        opacity: 1;
    }
    @starting-style {
        .gallery-dialog[open]::backdrop {
            opacity: 0;
        }
    }
}
.gallery-dialog::backdrop {
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
}
/* App-Feel: weder iOS-Tap-Highlight noch Focus-Ring auf den Dialog-
   Bedienelementen — der blaue Markierungsrahmen nach dem Tap zerstört
   das native Drawer-Gefühl. */
.gallery-dialog,
.gallery-dialog * {
    -webkit-tap-highlight-color: transparent;
}
.gallery-dialog button:focus,
.gallery-dialog button:focus-visible {
    outline: none;
}
.gallery-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
    color: #888;
    border-radius: 8px;
    z-index: 3; /* überm Handle (z=2), damit Tap auf × nicht im Handle landet */
}
.gallery-dialog__close:hover { background: #f0eee9; color: #2a2c2d; }
.gallery-dialog__title {
    margin: 0 0 1em;
    font-size: 1.15rem;
    font-weight: 500;
}

/* EXIF-Liste */
.gallery-dialog__exif {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4em 1.2em;
    margin: 0;
    font-size: .92rem;
    line-height: 1.45;
    max-height: 60vh;        /* viele Metadaten → scrollbar statt überlaufend */
    overflow-y: auto;
    background: rgba(0, 0, 0, .06); /* dezente graue Einfassung beider Sektionen */
    border-radius: 12px;
    padding: 16px 18px;
}
.gallery-dialog__exif dt { color: #888; word-break: break-word; }
.gallery-dialog__exif dd { margin: 0; display: flex; align-items: center; gap: 7px; }
/* Standort-Zeile umbricht oft mehrzeilig (Koordinaten + Buttons + Ortsname)
   → Pin-Icon oben ausrichten statt vertikal mittig. Kleiner margin-top am Icon
   gleicht den Line-Height-Abstand aus, damit es auf Höhe der ersten Textzeile sitzt. */
.gallery-dialog__exif dd.is-gps { align-items: flex-start; }
.gallery-dialog__exif dd.is-gps .gallery-dialog__exif-icon { margin-top: 3px; }
.gallery-dialog__exif-val { min-width: 0; word-break: break-word; }
/* Trennlinie zwischen den Sektionen (volle Breite, ohne Label) */
.gallery-dialog__exif .gallery-dialog__exif-sep {
    grid-column: 1 / -1;
    margin: .5em 0;
    border-top: 1px solid rgba(0, 0, 0, .12);
}
.gallery-dialog__exif .gallery-dialog__exif-sep + dd { display: none; } /* leere Wert-Zelle der Trennlinie */
/* Feldname mit Icon-Slot + Tooltip-Cursor */
.gallery-dialog__exif dd a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Feld-Icons: SVG via mask-image in currentColor eingefärbt (einheitlich, dezent) */
.gallery-dialog__exif-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #aaa;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
}
.gallery-dialog__exif-icon[data-icon="date-time"]        { -webkit-mask-image: url(../icons/exif/date-time.svg);        mask-image: url(../icons/exif/date-time.svg); }
.gallery-dialog__exif-icon[data-icon="dimension"]        { -webkit-mask-image: url(../icons/exif/dimension.svg);        mask-image: url(../icons/exif/dimension.svg); }
.gallery-dialog__exif-icon[data-icon="resolution"]       { -webkit-mask-image: url(../icons/exif/resolution.svg);       mask-image: url(../icons/exif/resolution.svg); }
.gallery-dialog__exif-icon[data-icon="orientation"]      { -webkit-mask-image: url(../icons/exif/orientation.svg);      mask-image: url(../icons/exif/orientation.svg); }
.gallery-dialog__exif-icon[data-icon="location"]         { -webkit-mask-image: url(../icons/exif/location.svg);         mask-image: url(../icons/exif/location.svg); }
.gallery-dialog__exif-icon[data-icon="make"]             { -webkit-mask-image: url(../icons/exif/make.svg);             mask-image: url(../icons/exif/make.svg); }
.gallery-dialog__exif-icon[data-icon="software"]         { -webkit-mask-image: url(../icons/exif/software.svg);         mask-image: url(../icons/exif/software.svg); }
.gallery-dialog__exif-icon[data-icon="aperture"]         { -webkit-mask-image: url(../icons/exif/aperture.svg);         mask-image: url(../icons/exif/aperture.svg); }
.gallery-dialog__exif-icon[data-icon="exposure"]         { -webkit-mask-image: url(../icons/exif/exposure.svg);         mask-image: url(../icons/exif/exposure.svg); }
.gallery-dialog__exif-icon[data-icon="iso"]              { -webkit-mask-image: url(../icons/exif/iso.svg);              mask-image: url(../icons/exif/iso.svg); }
.gallery-dialog__exif-icon[data-icon="brightness-value"] { -webkit-mask-image: url(../icons/exif/brightness-value.svg); mask-image: url(../icons/exif/brightness-value.svg); }
.gallery-dialog__exif-icon[data-icon="exposure-program"] { -webkit-mask-image: url(../icons/exif/exposure-program.svg); mask-image: url(../icons/exif/exposure-program.svg); }
.gallery-dialog__exif-icon[data-icon="metering-mode"]    { -webkit-mask-image: url(../icons/exif/metering-mode.svg);    mask-image: url(../icons/exif/metering-mode.svg); }
.gallery-dialog__exif-icon[data-icon="flash"]            { -webkit-mask-image: url(../icons/exif/flash.svg);            mask-image: url(../icons/exif/flash.svg); }
.gallery-dialog__exif-icon[data-icon="focal-length"]     { -webkit-mask-image: url(../icons/exif/focal-length.svg);     mask-image: url(../icons/exif/focal-length.svg); }

/* Share-Block */
.gallery-dialog__share-title {
    margin: 0 0 .3em;
    font-weight: 500;
    font-size: 1rem;
}
.gallery-dialog__share-text {
    margin: 0 0 1.2em;
    color: #555;
    font-size: .9rem;
    white-space: pre-line;
}
.gallery-dialog__share-url {
    display: flex;
    gap: 8px;
    margin-bottom: 1em;
}
.gallery-dialog__share-url input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: .9rem;
    background: #f9f8f6;
}
.gallery-dialog__share .button {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    font-size: .9rem;
}
.gallery-dialog__share .button-primary {
    background: #2a2c2d;
    color: #fff;
    border-color: #2a2c2d;
    width: 100%;
}
.gallery-dialog__share-hint {
    margin: .8em 0 0;
    font-size: .85rem;
    color: #32c58b;
    min-height: 1.2em;
}

/* Close + „Mehr": runder, weiß-transparenter Grund mit SCHWARZEM Icon → auf
   jedem Bild lesbar, große Tippfläche. Quadratische Box (44×44) → echter Kreis
   (50×60-Default ergäbe ein hochkant-Oval). Icon zentriert (überschreibt
   PhotoSwipes absolute Icon-Positionierung). */
.pswp__top-bar .pswp__button--close,
.pswp__top-bar .pswp__button--gallery-more,
.pswp__top-bar .pswp__button--gallery-map {
    width: 44px;
    height: 44px;
    margin: 8px 4px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.82);
    border-radius: 50%;
    color: #1a1a1a;                  /* schwarze Stroke-Icons (currentColor) */
}
.pswp__top-bar .pswp__button--close:hover,
.pswp__top-bar .pswp__button--gallery-more:hover,
.pswp__top-bar .pswp__button--gallery-map:hover { background: rgba(255,255,255,.96); }
.pswp__top-bar .pswp__button--close .pswp__icn,
.pswp__top-bar .pswp__button--gallery-more svg,
.pswp__top-bar .pswp__button--gallery-map svg {
    position: static;                /* statt PhotoSwipes absolutem top/left */
    width: 22px;
    height: 22px;
    margin: 0;
}
/* Natives Close-X dunkel statt weiß (sonst auf weißem Grund unsichtbar). */
.pswp__top-bar .pswp__button--close {
    --pswp-icon-color: #1a1a1a;
    --pswp-icon-color-secondary: transparent;
}


/* Gestapeltes „Mehr"-Menü (EXIF / Teilen / Download) — oben rechts unter der Toolbar. */
.gallery-toolbar-menu {
    position: absolute;
    top: 52px;
    right: 6px;
    z-index: 11;                 /* über der Toolbar (.pswp__top-bar ~10) */
    background: rgba(22,22,22,.94);
    border-radius: 12px;
    padding: 6px;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 10px 36px rgba(0,0,0,.45);
}
.gallery-toolbar-menu[hidden] { display: none; }
.gallery-toolbar-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font: inherit;
    font-size: .95rem;
    text-align: left;
    cursor: pointer;
}
.gallery-toolbar-menu button:hover,
.gallery-toolbar-menu button:focus-visible { background: rgba(255,255,255,.14); }
.gallery-toolbar-menu button svg { width: 20px; height: 20px; flex: none; }

/* --- Galerie-Tile im Teaser-Grid (Cover-Bild) --- */
/* Dunkler Fallback-BG für Tiles ohne (geladenes) Cover. */
.tile-galerie .tile-visual {
    background: #2a2c2d;
}
.tile-galerie .tile-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Galerie-Tiles erben NICHT das 35vw-min-height der article-Hero-Tiles —
   ein Galerie-Cover hat kein definiertes Hero-Aspect, 525px-leerer-Block bei
   tile-6 ohne Cover wirkt überdimensioniert. Statt 35vw nur die globale
   tile-min-height (240px) als Untergrenze; mit Cover wächst die Tile über
   das object-fit:cover auf die natürliche Größe des Containers. */
.tile-galerie.tile-3 .tile-visual,
.tile-galerie.tile-4 .tile-visual,
.tile-galerie.tile-5 .tile-visual,
.tile-galerie.tile-6 .tile-visual {
    min-height: var(--tile-min-height);
}

/* --- Liquid-Button Titel auf Galerie-Tiles ---
   Glasartige Pille, mittig auf dem Cover, Icon links neben dem Titel.
   Ersetzt das klassische tile-text-container/tile-caption-Pattern für
   alle Galerie-Größen — auch tile-1/tile-2.
   --pill-bg / --pill-color für künftiges Theming pro Tile. */
.tile-galerie .tile-galerie__pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    font-family: 'MatterSQ', Arial, sans-serif;
    font-weight: 500;
    font-size: clamp(0.95rem, 1.4vw, 1.25rem);
    letter-spacing: -0.01em;
    line-height: 1.1;
    white-space: nowrap;
    max-width: calc(100% - 32px);
    pointer-events: none; /* tile-link bleibt klickbar */
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.tile-galerie:hover .tile-galerie__pill {
    background: rgba(255, 255, 255, 0.32);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    transform: translate(-50%, -52%);
}
.tile-galerie__pill-icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: currentColor;
}
.tile-galerie__pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 3D-Karte: „3D"-Button im EXIF-Dialog + Vollbild-Overlay (Cesium) --- */
/* Icon-only-Buttons in der Standort-Zeile (Kopieren + 3D-Toggle).
   Klein, rund, flach — Stroke-SVG via currentColor. */
.gallery-dialog__map3d,
.gallery-dialog__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid rgba(0,0,0,.25);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s, color .15s, border-color .15s;
}
.gallery-dialog__map3d svg,
.gallery-dialog__copy svg { flex: none; }
.gallery-dialog__map3d:hover,
.gallery-dialog__copy:hover { background: rgba(0,0,0,.06); }
/* Aktiv: 3D-Karte ist aufgeklappt → gefüllt dunkel. */
.gallery-dialog__map3d.is-active {
    background: #1a1a1a; color: #fff; border-color: #1a1a1a;
}
/* Kurzes Erfolgs-Feedback nach Kopieren. */
.gallery-dialog__copy.is-success {
    background: #2e8b57; color: #fff; border-color: #2e8b57;
}

/* 3D-Karte IM Dialog: eingeklappt vorgeladen (max-height:0, aber gerendert, damit
   Cesium die Größe kennt), „3D" klappt sie auf. */
.gallery-dialog__map3d-wrap {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.gallery-dialog__map3d-wrap.is-open { max-height: 60vh; margin-bottom: 12px; }
.gallery-dialog__map3d-canvas {
    width: 100%;
    height: 56vh;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
}
.gallery-dialog__map3d-loading {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #fff; font: 13px/1.4 system-ui, sans-serif;
    background: rgba(0,0,0,.5); padding: 6px 12px; border-radius: 8px;
}

/* Eigener Map-Drawer (Toolbar-„Karte"-Button öffnet ihn): die Karte ist hier
   das Hauptinhalt-Element, füllt den verfügbaren Platz. Auf Desktop breiter
   als der Standard-Dialog, weil 480px für eine 3D-Karte zu eng wäre. */
.gallery-dialog--map { max-width: 820px; }
.gallery-dialog--map .gallery-dialog__map3d-wrap.is-open {
    max-height: none;        /* kein Auf-/Zuklappen, Karte ist von Anfang an offen */
    margin-bottom: 0;
    height: 65vh;
}
.gallery-dialog--map .gallery-dialog__map3d-canvas { height: 100%; }
@media (max-width: 600px) {
    /* Mobile Drawer: Karte nimmt fast den ganzen Drawer (85dvh) ein,
       abzüglich Header + Padding. dvh statt vh, damit iOS-Adressleiste
       nicht reinpfuscht. */
    .gallery-dialog--map .gallery-dialog__map3d-wrap.is-open { height: 68dvh; }
}

/* === Story-Tile (Tagebuch-Eintrag) im Galerie-Grid =====================
   Fügt sich als 1/6-Tile ins Masonry-Grid ein, optisch erkennbar durch
   STORY-Badge oben + prominentes Link-Button unten. Klick auf den Button
   führt zum vollständigen Artikel. */
.gallery-item--story {
    display: block;
    text-decoration: none;
    color: inherit;
}
.gallery-item--story .gallery-item__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* Gleiche Eckenrundung wie reguläre Foto-Tiles (.gallery-item__media). */
    border-radius: 20px;
    background: #1c1c1c;
    line-height: 0;
}
.gallery-item--story .gallery-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-item__story-placeholder {
    position: absolute;
    inset: 0;
    background: #000;
}
/* STORY-Badge übernimmt Optik + Position der LIVE/VIDEO-Badges:
   oben rechts, transparenter Hintergrund mit Blur, 12px Schrift. */
.gallery-item__story-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .32);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    pointer-events: none;
}
.gallery-item--story .gallery-item__caption {
    padding-top: 6px;
}
.gallery-item--story .gallery-item__title {
    font-weight: 500;
}
/* Link-Button "Tagebuch": Overlay zentriert über dem Featured Image.
   Kein eigener Klick-Handler — der Pill sitzt INNERHALB des <a class="
   gallery-item">, ein Klick navigiert via Wrapper. pointer-events:none
   würde den Hover-Effekt sterben lassen — wir lassen den Pill klickbar
   und delegieren visuell. */
/* Liquid-Glass-Pille, analog .tile-galerie__pill: backdrop-filter blur+
   saturate, halbtransparent weißer BG, dezenter Border + Inset-Highlights,
   Hover-Lift. Color kann per inline-style auf die Themenfarbe gezogen
   werden (PHP setzt nur color:, nicht background — sonst kein Glas). */
.gallery-item__story-link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    font-family: 'MatterSQ', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.gallery-item--story:hover .gallery-item__story-link {
    background: rgba(255, 255, 255, 0.32);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    transform: translate(-50%, -52%);
}
.gallery-item__story-link svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
}