/**
 * @package     Joomla.Site
 * @subpackage  mod_imagegallery
 *
 * @copyright   Copyright (C) 2026 Morrison Web Design. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* Basic Container Styles */
.mod-imagegallery {
    width: 100%;
    margin-bottom: 2rem;
}

/* Default Grid Layout */
:root {
    --grid-item-width: 250px;
    --grid-gap:1rem;
    --caption-bg:rgba(0,0,0,0.7);
    --caption-color:#fff;
}
.mod-imagegallery.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
    gap: var(--grid-gap);
    grid-auto-rows: auto auto;
}

/* Image Item Wrapper */
.mod-imagegallery .image-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    display: grid;
    /* grid-template-rows: subgrid;  Use parent's row tracks */
    /*  grid-row: span 2; Span the media row + caption row */
    z-index:1;
    a:has(.image-caption) {
        text-decoration:none;
    }
    .image-caption a {
        text-decoration:none;
    }
    .image-caption {
        grid-area: 1 / 1 / 2 / 2;
        position: relative;
        z-index:3;
        height:fit-content;
        place-self:end;
        width: 100%;
        background:var(--caption-bg);
        padding:5px 10px;
        .caption-title, .caption-text {
            color:var(--caption-color);
        }
    }
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        grid-area: 1 / 1 / 2 / 2;
        position: relative;
        z-index:2;
    }
    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        grid-area: 1 / 1 / 2 / 2;
        position: relative;
        z-index:2;
        controls {
            display:none;
        }
    }

    a {
        display:grid;
        width: 100%;
        height: 100%;
        object-fit: cover;
        grid-area: 1 / 1 / 2 / 2;
    }
    .caption-text {
       display:none;
    }
}

/* Images */
.mod-imagegallery img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Image Captions */
.mod-imagegallery .image-caption {
    padding: 0.75rem;
}

.mod-imagegallery .caption-title {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.mod-imagegallery .caption-text {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.4;
}

/* No Images Message */
.mod-imagegallery .no-images {
    padding: 2rem;
    text-align: center;
    color: #666;
    font-style: italic;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .mod-imagegallery.image-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.5rem;
    }
}

/* Optional: Add hover effects */
/*
.mod-imagegallery .image-item {
    transition: transform 0.3s ease;
}

.mod-imagegallery .image-item:hover {
    transform: translateY(-4px);
}

.mod-imagegallery img {
    transition: transform 0.3s ease;
}

.mod-imagegallery .image-item:hover img {
    transform: scale(1.05);
}
*/