/*
 * Image Grid widget.
 *
 * Two layouts from one piece of markup: a grid, where every cell is the same
 * size, and masonry, which is CSS columns — the pictures keep their own heights
 * and fill the shortest column, with no script to lay them out.
 */
.ekl-image-grid {
    @apply grid gap-[16px];

    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ekl-image-grid[data-layout='masonry'] {
    @apply block columns-3 gap-[16px];

    .ekl-image-grid__item {
        @apply mb-[16px] block w-full;

        /* Or a picture would be split across the foot of one column. */
        break-inside: avoid;
    }
}

.ekl-image-grid__item {
    @apply relative block overflow-hidden;

    img {
        @apply block h-auto w-full transition-transform duration-500 ease-out;
    }
}

.ekl-image-grid__caption {
    @apply block px-[4px] pt-[10px] text-[14px] leading-[1.5] text-ekl-neutral-700;
}

/* Over the picture: hidden until the pointer, and readable when it arrives. */
.ekl-image-grid__item[data-caption='overlay'] {
    .ekl-image-grid__caption {
        @apply absolute inset-x-0 bottom-0 px-[14px] py-[12px] text-white opacity-0 transition-opacity duration-300;

        background-color: rgb(0 0 0 / 55%);
    }

    &:hover .ekl-image-grid__caption,
    &:focus-within .ekl-image-grid__caption {
        @apply opacity-100;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ekl-image-grid__item img,
    .ekl-image-grid__caption {
        @apply transition-none;
    }
}