/* ==========================================================================
   GALLERY
   ==========================================================================
   Two parts, same split as forms.css:

     PART 1 — LAYOUT   how the tiles are arranged
     PART 2 — BRAND    how they look

   HOW TO SET IT UP IN CONTAO
   Put every image in a SINGLE row in the gallery element — set "images per
   row" to the total number of images. Contao then renders one flat list and
   the grid below decides how many fit per line. Do not use the per-row
   setting to control the layout; it cannot respond to screen width.
   ========================================================================== */


/* ==========================================================================
   PART 1 — LAYOUT
   ==========================================================================
   `repeat(auto-fit, minmax(...))` is intrinsically responsive: the browser
   fits as many tracks of at least --gallery-min as the container allows and
   distributes the remainder evenly. Columns are added and dropped purely on
   available width, so there are no breakpoints to maintain and it behaves
   correctly inside a narrow column as well as at full width.

   This replaces a flex layout with a percentage width per --cols-N class
   and three media queries.
   ========================================================================== */

.content-gallery ul {
    display: grid;
    /* min(…, 100%) lets the single track collapse to the container instead
       of overflowing it — a bare minmax floor is a hard minimum, so a
       gallery inside a narrow column would spill past its edge. */
    grid-template-columns: repeat(auto-fit, minmax(min(var(--gallery-min, 220px), 100%), 1fr));
    gap: var(--gallery-gap, var(--gutter-24));

    margin: 0;
    padding: 0;
    list-style: none;
}

/* The gap provides all the spacing, so the items carry none of their own. */
.content-gallery ul li {
    margin: 0;
    padding: 0;
    min-width: 0;        /* let a tile shrink below its image's intrinsic width */
}

.content-gallery figure {
    margin: 0;
    height: 100%;
}

.content-gallery img {
    width: 100%;
    height: auto;
    display: block;
}

/* Single-image galleries should not stretch one tile across the full width. */
.content-gallery--cols-1 ul {
    grid-template-columns: 1fr;
}


/* --------------------------------------------------------------------------
   OPTIONAL — uniform tiles
   --------------------------------------------------------------------------
   By default tiles keep each image's own aspect ratio, so rows can vary in
   height and nothing is cropped. If a site wants a strict grid of identical
   tiles instead, add .gallery-crop to the element and every image is cropped
   to a common ratio.
   -------------------------------------------------------------------------- */

.gallery-crop img {
    aspect-ratio: var(--gallery-ratio, 1);
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   PART 2 — BRAND
   ==========================================================================
   Adjust per site. Nothing here affects the arrangement above.
   ========================================================================== */

.content-gallery img {
    border-radius: 2px;
}

.content-gallery figcaption {
    margin-top: var(--space-8);
    font-size: 0.875em;
    text-align: center;
}


/* --------------------------------------------------------------------------
   TUNING
   --------------------------------------------------------------------------
   Both dials can be set globally in website.css or per element via the
   CSS class field:

     --gallery-min   smallest a tile may get before a column is dropped.
                     Lower = more columns. 220px suits thumbnails; use
                     ~300px for larger feature images.
     --gallery-gap   space between tiles. Defaults to the gutter scale.

   Example, a coarser gallery on one element:
     .gallery-large { --gallery-min: 320px; }
   -------------------------------------------------------------------------- */