/* Justified Gallery Shortcodes
 * Defaults can be overridden per page/section via CSS, or per [jrow]/[jstack] via inline CSS variables.
 */

:root {
    --jg-gap-x: 24px;        /* horizontal gap between row items */
    --jg-gap-y: 24px;        /* vertical space after each row */
    --jg-stack-gap: 24px;    /* vertical gap inside a stack */
    --jg-fit: cover;         /* cover or contain for stacked images */
}

/* Row */
.jg-row {
    display: flex;
    gap: var(--jg-gap-x);
    align-items: stretch;
    margin-bottom: var(--jg-gap-y);
}

/* Direct images in a row */
.jg-row > img {
    display: block;
    height: var(--jg-row-h, auto);
    width: auto;
    max-width: 100%;
}

/* Stack behaves like one item in the row */
.jg-stack {
    display: flex;
    flex-direction: column;
    gap: var(--jg-stack-gap);
    height: var(--jg-row-h, auto);
    width: var(--jg-stack-w, auto); /* set by JS */
}

/* Images inside a stack: fixed frames sized by JS, fill via object-fit */
.jg-stack > img {
    display: block;
    width: 100%;
    height: var(--jg-stack-img-h, auto); /* set per image by JS */
    object-fit: var(--jg-fit);
}

/* Optional: basic mobile fallback (no justification) */
@media (max-width: 700px) {
    .jg-row {
        flex-direction: column;
    }

    .jg-row > img,
    .jg-stack {
        width: 100%;
        height: auto;
    }

    .jg-row > img {
        height: auto;
        width: 100%;
    }

    .jg-stack > img {
        height: auto;
    }
}