/**
 * @package     Joomla.Site
 * @subpackage  mod_imagegrid
 *
 * @copyright   Copyright (C) 2025 Aaron Morrison. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* Add your custom styles here */
.moduletable:has(.mod-imagegrid) {
    margin-inline:unset !important;
    width:100%;
}
.mod-imagegrid {
    width:100%;
    .mod-imagegrid-content {
        margin-bottom:2rem;
        max-width: 70ch;
    }

    .imagegrid-container {
        display: flex;
        justify-content:var(--justify-content, space-between);
        gap: var(--flex-gap, 20px);
        width:100%;
        flex-flow:row wrap;

        .imagegrid-item {
            &.items-1 {
                flex-basis:100%;
            }
            &.items-2 {
                flex-basis: calc(50% - (var(--flex-gap) * 1 / 2));
                flex-shrink: 0;
            }
            &.items-3 {
                flex-basis: calc(33.333% - (var(--flex-gap) * 2 / 3));
                flex-shrink: 0;
            }
            &.items-4 {
                flex-basis: calc(25% - (var(--flex-gap) * 3 / 4));
                flex-shrink: 0;
            }
            &.items-5 {
                flex-basis: calc(20% - (var(--flex-gap) * 4 / 5));
                flex-shrink: 0;
            }
            &.items-6 {
                flex-basis: calc(16.6% - (var(--flex-gap) * 5 / 6));
                flex-shrink: 0;
            }
            .imagegrid-image-link {
                padding:0 !important;
                display:block;
                height:fit-content;
                img {
                    max-width:var(--img-maxwidth);
                    margin-inline: auto;
                }
            }

        }
        .imagegrid-button-wrapper {

            a {
                display:flex;
                text-transform:uppercase !important;
                max-width: var(--button-width, 270px);
                justify-content: center;
                align-items: center;
                margin-inline:auto;
                margin-top:var(--button-margin-top);
            }
        }
    }
    .imagegrid-global-button-wrapper {
        margin-top:var(--button-margin-top);
        a {
            display:flex;
            text-transform:uppercase !important;
            max-width: var(--button-width, 270px);
            justify-content: center;
            align-items: center;
            margin-inline:auto;
        }
    }
    .imagegrid-caption {
        display:none;
    }
}
.mod-imagegrid.bridal-party-grid {
    .mod-imagegrid-title {
        display:none;
    }
}
.moduletable.bridal-party-grid {
    margin-block:6vw;
    h2,h3 {
        font-family: 'bodoni_modaregular', serif;
        font-weight: 400;
        font-style: normal;
    }
    .imagegrid-button.btn {
        padding:0;
        color: var(--blue-1);
        font-size: var(--size-1);
        font-family: 'bodoni_modaregular', serif;
        margin-top:1em;
        font-weight:600;
        justify-content: start;
        text-transform: none !important;
    }
}
@media screen and ( width < 992px ) {
    .mod-imagegrid {
        .imagegrid-container {
            flex-flow:row wrap;
            .imagegrid-item {
                &.items-1 {
                    flex-basis:100%;

                }
                &.items-2 {
                    flex-basis: calc(50% - (var(--flex-gap) * 1 / 2));

                }
                &.items-3 {
                    flex-basis: calc(50% - (var(--flex-gap) * 1 / 2));
                }
                &.items-4 {
                    flex-basis: calc(33.333% - (var(--flex-gap) * 2 / 3));
                }
                &.items-5 {
                    flex-basis: calc(33.333% - (var(--flex-gap) * 3 / 4));
                }
                &.items-6 {
                    flex-basis: calc(33.333% - (var(--flex-gap) * 4 / 5));
                    flex-shrink: 0;
                }
            }
        }
    }
}
@media screen and ( width < 768px ) {
    .mod-imagegrid {
        .imagegrid-container {
            flex-flow:row wrap;
            .imagegrid-item {
                &.items-1 {
                    flex-basis:100%;

                }
                &.items-2 {
                    flex-basis: calc(50% - (var(--flex-gap) * 1 / 2));

                }
                &.items-3 {
                    flex-basis: calc(50% - (var(--flex-gap) * 1 / 2));
                }
                &.items-4 {
                    flex-basis: calc(50% - (var(--flex-gap) * 1 / 2));
                }
                &.items-5 {
                    flex-basis: calc(50% - (var(--flex-gap) * 1 / 2));
                }
                &.items-6 {
                    flex-basis: calc(50% - (var(--flex-gap) * 1 / 2));
                }
            }
        }
    }
}
@media screen and ( width < 500px ) {
    .mod-imagegrid {
        .imagegrid-container {
            flex-flow:row wrap;
            .imagegrid-item {
                &.items-1 {
                    flex-basis:100%;

                }
                &.items-2 {
                    flex-basis:100%;

                }
                &.items-3 {
                    flex-basis:100%;
                }
                &.items-4 {
                    flex-basis:100%;
                }
                &.items-5 {
                    flex-basis:100%;
                }
                &.items-6 {
                    flex-basis:100%;
                }

            }
        }
    }
}