/* ================================================================
   Vista Gallery Templates — Flowing, Masonry, Classic, Ethereal A
   ================================================================ */

/* vgt-credit-overlay shared styles live in style.css (global) */

/* ----------------------------------------------------------------
   Shared hover behaviour — all items
   ---------------------------------------------------------------- */

/* Items need overflow:hidden to clip the credit overlay slide-up.
   The image clip-wrapper (.vgt-img-wrap) sits inside and also has
   overflow:hidden so the scale is contained cleanly. */
.vista-masonry-item,
.vista-classic-item,
.vista-flowing-item,
.vgea-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Neutralise any theme border-radius on gallery images so hover
   never reveals a stray radius change. */
.vista-masonry-item img,
.vista-classic-item img,
.vista-flowing-item img,
.vgea-item img {
    border-radius: 0 !important;
}

/* Scale image 5% on hover — contained within the item's overflow:hidden,
   so it reads as a gentle zoom-in (the standard gallery interaction). */
.vista-masonry-item img,
.vista-classic-item-inner img,
.vista-flowing-item img,
.vgea-item img {
    transition: transform 0.5s ease;
    display: block;
}

.vista-masonry-item:hover img,
.vista-classic-item:hover .vista-classic-item-inner img,
.vista-flowing-item:hover img,
.vgea-item:hover img {
    transform: scale(1.05);
}

/* ----------------------------------------------------------------
   Masonry Template
   ---------------------------------------------------------------- */

.vista-gallery-masonry {
    column-count: var(--vgm-columns, 3);
    column-gap: var(--vgm-gap, 16px);
}

.vista-masonry-item {
    break-inside: avoid;
    margin-bottom: var(--vgm-gap, 16px);
    display: block;
}

.vista-masonry-item img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .vista-gallery-masonry {
        column-count: max(1, calc(var(--vgm-columns, 3) - 1));
    }
}
@media (max-width: 480px) {
    .vista-gallery-masonry {
        column-count: max(1, calc(var(--vgm-columns, 3) - 2));
    }
}

/* ----------------------------------------------------------------
   Classic Grid Template
   ---------------------------------------------------------------- */

.vista-gallery-classic {
    display: grid;
    grid-template-columns: repeat(var(--vgc-columns, 3), 1fr);
    gap: var(--vgc-gap, 16px);
}

.vista-classic-item-inner {
    position: relative;
    overflow: hidden;
}

.vista-classic-item-inner img {
    position: absolute;
    inset: 0;
    width: 100%;       /* intentional: fills fixed-ratio cell */
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .vista-gallery-classic {
        grid-template-columns: repeat(max(1, calc(var(--vgc-columns, 3) - 1)), 1fr);
    }
}
@media (max-width: 480px) {
    .vista-gallery-classic {
        grid-template-columns: repeat(max(1, calc(var(--vgc-columns, 3) - 2)), 1fr);
    }
}

/* ----------------------------------------------------------------
   Flowing Template
   ---------------------------------------------------------------- */

.vista-gallery-flowing {
    overflow: hidden;
    max-height: var(--vgf-max-height, 400px);
    position: relative;
    display: flex;
    align-items: center;
}

.vista-gallery-flowing:hover .vista-flowing-track {
    animation-play-state: paused;
}

.vista-flowing-track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--vgf-rows, 1), var(--vgf-row-height, 400px));
    gap: 10px;
    width: max-content;
    align-items: center;  /* vertically centre photos in each row */
    /* Duration is set by JS based on track width ÷ speed (px/s) */
    animation: vista-flow-scroll var(--vgf-duration, 60s) linear infinite;
    will-change: transform;
}

@keyframes vista-flow-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.vista-flowing-item {
    height: var(--vgf-row-height, 400px);
    flex-shrink: 0;
}

.vista-flowing-item img {
    height: 100%;
    width: auto;       /* Override TT25 global img { width: 100% } */
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .vista-gallery-flowing {
        overflow-x: auto;
        max-height: none;
    }
    .vista-flowing-track {
        animation: none;
    }
}

/* ----------------------------------------------------------------
   Ethereal A Template
   ---------------------------------------------------------------- */

.vista-gallery-ethereal-a {
    display: flex;
    flex-direction: row;
    align-items: center;     /* vertically centre photos regardless of height */
    gap: var(--vgea-gap, 28px);
    overflow: hidden;        /* clips photos that don't fit — no scroll */
    /* No wrapping: photos that don't fit are simply not visible */
    flex-wrap: nowrap;
}

.vgea-item {
    flex-shrink: 0;
    /* Fade-in animation; delay set inline per item */
    opacity: 0;
    animation: vgea-fadein 0.9s ease forwards;
}

@keyframes vgea-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vgea-item img {
    /* Each photo at its natural width, capped to the configured max height */
    height: var(--vgea-height, 440px);
    width: auto;             /* Override TT25 global img { width: 100% } */
    display: block;
    max-height: var(--vgea-height, 440px);
    object-fit: cover;
}

/* Varied heights: every 3rd item is a bit shorter, every 5th a bit taller,
   creating the unequal-height gallery feel without JS. */
.vgea-item:nth-child(3n+2) img {
    height: calc(var(--vgea-height, 440px) * 0.80);
}
.vgea-item:nth-child(5n+3) img {
    height: calc(var(--vgea-height, 440px) * 0.90);
}
.vgea-item:nth-child(7n+1) img {
    height: calc(var(--vgea-height, 440px) * 0.70);
}

@media (prefers-reduced-motion: reduce) {
    .vgea-item {
        opacity: 1;
        animation: none;
    }
}