/*
 * LANAKILA Medienpool - Raster und Grossansicht.
 *
 * Bewusst genuegsam: Das Theme bringt sein eigenes Aussehen mit, hier steht
 * nur, was die Galerie selbst braucht. Alle Namen beginnen mit "lkm-", damit
 * nichts mit dem Theme oder Elementor kollidiert.
 */

.lkm-galerie {
    display: grid;
    /* Die Spaltenzahl kommt als --lkm-cols aus dem Shortcode. Das Minimum von
       0 verhindert, dass ein breites Bild die Spalte aufblaeht. */
    grid-template-columns: repeat(var(--lkm-cols, 4), minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 1.5rem;
}

/* Schmale Fenster: erst weniger Spalten, dann zwei. Mehr als zwei Stufen
   braucht es nicht - darunter wird jede Kachel ohnehin unleserlich klein. */
@media (max-width: 992px) {
    .lkm-galerie { grid-template-columns: repeat(min(var(--lkm-cols, 4), 3), minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .lkm-galerie { grid-template-columns: repeat(min(var(--lkm-cols, 4), 2), minmax(0, 1fr)); gap: 6px; }
}

.lkm-kachel {
    position: relative;
    /* Ein Verweis ist von Haus aus inline - als Kachel muss er ein Block
       sein, sonst greifen Hoehe und Seitenverhaeltnis nicht. */
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #f1f1f4;
    text-decoration: none;
    /* Der Unterstrich des Themes hat an einem Bild nichts verloren. */
    box-shadow: none;
    /* Ohne Masse aus der Middleware: ein ruhiger Vorgabewert, damit das
       Raster beim Laden nicht springt. */
    aspect-ratio: 4 / 3;
    cursor: pointer;
}

/* Ohne Ansichtsfassung ist die Kachel ein span, kein Verweis. */
span.lkm-kachel { cursor: default; }

/* crop="1": alle Kacheln quadratisch. Das Bild liegt ohnehin mit
   object-fit: cover darin, wird also mittig beschnitten statt verzerrt. */
.lkm-galerie.lkm-quadrat .lkm-kachel { aspect-ratio: 1 / 1; }

/*
 * Das Bild fuellt die Kachel immer ganz aus, sein Mittelpunkt liegt in der
 * Mitte der Kachel.
 *
 * Absolut positioniert und ueber `inset: 0` aufgespannt - nicht nur mit
 * width/height. Fast jedes Theme bringt eine Regel wie
 * `img { height: auto !important; }` mit; gegen ein `!important` kaeme eine
 * eigene Hoehenangabe nicht an, gegen die vier Kanten eines absolut
 * positionierten Elements schon. Die Kachel selbst ist `position: relative`
 * und beschneidet per `overflow: hidden`.
 *
 * `object-position` steht ausdruecklich da, obwohl "center" ohnehin die
 * Vorgabe ist: Auch die kann ein Theme verstellen.
 */
.lkm-galerie .lkm-kachel > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform .3s ease;
}

.lkm-galerie .lkm-kachel:hover > img,
.lkm-galerie .lkm-kachel:focus-visible > img { transform: scale(1.04); }

.lkm-kachel:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* Das Abspielzeichen auf einem Video - ein reines Dreieck aus Rahmen, damit
   keine Schriftart und kein Bild dafuer geladen werden muss. */
.lkm-play {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
}

.lkm-play::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 15px;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent #fff;
}

.lkm-hinweis { color: #888; }

/* ---------------------------------------------------------------- */
/* Grossansicht                                                      */
/* ---------------------------------------------------------------- */

.lkm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .9);
    padding: 40px 16px;
}

.lkm-overlay[hidden] { display: none !important; }

.lkm-overlay img,
.lkm-overlay video {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

.lkm-knopf {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.lkm-knopf:hover { background: rgba(255, 255, 255, .25); }
.lkm-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lkm-zu { top: 12px; right: 12px; }
.lkm-zurueck { left: 12px; top: 50%; margin-top: -22px; }
.lkm-weiter { right: 12px; top: 50%; margin-top: -22px; }

.lkm-zaehler {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
}

/* Wer Bewegung nicht mag, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    .lkm-galerie .lkm-kachel > img { transition: none; }
    .lkm-galerie .lkm-kachel:hover > img,
    .lkm-galerie .lkm-kachel:focus-visible > img { transform: none; }
}