/* Shelf style B "Lederrücken" (spec 2026-10-11 §6, component LeatherShelf).
   Open wall shelves in the theme's wood (--shelf-* tokens), worn leather
   spines in each book's colour (--c). Plaque and decor: shelf-shared.css. */

.leather-shelf {
    --shelf-texture: url("../images/library/shelf-wood-texture.webp");
    --leather-texture: url("../images/library/book-leather-texture.webp");
    /* The tallest volume (232 px) plus a fixed band for the plaque. */
    --leather-row-height: calc(232px * var(--zoom, 1) + 44px);
    --leather-row-pad: 22px;
    position: relative;
    padding: 150px 36px 30px;
    border-radius: var(--radius-lg);
    background: var(--shelf-room);
}

/* The top board the decor stands on. */
.leather-shelf-crown {
    position: relative;
    max-width: 1180px;
    height: 16px;
    margin: 0 auto 34px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 226, 175, 0.35), rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.6)), var(--shelf-texture) 0 30% / 520px, var(--shelf-wood);
    box-shadow: 0 16px 20px -8px rgba(0, 0, 0, 0.85);
}

.leather-shelf-decor {
    bottom: 100%;
}

.leather-shelf-decor.shelf-decor--left {
    left: 26px;
    background-position: left bottom;
}

.leather-shelf-decor.shelf-decor--right {
    right: 26px;
    background-position: right bottom;
}

/* Zero-height element with the rows' horizontal insets: what
   shelfLayout.js measures. */
.leather-shelf-measure {
    max-width: 1180px;
    height: 0;
    margin: 0 auto;
    padding: 0 var(--leather-row-pad);
    box-sizing: border-box;
}

.leather-shelf-bay {
    position: relative;
    max-width: 1180px;
    margin: 0 auto 40px;
}

/* One compartment on a board, its plaque in the band above its books. */
.leather-shelf-group {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
}

.leather-shelf-group + .leather-shelf-group {
    margin-left: calc(44px * var(--zoom, 1));
}

.leather-shelf-plaque {
    position: absolute;
    z-index: 6;
    left: 0;
    /* the group starts 16 px below the row's top edge */
    top: -10px;
    max-width: 320px;
}

.leather-shelf-row {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: var(--leather-row-height);
    padding: 0 var(--leather-row-pad);
    border-radius: 2px;
    background:
        radial-gradient(ellipse at 20% 0%, var(--shelf-light), transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.55)),
        var(--shelf-texture) center / 600px,
        var(--shelf-wood);
    box-shadow: inset 0 12px 26px rgba(0, 0, 0, 0.8), inset 0 -6px 14px rgba(0, 0, 0, 0.45);
}

.leather-shelf-plank {
    position: relative;
    z-index: 5;
    height: 24px;
    margin: 0 -10px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 226, 175, 0.35), rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.6)), var(--shelf-texture) 0 40% / 520px, var(--shelf-wood);
    box-shadow: 0 18px 22px -8px rgba(0, 0, 0, 0.9);
}

/* ---- One leather volume ---- */

.leather-shelf-book {
    position: relative;
    flex: none;
    /* Depth for tipping the spine out towards the reader. */
    perspective: 900px;
    width: var(--w);
    height: var(--h);
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.leather-shelf-book:focus-visible {
    outline: none;
}

.leather-shelf-spine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 3px 3px 2px 2px;
    transform-origin: 50% 100%;
    transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.25, 1), filter 0.3s ease;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 8%, rgba(255, 240, 215, 0.22) 26%, rgba(255, 240, 215, 0.06) 42%, rgba(0, 0, 0, 0.1) 62%, rgba(0, 0, 0, 0.65) 100%),
        radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.45), transparent 35%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.5), transparent 30%),
        var(--leather-texture) center / 220px,
        var(--c);
    background-blend-mode: normal, normal, normal, overlay, normal;
    box-shadow: 2px 0 3px rgba(0, 0, 0, 0.6), -1px 0 2px rgba(0, 0, 0, 0.5);
}

/* The top edge of the volume (boards and page block), hinged at the top of
   the spine and turning with it about the foot of the book; it faces away
   at rest and shows once the book is tipped out. */
.leather-shelf-top {
    --tip: 0deg;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(110px * var(--zoom, 1));
    transform-origin: 50% 100%;
    transform: translateY(var(--h)) rotateX(var(--tip)) translateY(calc(var(--h) * -1)) rotateX(90deg);
    transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.25, 1);
    backface-visibility: hidden;
    pointer-events: none;
    background:
        linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.55)),
        repeating-linear-gradient(90deg, rgba(120, 95, 60, 0.18) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, var(--c) 0 3px, #e8dcbd 3px calc(100% - 3px), var(--c) calc(100% - 3px));
}

.leather-shelf-book:hover .leather-shelf-top,
.leather-shelf-book:focus-visible .leather-shelf-top {
    --tip: -13deg;
}

/* A sheen that glides over the leather when the book tips out. */
.leather-shelf-spine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 210, 0.28) 46%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.8s ease;
}

.leather-shelf-rib {
    position: absolute;
    left: 0;
    right: 0;
    height: 9px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(255, 235, 200, 0.28) 40%, rgba(255, 235, 200, 0.05) 60%, rgba(0, 0, 0, 0.55));
}

.leather-shelf-rib--1 { top: 8%; }
.leather-shelf-rib--2 { top: 20%; }
.leather-shelf-rib--3 { top: 80%; }
.leather-shelf-rib--4 { top: 92%; }

.leather-shelf-gilt {
    position: absolute;
    left: 8%;
    right: 8%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--shelf-brass) 15%, var(--shelf-brass-hi) 50%, var(--shelf-brass) 85%, transparent);
    box-shadow: 0 0 2px color-mix(in srgb, var(--shelf-brass-hi) 60%, transparent);
}

.leather-shelf-gilt--top { top: 3.5%; }
.leather-shelf-gilt--bottom { bottom: 2.5%; }

/* Title piece: a darker label of the book's own colour with a gilt rule. */
.leather-shelf-title {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 23%;
    height: 47%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.25)), color-mix(in srgb, var(--c) 45%, #0b0705);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shelf-brass-hi) 75%, transparent), inset 0 0 0 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.6);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Size and lines are set per book (ShelfBookBase.TitleFit). */
.leather-shelf-title span {
    display: -webkit-box;
    overflow: hidden;
    max-height: 94%;
    color: var(--shelf-brass-hi);
    font: 700 var(--title-size, calc(11.5px * var(--zoom, 1))) / 1.05 "Cormorant Garamond", Georgia, serif;
    letter-spacing: 0.06em;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 240, 200, 0.25);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--title-lines, 1);
    overflow-wrap: anywhere;
}

.leather-shelf-emboss {
    position: absolute;
    left: 50%;
    top: 71.5%;
    width: 36%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: linear-gradient(160deg, var(--shelf-brass-hi), var(--shelf-brass) 50%, var(--shelf-brass-lo));
    -webkit-mask: url("../images/themes/books/corner.svg") center / contain no-repeat;
    mask: url("../images/themes/books/corner.svg") center / contain no-repeat;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}

/* ---- The cover card beside a book ---- */

.leather-shelf-card {
    position: absolute;
    z-index: 30;
    left: calc(100% + 14px);
    bottom: 10%;
    width: 180px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.leather-shelf-card.is-left {
    left: auto;
    right: calc(100% + 14px);
}

.leather-shelf-card-cover {
    position: relative;
    display: block;
    height: 250px;
    overflow: hidden;
    border-radius: 3px 8px 8px 3px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 9%), var(--leather-texture) center / 260px, var(--c);
    background-blend-mode: normal, overlay, normal;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 230, 180, 0.2);
}

.leather-shelf-card-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leather-shelf-card-cover:not(.has-image)::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1.5px solid color-mix(in srgb, var(--shelf-brass-hi) 75%, transparent);
    border-radius: 3px;
}

.leather-shelf-card-cover:not(.has-image)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: linear-gradient(160deg, var(--shelf-brass-hi), var(--shelf-brass) 50%, var(--shelf-brass-lo));
    -webkit-mask: url("../images/themes/books/rosette.svg") center / contain no-repeat;
    mask: url("../images/themes/books/rosette.svg") center / contain no-repeat;
}

.leather-shelf-card-title,
.leather-shelf-card-author {
    position: absolute;
    z-index: 1;
    left: 16px;
    right: 16px;
    overflow: hidden;
    color: var(--shelf-brass-hi);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.leather-shelf-card-title {
    top: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font: 700 19px/1.1 "Cormorant Garamond", Georgia, serif;
}

.leather-shelf-card-author {
    bottom: 22px;
    font: 500 11px/1.2 var(--font-family-ui);
    letter-spacing: 0.1em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.has-image > .leather-shelf-card-title,
.has-image > .leather-shelf-card-author {
    padding: 3px 5px;
    border-radius: 3px;
    background: rgba(10, 6, 3, 0.72);
}

.has-image.hide-text > .leather-shelf-card-title,
.has-image.hide-text > .leather-shelf-card-author {
    display: none;
}

.leather-shelf-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--shelf-brass) 35%, transparent);
    border-radius: 8px;
    background: rgba(20, 12, 7, 0.9);
    color: #eadfc6;
    font: 500 12px/1.3 var(--font-family-ui);
}

.leather-shelf-card-bar {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
}

.leather-shelf-card-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--shelf-brass-hi);
}

/* Hover (mouse) and keyboard focus: the book tips forward out of the row
   about its bottom edge, as if pulled out by the top -- towards the reader,
   never into its neighbour -- the sheen runs over it and its card appears. */
@media (hover: hover) {
    .leather-shelf-book:hover {
        z-index: 30;
    }

    .leather-shelf-book:hover .leather-shelf-spine {
        transform: rotateX(-13deg);
        filter: brightness(1.12);
    }

    .leather-shelf-book:hover .leather-shelf-spine::after {
        transform: translateX(120%);
    }

    .leather-shelf-book:hover .leather-shelf-card {
        opacity: 1;
        transform: none;
    }
}

.leather-shelf-book:focus-visible {
    z-index: 30;
}

.leather-shelf-book:focus-visible .leather-shelf-spine {
    transform: rotateX(-13deg);
    box-shadow: 0 0 0 2px var(--shelf-brass-hi);
}

.leather-shelf-book:focus-visible .leather-shelf-card {
    opacity: 1;
    transform: none;
}

/* ---- Narrow screens ---- */

@media (max-width: 900px) {
    .leather-shelf {
        padding: 140px 14px 24px;
    }
}

@media (max-width: 640px) {
    .leather-shelf {
        --leather-row-pad: 10px;
        padding: 116px 4px 16px;
    }

    .leather-shelf-plank {
        margin: 0 -4px;
    }

    .leather-shelf-plaque {
        max-width: 200px;
        font-size: 0.72rem;
    }

    .leather-shelf-decor.shelf-decor--left {
        left: 10px;
        height: calc(var(--decor-h) * 0.6);
    }

    .leather-shelf-decor.shelf-decor--right {
        display: none;
    }
}

@media (hover: none) {
    .leather-shelf-card {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .leather-shelf-spine,
    .leather-shelf-spine::after,
    .leather-shelf-card {
        transition: none;
    }
}