/* Photo album sites: blue background, four photos per row, lightbox (from app.css/app.js) */

:root {
    --album-bg: #0c599a;
    --album-bg-dark: #0a477b;
    --album-text: #ffffff;
    --album-muted: rgb(255 255 255 / 0.75);
}

/* White page (header, footer and the surround); the photos sit in a blue panel in the middle */
body.album-page {
    background: #fff;
    color: var(--color-text);
}

.album-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.25rem 1rem 0.5rem;
}

.album-header__logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.album-header__logo img {
    display: block;
}

.album-header__bike {
    filter: var(--logo-shadow);   /* as on the main site */
}

.album-header__title {
    margin: 0;
    color: var(--color-brand);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.album {
    max-width: 1240px;
    margin: 1rem auto 0;
    padding: 0.5rem 1.5rem 1.5rem;
    background: var(--album-bg);
    color: var(--album-text);
    border-radius: 8px;
}

/* White surround around the blue panel */
body.album-page main {
    margin-left: max(1rem, calc((100% - 1240px) / 2));
    margin-right: max(1rem, calc((100% - 1240px) / 2));
}

/* "Please click here to visit…" link: at the top, after every three rows, and at the end */
.album__visit {
    display: block;
    margin: 1rem 0;
    padding: 0.7rem 1rem;
    border: 2px solid rgb(255 255 255 / 0.6);
    border-radius: 4px;
    color: var(--album-text);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.15s, border-color 0.15s;
}

.album__visit:hover,
.album__visit:focus-visible {
    background: var(--album-bg-dark);
    border-color: #fff;
}

.album__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.album__break {
    grid-column: 1 / -1;
}

.album__break .album__visit {
    margin: 0.25rem 0;
}

.album__item {
    min-width: 0;
}

.album__photo {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    background: var(--album-bg-dark);
    line-height: 0;
}

.album__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s, opacity 0.15s;
}

a.album__photo:hover img,
a.album__photo:focus-visible img {
    transform: scale(1.03);
}

a.album__photo:focus-visible {
    outline: 3px solid #f2b300;
    outline-offset: 3px;
}

/* No image yet: faint bike and a note */
.album__photo--placeholder {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.7rem;
    border: 1px dashed rgb(255 255 255 / 0.25);
    line-height: 1.2;
}

.album__photo--placeholder::before {
    content: "";
    position: absolute;
    inset: 18% 25% 28%;
    background: url("/img/logo-bike-reversed.svg") center / contain no-repeat;
    opacity: 0.18;
}

.album__photo--placeholder span {
    position: relative;
    color: var(--album-muted);
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.album__caption {
    margin: 0.5rem 0 0;
    color: var(--album-text);
    font-size: 0.9rem;
    line-height: 1.4;
}

.album__empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--album-muted);
}

.album-footer {
    padding: 1.25rem 1rem 2rem;
    color: var(--color-footer-text);
    font-size: 0.85rem;
    text-align: center;
}

.album-footer a {
    color: var(--color-brand);
}

/* Fewer columns on smaller screens */
@media (max-width: 900px) {
    .album__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .album__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.1rem 0.75rem;
    }

    .album-header {
        justify-content: center;
        text-align: center;
    }

    .album-header__bike {
        width: 72px;
        height: auto;
    }

    .album-header__wordmark {
        width: 139px;
        height: auto;
    }

    .album {
        padding: 0.25rem 0.85rem 1rem;
    }

    body.album-page main {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .album__caption {
        font-size: 0.82rem;
    }
}

/* Local list of albums (main site styling) */
.album-list {
    padding: 0;
    list-style: none;
}

.album-list li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-rule);
}

.album-list__meta {
    display: block;
    color: #5b616b;
    font-size: 0.9rem;
}

/*
 * Beside the logo, the title's capitals line up exactly with the wordmark lettering:
 * cap tops with the top of "RACING & INVESTMENT", baseline with the baseline of "MOTORCYCLES".
 * That span is 30.34px in the 32px-high wordmark; Oswald's capitals are 0.81em, so 37.46px type.
 * With line-height 1, Oswald has 0.14em above its capitals and 0.05em below the baseline:
 * trimming those makes the title box exactly cap height, so centring it in the header lines it up.
 */
@media (min-width: 601px) {
    .album-header__title {
        font-size: 37.46px;
        line-height: 1;
        margin: -0.14em 0 -0.05em;
        white-space: nowrap;
        transform: translateY(0.13px);   /* the lettering sits a hair below the wordmark image's centre */
    }
}