/* ══════════════════════════════════════════════════════════════
   EVENT-REFERENZEN MOSAIK (Startseite) — inc/refs-mosaic.php
   4-spaltiges Bento-Raster, quadratische Rasterzellen. Kachelgrößen:
   big 2×2 · wide 2×1 · tall 1×2 · sq 1×1. Die Zeilenhöhe leitet sich aus
   der Containerbreite ab, damit die Zellen quadratisch bleiben.
   ══════════════════════════════════════════════════════════════ */

.ev-mosaic-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.ev-mosaic-head .section-title {
    margin-bottom: 0;
}

.ev-mosaic-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding-bottom: 0.4rem;
}

.ev-mosaic-hint {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.ev-mosaic {
    --mosaic-cols: 4;
    --mosaic-gap: 1rem;
    --mosaic-row: calc((min(100vw, var(--container-width)) - 2 * var(--container-padding) - (var(--mosaic-cols) - 1) * var(--mosaic-gap)) / var(--mosaic-cols));
    display: grid;
    grid-template-columns: repeat(var(--mosaic-cols), minmax(0, 1fr));
    grid-auto-rows: var(--mosaic-row);
    grid-auto-flow: row dense;
    gap: var(--mosaic-gap);
}

.ev-tile--big  { grid-column: span 2; grid-row: span 2; }
.ev-tile--wide { grid-column: span 2; grid-row: span 1; }
.ev-tile--tall { grid-column: span 1; grid-row: span 2; }
.ev-tile--sq   { grid-column: span 1; grid-row: span 1; }

.ev-tile {
    position: relative;
    min-width: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    transform: translateZ(0);   /* own compositing layer → clean clip on rounded corners */
    transition: border-color var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
}

.ev-tile:hover {
    border-color: var(--border-medium);
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

/* Staggered entrance per tile once it scrolls into view (JS adds .is-inview).
   --n is the tile's DOM position; the delay cycles per row so a whole viewport
   of tiles never waits on the last one. */
.ev-mosaic.is-enhanced .ev-tile {
    opacity: 0;
    transform: translateY(28px) translateZ(0);
}

.ev-mosaic.is-enhanced .ev-tile.is-inview {
    animation: evTileIn 0.7s var(--ease-out) backwards;
    animation-delay: calc(mod(var(--n, 1) - 1, 4) * 90ms);
    opacity: 1;
    transform: translateZ(0);
}

.ev-mosaic.is-enhanced .ev-tile.is-inview:hover {
    transform: translateY(-4px) translateZ(0);
}

@keyframes evTileIn {
    from { opacity: 0; transform: translateY(28px) translateZ(0); }
    to   { opacity: 1; transform: translateZ(0); }
}

.ev-tile-link {
    position: absolute;
    inset: 0;
    z-index: 6;
}

.ev-tile-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: -3px;
    border-radius: var(--radius-lg);
}

.ev-tile-media {
    position: absolute;
    inset: 0;
    background: var(--bg-elevated);
}

.ev-img,
.ev-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ev-video--dim {
    filter: brightness(0.7);
}

/* Slow drift on single images while motion is allowed; stacks move by
   themselves (transform conflict), videos have their own motion. */
.ev-tile .ev-img:not(.ev-stack-img) {
    transition: transform 1.2s var(--ease-out);
}

.ev-tile:hover .ev-img:not(.ev-stack-img) {
    transform: scale(1.05);
}

/* Bildstapel: Aufnahmen eines Events blenden vertikal durch */
.ev-stack {
    position: absolute;
    inset: 0;
}

.ev-stack-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
    transform: translateY(6%);
    transition: opacity 0.9s var(--ease-out), transform 1.4s var(--ease-out);
}

.ev-stack-img.is-active {
    opacity: 1;
    z-index: 3;
    transform: translateY(0);
}

.ev-stack-img.is-leaving {
    opacity: 1;
    z-index: 2;
    transform: translateY(-6%);
}

.ev-stack-dots {
    position: absolute;
    right: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    pointer-events: none;
}

.ev-stack-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: background var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
}

.ev-stack-dots i.is-active {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.35);
}

/* Scrim: oben leicht für den Chip, unten kräftig für die Bildunterschrift */
.ev-tile-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 22%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 80%, rgba(0, 0, 0, 0.78) 100%);
}

.ev-chip {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 4;
    padding: 0.3rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(10, 10, 10, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: calc(100% - 2rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 3rem 1.25rem 1.1rem;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.45) 42%,
        rgba(0, 0, 0, 0.72) 72%,
        rgba(0, 0, 0, 0.82) 100%);
}

.ev-caption h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    margin-bottom: 0.15rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.ev-caption p {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    max-width: 44ch;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.ev-tile--big .ev-caption { padding: 4rem 1.75rem 1.5rem; }
.ev-tile--big .ev-caption h4 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.ev-tile--big .ev-caption p  { font-size: 0.9375rem; }

.ev-tile--wide .ev-caption h4 { font-size: 1.125rem; }

/* 1×1: description limited to two lines so it never eats the picture */
.ev-tile--sq .ev-caption p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hover-Pfeil oben rechts */
.ev-hover-arrow {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
    pointer-events: none;
}

.ev-hover-arrow svg {
    width: 16px;
    height: 16px;
}

.ev-tile:hover .ev-hover-arrow,
.ev-tile:focus-within .ev-hover-arrow {
    opacity: 1;
    transform: none;
}

/* ── Text-Kachel ─────────────────────────────────────────── */
.ev-tile--text {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 55%),
        var(--bg-surface);
    display: flex;
    align-items: center;
}

.ev-text-inner {
    padding: clamp(1.25rem, 2vw, 1.75rem);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.ev-text-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ev-text-sub {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 46ch;
}

.ev-text-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.ev-text-links .showcase-link {
    position: relative;
    z-index: 7;
    font-size: 0.875rem;
}

/* ── CTA-Kachel ──────────────────────────────────────────── */
.ev-tile--cta {
    background:
        radial-gradient(120% 140% at 85% -20%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%),
        var(--bg-surface);
    border-color: var(--border-medium);
    display: flex;
    align-items: flex-end;
}

.ev-cta-inner {
    position: relative;
    z-index: 2;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.ev-chip--static {
    position: static;
    margin-bottom: 0.5rem;
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.ev-tile--cta h4 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    max-width: 18ch;
}

.ev-tile--cta p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 40ch;
}

.ev-cta-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: 0.5rem;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    transition: background var(--duration-fast) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
}

.ev-cta-arrow svg {
    width: 18px;
    height: 18px;
}

.ev-tile--cta:hover .ev-cta-arrow,
.ev-tile--cta:focus-within .ev-cta-arrow {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

/* ── Bewegungs-Schalter (WCAG 2.2.2): Videos + Bildstapel ─── */
.ev-motion-toggle svg {
    width: 16px;
    height: 16px;
}

.ev-motion-toggle .ev-icon-play { display: none; }
.ev-motion-toggle[aria-pressed="true"] .ev-icon-pause { display: none; }
.ev-motion-toggle[aria-pressed="true"] .ev-icon-play  { display: block; }

/* Medien: kein Drag / keine Auswahl (wie .refs-slide) */
.ev-tile img,
.ev-tile video {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .ev-mosaic {
        --mosaic-cols: 2;
        --mosaic-gap: 0.75rem;
    }

    .ev-mosaic-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .ev-tile--big .ev-caption { padding: 3rem 1.25rem 1.1rem; }
    .ev-tile--big .ev-caption h4 { font-size: 1.125rem; }
    .ev-tile--big .ev-caption p  { font-size: 0.8125rem; }
}

@media (max-width: 560px) {
    /* Einspaltig: keine Rasterzellen mehr, jede Kachel trägt ihr eigenes
       Seitenverhältnis. Text-/CTA-Kachel wachsen mit dem Inhalt. */
    .ev-mosaic {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

    .ev-tile--big,
    .ev-tile--wide,
    .ev-tile--tall,
    .ev-tile--sq {
        grid-column: span 1;
        grid-row: span 1;
    }

    .ev-tile--big,
    .ev-tile--wide { aspect-ratio: 16 / 10; }
    .ev-tile--tall  { aspect-ratio: 4 / 5; }
    .ev-tile--sq    { aspect-ratio: 4 / 3; }

    .ev-tile--text,
    .ev-tile--cta {
        aspect-ratio: auto;
        min-height: 0;
    }

    .ev-caption {
        padding: 2.25rem 1rem 0.9rem;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.62) 20%,
            rgba(0, 0, 0, 0.82) 60%,
            rgba(0, 0, 0, 0.9) 100%);
    }

    .ev-tile--sq .ev-caption p {
        -webkit-line-clamp: 3;
    }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ev-mosaic.is-enhanced .ev-tile {
        opacity: 1;
        transform: translateZ(0);
    }

    .ev-mosaic.is-enhanced .ev-tile.is-inview {
        animation: none;
    }

    .ev-tile,
    .ev-tile:hover {
        transform: translateZ(0);
    }

    .ev-tile .ev-img:not(.ev-stack-img),
    .ev-tile:hover .ev-img:not(.ev-stack-img) {
        transition: none;
        transform: none;
    }

    .ev-stack-img {
        transform: none;
        transition: opacity 0.01ms;
    }
}