/* =========================================================
   CAPTUS PRESS CATALOGUE — SHARED BOOK-COVER STYLES

   Linked from every subject page, together with covers.js.
   Change cover behaviour here and it applies to all pages.

   IMAGE COVERS: same height, true proportions
   ---------------------------------------------------------
   Every cover on a page is drawn at the same HEIGHT. Width
   follows each cover's own proportions, so wider books look
   wider and every cover is shown whole. Nothing is trimmed
   or stretched. Narrower covers are centred in the card.

   The height is set per page by covers.js: it matches the
   WIDEST cover on that page, so that cover fills the card.

     page with only 6 x 9 books   -> height 1.50 x width
     page with 7 x 10 as widest   -> height 1.43 x width
     page with 8 x 10 books       -> height 1.25 x width

   --cover-ratio (height / width) holds the current value.
   1.25 is used until the images have loaded.

   LANDSCAPE COVERS
   ---------------------------------------------------------
   Images wider than tall get the class "cover-landscape"
   (added by covers.js): shown whole at full card width.

   FALLBACK COVERS (no image)
   ---------------------------------------------------------
   Coloured boxes with a book icon, the same height as the
   image covers on the page.
========================================================= */


:root {
    --cover-ratio: 1.25;         /* height / width; set by covers.js */
}


/* ---------- Shared frame (fallback covers use this as-is) */

.cover {
    width: 100%;
    aspect-ratio: 1 / var(--cover-ratio);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;         /* centres narrower covers */
    justify-content: center;
    gap: 8px;
    margin-bottom: .75rem;
    overflow: hidden;
    background: #ffffff;
}


/* ---------- Image covers */

.cover-img {
    aspect-ratio: auto;          /* size comes from the image */
    container-type: inline-size; /* lets cqw measure the card width */
}

.cover-img img {
    height: calc(var(--cover-ratio) * 100cqw);   /* same height for every cover */
    width: auto;                 /* width follows the cover's shape */
    max-width: 100%;
    object-fit: contain;         /* safety: never stretched */

    border: 1px solid #b8b8b8;   /* border hugs the cover */
    border-radius: 4px;

    display: block;
    box-sizing: border-box;
}


/* ---------- Landscape covers: full width, natural height */

.cover-landscape img {
    width: 100%;
    height: auto;
}


/* ---------- Fallback cover contents */

.cover svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.clabel {
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    padding: 0 10px;
    line-height: 1.4;
}


/* ---------- Fallback cover colours */

.sage { background: #e6efe6; }
.sage .clabel, .sage svg { color: #1a5c2a; fill: none; stroke: #1a5c2a; }

.teal { background: #e0f0ef; }
.teal .clabel, .teal svg { color: #1a5c56; fill: none; stroke: #1a5c56; }

.plum { background: #ede6f0; }
.plum .clabel, .plum svg { color: #5c2a72; fill: none; stroke: #5c2a72; }

.neut, .neutral { background: #eae9e4; }
.neut .clabel, .neut svg,
.neutral .clabel, .neutral svg { color: #4a4a46; fill: none; stroke: #4a4a46; }

.green { background: #e6f4ea; }
.green .clabel, .green svg { color: #1a6630; fill: none; stroke: #1a6630; }

.blue { background: #ddeeff; }
.blue .clabel, .blue svg { color: #0c4a8c; fill: none; stroke: #0c4a8c; }

.amber { background: #fff0d4; }
.amber .clabel, .amber svg { color: #7a4a00; fill: none; stroke: #7a4a00; }


/* ---------- Carousel pause / continue button (added by covers.js) */

.dots {
    align-items: center;         /* lines the button up with the dots */
}

.carousel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 9px 2px 7px;

    font: inherit;
    font-size: 11px;
    color: #4a4a46;

    background: #ffffff;
    border: .5px solid #d0cfc9;
    border-radius: 99px;
    cursor: pointer;
}

.carousel-toggle:hover {
    border-color: #aaaaaa;
}

.carousel-toggle:focus-visible {
    outline: 2px solid #5c2a72;
    outline-offset: 2px;
}

.carousel-toggle svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}


/* ---------- "New release" tag on the book cards (added by covers.js) */

.badge-new {
    background: #e6f4ea;
    color: #1a6630;
    margin-right: 4px;
}