/* jg-row / jg-stack
 * Vanilla HTML custom-element port of the justified row layout from the
 * lf-justified-gallery-shortcodes WordPress plugin.
 *
 * Defaults can be overridden per page/section via CSS, or per element via
 * the gap-x / gap-y / fit / gap attributes (see jg-row.js) or inline style.
 */

: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%;
}

/* A wrapped image: any direct row child that isn't itself <jg-stack> but
 * contains exactly one <img> descendant (e.g. a caption/label element, an
 * <a>, a <figure>) -- see wrappedImg() in jg-row.js for how it's recognized
 * as a single-image row item, and how it computes --jg-row-item-w.
 *
 * Unlike a direct <img> child (which can rely on the browser deriving its
 * width from height + intrinsic ratio via ordinary replaced-element
 * sizing), a wrapped image's width is written explicitly by JS as a fixed
 * pixel value, the same way <jg-stack> widths are. This was necessary, not
 * just tidier: leaving the wrapper (and/or the nested <img>) to derive
 * their width via CSS auto-sizing was found to be unreliable in Safari --
 * both the wrapper's own shrink-to-fit box *and* a plain width:auto on the
 * nested <img> ended up computed from the slotted image's raw intrinsic
 * size rather than the height-constrained size the row actually wants, in
 * ways that couldn't be corrected from outside the wrapper's Shadow DOM.
 * Writing the exact pixel width explicitly sidesteps that derivation
 * (and the Shadow DOM boundary) entirely.
 *
 * `max-width: 100%` still guards against a naturally-oversized image
 * overflowing before the JS layout pass has run (i.e. before
 * --jg-row-item-w exists and this falls back to `auto`). `min-width: 0`
 * overrides the flex item default of `min-width: auto`, which would
 * otherwise floor this item's width at a content-based "automatic minimum
 * size" that Safari was found to compute from the slotted image's raw
 * intrinsic width rather than its intended size -- overriding the explicit
 * width above too, if left in place. */
jg-row > :not(jg-stack) {
    width: var(--jg-row-item-w, auto);
    max-width: 100%;
    min-width: 0;
}

jg-row > :not(jg-stack) img {
    display: block;
    height: var(--jg-row-h, auto);
    width: var(--jg-row-item-w, auto);
}

/* 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);
}

/* Stacked (non-justified) fallback below the row's breakpoint. Toggled by
 * JS on the row itself (see jg-row.js), not a fixed viewport media query,
 * so it reacts to the row's own container width and can be set per-row
 * via the `breakpoint` attribute (default 700px). */
jg-row[data-jg-stacked] {
    flex-direction: column;
}

jg-row[data-jg-stacked] > img,
jg-row[data-jg-stacked] > jg-stack,
jg-row[data-jg-stacked] > :not(jg-stack) {
    width: 100%;
    height: auto;
}

/* In stacked mode the row's main axis is vertical (flex-direction: column),
 * so the analogous automatic-minimum-size floor to guard against is
 * min-height, not min-width. Preemptively overridden for the same reason
 * as min-width above, though not separately confirmed broken in Safari. */
jg-row[data-jg-stacked] > :not(jg-stack) {
    min-height: 0;
}

jg-row[data-jg-stacked] > jg-stack > img {
    height: auto;
}

jg-row[data-jg-stacked] > :not(jg-stack) img {
    width: 100%;
    height: auto;
}