/* ================================================================
 * Blossom Creative Gallery
 * 7 predefined artistic gallery layouts.
 * ================================================================ */

/* ── CSS Custom Properties defaults ──────────────────────────── */
.elementor-widget-blossom_creative_gallery .bcg {
    --bcg-gap:        12px;
    --bcg-radius:     8px;
    --bcg-card-w:     220px;
    --bcg-card-ratio: 1.4;
    --bcg-mb-h:       340px;
    --bcg-sc-w:       190px;
    --bcg-sc-ratio:   1.35;
    --bcg-sc-gap:     12px;
    --bcg-sc-maxrot:  8;
    --bcg-fan-spread: 50;

    width: 100%;
    box-sizing: border-box;
}

/* ── Base item ────────────────────────────────────────────────── */
.elementor-widget-blossom_creative_gallery .bcg-item {
    overflow: hidden;
    position: relative;
    border-radius: var(--bcg-radius);
}

.elementor-widget-blossom_creative_gallery .bcg-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--bcg-radius);
    transition: transform 0.45s ease, opacity 0.35s ease, filter 0.35s ease;
}

/* ── Hover effects ────────────────────────────────────────────── */

/* Scale */
.bcg--hover-scale .bcg-item img:hover { transform: scale(1.06); }
.bcg--hover-scale .bcg-item:hover img { transform: scale(1.06); }

/* Lift */
.bcg--hover-lift .bcg-item {
    transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.bcg--hover-lift .bcg-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    z-index: 10;
}

/* Tilt */
.bcg--hover-tilt .bcg-item {
    transition: transform 0.3s ease;
}
.bcg--hover-tilt .bcg-item:hover {
    transform: rotate(-2deg) scale(1.03);
    z-index: 10;
}

/* Dim */
.bcg--hover-dim .bcg-item:hover img {
    opacity: 0.75;
    filter: brightness(0.82);
}

/* ================================================================
 *  LAYOUT 1: SCATTERED
 *  Artystyczna rozrzucona siatka — editorial/art-gallery feel.
 *  Najlepiej 6-8 zdjęć.
 * ================================================================ */

.elementor-widget-blossom_creative_gallery .bcg--scattered {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.7fr 1fr;
    grid-template-rows:    220px 200px 220px;
    gap: var(--bcg-gap);
}

/* Pozycje poszczególnych slotów */
.bcg--scattered .bcg-item--1 { grid-column: 1;   grid-row: 1 / 3; }
.bcg--scattered .bcg-item--2 { grid-column: 2 / 4; grid-row: 1; }
.bcg--scattered .bcg-item--3 { grid-column: 4;   grid-row: 1 / 3; }
.bcg--scattered .bcg-item--4 { grid-column: 2;   grid-row: 2 / 4; }
.bcg--scattered .bcg-item--5 { grid-column: 3;   grid-row: 2; }
.bcg--scattered .bcg-item--6 { grid-column: 3 / 5; grid-row: 3; }
.bcg--scattered .bcg-item--7 { grid-column: 1;   grid-row: 3; }
.bcg--scattered .bcg-item--8 { display: none; } /* slot 8 hidden */

/* Tablet i mobile dla scattered → obsługuje globalny blok KOLUMNY poniżej */

/* ================================================================
 *  LAYOUT 2: MAGAZINE
 *  Jedno duże zdjęcie hero po lewej + grid po prawej.
 *  Najlepiej 5-7 zdjęć.
 * ================================================================ */

.elementor-widget-blossom_creative_gallery .bcg--magazine {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: repeat(3, minmax(160px, 1fr));
    gap: var(--bcg-gap);
}

/* Hero: cała lewa kolumna */
.bcg--magazine .bcg-item--1 { grid-column: 1; grid-row: 1 / 4; }

/* Prawa siatka 2×3 */
.bcg--magazine .bcg-item--2 { grid-column: 2; grid-row: 1; }
.bcg--magazine .bcg-item--3 { grid-column: 3; grid-row: 1; }
.bcg--magazine .bcg-item--4 { grid-column: 2; grid-row: 2; }
.bcg--magazine .bcg-item--5 { grid-column: 3; grid-row: 2; }
.bcg--magazine .bcg-item--6 { grid-column: 2; grid-row: 3; }
.bcg--magazine .bcg-item--7 { grid-column: 3; grid-row: 3; }

/* Magazine responsive → obsługuje globalny blok KOLUMNY poniżej */

/* ================================================================
 *  LAYOUT 3: MOSAIC
 *  Dynamiczna mozaika — mix portretów i krajobrazów.
 *  Najlepiej 6-9 zdjęć.
 * ================================================================ */

.elementor-widget-blossom_creative_gallery .bcg--mosaic {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 200px 200px 200px;
    gap: var(--bcg-gap);
}

.bcg--mosaic .bcg-item--1 { grid-column: 1 / 4; grid-row: 1; }
.bcg--mosaic .bcg-item--2 { grid-column: 4 / 5; grid-row: 1 / 3; }
.bcg--mosaic .bcg-item--3 { grid-column: 5 / 7; grid-row: 1; }
.bcg--mosaic .bcg-item--4 { grid-column: 1 / 3; grid-row: 2 / 4; }
.bcg--mosaic .bcg-item--5 { grid-column: 3 / 4; grid-row: 2; }
.bcg--mosaic .bcg-item--6 { grid-column: 5 / 7; grid-row: 2; }
.bcg--mosaic .bcg-item--7 { grid-column: 3 / 5; grid-row: 3; }
.bcg--mosaic .bcg-item--8 { grid-column: 5 / 6; grid-row: 3; }
.bcg--mosaic .bcg-item--9 { grid-column: 6 / 7; grid-row: 3; }

/* Mosaic responsive → obsługuje globalny blok KOLUMNY poniżej */

/* ================================================================
 *  LAYOUT 4: FAN ARC
 *  Karty ułożone w wachlarz — JS ustawia rotacje.
 *  Najlepiej 4-7 zdjęć.
 * ================================================================ */

.elementor-widget-blossom_creative_gallery .bcg--fan {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
}

.bcg--fan .bcg-item {
    position: absolute;
    bottom: 40px;
    left: 50%;
    width: var(--bcg-card-w);
    height: calc(var(--bcg-card-w) * var(--bcg-card-ratio));
    margin-left: calc(var(--bcg-card-w) * -0.5);
    transform-origin: 50% 100%;           /* obrót od podstawy karty */
    transform: rotate(0deg);
    border-radius: var(--bcg-radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                z-index 0s 0s,
                box-shadow 0.35s ease;
    overflow: hidden;
}

.bcg--fan .bcg-item:hover {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.bcg--fan .bcg-item img {
    border-radius: var(--bcg-radius);
}

@media (max-width: 767px) {
    .elementor-widget-blossom_creative_gallery .bcg--fan {
        min-height: 340px;
        --bcg-card-w: 140px;
    }
    .bcg--fan .bcg-item { bottom: 20px; }
}

/* ================================================================
 *  LAYOUT 5: STACKED DECK
 *  Talia kart ułożonych na sobie — kliknięcie przesuwa na wierzch.
 *  Najlepiej 3-6 zdjęć.
 * ================================================================ */

.elementor-widget-blossom_creative_gallery .bcg--deck {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
    perspective: 1200px;
    cursor: pointer;
    user-select: none;
}

.bcg--deck .bcg-item {
    position: absolute;
    width: var(--bcg-card-w);
    height: calc(var(--bcg-card-w) * var(--bcg-card-ratio));
    border-radius: var(--bcg-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.4s ease,
                box-shadow 0.4s ease;
}

.bcg--deck .bcg-item img {
    border-radius: var(--bcg-radius);
}

@media (max-width: 767px) {
    .elementor-widget-blossom_creative_gallery .bcg--deck {
        min-height: 320px;
        --bcg-card-w: 160px;
    }
}

/* ================================================================
 *  LAYOUT 6: MOODBOARD
 *  Poziomy scrollowalny strip z różnymi wysokościami zdjęć.
 *  Najlepiej 5-12 zdjęć.
 * ================================================================ */

/* ── Moodboard container ──────────────────────────────────────── */
.elementor-widget-blossom_creative_gallery .bcg--moodboard {
    display: flex;
    align-items: center;
    gap: var(--bcg-gap);
    /* overflow-x: auto dla scroll kółkiem i drag; JS kontroluje scrollLeft */
    overflow-x: auto;
    overflow-y: hidden;
    /* Brak scroll-snap — koliduje z auto-scrollem */
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /* Cursor: grab ustawiany przez JS; fallback */
    cursor: grab;
}

.bcg--moodboard:active {
    cursor: grabbing;
}

/* Scrollbar — ukryty (kosmetyka, scroll kontroluje JS) */
.bcg--moodboard::-webkit-scrollbar { display: none; }
.bcg--moodboard { scrollbar-width: none; }

/* Jeśli użytkownik włączył "Pokaż scrollbar" */
.bcg--moodboard.bcg--moodboard-showsb::-webkit-scrollbar { display: block; height: 4px; }
.bcg--moodboard.bcg--moodboard-showsb { scrollbar-width: thin; }
.bcg--moodboard.bcg--moodboard-showsb::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 2px; }
.bcg--moodboard.bcg--moodboard-showsb::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.22); border-radius: 2px; }

/* ── Moodboard items ──────────────────────────────────────────── */
.bcg--moodboard .bcg-item {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--bcg-radius);
    height: var(--bcg-mb-h);
    width: auto;
    min-width: 100px;
    max-width: 700px;
    /* Blokuje zaznaczanie tekstu podczas drag */
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none; /* Drag jest obsługiwany przez kontener */
}

/* Staggered heights — zmienne wysokości tworzą rytm wizualny */
.bcg--moodboard .bcg-item:nth-child(3n+1) { height: calc(var(--bcg-mb-h) * 0.78); }
.bcg--moodboard .bcg-item:nth-child(3n+2) { height: var(--bcg-mb-h); }
.bcg--moodboard .bcg-item:nth-child(3n)   { height: calc(var(--bcg-mb-h) * 0.88); }
.bcg--moodboard .bcg-item:nth-child(5n)   { height: calc(var(--bcg-mb-h) * 1.08); }

.bcg--moodboard .bcg-item img {
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    /* Wyłącz natywny drag przeglądarki na obrazkach */
    -webkit-user-drag: none;
    pointer-events: none;
}

@media (max-width: 767px) {
    .elementor-widget-blossom_creative_gallery .bcg--moodboard {
        --bcg-mb-h: 200px;
    }
}

/* ================================================================
 *  LAYOUT 7: ANIMATED SCATTER
 *  Scroll-triggered: pierwsze zdjęcie wjeżdża od dołu,
 *  potem karty wyjeżdżają na boki z losowym obrotem.
 *  Najlepiej 3-5 zdjęć. Pozycje/animacje ustawia JS.
 * ================================================================ */

.elementor-widget-blossom_creative_gallery .bcg--anim-scatter {
    position: relative;
    width: 100%;
    /*
     * min-height = wysokość kart + margines na rotacje.
     * calc: card_width * ratio + 2*maxrot-padding
     */
    min-height: calc(var(--bcg-sc-w) * var(--bcg-sc-ratio) + 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.bcg--anim-scatter .bcg-item {
    position: absolute;
    width: var(--bcg-sc-w);
    height: calc(var(--bcg-sc-w) * var(--bcg-sc-ratio));
    border-radius: var(--bcg-radius);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    opacity: 0;
    /* transform ustawiany przez JS */
    will-change: transform, opacity;
    cursor: default;
}

.bcg--anim-scatter .bcg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--bcg-radius);
    pointer-events: none;
}

/* Stan gotowy (po animacji) — enable hover */
.bcg--anim-scatter.is-animated .bcg-item {
    cursor: default;
    transition: transform 0.3s ease;
}

@media (max-width: 767px) {
    .elementor-widget-blossom_creative_gallery .bcg--anim-scatter {
        --bcg-sc-w: 120px;
        --bcg-sc-gap: 8px;
        min-height: calc(var(--bcg-sc-w) * var(--bcg-sc-ratio) + 60px);
    }
}

/* ================================================================
 *  LAYOUT 8: THERAPY WALL
 *  Ciemna editorialowa ściana zdjęć z dolnym fade.
 *  Najlepiej 8-11 zdjęć.
 * ================================================================ */

.elementor-widget-blossom_creative_gallery .bcg--therapy-wall {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.25fr 1.05fr 1.25fr 1fr;
    grid-template-rows: 72px 108px 108px 108px 108px;
    gap: clamp(8px, 0.8vw, 12px);
    padding: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.bcg--therapy-wall .bcg-item {
    border-radius: calc(var(--bcg-radius) + 4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.bcg--therapy-wall .bcg-item img {
    border-radius: calc(var(--bcg-radius) + 4px);
}

.bcg--therapy-wall .bcg-item--1  { grid-column: 1;     grid-row: 1 / 3; } /* lewa góra */
.bcg--therapy-wall .bcg-item--2  { grid-column: 2 / 3; grid-row: 2 / 4; } /* lewy środek */
.bcg--therapy-wall .bcg-item--3  { grid-column: 5;     grid-row: 1 / 3; } /* prawa góra */
.bcg--therapy-wall .bcg-item--4  { grid-column: 1;     grid-row: 3 / 5; } /* lewa pół-transparent (poza widgetem) */
.bcg--therapy-wall .bcg-item--5  { grid-column: 2 / 4; grid-row: 1 / 2; } /* górny pas pod CTA */
.bcg--therapy-wall .bcg-item--6  { grid-column: 3;     grid-row: 3 / 5; } /* centrum */
.bcg--therapy-wall .bcg-item--7  { grid-column: 5;     grid-row: 3 / 5; } /* prawa pół-transparent */
.bcg--therapy-wall .bcg-item--8  { grid-column: 2 / 3; grid-row: 4 / 6; } /* lewy dół */
.bcg--therapy-wall .bcg-item--9  { grid-column: 4 / 5; grid-row: 2 / 4; } /* prawy środek */
.bcg--therapy-wall .bcg-item--10 { grid-column: 3;     grid-row: 5 / 6; } /* dół środek */
.bcg--therapy-wall .bcg-item--11 { grid-column: 4 / 5; grid-row: 4 / 6; } /* dół prawy */

@media (max-width: 1024px) {
    .elementor-widget-blossom_creative_gallery .bcg--therapy-wall {
        gap: clamp(8px, 1.2vw, 10px);
        padding: 0;
    }
}

/* ================================================================
 *  KOLUMNY — RESPONSIVE OVERRIDE dla grid layoutów
 *
 *  Na tablecie i mobile grid-template-columns jest nadpisywane
 *  przez wartość z kontrolek (--bcg-cols-tab / --bcg-cols-mob).
 *  nth-child pozycje są resetowane — auto-placement.
 * ================================================================ */

@media (max-width: 1024px) and (min-width: 768px) {
    .elementor-widget-blossom_creative_gallery .bcg--scattered,
    .elementor-widget-blossom_creative_gallery .bcg--magazine,
    .elementor-widget-blossom_creative_gallery .bcg--mosaic,
    .elementor-widget-blossom_creative_gallery .bcg--therapy-wall {
        grid-template-columns: repeat(var(--bcg-cols-tab, 2), 1fr);
        grid-template-rows: auto;
    }
    .bcg--scattered .bcg-item,
    .bcg--magazine .bcg-item,
    .bcg--mosaic .bcg-item,
    .bcg--therapy-wall .bcg-item {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: var(--bcg-mob-ratio, 1);
    }
    /* Pierwszy item zajmuje dwie kolumny (hero) */
    .bcg--magazine .bcg-item--1 {
        grid-column: 1 / calc(var(--bcg-cols-tab, 2) + 1) !important;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    .elementor-widget-blossom_creative_gallery .bcg--scattered,
    .elementor-widget-blossom_creative_gallery .bcg--magazine,
    .elementor-widget-blossom_creative_gallery .bcg--mosaic,
    .elementor-widget-blossom_creative_gallery .bcg--therapy-wall {
        grid-template-columns: repeat(var(--bcg-cols-mob, 2), 1fr);
        grid-template-rows: auto;
    }
    .bcg--scattered .bcg-item,
    .bcg--magazine .bcg-item,
    .bcg--mosaic .bcg-item,
    .bcg--therapy-wall .bcg-item {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: var(--bcg-mob-ratio, 1);
    }
    .bcg--magazine .bcg-item--1 {
        grid-column: 1 / calc(var(--bcg-cols-mob, 2) + 1) !important;
        aspect-ratio: 16 / 9;
    }
}

/* ================================================================
 *  ANIMACJA WEJŚCIA
 *
 *  Działanie:
 *  1. Klasy .bcg--enter-* ustawiają stan UKRYTY itemów.
 *  2. JS (IntersectionObserver) dodaje klasę .bcg--entered gdy
 *     kontener wchodzi w viewport.
 *  3. .bcg--entered .bcg-item → stan WIDOCZNY.
 *
 *  Stagger: delay per-item z CSS var --bcg-item-delay (ustawiany
 *  przez PHP inline style lub JS).
 * ================================================================ */

/* Wspólne zmienne i transition dla wszystkich animacji */
.bcg--enter-fade .bcg-item,
.bcg--enter-slide-up .bcg-item,
.bcg--enter-scale .bcg-item,
.bcg--enter-stagger .bcg-item {
    opacity: 0;
    transition:
        opacity  var(--bcg-enter-dur, 600ms) var(--bcg-enter-ease, ease-out) var(--bcg-item-delay, 0ms),
        transform var(--bcg-enter-dur, 600ms) var(--bcg-enter-ease, ease-out) var(--bcg-item-delay, 0ms);
}

/* Stan wyjściowy — transform */
.bcg--enter-slide-up .bcg-item,
.bcg--enter-stagger .bcg-item {
    transform: translateY(36px);
}

.bcg--enter-scale .bcg-item {
    transform: scale(0.88);
}

/* .bcg--enter-fade — tylko opacity, bez transform */

/* ── Widoczny (triggered) ────────────────────────────────────── */
.bcg--entered.bcg--enter-fade .bcg-item,
.bcg--entered.bcg--enter-slide-up .bcg-item,
.bcg--entered.bcg--enter-scale .bcg-item,
.bcg--entered.bcg--enter-stagger .bcg-item {
    opacity: 1;
    transform: none;
}

/* ── Accessibility ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .elementor-widget-blossom_creative_gallery .bcg-item,
    .elementor-widget-blossom_creative_gallery .bcg-item img {
        transition: none !important;
        animation: none !important;
    }
    /* Animacje wejścia — natychmiastowy stan widoczny */
    .bcg--enter-fade .bcg-item,
    .bcg--enter-slide-up .bcg-item,
    .bcg--enter-scale .bcg-item,
    .bcg--enter-stagger .bcg-item {
        opacity: 1 !important;
        transform: none !important;
    }
    /* Animated scatter: natychmiastowy stan docelowy */
    .bcg--anim-scatter .bcg-item {
        opacity: 1 !important;
    }
}