/**
 * Digentus Events – Gallery module
 * --------------------------------
 * Uniform square thumbnails, keyboard-friendly focus, WCAG AA contrast.
 *
 * @package Digentus\Events\Gallery
 * @version 1.0.0
 */

/* Container ----------------------------------------------------- */
.dig-gallery-image-list {
    --dig-thumb-size: 250px;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0 auto;                 /* center horizontally */
    width: calc((3 * var(--dig-thumb-size)) + (2 * 1rem)); /* 3 items + 2 gaps */
    justify-content: space-between; /* distributes space evenly */
}

/* Each list-item ------------------------------------------------ */
.dig-gallery-image-list li {
    width: var(--dig-thumb-size);
    height: var(--dig-thumb-size);
    flex: 0 0 var(--dig-thumb-size);   /* prevent stretching on flexbox */
}

/* Anchor: make the whole square clickable & focusable ---------- */
.dig-gallery-image-list a {
    display: block;
    width: 100%;
    height: 200px;
    border-radius: 4px;
    overflow: hidden;
    outline: none;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow 0.2s ease-in-out;
}

/* Focus & hover states (WCAG AA) */
.dig-gallery-image-list a:focus,
.dig-gallery-image-list a:hover {
    box-shadow: 0 0 0 2px #005ae0;        /* ≥ 3 : 1 contrast on white BG */
}

/* Image itself -------------------------------------------------- */
.dig-gallery-image-list img {
    width: 100%;
    height: 200px;
    object-fit: cover;              /* crop without distortion          */
    object-position: center;
    display: block;                 /* remove inline-gap                */
}