/* ---------------------------------------------------------------------------
   Cover portfolio styles -- /Covers only.

   Extracted from an inline <style> block in Views/Covers/Index.cshtml so the
   rules are cacheable rather than re-sent with every page view, and so they
   land in <head> instead of mid-body where they force a re-render.

   LINKED ONLY FROM Views/Covers/Index.cshtml, via @section Styles, and it must
   stay that way: .card is a global Bootstrap name that /Interiors and /Pricing
   define with different values. Linking this sheet site-wide would break those
   pages.

   The carousel rules that used to live here dressed the click-to-open popup in
   _CoverModals.cshtml. That popup was removed, so they went with it.
   --------------------------------------------------------------------------- */

.card-container {
    display: flex;
    justify-content: center;
}

.card {
    border: none; /* Removes border */
    padding: 0; /* Ensures no padding around image */
    overflow: hidden; /* Prevents any extra spacing */
}
#cardStyle {
    width: 100%;
    max-width: 300px;
    height: auto;
    /* Matches the artwork. The covers used to carry a baked drop-shadow
       halo, so the book sat inside a 0.70 canvas that object-fit:fill then
       stretched into this box. With the halo cropped off, all 106 active
       covers measure 0.633-0.647, so 9/14 (0.6429) is the shared ratio and
       fill has nothing left to distort. */
    aspect-ratio: 9/14;
}

.cover-image {
    object-fit: fill;
    height: 100%;
    width: 100%; 
}

/* ---------------------------------------------------------------------------
   Cover pager.

   Built by the script in Views/Covers/Index.cshtml. Deliberately the same pill
   system as the category tabs in portfolio.css -- same radius, border alpha,
   navy fill when selected -- so the two controls on this page read as one set
   rather than two unrelated widgets.

   Sizing is fluid for the same reason as the tabs: the windowed pager can show
   up to seven buttons (Prev + five pages + Next), which at a fixed 44px plus
   an 8px gap needed ~376px and so wrapped on a 390px phone.

   Brand navy throughout -- not the #007bff the Interiors pager uses, which is
   not in the palette.
   --------------------------------------------------------------------------- */
.bp-cover-pager {
    display: flex;
    justify-content: center;
    margin-top: clamp(20px, 1rem + 1.4vw, 32px);
}

.bp-cover-pager__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(5px, 0.25rem + 0.3vw, 8px);
    list-style: none;
    padding: 0;
    margin: 0;
}

.bp-cover-pager__btn {
    /* 40px floor keeps seven buttons on one row at 390px; 44px from 480px up,
       which is the WCAG target size. */
    min-width: clamp(40px, 2rem + 1.2vw, 44px);
    min-height: clamp(40px, 2rem + 1.2vw, 44px);
    padding: clamp(6px, 0.35rem + 0.25vw, 9px) clamp(10px, 0.5rem + 0.7vw, 16px);
    border: 1px solid rgba(27, 42, 74, 0.18);
    border-radius: 999px;
    background: transparent;
    color: var(--bp-navy, #1B2A4A);
    font-size: clamp(0.82rem, 0.72rem + 0.5vw, 0.95rem);
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease,
                border-color 0.25s ease;
}

.bp-cover-pager__btn:hover:not(:disabled) {
    background: rgba(27, 42, 74, 0.08);
    border-color: rgba(27, 42, 74, 0.45);
}

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

.bp-cover-pager__btn.is-current {
    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;
}

.bp-cover-pager__btn:disabled {
    opacity: 0.32;
    cursor: default;
}

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