/* =============================================================
 * Curious Crow — catalog stylesheet
 *
 * Card grid for the [ccm_books] shortcode (SECTION pages). Matches the
 * single-book page's visual language: near-black field, gold accents,
 * Fraunces (display) + Spectral (body).
 *
 * SCOPE: every selector is namespaced under .ccm-books / .ccm-book-card so it
 * cannot leak into the theme. Palette tokens are scoped to .ccm-books (NOT
 * :root) for the same reason. The single-book page keeps its own token block
 * (#ccm-book-single) for now; consolidating to one source is a later cleanup.
 *
 * TIER BAND COLOURS are defined HERE and nowhere else, keyed by slug on the
 * card: .ccm-book-card--tier-{slug} sets a --band custom property that the band
 * element paints with. Each band is the tier's cover BACKGROUND ART — a
 * landscape strip at assets/img/tier-{slug}.jpg — under a left-weighted dark
 * scrim that keeps the band text legible. To revert a band to a flat colour,
 * replace the url(...) in its --tier- line with a solid or gradient value. The
 * .ccm-book-card__band--{slug} hook the shortcode also emits is intentionally
 * left unstyled (single source of truth = the --tier- modifier here).
 * ============================================================= */

.ccm-books{
    /* shared palette — mirrors the single-book page */
    --ink:#000000;
    --moon:#f4f1e4;
    --paper:#ece7da;
    --paper-dim:#aaa599;
    --gold:#d8a94e;
    --gold-soft:#e7c585;
    --card-edge:rgba(216,169,78,.18);
    --card-bg:linear-gradient(160deg,#11131d,#0c0e16);
    --display:"Fraunces",Georgia,serif;
    --body:"Spectral",Georgia,serif;

    /* Self-contained dark panel, so the component reads correctly regardless
     * of the host page's background. To let cards float on the theme
     * background instead, delete the background/padding/border-radius here. */
    background:var(--ink);
    color:var(--paper);
    font-family:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding:34px clamp(18px,4vw,40px) 40px;
    border-radius:12px;
}

/* Specificity bump (.ccm-books .ccm-books__heading = 0,2,0) so the theme's
 * .entry-content h2 colour can't override the heading into dark-on-black. */
.ccm-books .ccm-books__heading{
    font-family:var(--display);
    font-weight:500;
    font-size:1.7rem;
    color:var(--moon);
    margin:0 0 22px;
}

/* auto-FIT (not auto-fill): empty tracks collapse, so 3 cards fill the row
 * instead of leaving phantom black columns to the right. */
.ccm-books__grid{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:22px;
}

/* ---- card frame (shared by the single-link card and the grouped card) ---- */
.ccm-book-card{
    display:flex; /* let the single child stretch to the grid cell */
}
.ccm-book-card__link,
.ccm-book-card__inner{
    display:flex;
    flex-direction:column;
    flex:1;
    border:1px solid var(--card-edge);
    border-radius:10px;
    background:var(--card-bg);
    overflow:hidden;
}
/* Only the single-link card lifts on hover — the grouped card has no single
 * destination, so its chips are the interactive elements instead. */
.ccm-book-card__link{
    transition:border-color .15s, transform .15s, box-shadow .15s;
}
.ccm-book-card__link:hover{
    border-color:var(--gold-soft);
    transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(0,0,0,.5);
}
.ccm-book-card__link:focus-visible{
    outline:2px solid var(--gold-soft);
    outline-offset:2px;
}

/* ---- lead: tier band ---- */
/* Tier band = the tier's cover background-art strip + a left-weighted dark
 * scrim for text legibility. Art at assets/img/tier-{slug}.jpg; one line per
 * tier is the single place tier band appearance is defined. */
.ccm-book-card--tier-blue   { --band:linear-gradient(100deg,rgba(0,0,0,.62),rgba(0,0,0,.30) 45%,rgba(0,0,0,.08)), url('../img/tier-blue.jpg')   center/cover no-repeat; }
.ccm-book-card--tier-purple { --band:linear-gradient(100deg,rgba(0,0,0,.62),rgba(0,0,0,.30) 45%,rgba(0,0,0,.08)), url('../img/tier-purple.jpg') center/cover no-repeat; }
.ccm-book-card--tier-red    { --band:linear-gradient(100deg,rgba(0,0,0,.62),rgba(0,0,0,.30) 45%,rgba(0,0,0,.08)), url('../img/tier-red.jpg')    center/cover no-repeat; }
.ccm-book-card__band{
    background:var(--band,#1a1d27);
    color:#fff;
    min-height:118px;
    padding:24px 18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
}
.ccm-book-card__tier{
    font-family:var(--display);
    font-weight:600;
    font-size:1.55rem;
    line-height:1;
    text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.ccm-book-card__band-label{
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.95);
    text-shadow:0 1px 3px rgba(0,0,0,.55);
}

/* ---- lead: cover (non-graded: Gold, themed) ---- */
.ccm-book-card__cover{ display:block; }
.ccm-book-card__cover img{
    display:block;
    width:100%;
    height:auto;
}
/* Specialty/cover section: cover cards sit at the same width as a tier card,
 * left-aligned and wrapping, instead of two cards stretching to half-width
 * banners. Scoped (:has) to grids that actually contain a cover card, so the
 * tier grid is untouched. Whole cover shown — no crop. */
.ccm-books__grid:has(.ccm-book-card--cover){
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
}
.ccm-books__grid:has(.ccm-book-card--cover) .ccm-book-card{
    flex:0 0 240px;
    max-width:100%;
}

/* ---- body (both leads) ---- */
.ccm-book-card__body{
    display:flex;
    flex-direction:column;
    gap:7px;
    flex:1;
    padding:16px 18px 20px;
}
.ccm-book-card__eyebrow{
    font-size:.7rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold);
}
.ccm-book-card__title{
    font-family:var(--display);
    font-weight:500;
    font-size:1.2rem;
    line-height:1.15;
    color:var(--moon);
}
.ccm-book-card__size{
    font-size:.8rem;
    color:var(--paper-dim);
    margin-top:auto; /* pin to the bottom so mixed-height cards align */
    padding-top:4px;
}

/* ---- grouped card: format chips (one per book in the tier) ---- */
.ccm-books .ccm-book-card__formats{
    list-style:none;
    margin:6px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:9px;
}
.ccm-books .ccm-book-card__formats li{
    list-style:none;
    margin:0;
}
.ccm-book-card__chip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:11px 14px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:6px;
    color:var(--paper);
    font-size:.92rem;
    transition:border-color .15s, background .15s;
}
.ccm-book-card__chip:hover{
    border-color:var(--gold-soft);
    background:rgba(216,169,78,.06);
}
.ccm-book-card__chip:focus-visible{
    outline:2px solid var(--gold-soft);
    outline-offset:2px;
}
.ccm-book-card__chip::after{
    content:"\2192"; /* arrow */
    color:var(--gold-soft);
}

@media (prefers-reduced-motion:reduce){
    .ccm-book-card__link{ transition:none; }
    .ccm-book-card__link:hover{ transform:none; }
}