/* TinyTag / NameLabels – footer photo collage
   Desktop: 2 rows x 5 tiles. Mobile: 3 rows x 2 tiles. Tiles are flush
   (no gaps, no rounding), Instagram-grid style.
   Extra <li> stay hidden and serve as the rotation pool for collage.js. */

.tt-collage {
    --tt-gap: 0px;
    --tt-radius: 0px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--tt-gap);
    padding: 0;
    margin: 0;
    list-style: none;
}

.tt-collage li {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--tt-radius);
    background: #f4eef7; /* placeholder tint while images load */
}

/* Desktop pool: anything past 10 is hidden (5 x 2) */
.tt-collage li:nth-child(n + 11) {
    display: none;
}

.tt-collage picture {
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity 0.65s ease; /* keep in sync with FADE_MS in collage.js */
}

.tt-collage picture.tt-enter {
    opacity: 0;
}

.tt-collage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

/* Mobile: 2 x 3 */
@media (max-width: 700px) {
    .tt-collage {
        grid-template-columns: repeat(2, 1fr);
    }

    .tt-collage li:nth-child(n + 7) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tt-collage picture,
    .tt-collage img {
        transition: none;
    }
}