/* Pixellang Gallery — Frontend */

.pig-gallery {
    width: 100%;
    box-sizing: border-box;
}
.pig-gallery * { box-sizing: border-box; }

/* ── Item Container ──────────────────────
   <figure class="pig-item"> wraps the image.
   All visual styles (border, radius, shadow) apply HERE.
   overflow:hidden ensures img respects border-radius.
   line-height:0 kills ghost spacing under inline images.
────────────────────────────────────────── */
.pig-item {
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
    /* No default border-radius — user sets via admin */
    border-radius: 0;
    /* transition for hover effects */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.4s ease;
}
.pig-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0; /* Never on img — container handles it */
    transition: transform 0.4s cubic-bezier(0.33,1,0.68,1);
}
.pig-item:hover img { transform: scale(1.06); }

/* Caption inside figure */
.pig-caption,
.pig-item figcaption {
    line-height: 1.4;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    color: #fff;
    font-size: 12px;
    pointer-events: none;
}
.pig-caption-title { font-weight: 600; display: block; }
.pig-caption-desc { font-size: 11px; opacity: .85; display: block; }

/* ── JUSTIFIED ─────────────────────────────
   Flex tabanlı. Her satır tam dolar.
   Yükseklik sabit, genişlik orana göre.
   JS: flex-basis = ratio × rowHeight
────────────────────────────────────────── */
.pig-gallery[data-layout="justified"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pig-gap, 8px);
}
.pig-gallery[data-layout="justified"] .pig-item {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 60px;
    /* height: JS tarafından set edilir */
}

/* ── MOSAIC (CSS Grid + dense) ─────────────
   CSS Grid, grid-auto-flow: dense
   Span ile bazı görseller 2x büyük
   Boşluk kalmaz
────────────────────────────────────────── */
.pig-gallery[data-layout="mosaic"] {
    display: grid;
    grid-template-columns: repeat(var(--pig-cols, 4), 1fr);
    grid-auto-rows: var(--pig-rh, 200px);
    grid-auto-flow: dense;
    gap: var(--pig-gap, 8px);
}
/* Span — data-span attribute ile */
.pig-gallery[data-layout="mosaic"] .pig-item[data-span="2x1"],
.pig-gallery[data-layout="mosaic"] .pig-item.is-wide  { grid-column: span 2; }
.pig-gallery[data-layout="mosaic"] .pig-item[data-span="1x2"],
.pig-gallery[data-layout="mosaic"] .pig-item.is-tall  { grid-row: span 2; }
.pig-gallery[data-layout="mosaic"] .pig-item[data-span="2x2"],
.pig-gallery[data-layout="mosaic"] .pig-item.is-big   { grid-column: span 2; grid-row: span 2; }

/* Mobilde span iptal */
@media (max-width: 480px) {
    .pig-gallery[data-layout="mosaic"] .pig-item[data-span],
    .pig-gallery[data-layout="mosaic"] .pig-item.is-big,
    .pig-gallery[data-layout="mosaic"] .pig-item.is-wide,
    .pig-gallery[data-layout="mosaic"] .pig-item.is-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ── GRID ───────────────────────────────────
   CSS Grid, eşit kareler, object-fit:cover
────────────────────────────────────────── */
/* ── GRID ───────────────────────────────────
   Container-based breakpoints.
   Fixed: repeat(N, 1fr) — JS sets --pig-cols from container width
   Fluid: auto-fill with minmax — JS sets --pig-min-w
────────────────────────────────────────── */
.pig-gallery[data-layout="grid"] {
    display: grid;
    gap: var(--pig-gap, 8px);
}
/* Fixed mode (default) */
.pig-gallery[data-layout="grid"]:not(.pig-grid-fluid) {
    grid-template-columns: repeat(var(--pig-cols, 4), 1fr);
}
/* Fluid mode */
.pig-gallery[data-layout="grid"].pig-grid-fluid {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--pig-min-w, 250px), 100%), 1fr));
}
.pig-gallery[data-layout="grid"] .pig-item {
    height: var(--pig-grid-item-height, 350px);
}
.pig-gallery[data-layout="grid"] .pig-item img {
    object-position: var(--pig-grid-object-position, center center);
}

/* ── MASONRY ────────────────────────────────
   JS ile kolon dağıtımı
   Her kolon flex column
────────────────────────────────────────── */
.pig-gallery[data-layout="masonry"] {
    display: flex;
    align-items: flex-start;
    gap: var(--pig-gap, 8px);
}
.pig-masonry-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--pig-gap, 8px);
    min-width: 0;
}
.pig-gallery[data-layout="masonry"] .pig-item {
    width: 100%;
}

/* ── LOAD MORE ────────────────────────────── */
.pig-load-more-wrap {
    text-align: center;
    margin-top: 20px;
}
.pig-load-more-btn {
    display: inline-block;
    padding: 10px 28px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: .15s;
}
.pig-load-more-btn:hover { border-color: #3b82f6; color: #3b82f6; }

/* ── EFFECTS ── */
.pig-fx-reveal .pig-item { opacity:0; transform:translateY(44px); transition:opacity .65s ease,transform .65s ease; }
.pig-fx-reveal .pig-item.pig-visible { opacity:1; transform:translateY(0); }
.pig-fx-slide-fade .pig-item:nth-child(odd)  { opacity:0; transform:translateX(-50px); transition:opacity .65s ease,transform .65s ease; }
.pig-fx-slide-fade .pig-item:nth-child(even) { opacity:0; transform:translateX(50px);  transition:opacity .65s ease,transform .65s ease; }
.pig-fx-slide-fade .pig-item.pig-visible { opacity:1; transform:translateX(0); }
.pig-fx-zoom-fade .pig-item { opacity:0; transform:scale(.88); transition:opacity .6s ease,transform .6s ease; }
.pig-fx-zoom-fade .pig-item.pig-visible { opacity:1; transform:scale(1); }
.pig-fx-flip-up { perspective:1000px; }
.pig-fx-flip-up .pig-item { opacity:0; transform:rotateX(24deg) translateY(32px); transform-origin:top center; transition:opacity .6s ease,transform .6s ease; }
.pig-fx-flip-up .pig-item.pig-visible { opacity:1; transform:rotateX(0) translateY(0); }
.pig-item:nth-child(1)   { transition-delay:.00s; }
.pig-item:nth-child(2)   { transition-delay:.06s; }
.pig-item:nth-child(3)   { transition-delay:.12s; }
.pig-item:nth-child(4)   { transition-delay:.18s; }
.pig-item:nth-child(5)   { transition-delay:.24s; }
.pig-item:nth-child(6)   { transition-delay:.30s; }
.pig-item:nth-child(n+7) { transition-delay:.36s; }
.pig-gallery[data-effect="none"] .pig-item { transition-delay:0s !important; }

/* Glassmorphism Layered Reveal */
.pig-fx-glass .pig-item {
    opacity: 0;
    filter: blur(14px);
    transform: scale(0.82) translateY(36px);
    transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1),
                filter 1.1s cubic-bezier(0.16,1,0.3,1),
                transform 1.1s cubic-bezier(0.16,1,0.3,1);
    will-change: transform, opacity, filter;
}
.pig-fx-glass .pig-item.pig-visible {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1) translateY(0);
}
.pig-fx-glass .pig-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 50%);
    opacity: 0;
    transition: opacity .5s;
    pointer-events: none;
}
.pig-fx-glass .pig-item:hover::after { opacity: 1; }

/* Masked Reveal */
.pig-fx-masked-reveal .pig-item {
    clip-path: inset(0 50% 0 50%);
    opacity: 0;
    transform: scale(1.1);
    transition: clip-path 1s cubic-bezier(0.77,0,0.175,1),
                opacity 1s cubic-bezier(0.77,0,0.175,1),
                transform 1s cubic-bezier(0.77,0,0.175,1);
    will-change: clip-path, transform, opacity;
}
.pig-fx-masked-reveal .pig-item.pig-visible {
    clip-path: inset(0 0% 0 0%);
    opacity: 1;
    transform: scale(1);
}

/* Radial Pop Reveal */
.pig-fx-radial-pop .pig-item {
    opacity: 0;
    transform: scale(0) rotate(-20deg);
    transition: opacity .6s ease-out,
                transform .8s cubic-bezier(0.175,0.885,0.32,1.275);
    will-change: transform, opacity;
}
.pig-fx-radial-pop .pig-item.pig-visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

@media(prefers-reduced-motion:reduce){ .pig-item{transition:none !important;opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important;} }