/* =========================================================
   Custom Vertical Gallery Widget — vertical-gallery.css
   Masonry-style column layout, Fancybox-ready
   Matches R&F City screenshot: tight gaps, rounded corners,
   pure image grid, no overlaid text
   ========================================================= */

/* ── Wrapper ─────────────────────────────────────────────── */
.cvg-wrapper {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* ── Grid: equal-width columns, side by side ─────────────── */
.cvg-grid {
    display: grid;
    gap: 8px;
    align-items: start;
    /* each column starts at the top */
}

/* Column count variants */
.cvg-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cvg-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cvg-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ── Column — stacks images vertically ───────────────────── */
.cvg-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Single image item ───────────────────────────────────── */
.cvg-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    /* Smooth reveal on load */
    animation: cvg-fade-in 0.5s ease both;
}

@keyframes cvg-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger per column */
.cvg-col:nth-child(1) .cvg-item {
    animation-delay: calc(var(--i, 0) * 0.06s);
}

.cvg-col:nth-child(2) .cvg-item {
    animation-delay: calc(var(--i, 0) * 0.06s + 0.05s);
}

.cvg-col:nth-child(3) .cvg-item {
    animation-delay: calc(var(--i, 0) * 0.06s + 0.10s);
}

.cvg-col:nth-child(4) .cvg-item {
    animation-delay: calc(var(--i, 0) * 0.06s + 0.15s);
}

/* ── Link ────────────────────────────────────────────────── */
.cvg-link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    cursor: pointer !important;
    text-decoration: none;
}

.cvg-link img {
    cursor: pointer !important;
}

/* ── Image ───────────────────────────────────────────────── */
.cvg-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: inherit;
    /* GPU-accelerated transform for smooth hover */
    transform: scale(1);
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* ── Overlay (dim effect) ────────────────────────────────── */
.cvg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.cvg-overlay svg {
    transform: scale(0.8);
    transition: transform 0.35s ease;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

/* ── Hover Effects ───────────────────────────────────────── */

/* Zoom */
.cvg-hover-zoom .cvg-link:hover img {
    transform: scale(1.06);
}

/* Dim + Icon */
.cvg-hover-dim .cvg-link:hover .cvg-overlay {
    opacity: 1;
}

.cvg-hover-dim .cvg-link:hover .cvg-overlay svg {
    transform: scale(1);
}

.cvg-hover-dim .cvg-link:hover img {
    transform: scale(1.03);
}

/* Lift shadow */
.cvg-hover-lift .cvg-item {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cvg-hover-lift .cvg-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.cvg-hover-lift .cvg-item:hover img {
    transform: scale(1.02);
}

/* ── Empty state ─────────────────────────────────────────── */
.cvg-empty {
    padding: 40px;
    text-align: center;
    color: #aaa;
    font-style: italic;
    border: 2px dashed #ddd;
    border-radius: 8px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .cvg-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cvg-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {

    .cvg-cols-4,
    .cvg-cols-3,
    .cvg-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cvg-grid {
        gap: 6px;
    }

    .cvg-col {
        gap: 6px;
    }

    .cvg-item {
        border-radius: 6px;
    }
}

/* ── Fancybox customisation overrides ────────────────────── */
/* Subtle toolbar styling to keep luxury feel */
.fancybox__toolbar {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent) !important;
}

.fancybox__nav .f-button {
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(6px) !important;
    transition: background 0.2s !important;
}

.fancybox__nav .f-button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

.fancybox__caption {
    font-family: 'Barlow', system-ui, sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 0.03em !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-align: center !important;
    padding: 12px 24px !important;
}

/* Center Fancybox thumbnails */
.fancybox__thumbs {
    justify-content: center !important;
}

.fancybox__thumbs .f-thumbs__track {
    margin: 0 auto !important;
}