/*
 * Listen-Darstellungen (Site::listLayout) – Feinschliff über den Systemkomponenten:
 * Liste als Karten-Zeilen, Regal mit echtem Brett und Buchrücken, Karussell mit Boden und Licht,
 * Info-Panel als Karte. Form je Theme über --bo-radius. Nur Tokens, keine festen Farben.
 * Erscheinen beim Scrollen rein per CSS (animation-timeline), sonst sofort sichtbar.
 */
.bo {
    --bo-radius: 14px;
}

[data-theme="dark"] .bo {
    --bo-radius: 10px;
}

[data-theme="krimi"] .bo {
    --bo-radius: 0;
}

[data-theme="sachbuch"] .bo {
    --bo-radius: 6px;
}

:is([data-theme="kinder"],[data-theme="mini"]) .bo {
    --bo-radius: 20px;
}

[data-theme="romance"] .bo {
    --bo-radius: 24px;
}

/* ===== Liste: Karten-Zeilen ===== */
.bo-list {
    display: grid;
    gap: 10px;
    border-top: 0;
}

.bo-list .bo-row {
    grid-template-columns: 72px 56px 1fr auto;
    padding: 14px 24px 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--bo-radius);
    background: var(--surface-100);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}

.bo-list .bo-row:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--ink) 55%, transparent);
}

.bo-list .bo-row .bo-cover {
    width: 56px;
    font-size: 8px;
    transition: transform .25s;
}

.bo-list .bo-row:hover .bo-cover {
    transform: rotate(-3deg) scale(1.06);
}

.bo-list .bo-row__rank {
    align-items: center;
}

.bo-list .bo-row__rank strong {
    font-size: 44px;
    line-height: 44px;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink-muted);
}

.bo-list .bo-row--top {
    border-color: color-mix(in srgb, var(--highlight) 70%, transparent);
    background: linear-gradient(100deg, color-mix(in srgb, var(--highlight) 22%, var(--surface-100)) 0%, var(--surface-100) 55%);
}

.bo-list .bo-row--top .bo-row__rank strong {
    color: var(--highlight-ink);
    -webkit-text-stroke: 0;
}

.bo-row__meter {
    display: block;
    width: 84px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--highlight) calc(var(--rating) * 100%), var(--surface-300) 0);
}

/* BuchTicker: Börsen-Look – Mono-Zahlen, Leuchtkante an Platz 1 */
[data-theme="dark"] .bo-list .bo-row {
    background: var(--surface-200);
}

[data-theme="dark"] .bo-list .bo-row__rank strong,
[data-theme="dark"] .bo-row__side {
    font-family: var(--font-mono);
}

[data-theme="dark"] .bo-list .bo-row--top {
    box-shadow: 0 0 0 1px var(--link-on-night), 0 0 32px -8px color-mix(in srgb, var(--link-on-night) 55%, transparent);
}

/* LeseCharts: Balken statt Kartenfläche, Rang in Mono */
[data-theme="sachbuch"] .bo-list .bo-row__rank strong {
    color: var(--ink);
    -webkit-text-stroke: 0;
}

[data-theme="sachbuch"] .bo-row__meter {
    width: 120px;
    height: 8px;
    border-radius: 0;
    background: linear-gradient(90deg, var(--primary) calc(var(--rating) * 100%), var(--surface-300) 0);
}

/* ===== Regal: Wand, Buchrücken, Holzbrett ===== */
.bo-shelfpick {
    position: relative;
}

.bo-shelfpick__shelf {
    grid-template-columns: repeat(auto-fit, minmax(96px, 136px));
    gap: 22px;
    padding: 36px 24px 0;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--ink) 6%, transparent) 100%);
    perspective: 900px;
}

.bo-shelfpick__book {
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.bo-shelfpick__book .bo-cover {
    font-size: 13px;
    box-shadow: inset 6px 0 8px -4px color-mix(in srgb, var(--night-100) 55%, transparent), 0 10px 18px -10px color-mix(in srgb, var(--ink) 70%, transparent);
    transition: box-shadow .35s;
}

.bo-shelfpick__book:hover {
    transform: translateY(-8px) rotateY(-10deg);
}

.bo-shelfpick__book[aria-expanded="true"] .bo-cover {
    outline: 0;
    box-shadow: 0 0 0 3px var(--accent), 0 26px 30px -14px color-mix(in srgb, var(--ink) 75%, transparent);
}

.bo-shelfpick__book .bo-badge {
    left: -10px;
    top: -10px;
    min-width: 30px;
    height: 30px;
    justify-content: center;
    padding: 0 6px;
    border-radius: 15px;
    font-size: 13px;
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--ink) 60%, transparent);
}

.bo-shelfpick__board {
    position: relative;
    height: 20px;
    margin: 0 0 40px;
    border-radius: 3px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--highlight-ink) 65%, var(--surface-100)) 0%,
        var(--highlight-ink) 45%,
        color-mix(in srgb, var(--highlight-ink) 70%, var(--night-100)) 100%);
    box-shadow: 0 18px 26px -14px color-mix(in srgb, var(--ink) 70%, transparent);
}

.bo-shelfpick__board::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: color-mix(in srgb, var(--surface-100) 45%, transparent);
}

/* Regalmöbel: so breit wie seine Bücher (eine Reihe, --count aus dem Template), Seitenwände und
   Deckbrett aus demselben Holz wie das Brett. */
.bo-shelfpick__case {
    --book: 136px;
    --wall: 14px;
    position: relative;
    width: min(100%, calc(var(--count) * var(--book) + (var(--count) - 1) * 22px + 48px + 2 * var(--wall)));
    margin: 0 auto 40px;
    padding: 0 var(--wall);
}

.bo-shelfpick__case::before,
.bo-shelfpick__case::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--wall);
    border-radius: 3px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--highlight-ink) 70%, var(--night-100)),
        var(--highlight-ink) 50%,
        color-mix(in srgb, var(--highlight-ink) 65%, var(--surface-100)));
    box-shadow: 0 18px 26px -14px color-mix(in srgb, var(--ink) 70%, transparent);
}

.bo-shelfpick__case::before {
    left: 0;
}

.bo-shelfpick__case::after {
    right: 0;
}

.bo-shelfpick__case .bo-shelfpick__shelf {
    grid-template-columns: repeat(var(--count), minmax(0, 1fr));
    border-top: 10px solid var(--highlight-ink);
}

.bo-shelfpick__case .bo-shelfpick__board {
    margin: 0;
    border-radius: 0 0 3px 3px;
}

[data-theme="krimi"] .bo-shelfpick__case::before,
[data-theme="krimi"] .bo-shelfpick__case::after {
    border-radius: 0;
    background: linear-gradient(90deg, var(--night-100), var(--surface-300) 50%, var(--night-100));
}

[data-theme="krimi"] .bo-shelfpick__case .bo-shelfpick__shelf {
    border-top-color: var(--surface-300);
}

/* Der orange Punkt wandert mit der Auswahl: das gewählte Buch trägt ihn, Platz 1 sonst nicht. */
.bo-shelfpick .bo-shelfpick__book[aria-expanded="false"] .bo-badge.bo-badge--top {
    background: var(--surface-300);
    color: var(--ink);
}

.bo-shelfpick .bo-shelfpick__book[aria-expanded="true"] .bo-badge.bo-badge {
    background: var(--highlight);
    color: var(--on-highlight);
    box-shadow: 0 0 0 3px var(--surface-100), 0 6px 14px -4px color-mix(in srgb, var(--ink) 60%, transparent);
    transform: scale(1.12);
}

.bo-shelfpick__book .bo-badge {
    transition: background-color .25s, color .25s, transform .25s;
}

/* LeseAlarm: Stahlregal mit roter Kante */
[data-theme="krimi"] .bo-shelfpick__board {
    border-radius: 0;
    background: linear-gradient(180deg, var(--surface-300), var(--night-100));
    box-shadow: inset 0 3px 0 var(--primary), 0 18px 26px -14px var(--night-100);
}

[data-theme="krimi"] .bo-shelfpick__board::after {
    display: none;
}

[data-theme="krimi"] .bo-shelfpick__shelf {
    background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%);
}

/* ===== Info-Panel: Karte mit gekipptem Cover ===== */
.bo-detail {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--bo-radius);
    background: linear-gradient(135deg, var(--surface-200) 0%, var(--surface-100) 100%);
    box-shadow: 0 24px 48px -32px color-mix(in srgb, var(--ink) 60%, transparent);
}

.bo-detail::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    pointer-events: none;
}

.bo-detail > .bo-cover {
    transform: rotate(-3deg);
    box-shadow: 0 22px 34px -16px color-mix(in srgb, var(--ink) 70%, transparent);
}

.bo-detail > div {
    position: relative;
}

/* ===== Karussell: Bühne mit Licht und Boden ===== */
.bo-carousel.is-enhanced .bo-carousel__stage {
    height: 380px;
}

.bo-carousel__stage::before,
.bo-carousel__stage::after {
    content: "";
    position: absolute;
    left: 50%;
    pointer-events: none;
}

/* Lichtkegel hinter dem vorderen Buch */
.bo-carousel.is-enhanced .bo-carousel__stage::before {
    top: 0;
    width: 420px;
    height: 340px;
    margin-left: -210px;
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--highlight) 30%, transparent), transparent 65%);
}

/* Boden: weicher Schatten unter dem Ring */
.bo-carousel.is-enhanced .bo-carousel__stage::after {
    bottom: 22px;
    width: 70%;
    height: 56px;
    margin-left: -35%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ink) 26%, transparent), transparent 70%);
}

.bo-carousel__controls .bo-btn[data-action$="#previous"]::before {
    content: "←" / "";
}

.bo-carousel__controls .bo-btn[data-action$="#next"]::after {
    content: "→" / "";
}

/* ===== Erscheinen beim Scrollen (nur wo der Browser es kann, nie bei reduzierter Bewegung) ===== */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .bo-list > li,
        .bo-shelfpick__shelf > li,
        .bo-genre {
            animation: bo-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}

@keyframes bo-rise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
}

/* ===== Mobil ===== */
@media (max-width: 760px) {
    .bo-list .bo-row {
        grid-template-columns: 40px 48px 1fr;
        gap: 12px;
        padding: 12px;
    }

    .bo-list .bo-row .bo-cover {
        width: 48px;
    }

    .bo-list .bo-row__rank strong {
        font-size: 32px;
        line-height: 32px;
    }

    .bo-shelfpick__shelf {
        padding: 28px 16px 0;
        gap: 14px;
    }

    .bo-shelfpick__case {
        --wall: 8px;
    }

    .bo-shelfpick__shelf {
        scrollbar-width: none;
    }

    .bo-shelfpick__shelf::-webkit-scrollbar {
        display: none;
    }

    .bo-shelfpick__shelf > li {
        flex: 0 0 96px;
    }

    .bo-shelfpick__book:hover {
        transform: none;
    }

    .bo-detail > .bo-cover {
        transform: rotate(-2deg);
    }

    .bo-carousel.is-enhanced .bo-carousel__stage {
        height: 300px;
    }

    .bo-carousel.is-enhanced .bo-carousel__stage::before {
        width: 300px;
        margin-left: -150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-shelfpick__book .bo-badge,
    .bo-list .bo-row,
    .bo-list .bo-row .bo-cover,
    .bo-shelfpick__book,
    .bo-shelfpick__book .bo-cover {
        transition: none;
    }

    .bo-list .bo-row:hover,
    .bo-list .bo-row:hover .bo-cover,
    .bo-shelfpick__book:hover {
        transform: none;
    }
}