/* Core uses a data-align wrapper in the editor, and some themes receive a
 * div.wp-block-image around an aligned figure on the front end. Neither wrapper
 * may become an extra gallery cell. Keep the same column breakpoints as core. */
.wp-block-gallery.has-nested-images {
    --sfr-gallery-columns: 2;
}

.wp-block-gallery.has-nested-images.columns-1 {
    --sfr-gallery-columns: 1;
}

@media (min-width: 600px) {
    .wp-block-gallery.has-nested-images.columns-default { --sfr-gallery-columns: 3; }
    .wp-block-gallery.has-nested-images.columns-3 { --sfr-gallery-columns: 3; }
    .wp-block-gallery.has-nested-images.columns-4 { --sfr-gallery-columns: 4; }
    .wp-block-gallery.has-nested-images.columns-5 { --sfr-gallery-columns: 5; }
    .wp-block-gallery.has-nested-images.columns-6 { --sfr-gallery-columns: 6; }
    .wp-block-gallery.has-nested-images.columns-7 { --sfr-gallery-columns: 7; }
    .wp-block-gallery.has-nested-images.columns-8 { --sfr-gallery-columns: 8; }
    .wp-block-gallery.has-nested-images.columns-default:has(> .wp-block-image:first-child:nth-last-child(2)) {
        --sfr-gallery-columns: 2;
    }
    .wp-block-gallery.has-nested-images.columns-default:has(> .wp-block-image:only-child) {
        --sfr-gallery-columns: 1;
    }
}

.wp-block-gallery.has-nested-images > .wp-block[data-align]:has(> figure.wp-block-image),
.wp-block-gallery.has-nested-images > div.wp-block-image:has(> figure) {
    display: contents;
}

/* The id exclusion matches core's sizing specificity without !important.
 * Inline native image widths/heights still override the defaults below. */
.wp-block-gallery.has-nested-images :is(figure.wp-block-image, .wp-block-image > figure):not(#individual-image) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    box-sizing: border-box;
    width: calc((100% - (var(--sfr-gallery-columns) - 1) * var(--wp--style--unstable-gallery-gap, 16px)) / var(--sfr-gallery-columns));
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

.wp-block-gallery.has-nested-images :is(figure.wp-block-image, .wp-block-image > figure) > a,
.wp-block-gallery.has-nested-images :is(figure.wp-block-image, .wp-block-image > figure) > div:not(.components-drop-zone) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.wp-block-gallery.has-nested-images :is(figure.wp-block-image, .wp-block-image > figure) img {
    display: block;
    max-width: 100%;
}

.wp-block-gallery.has-nested-images.is-cropped :is(figure.wp-block-image, .wp-block-image > figure) img {
    width: 100%;
    height: 100%;
    flex: 1 0 0%;
    object-fit: cover;
}

.wp-block-gallery.has-nested-images :is(figure.wp-block-image, .wp-block-image > figure):not(#individual-image) img[style*="height:"] {
    flex: none;
}

/* A full-width containing figure makes percentage widths stable on alignment
 * changes. Natural/pixel image widths remain untouched; do not upscale icons. */
.wp-block-column .wp-block[data-align]:has(> .wp-block-image),
.wp-block-column :is(figure.wp-block-image, .wp-block-image > figure) {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

.wp-block-column :is(figure.wp-block-image, .wp-block-image > figure) {
    display: block;
}

.wp-block-column :is(figure.wp-block-image, .wp-block-image > figure) img {
    max-width: 100%;
}

.wp-block-column :is(figure.wp-block-image, .wp-block-image > figure) > figcaption {
    display: block;
}

.wp-block-column :is(figure.wp-block-image, .wp-block-image > figure) > a {
    width: 100%;
    max-width: 100%;
}

/* Lightbox links make images block-level. Margins position those images as
 * well as ordinary unlinked ones, without changing their chosen width. */
:is(.wp-block-gallery.has-nested-images, .wp-block-column) :is(figure.wp-block-image, .wp-block-image > figure).alignleft,
:is(.wp-block-gallery.has-nested-images, .wp-block-column) .wp-block[data-align="left"] > figure.wp-block-image {
    text-align: left;
}

:is(.wp-block-gallery.has-nested-images, .wp-block-column) :is(figure.wp-block-image, .wp-block-image > figure).aligncenter,
:is(.wp-block-gallery.has-nested-images, .wp-block-column) .wp-block[data-align="center"] > figure.wp-block-image {
    text-align: center;
}

:is(.wp-block-gallery.has-nested-images, .wp-block-column) :is(figure.wp-block-image, .wp-block-image > figure).alignright,
:is(.wp-block-gallery.has-nested-images, .wp-block-column) .wp-block[data-align="right"] > figure.wp-block-image {
    text-align: right;
}

:is(.wp-block-gallery.has-nested-images, .wp-block-column) :is(figure.wp-block-image, .wp-block-image > figure).alignleft img,
:is(.wp-block-gallery.has-nested-images, .wp-block-column) .wp-block[data-align="left"] > figure.wp-block-image img {
    margin-inline: 0 auto;
}

:is(.wp-block-gallery.has-nested-images, .wp-block-column) :is(figure.wp-block-image, .wp-block-image > figure).aligncenter img,
:is(.wp-block-gallery.has-nested-images, .wp-block-column) .wp-block[data-align="center"] > figure.wp-block-image img {
    margin-inline: auto;
}

:is(.wp-block-gallery.has-nested-images, .wp-block-column) :is(figure.wp-block-image, .wp-block-image > figure).alignright img,
:is(.wp-block-gallery.has-nested-images, .wp-block-column) .wp-block[data-align="right"] > figure.wp-block-image img {
    margin-inline: auto 0;
}

/* Smart photo rows are strictly opt-in. The shared DOM engine supplies pixel
 * geometry; removing its ready marker restores all individual native sizes. */
:is(.wp-block-gallery, .wp-block-columns)[data-sfr-photo-ready="true"][data-sfr-photo-mode] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

[data-sfr-photo-ready="true"][data-sfr-photo-custom-gap] {
    gap: var(--sfr-photo-gap) !important;
}

[data-sfr-photo-ready="true"] [data-sfr-photo-wrapper] {
    display: contents !important;
}

[data-sfr-photo-ready="true"] [data-sfr-photo-figure] {
    display: block !important;
    position: relative;
    box-sizing: border-box !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: var(--sfr-photo-offset, 0px) 0 var(--sfr-photo-after, 0px) !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
}

/* Beat core Columns' <=781px forced 100% basis: our breakpoint follows the
 * available row width, including narrow desktop columns and editor canvases. */
:is(.wp-block-gallery, .wp-block-columns)[data-sfr-photo-ready="true"][data-sfr-photo-mode] [data-sfr-photo-cell] {
    box-sizing: border-box !important;
    flex: 0 0 var(--sfr-photo-width) !important;
    width: var(--sfr-photo-width) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 var(--sfr-photo-trailing, 0px) 0 var(--sfr-photo-leading, 0px) !important;
    align-self: flex-start !important;
}

/* Links, picture elements and editor resize wrappers must have precisely the
 * same photo box. Captions and any following Column prose remain normal flow. */
[data-sfr-photo-ready="true"] [data-sfr-photo-media] {
    display: block !important;
    box-sizing: border-box !important;
    flex: none !important;
    width: 100% !important;
    height: var(--sfr-photo-height) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
}

[data-sfr-photo-ready="true"] img[data-sfr-photo-media] {
    object-position: var(--sfr-photo-position, 50% 50%);
}

[data-sfr-photo-ready="true"]:is([data-sfr-photo-mode="equal-height"], [data-sfr-photo-mode="natural"]) img[data-sfr-photo-media] {
    object-fit: contain !important;
}

/* Native inline image fit is mirrored into this variable by the engine, so
 * legacy Gallery crop selectors cannot override an explicit frame choice.
 * Inline object-position still preserves native focal points. */
[data-sfr-photo-ready="true"][data-sfr-photo-mode="frames"] img[data-sfr-photo-media] {
    object-fit: var(--sfr-photo-fit, contain) !important;
}

[data-sfr-photo-ready="true"] [data-sfr-photo-figure] > figcaption {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
}