/* Asymmetric Image Grid: 2 stacked left + 1 tall right.
   Loaded on the frontend AND in the block-editor canvas (via add_editor_style). */
.gbp-image-grid-asymmetric {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
}

/* Flatten the wrappers WordPress inserts around inner blocks so the 3 image
   items become direct grid children in both frontend and editor DOMs. */
.gbp-image-grid-asymmetric > .wp-block-group__inner-container,
.gbp-image-grid-asymmetric > .block-editor-block-list__layout {
    display: contents;
}

.gbp-image-grid-asymmetric .gbp-grid-item-1 {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
}

.gbp-image-grid-asymmetric .gbp-grid-item-2 {
    grid-column: 1;
    grid-row: 2;
    overflow: hidden;
}

.gbp-image-grid-asymmetric .gbp-grid-item-3 {
    grid-column: 2;
    grid-row: 1 / 3;
    overflow: hidden;
}

.gbp-image-grid-asymmetric .wp-block-image {
    margin: 0;
    height: 100%;
}

.gbp-image-grid-asymmetric .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Grid spacing overrides */
.gbp-image-grid-asymmetric.gbp-grid-gap-none { gap: 0; }
.gbp-image-grid-asymmetric.gbp-grid-gap-small { gap: 4px; }
.gbp-image-grid-asymmetric.gbp-grid-gap-default { gap: 12px; }
.gbp-image-grid-asymmetric.gbp-grid-gap-medium { gap: 16px; }
.gbp-image-grid-asymmetric.gbp-grid-gap-large { gap: 24px; }
.gbp-image-grid-asymmetric.gbp-grid-gap-xlarge { gap: 32px; }

/* Two-column equal image grid */
.gbp-image-grid-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.gbp-image-grid-two-columns > .wp-block-group__inner-container,
.gbp-image-grid-two-columns > .block-editor-block-list__layout {
    display: contents;
}

.gbp-image-grid-two-columns .wp-block-image {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.gbp-image-grid-two-columns .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Grid spacing overrides — two-column */
.gbp-image-grid-two-columns.gbp-grid-gap-none { gap: 0; }
.gbp-image-grid-two-columns.gbp-grid-gap-small { gap: 4px; }
.gbp-image-grid-two-columns.gbp-grid-gap-default { gap: 12px; }
.gbp-image-grid-two-columns.gbp-grid-gap-medium { gap: 16px; }
.gbp-image-grid-two-columns.gbp-grid-gap-large { gap: 24px; }
.gbp-image-grid-two-columns.gbp-grid-gap-xlarge { gap: 32px; }

@media (max-width: 768px) {
    .gbp-image-grid-asymmetric {
        grid-template-columns: 1fr;
    }

    .gbp-image-grid-asymmetric .gbp-grid-item-1 {
        grid-column: 1;
        grid-row: auto;
    }

    .gbp-image-grid-asymmetric .gbp-grid-item-2 {
        grid-column: 1;
        grid-row: auto;
    }

    .gbp-image-grid-asymmetric .gbp-grid-item-3 {
        grid-column: 1;
        grid-row: auto;
        max-height: 400px;
    }

    .gbp-image-grid-two-columns {
        grid-template-columns: 1fr;
    }
}

/* ── Asymmetric grid: per-breakpoint items-per-row (opt-in) ──
   The "Items per row" inspector controls add a .gbp-grid-tablet-cols-* /
   .gbp-grid-mobile-cols-* class. When present, the 3 items' fixed asymmetric
   placement is reset so they flow into the chosen number of columns. "1 per
   row" yields full-width images shown at their natural aspect ratio (the
   default cell-height crop is removed). No class → existing layout is kept,
   so previously-saved blocks are unaffected. */

/* Tablet (769–1024px) — default here is the desktop 2 Left + 1 Right layout. */
@media (min-width: 769px) and (max-width: 1024px) {
    .gbp-image-grid-asymmetric[class*="gbp-grid-tablet-cols-"] {
        grid-template-rows: auto;
    }

    .gbp-image-grid-asymmetric[class*="gbp-grid-tablet-cols-"] .gbp-grid-item-1,
    .gbp-image-grid-asymmetric[class*="gbp-grid-tablet-cols-"] .gbp-grid-item-2,
    .gbp-image-grid-asymmetric[class*="gbp-grid-tablet-cols-"] .gbp-grid-item-3 {
        grid-column: auto;
        grid-row: auto;
    }

    .gbp-image-grid-asymmetric.gbp-grid-tablet-cols-1 { grid-template-columns: 1fr; }
    .gbp-image-grid-asymmetric.gbp-grid-tablet-cols-2 { grid-template-columns: 1fr 1fr; }

    /* Full-width stacked: let images size to their natural height. */
    .gbp-image-grid-asymmetric.gbp-grid-tablet-cols-1 .wp-block-image,
    .gbp-image-grid-asymmetric.gbp-grid-tablet-cols-1 .wp-block-image img {
        height: auto;
    }
}

/* Mobile (≤768px) — default here is already a full-width single column
   (see the rule above); these let an editor switch to 2-up or force true
   full-width images at natural height. */
@media (max-width: 768px) {
    .gbp-image-grid-asymmetric[class*="gbp-grid-mobile-cols-"] {
        grid-template-rows: auto;
    }

    .gbp-image-grid-asymmetric[class*="gbp-grid-mobile-cols-"] .gbp-grid-item-1,
    .gbp-image-grid-asymmetric[class*="gbp-grid-mobile-cols-"] .gbp-grid-item-2,
    .gbp-image-grid-asymmetric[class*="gbp-grid-mobile-cols-"] .gbp-grid-item-3 {
        grid-column: auto;
        grid-row: auto;
    }

    .gbp-image-grid-asymmetric.gbp-grid-mobile-cols-1 { grid-template-columns: 1fr; }
    .gbp-image-grid-asymmetric.gbp-grid-mobile-cols-2 { grid-template-columns: 1fr 1fr; }

    /* Full-width stacked: drop the default 400px cap and natural-size images. */
    .gbp-image-grid-asymmetric.gbp-grid-mobile-cols-1 .gbp-grid-item-3 {
        max-height: none;
    }

    .gbp-image-grid-asymmetric.gbp-grid-mobile-cols-1 .wp-block-image,
    .gbp-image-grid-asymmetric.gbp-grid-mobile-cols-1 .wp-block-image img {
        height: auto;
    }
}

/* Side padding (left + right). Tablet & mobile (≤1024px) and a separate
   desktop (≥1025px) scale, set by the "Side padding" inspector controls.
   box-sizing keeps the padding INSIDE the element so the grid shrinks instead
   of overflowing; !important beats any parent theme / Gutenberg padding. */
.gbp-image-grid-asymmetric[class*="gbp-side-pad-"] {
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .gbp-image-grid-asymmetric.gbp-side-pad-8 { padding-left: 8px !important; padding-right: 8px !important; }
    .gbp-image-grid-asymmetric.gbp-side-pad-12 { padding-left: 12px !important; padding-right: 12px !important; }
    .gbp-image-grid-asymmetric.gbp-side-pad-16 { padding-left: 16px !important; padding-right: 16px !important; }
    .gbp-image-grid-asymmetric.gbp-side-pad-22 { padding-left: 22px !important; padding-right: 22px !important; }
    .gbp-image-grid-asymmetric.gbp-side-pad-32 { padding-left: 32px !important; padding-right: 32px !important; }
}

@media (min-width: 1025px) {
    .gbp-image-grid-asymmetric.gbp-side-pad-desktop-8 { padding-left: 8px !important; padding-right: 8px !important; }
    .gbp-image-grid-asymmetric.gbp-side-pad-desktop-12 { padding-left: 12px !important; padding-right: 12px !important; }
    .gbp-image-grid-asymmetric.gbp-side-pad-desktop-16 { padding-left: 16px !important; padding-right: 16px !important; }
    .gbp-image-grid-asymmetric.gbp-side-pad-desktop-22 { padding-left: 22px !important; padding-right: 22px !important; }
    .gbp-image-grid-asymmetric.gbp-side-pad-desktop-32 { padding-left: 32px !important; padding-right: 32px !important; }
}