/* =============================================================
   Universal BookCard styles.

   Framed-print aesthetic:
     - Outer card is a padded white frame with a soft drop shadow.
     - Inner cover keeps a 5:8 aspect ratio that matches the API-enforced
       cover size (UploadConstants.CoverTargetWidth/Height = 300x480), so
       covers fill the frame exactly with no letterbox or cropping.
     - Hover lifts the card, darkens the cover with a gradient,
       and reveals title + author + Read / Listen actions.
     - No Radzen dependencies; brand tokens are inline so the card
       renders consistently across landing and authenticated pages.
   ============================================================= */

.book-card {
    --bc-blue: var(--brand-primary, #00B4FF);
    --bc-blue-deep: var(--brand-secondary, #0174B1);
    --bc-orange: var(--brand-cta, #FFAA00);
    /* One color per format across badge and hover action -- audiobook indigo and
       read-along ember, matching the Discover rails and the hero CTAs. Blue is kept
       for "read" so the three formats never share a hue. Ember is a touch deeper
       than the amber --bc-orange it replaces; like the hero read-along CTA and the
       blue read/audiobook badges, its white text is a brand treatment rather than a
       WCAG-AA pairing (indigo is the only one of the three that clears AA on white). */
    --bc-indigo: #673AB7;
    --bc-indigo-deep: #512DA8;
    --bc-ember: #F59300;
    --bc-ember-deep: #E07B00;
    --bc-charcoal: var(--brand-charcoal, #222222);
    --bc-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    position: relative;
    display: block;
    width: 100%;
    padding: 10px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow:
        0 10px 22px -10px rgba(17, 29, 45, 0.18),
        0 2px 6px rgba(17, 29, 45, 0.08);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    outline: none;
    font-family: var(--bc-font);

    /* Container query anchor so the hover overlay can compress on narrow tiles
       (e.g., the audiobook band's 3-across grid lands ~120px wide each). */
    container-type: inline-size;
}

.book-card:hover,
.book-card:focus-within {
    transform: translateY(-4px);
    box-shadow:
        0 24px 44px -16px rgba(17, 29, 45, 0.28),
        0 4px 12px rgba(17, 29, 45, 0.10);
}

/* Stretched link covers the whole card surface. Clicks anywhere on the card
   (including the white matte padding and the cover image) hit this link, except
   where inner buttons sit above it at a higher z-index. Keyboard users tab to
   this link first -- Enter fires HandleBookClick without any Space-scroll issue
   since anchors don't scroll the viewport on Space by default. */
.book-card-stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    text-decoration: none;
    /* Collapse any accidental inline text so only the bounding box is hit. */
    font-size: 0;
    color: transparent;
}
.book-card-stretched-link:focus-visible {
    outline: 3px solid var(--bc-blue);
    outline-offset: 3px;
}

/* Inner cover frame. Aspect ratio matches the API-enforced cover size
   (UploadConstants.CoverTargetWidth/Height = 300x480 = 5:8). With the frame
   and image ratios identical, object-fit: cover fills exactly -- no crop,
   no letterbox, no "white space outside the cover" on hover. */
.book-card-cover-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 8;
    overflow: hidden;
    border-radius: 4px;
    background: transparent;
}

.book-card-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Corner badge slots -- positioned relative to the cover, not the frame, so they
   sit on the image the same way across every grid width. */
.book-card-top-left-badge,
.book-card-top-right-badge {
    position: absolute;
    top: 10px;
    z-index: 3;
    max-width: calc(100% - 20px);
}
.book-card-top-left-badge { left: 10px; }
.book-card-top-right-badge { right: 10px; }

/* ==============================================================
   Status badges (shared primitive) -- "In Progress" / "Completed" /
   "Free" pills rendered inside the corner slots above (passed as
   TopLeftBadge / TopRightBadge by BookDisplay and Discover). Standardized
   here so Library, Discover and every BookCard surface match. Soft
   tint, dark-mode aware; the slots own positioning, these style the pill.
   NOTE: .book-free-badge here is the corner STATUS badge. It is distinct
   from .book-card-free-pill below -- that is the inline "Free" pill used
   in LandingV2 picks / free-tier rails (different placement and treatment).
   ============================================================== */
.book-progress-badge,
.book-completed-badge,
.book-free-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(2, 6, 23, 0.20);
}
.book-progress-badge i,
.book-completed-badge i,
.book-free-badge i { font-size: 0.85em; line-height: 1; }

.book-progress-badge  { background: #E6F7FF; color: #0174B1; }
.book-completed-badge { background: #E7F8F0; color: #0B7A4B; }
.book-free-badge      { background: #FFF4DE; color: #B37500; }

body.dark-mode .book-progress-badge  { background: rgba(0, 180, 255, 0.18);  color: #62D2FF; }
body.dark-mode .book-completed-badge { background: rgba(23, 178, 106, 0.18); color: #4FDB9C; }
body.dark-mode .book-free-badge      { background: rgba(255, 170, 0, 0.18);  color: #FFC95F; }

/* Inline "Free" pill for LandingV2 picks / free-tier rails (see LandingV2Picks.razor).
   Distinct from the corner .book-free-badge STATUS badge above. */
.book-card-free-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--bc-orange);
    color: var(--bc-charcoal);
    border-radius: 999px;
    font-family: var(--bc-font);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    white-space: nowrap;
}
.book-card-free-pill .rzi,
.book-card-free-pill .material-icons,
.book-card-free-pill svg {
    width: 12px;
    height: 12px;
    font-size: 12px !important;
    color: var(--bc-charcoal);
}

/* Audiobook runtime pill -- sits top-left of the cover unless a TopLeftBadge occupies that slot. */
.audiobook-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--bc-indigo);
    color: #FFFFFF;
    border-radius: 999px;
    font-family: var(--bc-font);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: -0.005em;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    white-space: nowrap;
    z-index: 2;
}
.audiobook-badge svg { flex: 0 0 12px; display: block; }
.audiobook-duration-pill { line-height: 1; }

/* Read-along badge -- mirrors the audiobook pill but in ember so the two formats
   are visually distinct (indigo = audiobook / headphones, ember = read-along / open book).
   Shown only for a non-audiobook book that has per-page narration. */
.read-along-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--bc-ember);
    color: var(--bc-charcoal);
    border-radius: 999px;
    font-family: var(--bc-font);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: -0.005em;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    white-space: nowrap;
    z-index: 2;
}
.read-along-badge svg { flex: 0 0 12px; display: block; }
.read-along-label { line-height: 1; }

/* If a TopLeftBadge exists (e.g., "NEW"), move the format pill to the bottom-left
   of the cover so they do not stack. */
.book-card-cover-wrap .book-card-top-left-badge ~ .audiobook-badge,
.book-card-cover-wrap .book-card-top-left-badge ~ .read-along-badge {
    top: auto;
    bottom: 10px;
}

/* Hover overlay -- scoped inside the cover frame so the white matting stays clean.
   Reveals title, author, Read / Listen actions on hover and keyboard focus.
   `pointer-events: none` on the overlay itself lets clicks pass through to the
   stretched link below; inner buttons opt back in with `pointer-events: auto`. */
.book-card-hover-overlay {
    position: absolute;
    inset: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(
        to top,
        rgba(10, 22, 32, 0.94) 0%,
        rgba(10, 22, 32, 0.75) 50%,
        rgba(10, 22, 32, 0) 100%
    );
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 4;
    border-radius: 4px;
    pointer-events: none;
}
.book-card:hover .book-card-hover-overlay,
.book-card:focus-within .book-card-hover-overlay { opacity: 1; }

.book-card-hover-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.book-card-hover-title {
    font-family: var(--bc-font);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0;
    color: #FFFFFF;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-card-hover-author {
    font-family: var(--bc-font);
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    margin: 4px 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-card-hover-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.book-card-hover-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 8px;
    border: none;
    font-family: var(--bc-font);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    /* Overlay parent opts out of pointer events so clicks fall through to the
       stretched link; the buttons opt back in so they remain clickable. */
    pointer-events: auto;
}
.book-card-hover-btn svg { width: 14px; height: 14px; flex: 0 0 14px; }
.book-card-hover-read {
    background: var(--bc-blue);
    color: #FFFFFF;
}
.book-card-hover-read:hover { background: var(--bc-blue-deep); }
.book-card-hover-listen {
    background: var(--bc-indigo);
    color: #FFFFFF;
}
.book-card-hover-listen:hover { background: var(--bc-indigo-deep); }

/* Read-along hover action -- ember, mirrors the Listen button for audiobooks so the
   two formats get a symmetric "start this experience" affordance on hover. */
.book-card-hover-readalong {
    background: var(--bc-ember);
    color: var(--bc-charcoal);
}
.book-card-hover-readalong:hover { background: var(--bc-ember-deep); }

/* Touch devices: hover is meaningless. Tap on the card navigates to the book
   page; Read / Listen are a desktop affordance only. */
@media (hover: none) {
    .book-card-hover-overlay { display: none; }
}

/* Compact overlay for narrow cards (audiobook strip, dense grids, etc).
   Uses a container query so it adapts to the card's actual width, not viewport. */
@container (max-width: 180px) {
    .book-card-hover-overlay { padding: 10px; }
    .book-card-hover-title { font-size: 13px; -webkit-line-clamp: 2; }
    .book-card-hover-author { font-size: 11px; margin: 2px 0 8px; }
    .book-card-hover-actions { gap: 6px; }
    .book-card-hover-btn {
        padding: 6px 8px;
        font-size: 11px;
        gap: 4px;
    }
    .book-card-hover-btn svg { width: 12px; height: 12px; flex: 0 0 12px; }
}

/* Even tighter for very narrow cards -- icon-only buttons to keep the overlay readable. */
@container (max-width: 140px) {
    .book-card-hover-overlay { padding: 8px; }
    .book-card-hover-title { font-size: 12px; }
    .book-card-hover-author { display: none; }
    .book-card-hover-btn {
        /* font-size: 0 collapses the raw "Read"/"Listen" text node while the
           SVG stays at its CSS-set size -- icon-only treatment. */
        font-size: 0;
        padding: 6px;
    }
    .book-card-hover-btn svg { width: 14px; height: 14px; flex: 0 0 14px; }
}

/* Dark mode -- the outer card frame flips to a dark surface so it reads on a
   dark page. The inner cover shadow stays; covers are already dark. */
body.dark-mode .book-card {
    background: #1a2430;
    box-shadow:
        0 12px 26px -10px rgba(0, 0, 0, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.35);
}
body.dark-mode .book-card:hover,
body.dark-mode .book-card:focus-visible,
body.dark-mode .book-card:focus-within {
    box-shadow:
        0 26px 48px -16px rgba(0, 0, 0, 0.65),
        0 4px 12px rgba(0, 0, 0, 0.4);
}