/**
 * Block styles for the Gadabout Base Theme.
 *
 * Loaded via enqueue_block_assets, so it applies on the front end AND inside the
 * block editor canvas — the gallery is a layout block, and an unstyled preview
 * would be useless to authors.
 *
 * Kept out of the sass pipeline deliberately: sass compiles to css/style.css,
 * which wp-scss enqueues on the front end only.
 */

/* Override a text block's editor alignment on mobile only. */
@media (max-width: 767px) {
    .mobile-text-left {
        text-align: left !important;
    }
}

/* -------------------------------------------------------------------------
   Project Gallery
   ------------------------------------------------------------------------- */

.lm-project-gallery {
    --lm-gallery-row-gap: 32px;
    --lm-gallery-col-gap: 32px;

    display: flex;
    flex-direction: column;
    gap: var(--lm-gallery-row-gap);
}

.lm-project-gallery__item {
    margin: 0;
    min-width: 0;
}

.lm-project-gallery__img,
.lm-project-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Cropped ratios. `natural` deliberately has no aspect-ratio. */
.lm-project-gallery__item.is-ratio-5-7 { aspect-ratio: 5 / 7; }
.lm-project-gallery__item.is-ratio-2-3 { aspect-ratio: 2 / 3; }
.lm-project-gallery__item.is-ratio-1-1 { aspect-ratio: 1 / 1; }
.lm-project-gallery__item.is-ratio-3-2 { aspect-ratio: 3 / 2; }

.lm-project-gallery__item:not(.is-ratio-natural) img {
    height: 100%;
    object-fit: cover;
}

/* Editor only: an image-less block sizes to its media placeholder. */
.lm-project-gallery__item.is-empty {
    aspect-ratio: auto;
}

/* Desktop: flex-wrap grid. */
@media (min-width: 768px) {
    .lm-project-gallery {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;               /* taller neighbour stretches the shorter */
        gap: var(--lm-gallery-row-gap) var(--lm-gallery-col-gap);
    }

    .lm-project-gallery__item {
        box-sizing: border-box;
    }

    .lm-project-gallery__item.is-width-half {
        flex: 0 1 calc(50% - (var(--lm-gallery-col-gap) / 2));
        margin-inline: auto;                /* centres a lone half on its own line */
    }

    .lm-project-gallery__item.is-width-full {
        flex: 0 1 100%;
    }

    .lm-project-gallery__item.is-width-full.is-ratio-natural img {
        height: auto;
    }
}