/* ---------------------------------------------------------------------------
   Covers portfolio: category tabs + filterable grid.
   Shared by the home page portfolio band and the /Covers page so the two
   cannot drift apart. Brand navy marks the active tab; Accent Orange is
   reserved for the logo and is deliberately unused here.
   --------------------------------------------------------------------------- */
    /* ---------------- Covers portfolio with category tabs ---------------- */
    .bp-portfolio {
        background: var(--bp-light);
    }

    .bp-portfolio__tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* Gap shrinks with the viewport so ten pills wrap into fewer rows. */
        gap: clamp(6px, 0.3rem + 0.4vw, 10px);
        margin: 0 0 clamp(20px, 1rem + 1.4vw, 34px);
        padding: 0;
        list-style: none;
    }

    /* Pill sizing is fluid rather than stepped: there are ten categories, and a
       fixed 0.95rem/18px pill wrapped them onto four rows on a phone. */
    .bp-portfolio__tab {
        border: 1px solid rgba(27, 42, 74, 0.18);
        background: transparent;
        color: var(--bp-navy);
        padding: clamp(6px, 0.35rem + 0.25vw, 9px) clamp(12px, 0.7rem + 0.8vw, 18px);
        border-radius: 999px;
        font-size: clamp(0.82rem, 0.72rem + 0.5vw, 0.95rem);
        line-height: 1.3;
        /* 400: Arno has no heavier real weight (see fonts.css). */
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color 0.25s ease, color 0.25s ease,
                    border-color 0.25s ease;
    }

        /* Hover tints rather than only recolouring the text, so the target reads
           as interactive before it is clicked. */
        .bp-portfolio__tab:hover {
            background: rgba(27, 42, 74, 0.08);
            color: var(--bp-navy);
            border-color: rgba(27, 42, 74, 0.45);
        }

        .bp-portfolio__tab:focus-visible {
            outline: 2px solid var(--bp-navy, #1B2A4A);
            outline-offset: 2px;
        }

        /* Selected: a filled navy pill. Previously this only swapped the text and
           border colour, which was hard to pick out among ten outlined pills. */
        .bp-portfolio__tab.is-active {
            background: var(--bp-navy, #1B2A4A);
            color: #F2F0EA;
            border-color: var(--bp-navy, #1B2A4A);
            /* 400: Arno has no heavier real weight (see fonts.css). */
            font-weight: 400;
        }

    @media (prefers-reduced-motion: reduce) {
        .bp-portfolio__tab {
            transition: none;
        }
    }

    .bp-portfolio__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 22px;
    }

    .bp-portfolio__item {
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 10px 26px rgba(27, 42, 74, 0.12);
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .bp-portfolio__item.is-hidden {
            display: none;
        }

        .bp-portfolio__item.is-entering {
            opacity: 0;
            transform: scale(0.96);
        }

        /* Thumbnails open a carousel of that cover's images.
           Sizing mirrors the /Covers grid (#cardStyle + .cover-image): a 3:4
           box filled edge to edge. The previous 2/3 + object-fit:cover was
           cropping the artwork, which is why this band looked different. */
        .bp-portfolio__item img {
            cursor: zoom-in;
            width: 100%;
            height: 100%;
            display: block;
            aspect-ratio: 3 / 4;
            object-fit: fill;
            transition: transform 0.45s ease;
        }

        .bp-portfolio__item:hover img {
            transform: scale(1.05);
        }

    .bp-portfolio__empty {
        display: none;
        text-align: center;
        color: var(--bp-slate);
        padding: 26px 0;
    }

        .bp-portfolio__empty.is-visible {
            display: block;
        }

    @media (prefers-reduced-motion: reduce) {
        .bp-portfolio__item,
        .bp-portfolio__item img {
            transition: none;
        }
    }

/* /Covers grid cells reuse the same hide/animate behaviour as the home band. */
.bp-cover-cell {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .bp-cover-cell.is-hidden {
        display: none;
    }

/* ---------------------------------------------------------------------------
   /Covers thumbnails: hover.

   The zoom goes on the <img> while the frame stays put. .card in the view's
   own stylesheet carries overflow:hidden and #cardStyle pins a 3/4 aspect
   ratio, so scaling the image enlarges the artwork inside a fixed cell instead
   of pushing the grid around -- no reflow, and the rows stay aligned.

   The cell is no longer interactive -- the click-to-open popup was removed --
   so this hover is decorative only, and :focus-within cannot currently match
   (the <img> is not focusable). It is kept so the feedback returns for free if
   a link is ever put back around the thumbnail.
   --------------------------------------------------------------------------- */
.bp-cover-cell .card {
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease;
}

    .bp-cover-cell .card:hover,
    .bp-cover-cell .card:focus-within {
        transform: translateY(-6px);
        box-shadow: 0 18px 34px rgba(27, 42, 74, 0.28);
    }

.bp-cover-cell .cover-image {
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

    .bp-cover-cell .card:hover .cover-image,
    .bp-cover-cell .card:focus-within .cover-image {
        transform: scale(1.06);
    }

@media (prefers-reduced-motion: reduce) {
    .bp-cover-cell .card,
    .bp-cover-cell .cover-image {
        transition: none;
    }

    .bp-cover-cell .card:hover,
    .bp-cover-cell .card:focus-within,
    .bp-cover-cell .card:hover .cover-image,
    .bp-cover-cell .card:focus-within .cover-image {
        transform: none;
    }
}