/* Grid */
.phocaimage-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    clear: both;
}

.phocaimage-gallery a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.phocaimage-gallery a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Hover overlay with a magnifying-glass icon, hinting that the thumbnail
   opens a larger view (same idea as the classic jw_sig-style galleries). */
.phocaimage-gallery a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s ease;
    pointer-events: none;
}

.phocaimage-gallery a:hover::before {
    background: rgba(0, 0, 0, 0.18);
}

.phocaimage-gallery a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%) scale(0.75);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.phocaimage-gallery a:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.phocaimage-gallery img {
    width: 100%;
    height: auto;
    display: block;
}

/* Remove Joomla's generic field-list bullet/indent when it wraps this gallery. */
.fields-container:has(.phocaimage-gallery) {
    padding-left: 0;
    margin-left: 0;
}

.fields-container > .field-entry:has(.phocaimage-gallery) {
    list-style: none;
}

.fields-container > .field-entry > .field-value:has(.phocaimage-gallery) {
    display: block;
}



/* Flex */
.phocaimage-gallery.pi-flex-fluid,
.phocaimage-gallery.pi-flex {
    display: flex;
    flex-wrap: wrap;
}
.phocaimage-gallery.pi-flex a {
    max-height: 250px;
    width: auto;
    flex: 1 0 auto;
}

.phocaimage-gallery.pi-flex-fluid img,
.phocaimage-gallery.pi-flex img {
    height: 100%;
    width: auto;
    min-width: 100%;
    object-fit: cover;
}

.phocaimage-gallery.pi-flex.pi-count-3 a,
.phocaimage-gallery.pi-flex.pi-count-2 a,
.phocaimage-gallery.pi-flex.pi-count-1 a {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
}

.phocaimage-gallery.pi-flex.pi-count-3 img,
.phocaimage-gallery.pi-flex.pi-count-2 img,
.phocaimage-gallery.pi-flex.pi-count-1 img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .phocaimage-gallery.pi-flex-fluid a,
    .phocaimage-gallery.pi-flex a {
        flex: 0 0 100%;
        height: auto;
    }

    .phocaimage-gallery.pi-flex-fluid img,
    .phocaimage-gallery.pi-flex img {
        width: 100%;
        height: auto;
        min-width: 0;
        object-fit: contain;
    }
}

/* GLightbox "X / N" counter */
.phocaimage-counter {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 13px;
    line-height: 1.3;
    padding: 4px 12px;
    border-radius: 12px;
    pointer-events: none;
}

/* Reserve a strip at the bottom of the viewport for the counter above, so
   it never overlaps the actual photo content (GLightbox otherwise lets
   images fill the full 100vh). Sized generously (counter height + its own
   bottom offset + a bit of breathing room). */
.glightbox-container .gslide-image img {
    max-height: calc(100vh - 100px);
}