/* ==========================================================================
   Photo gallery - shared by the home page strip and the photo-gallery page.
   Brand colour is #42a5f5, the dominant colour of style069b.css.
   ========================================================================== */

:root {
    --kpps-blue: #42a5f5;
    --kpps-dark: #1b2a41;
    --kpps-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    --kpps-shadow-lg: 0 10px 26px rgba(0, 0, 0, .2);
}

/* Shared spinner shown behind a tile until its image paints. */
.album,
.home-gallery__card {
    background-color: #eef4fa;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23dde6ee' stroke-width='4'/%3E%3Cpath d='M20 4a16 16 0 0 1 16 16' fill='none' stroke='%2342a5f5' stroke-width='4' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: center center;
}

/* An album whose cover could not be resolved: hide the broken image icon. */
.gallery-thumb.is-missing {
    visibility: hidden;
}

.gallery-message {
    text-align: center;
    padding: 30px 10px;
    color: #666;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Album grid - photo-gallery page
   -------------------------------------------------------------------------- */

.album-link,
.album-link:hover,
.album-link:focus {
    display: block;
    text-decoration: none;
    color: inherit;
}

.album-link:focus-visible .album {
    outline: 3px solid var(--kpps-dark);
    outline-offset: 2px;
}

.album {
    position: relative;
    display: block;
    width: 100%;
    height: 180px;
    margin: 10px auto;
    overflow: hidden;
    border: 2px solid var(--kpps-blue);
    border-radius: 10px;
    box-shadow: var(--kpps-shadow);
    transition: transform .35s ease, box-shadow .35s ease;
}

.album-link:hover .album,
.album-link:focus-visible .album {
    transform: translateY(-4px);
    box-shadow: var(--kpps-shadow-lg);
}

.album .gallery-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.album-link:hover .gallery-thumb {
    transform: scale(1.08);
}

.album span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 30px;
    padding: 0 8px;
    overflow: hidden;
    background: var(--kpps-blue);
    color: #fff;
    line-height: 30px;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Home page strip
   -------------------------------------------------------------------------- */

/* Sits inside a .container so the left/right gap matches the footer. */
.home-gallery {
    width: 100%;
    border-top: 4px solid var(--kpps-blue);
    background: #f7fafd;
}

.home-gallery__more {
    color: var(--kpps-blue);
    font-weight: 600;
    white-space: nowrap;
}

    .home-gallery__more:hover,
    .home-gallery__more:focus {
        color: var(--kpps-dark);
        text-decoration: none;
    }

.home-gallery__strip {
    width: 100%;
    padding: 4px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.home-gallery__track {
    display: flex;
    align-items: center;
    width: max-content;
}

/* Only animate once the track has been duplicated, otherwise a short list
   would slide away and leave a gap. */
.home-gallery__track.is-scrolling {
    animation: kpps-marquee 40s linear infinite;
    will-change: transform;
}

.home-gallery__strip:hover .home-gallery__track.is-scrolling,
.home-gallery__track.is-scrolling:focus-within {
    animation-play-state: paused;
}

@keyframes kpps-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.home-gallery__card {
    position: relative;
    flex: 0 0 auto;
    width: 220px;
    height: 150px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: var(--kpps-shadow);
    transition: transform .4s ease, box-shadow .4s ease;
}

/* Spacing lives on the card itself, not as a flex `gap`: every tile then
   occupies the same width and the -50% loop lines up exactly. */
.home-gallery__link {
    display: block;
    margin-right: 16px;
    text-decoration: none;
}

    .home-gallery__link:hover .home-gallery__card,
    .home-gallery__link:focus-visible .home-gallery__card {
        transform: translateY(-5px) scale(1.03);
        box-shadow: var(--kpps-shadow-lg);
    }

    .home-gallery__link:focus-visible .home-gallery__card {
        outline: 3px solid var(--kpps-dark);
        outline-offset: 2px;
    }

.home-gallery__card .gallery-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-gallery__card span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 14px 8px 6px;
    overflow: hidden;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
    color: #fff;
    font-size: 13px;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-gallery .gallery-message {
    padding: 45px 10px;
}

@media (max-width: 767px) {
    .home-gallery__card {
        width: 180px;
        height: 125px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-gallery__track.is-scrolling {
        animation: none;
    }

    .home-gallery__strip {
        overflow-x: auto;
    }

    .album,
    .album .gallery-thumb,
    .home-gallery__card {
        transition: none;
    }
}