/* BCS Media · Chaos Grid — v1.2.3 */

.bcs-cg {
    /* Defaults — Elementor-Controls überschreiben diese Variablen */
    --bcs-cg-edge: 0px;
    --bcs-cg-columns: 5;
    --bcs-cg-gap: 1px;
    --bcs-cg-overlap: 120%;
    --bcs-cg-zoom: 1.85;
    --bcs-cg-move: 70%;
    --bcs-cg-fit: contain;
    --bcs-cg-frame: 7%;
    --bcs-cg-air: 48px;
    --bcs-cg-air-effective: var(--bcs-cg-air);
    --bcs-cg-ttf: cubic-bezier(0.075, 0.82, 0.165, 1);

    /* Luftraum: Überstand + Rotation der Kacheln braucht Platz — sonst Anschnitt am Rand */
    padding: var(--bcs-cg-air-effective) calc(var(--bcs-cg-edge) + var(--bcs-cg-air-effective));
    overflow: hidden;
    /* Eigener Stacking-Context: Kachel-Z-Indizes (bis 30) dürfen NIE über
       Header, Mobil-Menü oder Footer stechen */
    position: relative;
    z-index: 0;
    isolation: isolate;
}

.bcs-cg-grid {
    display: flex;
    flex-flow: row wrap;
    gap: var(--bcs-cg-gap);
}

.bcs-cg-item {
    width: calc((100% - (var(--bcs-cg-gap) * (var(--bcs-cg-columns) - 1))) / var(--bcs-cg-columns) - 0.01px);
    aspect-ratio: 1 / 1;
    position: relative;
    z-index: var(--z, 1);
    cursor: pointer;
    transition: filter 500ms var(--bcs-cg-ttf);
    -webkit-tap-highlight-color: transparent;
}

.bcs-cg-item:not(.is-current):hover,
.bcs-cg-item:not(.is-current):focus-visible {
    filter: brightness(1.08);
}

.bcs-cg-item:focus { outline: none; }
.bcs-cg-item:focus-visible { outline: 2px solid #C7A760; outline-offset: 2px; }

/* a: übergroßer, zentrierter Rahmen — erzeugt die Überlappung der Kacheln */
.bcs-cg-a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--bcs-cg-overlap);
    height: var(--bcs-cg-overlap);
}

/* b: trägt Streuung + zufällige Rotation + Skalierung (und den Klick-Zoom) */
.bcs-cg-b {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translate(var(--tx, 0%), var(--ty, 0%)) scale(var(--scale, 1)) rotate(var(--rot, 0deg));
    transition: transform 500ms var(--bcs-cg-ttf);
}

/* c: trägt die Ausweich-Verschiebung der Nachbarn */
.bcs-cg-c {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 500ms var(--bcs-cg-ttf);
}

/* frame: neutraler Wrapper — wird im Polaroid-Modus zum weißen Rahmen */
.bcs-cg-frame {
    width: 100%;
    height: 100%;
}

.bcs-cg-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--bcs-cg-fit);
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
    transition: filter 500ms var(--bcs-cg-ttf);
}

/* ===== Klick-Zustand: Kachel zoomt nach vorn ===== */

.bcs-cg-item.is-current {
    z-index: 30;
    filter: none;
}

.bcs-cg-item.is-current .bcs-cg-b {
    /* Zoom zentriert in der Zelle — Streuung wird herausgenommen */
    transform: translate(0%, 0%) scale(var(--bcs-cg-zoom)) rotate(0deg);
}

.bcs-cg-item.is-current img {
    filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.5));
}

/* ===== Polaroid-Modus: weißer Rahmen + Licht von links ===== */

.bcs-cg--polaroid .bcs-cg-frame {
    box-sizing: border-box;
    background: #FDFCFA;
    /* Klassischer Polaroid-Rand: unten deutlich dicker */
    padding: var(--bcs-cg-frame) var(--bcs-cg-frame) calc(var(--bcs-cg-frame) * 2.6) var(--bcs-cg-frame);
    /* Licht von links, Bild liegt auf dem Tisch → kurzer, knackiger Schatten nach rechts unten */
    box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.28), 1px 2px 2px rgba(0, 0, 0, 0.14);
    transition: box-shadow 500ms var(--bcs-cg-ttf);
}

.bcs-cg--polaroid .bcs-cg-item img {
    object-fit: cover;
}

.bcs-cg--polaroid .bcs-cg-item.is-current img {
    filter: none;
}

.bcs-cg--polaroid .bcs-cg-item.is-current .bcs-cg-frame {
    box-shadow: 16px 22px 36px rgba(0, 0, 0, 0.35), 4px 6px 12px rgba(0, 0, 0, 0.15);
}

/* ===== Nachbarn weichen aus ===== */

.bcs-cg-item[data-neighbor="t"]  .bcs-cg-c { transform: translate(0%, calc(var(--bcs-cg-move) * -1)); }
.bcs-cg-item[data-neighbor="b"]  .bcs-cg-c { transform: translate(0%, var(--bcs-cg-move)); }
.bcs-cg-item[data-neighbor="l"]  .bcs-cg-c { transform: translate(calc(var(--bcs-cg-move) * -1), 0%); }
.bcs-cg-item[data-neighbor="r"]  .bcs-cg-c { transform: translate(var(--bcs-cg-move), 0%); }
.bcs-cg-item[data-neighbor="tl"] .bcs-cg-c { transform: translate(calc(var(--bcs-cg-move) * -0.5), calc(var(--bcs-cg-move) * -0.5)); }
.bcs-cg-item[data-neighbor="tr"] .bcs-cg-c { transform: translate(calc(var(--bcs-cg-move) * 0.5),  calc(var(--bcs-cg-move) * -0.5)); }
.bcs-cg-item[data-neighbor="bl"] .bcs-cg-c { transform: translate(calc(var(--bcs-cg-move) * -0.5), calc(var(--bcs-cg-move) * 0.5)); }
.bcs-cg-item[data-neighbor="br"] .bcs-cg-c { transform: translate(calc(var(--bcs-cg-move) * 0.5),  calc(var(--bcs-cg-move) * 0.5)); }

/* ===== Responsive Fallbacks (Elementor-Controls können sie überschreiben) ===== */

@media (max-width: 1024px) {
    .bcs-cg { --bcs-cg-columns: 4; }
}

@media (max-width: 1024px) {
    .bcs-cg { --bcs-cg-air-effective: 24px; }
}

@media (max-width: 768px) {
    .bcs-cg { --bcs-cg-columns: 3; --bcs-cg-edge: 16px; --bcs-cg-air-effective: 14px; }
}

@media (max-width: 480px) {
    .bcs-cg { --bcs-cg-edge: 12px; --bcs-cg-air-effective: 10px; }
}