/**
 * Canonical public book result-card styles.
 *
 * Loaded by:
 * - Public site: views/layouts/header.php (after style.css)
 * - Workspace Preview: views/admin/workspace.php (ONLY this file — never style.css)
 *
 * Markup: includes/book_result_card.php
 * API preview: views/admin/workspace_api.php action=preview_card
 *
 * When changing how the card looks (buttons, cover column, stars, Amazon CTA,
 * Add to TBR, spoilers toggles, mobile layout), edit THIS file. Do not rely on
 * duplicating rules only in assets/style.css — Workspace will miss them.
 * Prefer removing or redirecting card-only rules in style.css when they drift.
 */

:root {
    --brand-blue: #4A56B9;
    --brand-purple: #9B5DE5;
    --brand-purple-hover: #8A4DDE;
    --brand-purple-deep: #7E3CE0;
    --brand-bg-light: #F8F7FC;
    --brand-heading: #2C3999;
    --brand-border: #C9CDF2;
}

.star-rating {
    --star-color: #ffc700;
    --star-empty-color: #ccc;
    --star-size: 1.5rem;
    --rating: 0;
    font-size: var(--star-size);
    font-family: Arial, sans-serif;
    display: inline-block;
    position: relative;
    letter-spacing: 2px;
}
.star-rating::before { content: '☆☆☆☆☆'; color: var(--star-empty-color); }
.star-rating::after {
    content: '★★★★★';
    color: var(--star-color);
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--rating) / 5 * 100%);
    overflow: hidden;
}

.btn-amazon {
    background-color: #FFA41C;
    border: 1px solid #FF8F00;
    color: #111;
}
.btn-amazon:hover {
    background-color: #FA8900;
    border-color: #e37b00;
}

.btn-add-tbr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(74, 86, 185, 0.18);
    background-color: var(--brand-bg-light);
    color: var(--brand-blue);
    font-family: 'Crimson Pro', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
}
.btn-add-tbr:hover,
.btn-add-tbr:focus {
    background-color: #FFFFFF;
    color: var(--brand-heading);
    border-color: rgba(101, 42, 191, 0.2);
    box-shadow: 0 2px 5px rgba(101, 42, 191, 0.08);
}
.btn-add-tbr:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

.result-title {
    font-family: 'Playfair Display', sans-serif;
    color: var(--brand-blue);
    font-size: 1.5rem;
    margin-top: -.1px;
}

.result-card {
    display: grid;
    position: relative;
    grid-template-columns: 100px 1fr;
    align-items: start;
    gap: 24px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    scroll-margin-top: 140px;
}

.result-image-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.result-cover {
    width: 100%;
    max-width: 100px;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 6px;
    background: var(--brand-bg-light);
}

.result-cover-rating {
    --star-size: 1.2rem;
    letter-spacing: 0.5px;
    margin-top: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.result-cover-tbr {
    margin-top: 8px;
    width: 100%;
    max-width: 150px;
    padding: 6px 8px;
    font-size: 0.9rem;
}

.result-body {
    font-family: 'Crimson Pro', sans-serif;
    color: #222;
}

.results-meta {
    margin: 0 0 10px;
    color: #000;
    font-size: 1rem;
    font-weight: 800;
    margin-top: 10px;
}

.results-ku {
    color: var(--brand-purple);
    text-decoration: none;
}

.results-meta-primary,
.results-meta-secondary {
    display: inline;
}

.book_about {
    font-size: 1.05rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

@media (max-width: 600px) {
    .result-card {
        display: block;
        padding: 16px;
        overflow: visible;
    }

    .result-image-column {
        float: left;
        width: 110px;
        margin-right: 15px;
        margin-bottom: 5px;
        display: flex;
    }

    .result-cover {
        max-width: 110px;
        margin: 0 auto;
    }

    .result-body {
        display: block;
    }

    .results-meta {
        font-size: 0.9rem;
        line-height: 1.45;
        margin-bottom: 12px;
        display: block;
    }

    .results-meta-primary,
    .results-meta-secondary {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0;
        row-gap: 0.15em;
    }

    .results-meta-secondary {
        margin-top: 3px;
        font-weight: 600;
    }

    .results-meta .result-length,
    .results-meta .results-ku,
    .results-meta .results-series {
        white-space: nowrap;
    }

    .results-meta-primary > .separator,
    .results-meta-secondary > .separator {
        padding: 0 0.4em;
        flex: 0 0 auto;
    }

    .results-meta-break {
        display: none;
    }

    .result-actions,
    .result-amazon-cta,
    .result-spoilers {
        clear: both;
        width: 100%;
    }

    .btn-amazon {
        width: 100%;
        padding: 8px 4px;
        font-size: 0.8rem;
        font-weight: 700;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .btn-add-tbr {
        width: 100%;
        max-width: 150px;
        padding: 8px 4px;
        font-size: 0.9rem;
    }
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    padding-bottom: 1px;
    margin-top: 10px;
}

.js-toggle {
    white-space: nowrap;
    flex-shrink: 0;
    background: none !important;
    border: none !important;
    padding: 8px 0 !important;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-blue) !important;
    cursor: pointer;
    border-bottom: 3px solid transparent !important;
    transition: all 0.2s ease;
}

.js-toggle.active {
    opacity: 1 !important;
    border-bottom: 3px solid var(--brand-blue) !important;
}

.result-actions .js-toggle:not(:last-child)::after {
    content: "|";
    margin-left: 15px;
    margin-right: -5px;
    color: var(--brand-border);
    font-weight: 300;
    pointer-events: none;
}

@media (max-width: 600px) {
    .result-actions {
        gap: 15px;
        justify-content: center;
    }
    .js-toggle {
        font-size: 1rem;
        line-height: .7;
    }
}

.audio-link {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.audio-link:hover {
    color: #000000;
    text-decoration-thickness: 2px;
}

.narrator-truncate {
    display: inline-block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    margin-top: -3px;
    line-height: normal;
    cursor: pointer;
    transition: max-width 0.3s ease;
}

.narrator-truncate.is-expanded {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    margin-top: 0;
    vertical-align: baseline;
}

@media (max-width: 600px) {
    .results-meta-secondary .narrator-truncate {
        max-width: min(200px, 55vw);
    }
}

.keyplayers li {
    margin: 2px 0;
    padding-left: 8px;
    list-style-type: square;
    color: black;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 2px;
    font-family: 'Crimson Pro', sans-serif;
    padding-bottom: 7px;
}

.result-spoilers {
    background-color: var(--brand-bg-light) !important;
    border: 1px solid var(--brand-border) !important;
}

.btn-amazon,
.amazonurl,
.btn-amazon-primary {
    font-weight: 800 !important;
}