/* ============================================================
 * library.css — the library-shelf browse layout
 *
 * Books stand spine-out on a wooden shelf board. Hovering or
 * focusing a spine lifts the book up out of the shelf and reveals
 * a pop-card with its basics + an entitlement-aware CTA. Used by
 * the catalog, series, and bundles pages. Uses the shared design
 * tokens from styles.css so it themes with the rest of the site.
 * ============================================================ */

:root {
    --wood: #6f5536;
    --wood-dark: #5a4329;
}
[data-theme="dark"] {
    --wood: #4a3a26;
    --wood-dark: #34281a;
}

.lib-shelf { position: relative; margin: 0 0 4rem; padding: 0 1rem; }

.lib-books {
    display: flex; align-items: flex-end; gap: 6px; min-height: 300px;
    padding: 0 1.5rem; position: relative; z-index: 2;
    flex-wrap: wrap; row-gap: 2.5rem;
    perspective: 1600px; perspective-origin: 50% 60%;
}

.lib-board {
    position: relative; height: 20px; border-radius: 2px; z-index: 1;
    background: linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 70%, #3f2f1c 100%);
    box-shadow: 0 16px 28px -14px rgba(27,22,17,.55), inset 0 2px 0 rgba(255,255,255,.15);
}
.lib-board::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px;
    border-radius: 0 0 2px 2px; background: linear-gradient(180deg, #3f2f1c, #2c2013);
}

/* ============================================================
 * A book on the shelf — slide-out + cover-hinge interaction.
 *
 * Same markup as before (.lib-spine > .lib-s-title + .lib-pop with
 * .lib-pop-cover + .lib-pop-info), re-skinned so it behaves like a
 * real book: hovering slides the book up off the shelf and shows its
 * front cover; a beat later the cover swings open on a left hinge to
 * reveal the inside flap (series, title, description, rating, CTA).
 *
 * Driven purely by :hover / :focus-within / .is-open (touch, via
 * shelf-pop.js) — no markup changes needed in app.js / series / home.
 * ============================================================ */
.lib-spine {
    position: relative; flex: 0 0 auto; width: 44px; height: 270px; cursor: pointer;
    text-decoration: none; transform-origin: bottom center;
    transition: transform .42s var(--ease-out), height .42s;
    z-index: 1;
}
/* the closed book = its spine face (cloth + gilt + vertical title) */
.lib-spine > .lib-s-title { /* spine wrapper styling lives on the title; see below */ }

/* cloth-binding colours (assigned per book). They paint the COVER face,
   which is the .lib-pop-cover's frame — but the spine edge also needs the
   colour while closed, so we carry it on the spine via these vars. */
.lib-spine.sp-c1 { --cloth: #7a2b1a; --cloth-ink: #f4e6d8; }
.lib-spine.sp-c2 { --cloth: #33473a; --cloth-ink: #ede6d2; }
.lib-spine.sp-c3 { --cloth: #2f3b52; --cloth-ink: #e7ecf3; }
.lib-spine.sp-c4 { --cloth: #6a5326; --cloth-ink: #f6eedd; }
.lib-spine.sp-c5 { --cloth: #5a3550; --cloth-ink: #f1e4ee; }
.lib-spine.sp-c6 { --cloth: #7d6a3c; --cloth-ink: #fbf3df; }
.lib-spine.sp-c7 { --cloth: #404a4d; --cloth-ink: #e9eef0; }

/* spine edge: vertical title on the cloth, shown while closed */
.lib-s-title {
    position: absolute; inset: 0; z-index: 4;
    display: flex; align-items: center; justify-content: center;
    border-radius: 3px 3px 0 0; border: 1px solid rgba(0,0,0,.25); border-bottom: none;
    background-color: var(--cloth); color: var(--cloth-ink);
    background-image: linear-gradient(90deg, rgba(0,0,0,.18), transparent 18%, transparent 82%, rgba(0,0,0,.12));
    box-shadow: inset -3px 0 6px rgba(0,0,0,.18), inset 3px 0 4px rgba(255,255,255,.10), 2px 0 4px rgba(27,22,17,.18);
    writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg);
    font-family: var(--font-display); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
    transition: opacity .25s var(--ease);
    padding: 18px 0;
}
/* gilt bands on the spine edge */
.lib-s-title::before, .lib-s-title::after {
    content: ""; position: absolute; left: 6px; right: 6px; height: 1px;
    background: rgba(255,255,255,.28);
}
.lib-s-title::before { top: 14px; } .lib-s-title::after { bottom: 14px; }

/* LIFT: hover/focus raises the book up off the shelf. The spine keeps its
   44px flow footprint so neighbours don't shove; the cover lid and inside
   flap widen as overlays (below) anchored to the spine's left edge. */
.lib-spine:hover, .lib-spine:focus-visible, .lib-spine:focus-within, .lib-spine.is-open {
    transform: translateY(-32px); height: 290px; outline: none; z-index: 6;
}
/* once lifted, the spine-edge title fades — the cover face takes over */
.lib-spine:hover .lib-s-title,
.lib-spine:focus-within .lib-s-title,
.lib-spine.is-open .lib-s-title { opacity: 0; }

/* ---- THE COVER FACE (.lib-pop-cover) ----
   While closed it sits hidden behind the spine; on lift it becomes the
   visible front cover, then hinges open on its left edge. */
/* ---- THE BOOK BODY (.lib-pop) ----
   Fills the lifted book. Holds the hinged cover lid (.lib-pop-cover) on
   top and the inside-flap content (.lib-pop-info) beneath it. At rest it
   matches the 44px spine; on lift it widens to a book shape, anchored to
   the spine's left edge so it opens to the right over neighbours. */
.lib-pop {
    position: absolute; top: 0; bottom: 0; left: 0; width: 44px; z-index: 3;
    border-radius: 3px 3px 0 0;
    text-align: left; color: var(--ink);
    transform-style: preserve-3d;
    transition: width .42s var(--ease-out);
}
.lib-spine:hover .lib-pop, .lib-spine:focus-within .lib-pop, .lib-spine.is-open .lib-pop {
    width: 200px;
}

/* ---- THE COVER LID (.lib-pop-cover) ----
   While closed it sits hidden behind the spine edge; on lift it becomes
   the visible front cover, then hinges open on its left edge. */
.lib-pop-cover {
    position: absolute; inset: 0; z-index: 5;
    border-radius: 3px 3px 0 0; overflow: hidden;
    border: 1px solid rgba(0,0,0,.25); border-bottom: none;
    background: linear-gradient(160deg, var(--cloth), rgba(0,0,0,.34));
    box-shadow: inset -3px 0 6px rgba(0,0,0,.18), inset 3px 0 4px rgba(255,255,255,.10), 2px 0 4px rgba(27,22,17,.18);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem;
    opacity: 0; transform-origin: left center; transform: perspective(1400px) rotateY(0deg);
    backface-visibility: hidden;
    transition: opacity .2s var(--ease), transform .6s var(--ease) .05s, box-shadow .42s;
    text-align: left;
}
.lib-pop-cover::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
    background: rgba(0,0,0,.28); z-index: 2;
}
.lib-pop-cover .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.lib-pop-cover.no-art .art { display: none; }
.lib-pop-cover.no-art::before { background: var(--accent); width: 5px; }
.lib-pop-cover-t {
    position: relative; z-index: 2;
    font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.1;
    color: var(--cloth-ink); text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.lib-pop-cover:not(.no-art) .lib-pop-cover-t { opacity: 0; }

/* on lift: cover appears over the spine */
.lib-spine:hover .lib-pop-cover,
.lib-spine:focus-within .lib-pop-cover,
.lib-spine.is-open .lib-pop-cover {
    opacity: 1;
    box-shadow: 0 30px 44px -16px rgba(27,22,17,.55), 2px 0 6px rgba(27,22,17,.2);
}
/* HOLD, then swing open: the longer delay before the hinge turns means the
   reader sees the cover first; the inside flap is revealed a beat later. */
.lib-spine:hover .lib-pop-cover,
.lib-spine:focus-within .lib-pop-cover {
    transform: perspective(1400px) rotateY(-150deg);
    transition: opacity .2s var(--ease), transform .6s var(--ease) .75s, box-shadow .42s;
}
.lib-spine.is-open .lib-pop-cover {
    transform: perspective(1400px) rotateY(-150deg);
    transition: opacity .2s var(--ease), transform .6s var(--ease) .05s, box-shadow .42s;
}

/* ---- THE INSIDE FLAP (.lib-pop-info) ----
   Sits beneath the cover lid; revealed when the lid hinges away. Holds the
   standardized card content: series, title, subtitle, description,
   rating, CTA. */
.lib-pop-info {
    position: absolute; inset: 0; z-index: 3;
    border-radius: 3px 3px 0 0; overflow: hidden;
    background: var(--paper-raise); border: 1px solid var(--rule); border-bottom: none;
    display: flex; flex-direction: column; align-items: stretch; min-width: 0;
    padding: 0.95rem 1rem;
    opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease) .2s;
}
.lib-spine:hover .lib-pop-info,
.lib-spine:focus-within .lib-pop-info {
    opacity: 1; pointer-events: auto;
    transition: opacity .3s var(--ease) .95s;
}
.lib-spine.is-open .lib-pop-info {
    opacity: 1; pointer-events: auto;
    transition: opacity .3s var(--ease) .25s;
}

.lib-p-series, .lib-p-series a {
    font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 0.4rem; text-decoration: none;
    display: block;
}
.lib-p-series a:hover { color: var(--accent-deep); }
.lib-p-title {
    font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; line-height: 1.15;
    margin: 0 0 0.3rem; letter-spacing: -0.01em; color: var(--ink);
}
.lib-p-sub {
    font-family: var(--font-display); font-style: italic; font-size: 0.88rem;
    color: var(--ink-muted); margin: 0 0 0.45rem;
}
.lib-p-desc {
    font-family: var(--font-body); font-size: 0.82rem; line-height: 1.42;
    color: var(--ink-muted); margin: 0 0 0.55rem;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-p-rating { font-size: 0.8rem; color: var(--ink-muted); margin: 0 0 0.6rem; display: block; }
.lib-p-rating .card-rating-stars { color: var(--accent); }
.lib-p-cta {
    display: inline-block; margin-top: auto; align-self: flex-start;
    font-family: var(--font-ui); font-size: 0.64rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
    border-radius: 999px; padding: 0.5rem 1rem; text-decoration: none; cursor: pointer;
    transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.lib-p-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.lib-shelf-label {
    font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1.4rem;
}

/* ------------------------------------------------------------
 * MOBILE / touch — the spine-out shelf is a desktop idea (it
 * relies on hover and on width for the row of spines). On narrow
 * screens we restructure the SAME markup into a clean tappable
 * list: each book becomes a row with its cover and its basics
 * shown inline (no hover needed). Pure CSS — the JS/markup are
 * unchanged, so every shelf (catalog, series, bundles, home)
 * gets this automatically.
 * ------------------------------------------------------------ */
@media (max-width: 680px) {
    .lib-shelf { padding: 0; margin-bottom: 2rem; }
    .lib-board { display: none; }           /* no wooden board in list mode */

    .lib-books {
        display: flex; flex-direction: column; align-items: stretch;
        gap: 0; min-height: 0; padding: 0; row-gap: 0;
    }

    /* each spine becomes a full-width tappable list row */
    .lib-spine {
        width: auto !important; height: auto !important; flex: none;
        display: block; border-radius: 0; border: none; border-bottom: 1px solid var(--rule);
        background-image: none; background-color: transparent !important;
        box-shadow: none; transform: none !important; transition: background-color .15s var(--ease);
        color: var(--ink) !important; text-decoration: none;
    }
    .lib-spine:first-child { border-top: 1px solid var(--rule); }
    .lib-spine:active { background-color: var(--accent-wash, rgba(0,0,0,.04)); }

    /* the vertical spine title overlay is hidden — the row shows the title in the flap */
    .lib-s-title { display: none; }

    /* the book body becomes the row's 2-column grid: cover | basics */
    .lib-pop {
        position: static; inset: auto; transform: none !important;
        display: grid; grid-template-columns: 52px 1fr; gap: 0.9rem; align-items: center;
        width: auto; padding: 0.9rem 0.4rem; border-radius: 0; overflow: visible; z-index: auto;
    }
    /* the cover lid becomes the row thumbnail (no hinge on touch) */
    .lib-pop-cover {
        position: relative; inset: auto; grid-column: 1;
        width: 52px; aspect-ratio: 3 / 4.4; padding: 0; overflow: hidden;
        border-radius: 3px; box-shadow: var(--shadow-sm); opacity: 1 !important;
        transform: none !important; border: 1px solid var(--rule);
        display: flex; justify-content: center; align-items: center;
    }
    .lib-pop-cover::before { display: none; }
    .lib-pop-cover .art {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; z-index: 1;
    }
    .lib-pop-cover-t {
        position: relative; z-index: 2;
        font-size: 0.5rem; padding: 0.2rem; text-align: center;
    }
    .lib-pop-cover:has(.art) .lib-pop-cover-t { display: none; }

    /* the basics fill the rest of the row, always visible */
    .lib-pop-info {
        position: static; inset: auto; grid-column: 2;
        opacity: 1 !important; pointer-events: auto; transform: none !important;
        background: none; border: none; border-radius: 0; padding: 0;
        display: flex; flex-direction: column; gap: 0.15rem;
    }
    .lib-p-title { font-size: 1.05rem; }
    .lib-p-sub { font-size: 0.88rem; margin: 0; }
    .lib-p-desc {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; font-size: 0.82rem; margin: 0.2rem 0 0;
    }
    .lib-p-rating { margin: 0.1rem 0 0; }
    /* the CTA reads as a quiet chevron-style link on its own line */
    .lib-p-cta {
        align-self: flex-start; margin-top: 0.4rem;
        background: transparent; color: var(--accent); border: none; padding: 0.2rem 0;
        letter-spacing: 0.1em;
    }
    .lib-p-cta:hover { background: transparent; color: var(--accent); }
}

@media (max-width: 680px) and (min-width: 481px) {
    /* a touch more breathing room on large phones / small tablets */
    .lib-pop { grid-template-columns: 60px 1fr; }
    .lib-pop-cover { width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    .lib-spine, .lib-pop-cover, .lib-pop-info { transition-duration: .15s !important; }
    /* no hinge spin under reduced motion: cover just fades out to reveal the flap */
    .lib-spine:hover .lib-pop-cover, .lib-spine:focus-within .lib-pop-cover,
    .lib-spine.is-open .lib-pop-cover { transform: none; opacity: 0; }
    .lib-spine:hover, .lib-spine:focus-visible, .lib-spine:focus-within, .lib-spine.is-open {
        transform: translateY(-16px);
    }
}