/*
 * Image Stack Group widget.
 *
 * Each picture after the first is pulled back over the one before it, so the
 * row reads as a huddle rather than a line.
 */
.ekl-stack-group {
    --ekl-stack-size: 56px;
    --ekl-stack-overlap: 16px;

    @apply flex flex-wrap items-center gap-[16px];
}

.ekl-stack-group[data-caption='bottom'] {
    @apply flex-col items-start;
}

.ekl-stack-group__images {
    @apply flex items-center;
}

.ekl-stack-group__item {
    @apply relative flex shrink-0 items-center justify-center overflow-hidden border-2 border-solid border-white bg-ekl-neutral-200 transition-transform duration-300;

    width: var(--ekl-stack-size);
    height: var(--ekl-stack-size);

    & + & {
        margin-left: calc(-1 * var(--ekl-stack-overlap));
    }

    /* The one under the pointer comes to the front rather than staying buried. */
    &:hover {
        @apply z-[1] -translate-y-[3px];
    }

    img {
        @apply block h-full w-full object-cover;
    }

    a {
        @apply block h-full w-full;
    }
}

.ekl-stack-group__more {
    @apply bg-ekl-secondary text-[14px] font-semibold leading-none text-white;
}

.ekl-stack-group__title {
    @apply text-[16px] font-semibold leading-[1.4] text-ekl-secondary;
}

.ekl-stack-group__text {
    @apply text-[14px] leading-[1.5] text-ekl-neutral-700;
}