/*
 * Single-resource page surface — shared stylesheet.
 *
 * Extracted from the inline $additional_css of app/Views/frontend/book-detail.php
 * so any public "scheda" (a book, a periodical, an issue, an article) can wear
 * the same hero: blurred-cover band (.book-hero), cover + identity columns,
 * breadcrumb, kicker, title, metadata and related sections. The per-layout
 * overrides in frontend-layouts.css apply unchanged.
 *
 * Opt in with `$bookDetailStyles = true;` before the frontend layout renders;
 * the layout links this file right after its own <style>, where the inline
 * block used to be printed. The blurred background is the element's
 * --book-hero-cover custom property (set inline on .book-hero), so the sheet
 * stays static and cacheable; without it the band is the plain light surface.
 */

.book-hero {
    position: relative;
    color: #1a1a1a;
    padding: 4rem 0 4rem;
    min-height: 600px;
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 0;
    overflow: hidden;
}

.book-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--book-hero-cover, none);
    background-size: cover;
    filter: blur(8px);
    opacity: 0.9;
    z-index: 0;
}

.book-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85));
    z-index: 1;
}

.book-hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}

#book-cover-container,
.book-info-column {
    width: 100%;
    min-width: 0;
}

#book-cover-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .book-hero-content {
        grid-template-columns: minmax(0, 1fr);
    }
}

.book-publisher {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 1rem;
    font-weight: 500;
}

.genre-tag {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #1a1a1a;
}

.genre-tag:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #1a1a1a;
}

.book-cover-large {
    max-width: clamp(200px, 40vw, 350px);
    width: 100%;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.book-cover-large:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Margine verticale copertina su desktop */
.book-hero-content img {
    margin: 38px 0;
}

/* Layout senza tab - sezioni info */
.book-description-section {
    background: transparent;
    padding: 3rem 0;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
    border: none;
    position: relative;
    z-index: 100;
}

#book-title {
    font-family: var(--serif);
    font-weight: 460;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.book-details-section {
    background: transparent;
    padding: 3rem 0;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border-color);
    position: relative;
    z-index: 90;
}

.keyword-chip {
    font-size: 0.85rem;
    transition: all 0.2s;
}
.keyword-chip:hover {
    background-color: #e9ecef !important;
}
.keyword-chip:focus-visible {
    background-color: #e9ecef !important;
    outline: 2px solid #495057;
    outline-offset: 2px;
}

.book-reviews-section {
    background: transparent;
    padding: 3rem 0;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border-color);
    position: relative;
    z-index: 80;
}

.review-summary-column {
    flex: 0 0 100%;
    max-width: 100%;
}

.average-rating .display-4 {
    font-family: var(--serif);
    font-weight: 460;
    letter-spacing: -0.02em;
}

.review-distribution-column {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .review-summary-column {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .review-distribution-column {
        flex: 0 0 80%;
        max-width: 80%;
    }
}

.rating-bars .stars-label {
    width: 140px;
    min-width: 140px;
    white-space: nowrap;
}

.section-title {
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 460;
    letter-spacing: -0.02em;
    /* Headings are ink; the accent is kept for the icon only (DESIGN.md "The
       One Accent Rule"), as in .listing-section-title. */
    color: var(--text-color);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title i {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.book-title-hero {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 460;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    text-shadow: none;
    color: #1a1a1a;
}

.book-publisher {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    opacity: 0.9;
    margin-bottom: 1rem;
    font-weight: 500;
    color: #1a1a1a;
}

.genre-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.genre-separator {
    display: inline-flex;
    align-items: center;
    color: rgba(26, 26, 26, 0.45);
    font-weight: 600;
    line-height: 1;
}

.genre-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.3s ease;
}

.genre-tag:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: none;
    color: #1a1a1a;
    text-decoration: none;
}

.breadcrumb-item a {
    color: rgba(45, 55, 72, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #2d3748;
}

.breadcrumb-item.active {
    color: #2d3748;
}

.availability-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 2rem;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.availability-badge.availability-pending {
    background: #6b7280;
    color: white;
    border-color: #6b7280;
}

.available {
    background: rgba(16, 185, 129, 0.9);
    color: #1a1a1a;
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: none;
}

.available:hover {
    background: rgba(16, 185, 129, 1);
    transform: translateY(-2px);
    box-shadow: none;
}

.unavailable {
    background: rgba(239, 68, 68, 0.9);
    color: #1a1a1a;
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: none;
}

.unavailable:hover {
    background: rgba(239, 68, 68, 1);
    transform: translateY(-2px);
    box-shadow: none;
}

/* Wanted book: an invitation to donate, not an error. Same neutral grey as the catalogue grid. */
.availability-badge.wanted {
    background: #6b7280;
    color: white;
    border-color: #6b7280;
    box-shadow: none;
}

.availability-badge.wanted:hover {
    background: #6b7280;
    transform: translateY(-2px);
    box-shadow: none;
}

body[class*='layout-'] .availability-badge.wanted {
    background: color-mix(in srgb, #6b7280 11%, var(--white));
    color: color-mix(in srgb, #6b7280 72%, #1a1a1a);
}

.book-status-inline.is-wanted::before {
    background: #6b7280;
}

.book-meta {
    background: transparent;
    padding: 3rem 0;
    border-radius: 0;
    margin-top: -4rem;
    position: relative;
    z-index: 200;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border-color);
}

.card {
    position: relative;
    z-index: 200;
}

#book-info-card {
    position: relative;
    z-index: 20;
}

.meta-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
}

.meta-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.meta-label {
    font-weight: 600;
    /* Muted, not accent: --text-muted (#64748b) is 4.7:1 on white. */
    color: var(--text-muted, #64748b);
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.meta-value {
    color: var(--text-color);
    font-size: 1.05rem;
    font-weight: 400;
}

.meta-note {
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 300;
    margin-top: 0.35rem;
    opacity: 0.85;
}

.authors-list {
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.author-item {
    display: inline-flex;
    align-items: center;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.6rem 1.25rem;
    border-radius: 2px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #2d3748;
    border: 2px solid transparent;
}

.author-item:hover {
    transform: translateY(-3px);
    box-shadow: none;
    text-decoration: none;
    color: #1a1a1a;
}

.role-principale {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.role-principale:hover {
    color: #fff;
    box-shadow: none;
}

.role-co-autore {
    background: #f97316;
    color: #fff;
    border-color: #f97316;
}

.role-co-autore:hover {
    color: #fff;
    box-shadow: none;
}

.role-traduttore {
    background: #8b5cf6;
    color: #fff;
    border-color: #8b5cf6;
}

.role-traduttore:hover {
    color: #fff;
    box-shadow: none;
}

.description-content {
    line-height: 1.8;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 400;
}

.description-content ul,
.description-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

.description-content ul {
    list-style-type: disc;
}

.description-content ol {
    list-style-type: decimal;
}

.description-content li {
    margin: 0.5em 0;
}

.description-content strong,
.description-content b {
    font-weight: 700;
}

.description-content em,
.description-content i {
    font-style: italic;
}

.description-content a {
    color: var(--primary-color, #3b82f6);
    text-decoration: underline;
}

.description-content a:hover {
    color: var(--primary-hover, #2563eb);
}

.tab-content {
    padding: 2.5rem 0;
}

.nav-tabs {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.nav-tabs .nav-link {
    color: var(--text-light);
    border: none;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem 1.5rem;
    transition: all 0.3s ease;
    background: transparent;
    letter-spacing: -0.01em;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-color);
    border-bottom-color: rgba(0,0,0,0.2);
    background: var(--light-bg);
    border-radius: 2px 2px 0 0;
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: var(--light-bg);
    font-weight: 700;
    border-radius: 2px 2px 0 0;
}

.nav-tabs .nav-link i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.related-books .book-card {
    margin-bottom: 2rem;
    transition: all 0.3s ease;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: none;
}

.related-books .book-card:hover {
    transform: translateY(-5px);
    box-shadow: none;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 3rem 0;
    position: relative;
    z-index: 50;
    padding: 0;
}

.action-buttons .ui-button {
    padding: 1rem 2.5rem;
    font-weight: 700;
    border-radius: 2px;
    font-size: 1rem;
    transition: all 0.3s ease;
    border-width: 2px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    min-width: 200px;
    justify-content: center;
    position: relative;
    z-index: 1001;
}

.action-buttons .ui-button:hover {
    transform: translateY(-3px);
    box-shadow: none;
    text-decoration: none;
}

/* The primary action is the site's primary button: the configurable
   --button-color fill used by every .btn-cta (catalogue "Dettagli", hero
   search, empty states). The outline variants below stay neutral ink. */
.action-buttons .btn-primary {
    background: var(--button-color);
    border-color: var(--button-color);
    color: var(--button-text-color);
}

.action-buttons .btn-primary:hover {
    background: var(--button-hover);
    border-color: var(--button-hover);
    color: var(--button-text-color);
    box-shadow: none;
}

.action-buttons .btn-outline-primary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    background: transparent;
}

.action-buttons .btn-outline-primary:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #ffffff;
}

.action-buttons .btn-outline {
    color: var(--text-light);
    border-color: var(--border-color);
    background: transparent;
}

.action-buttons .btn-outline:hover {
    background: var(--text-light);
    border-color: var(--text-light);
    color: #1a1a1a;
}

.swal2-popup {
    width: min(720px, 95vw) !important;
    padding: 2.5rem 2.75rem 2.25rem !important;
    border-radius: 2px !important;
    background: var(--white) !important;
    color: var(--text-color) !important;
    border: 1px solid rgba(17, 24, 39, 0.15) !important;
    box-shadow: none !important;
}

.swal2-popup .swal2-title,
.swal2-popup .swal2-html-container,
.swal2-popup label,
.swal2-popup .text-muted {
    color: var(--text-color) !important;
}

.swal2-popup .swal2-actions .swal2-styled {
    border-radius: 2px;
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: none !important;
}

.swal2-popup .swal2-styled.swal2-confirm {
    background: var(--button-color) !important;
    border: 1px solid var(--button-color) !important;
    color: var(--button-text-color) !important;
}

.swal2-popup .swal2-styled.swal2-confirm:hover,
.swal2-popup .swal2-styled.swal2-confirm:focus {
    background: var(--button-hover) !important;
    border-color: var(--button-hover) !important;
    color: var(--button-text-color) !important;
}

.swal2-popup .swal2-styled.swal2-cancel {
    background: transparent !important;
    color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
    opacity: 0.6;
}

.swal2-popup .swal2-styled.swal2-cancel:hover,
.swal2-popup .swal2-styled.swal2-cancel:focus {
    background: rgba(17, 24, 39, 0.08) !important;
    border-color: rgba(17, 24, 39, 0.4) !important;
    color: var(--text-color) !important;
}

.action-buttons .btn-danger {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: #1a1a1a;
}

.action-buttons .btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #1a1a1a;
    box-shadow: none;
}

/* Elegant Cards */
.card {
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-color);
    box-shadow: none;
    transition: all 0.3s ease;
    border-radius: 0;
    overflow: hidden;
}

.card:hover {
    box-shadow: none;
    transform: none;
}

.card-header {
    background: transparent;
    /* Explicit `none` (not just omitted) so it beats the global .card-header
       border in main.css. The header is just a small section label above the
       meta rows, not a boxed card head, so the hairline read as clutter.
       Inset the label with PADDING (not margin) so it always lines up with
       the .card-body content (1.5rem): main.css forces
       `.card-header { margin: 0 !important }`, so a margin-based inset only
       held while the inline styles happened to win the cascade. Padding is
       not overridden, so the label stays aligned regardless of load order. */
    border-bottom: none;
    margin: 0;
    padding: 0.5rem 1.5rem;
}

.card-header h6 {
    color: var(--text-muted, #64748b);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.3;
    margin: 0;
}

.card-header h6 i {
    color: var(--primary-color);
}

.card-body {
    padding: 1.5rem;
}

/* Keep the share partial's horizontal padding aligned with this section;
   ID+class beats the utility so the social buttons sit at the same
   1.5rem inset as the header line and the meta rows above. */
#book-share-card .card-body.px-3 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Share buttons: square 2px tiles with a 44px target (the partial's own
   <style> draws 30px circles; ID + class wins over it). */
#book-share-card .social-share-btn {
    width: 44px;
    height: 44px;
    border-radius: 2px;
}

.status-badge {
    padding: 0.5rem 0.875rem;
    border-radius: 2px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.bg-success {
    background: var(--success-color) !important;
}

.bg-danger {
    background: var(--danger-color) !important;
}

/* Responsive Improvements */
@media (max-width: 1200px) {
    .book-hero {
        padding: 4rem 0 3rem;
    }
}

@media (max-width: 992px) {
    .book-hero {
        padding: 3rem 0 2.5rem;
        min-height: auto;
        text-align: center;
    }

    .book-cover-large {
        max-width: clamp(180px, 35vw, 280px);
        margin-bottom: 1.5rem;
    }

    .book-title-hero {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
        margin-bottom: 1rem;
    }

    .authors-list {
        justify-content: center;
        margin-bottom: 1rem;
    }

    .availability-badge {
        display: inline-flex;
    }
}

@media (max-width: 768px) {
    .book-hero {
        padding: 3rem 0 3rem;
        text-align: center;
        min-height: 500px;
        height: auto;
        background-attachment: scroll;
    }

    section.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        margin-top: 1.5rem !important;
    }

    .book-title-hero {
        font-size: clamp(1.5rem, 6vw, 2.2rem);
        margin-bottom: 1rem;
        word-break: break-word;
    }

    /* Breadcrumb responsive su mobile */
    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .breadcrumb-item {
        display: inline;
        word-break: break-word;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        display: inline;
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .breadcrumb-item.active {
        word-break: break-word;
        display: inline;
    }

    /* Copertina full-width su mobile */
    #book-cover-container {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .book-cover-large {
        max-width: min(85vw, 500px);
        width: 100%;
        margin: 0 auto 1.5rem;
    }

    /* Rimuovi margine verticale su mobile */
    .book-hero-content img {
        margin: 0 auto 1.5rem;
    }

    /* Padding ridotto per sezioni su mobile */
    .book-description-section,
    .book-details-section,
    .book-reviews-section {
        /* Vertical padding only: horizontal spacing comes from the column
           container (`px-3`), so the info spans the same width as the title
           above instead of double-padding and looking narrow on mobile. */
        padding: 2rem 0;
    }

    /* Card contenuti full-bleed su mobile */
    .card {
        padding: 0;
    }

    .book-meta {
        margin-top: -1rem;
        padding: 1.5rem;
        border-radius: 0;
    }

    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }

    .action-buttons .ui-button {
        margin: 0;
        width: 100%;
        max-width: 300px;
        font-size: 0.9rem;
        padding: 0.8rem 1.5rem;
    }

    .genre-tags {
        justify-content: center;
        flex-wrap: wrap;
    }

    .genre-tag {
        font-size: 0.85rem;
        padding: 0.4rem 0.9rem;
    }

    .authors-list {
        justify-content: center;
    }

    .availability-badge {
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
    }

    .meta-item {
        padding: 0.8rem 0;
    }

    .tab-content {
        padding: 1rem 0;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        flex: 0 0 auto;
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }

    /* Mobile review layout - stack elements vertically */
    .review-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    .review-user-info {
        width: 100%;
    }

    .review-stars {
        width: 100%;
        display: flex;
        gap: 0.25rem;
    }
}

@media (max-width: 576px) {
    .book-hero {
        padding: 3rem 0 2.5rem;
        min-height: 450px;
        height: auto;
        background-attachment: scroll;
    }

    section.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        margin-top: 1rem !important;
    }

    .book-title-hero {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
        margin-bottom: 0.75rem;
        line-height: 1.3;
    }

    /* Copertina full-width su mobile piccolo */
    #book-cover-container {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 1.5rem;
    }

    .book-cover-large {
        max-width: min(85vw, 450px);
        width: 100%;
        margin: 0 auto;
    }

    /* Rimuovi margine verticale su mobile */
    .book-hero-content img {
        margin: 0 auto;
    }

    /* Padding ridotto per sezioni su mobile */
    .book-description-section,
    .book-details-section,
    .book-reviews-section {
        /* Vertical padding only: horizontal spacing comes from the column
           container (`px-3`), so the info spans the same width as the title
           above instead of double-padding and looking narrow on mobile. */
        padding: 2rem 0;
    }

    .breadcrumb {
        font-size: 0.8rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .breadcrumb-item {
        display: inline;
        word-break: break-word;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        display: inline;
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .author-item {
        display: inline-block;
        margin: 0.25rem 0.25rem 0.25rem 0;
        text-align: center;
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }

    .authors-list {
        justify-content: center;
        gap: 0.5rem;
        flex-direction: column;
        align-items: center;
    }

    .book-meta {
        padding: 1rem;
        margin-top: -0.5rem;
    }

    .availability-badge {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
    }

    .genre-tags {
        gap: 0.4rem;
        justify-content: center;
    }

    .genre-tag {
        font-size: 0.8rem;
        padding: 0.3rem 0.7rem;
    }

    /* On phones the card sits in a full-width column whose content edge is
       already the page gutter, so any horizontal padding here pushes the
       card's rows further in than the title, the description and every other
       block on the page. Drop the horizontal padding (keep the vertical
       rhythm) so the header label, meta rows and social buttons line up flush
       with the rest of the sheet. */
    .card-body {
        padding: 1rem 0;
    }

    .card-header {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 400px) {
    .book-hero {
        padding: 3rem 0 2rem;
        min-height: 400px;
        height: auto;
        background-attachment: scroll;
    }

    section.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        margin-top: 0.75rem !important;
    }

    .book-title-hero {
        font-size: clamp(1.2rem, 6vw, 1.5rem);
    }

    /* Copertina full-width su schermi molto piccoli */
    #book-cover-container {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 1.5rem;
    }

    .book-cover-large {
        max-width: min(85vw, 400px);
        width: 100%;
        margin: 0 auto;
    }

    /* Rimuovi margine verticale su mobile */
    .book-hero-content img {
        margin: 0 auto;
    }

    /* Padding ridotto per sezioni su mobile */
    .book-description-section,
    .book-details-section,
    .book-reviews-section {
        /* Vertical padding only — see the note above; keeps the info full
           width (as wide as the title) on the smallest screens. */
        padding: 1.5rem 0;
    }

    .hero-text {
        padding: 0 0.5rem;
    }

    .authors-list {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .availability-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Related Books Section */
/* Keep the (max 3) related cards grouped and centred instead of spread
   across the theme's ultra-wide container. ~3 cards of 280px + gutters.
   plain wrapper div so it stays independent from the surrounding grid. */
.related-books-wrap {
    /* Widened from the old ~3-card (960px) cap so wide screens can show up
       to 6 related books in one row; the grid below decides how many
       actually fit at any given width. */
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive related-books grid: one visible row, capped at 4 cards on
   wide/high-res screens and degrading to 3/2/1 as the viewport narrows —
   each column is at least a quarter of the row (minus the 3 inter-column
   gaps) OR 200px, whichever is larger, so auto-fill can never pack more
   than 4 columns even on a high-resolution laptop. grid-auto-rows:0 +
   overflow:hidden collapse every row after the first, so extra related
   books beyond the first 4 stay clipped rather than wrapping. */
.related-books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 3 * 1.5rem) / 4)), 1fr));
    /* row-gap:0 so the zero-height clipped rows don't add trailing
       whitespace below the single visible row (F002). Horizontal spacing
       between cards in the visible row is preserved via column-gap. */
    column-gap: 1.5rem;
    row-gap: 0;
    justify-content: center;
    grid-template-rows: auto;
    grid-auto-rows: 0;
    overflow: hidden;
}

.related-book-cell {
    min-width: 0;
}

/* Phones, tablets AND narrow desktop windows: the desktop grid packs one row
   and vertically CLIPS every related book past the first row (grid-auto-rows:0
   + overflow:hidden) with no hint that more exist. Switch to a horizontal
   snap-scroll strip so all related books are reachable by swiping and the next
   card peeks as the affordance. Breakpoint raised from 767px to 1023.98px so
   the narrow/responsive range — where the grid used to clip in silence — also
   gets the carousel, not just phones. Per-card width is tuned per sub-range
   below (one dominant book on phones, ~2.5 denser books on tablet/narrow
   desktop). */
@media (max-width: 1023.98px) {
    .related-books-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* CRITICAL: the base grid rule sets justify-content:center for the
           centred desktop grid. On an OVERFLOWING flex scroll strip that
           centres the cells, pushing the first one off-screen left so two
           half-cells show at scrollLeft:0. Reset to flex-start so the strip
           starts on the first whole card. */
        justify-content: flex-start;
        /* neutralize the desktop grid props so they don't interfere */
        grid-template-columns: none;
        grid-template-rows: none;
        grid-auto-rows: auto;
        column-gap: 1rem;
        row-gap: 0;
        /* hide the scrollbar aesthetically while keeping scrollability */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .related-books-grid::-webkit-scrollbar {
        display: none;
    }
    .related-book-cell {
        /* One dominant whole book per view, with ~15% of the NEXT card
           peeking on the right as the scroll affordance (otherwise a
           full-width card gives no hint that the strip scrolls). start +
           scroll-snap-stop:always still land each swipe on exactly one card.
           The peek is one-sided (the base grid centering was reset to
           flex-start above), so it reads as more-to-the-right, not as two
           half-covers. */
        flex: 0 0 85%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

/* Tablet / narrow desktop (768–1023.98px): same snap-scroll strip as phones,
   but denser — show two whole books with a third clearly half-visible instead
   of one dominant cover. The half-card peek is an unmistakable scroll-for-more
   cue at this width, where the old grid clipped extras out of sight.
   Overrides only flex-basis; flex-grow/shrink stay 0 from the shorthand above. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .related-book-cell {
        flex-basis: 38%;
    }
}

.related-book-card {
    background: none;
    border-radius: 0;
    overflow: visible;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1);
    border: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Deliberate book-sane cap, centred in its column, so the cover (140%
       of the card width) never balloons on wide screens where each column
       is very wide. 280px is the catalog grid's minmax() floor; here it's a
       hard cap (the catalog stretches beyond it, this doesn't) — related
       cards read slightly narrower than catalog cards, which is fine. */
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.related-book-card:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.related-book-image-container {
    position: relative;
    width: 100%;
    padding-top: 140%;
    overflow: hidden;
    background: var(--light-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.3s ease;
}

.related-book-card:hover .related-book-image-container {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.related-book-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.related-book-card:hover .related-book-image {
    transform: scale(1.05);
}

.related-availability-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
    background: var(--success-color); /* fallback for browsers without color-mix() */
    background: color-mix(in srgb, var(--success-color) 95%, transparent);
    color: white;
    box-shadow: none;
}

.related-availability-badge.availability-pending {
    background: #6b7280;
    color: white;
}

/* When a digital icon (eBook/audio) is injected next to the availability
   check, the pill grows to fit both — drop the icon's own left margin so
   the spacing is the flex gap alone (no overlap). */
.related-availability-badge .digital-badge-icon {
    margin-left: 0;
}

.related-book-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.related-book-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.related-book-title a {
    color: var(--text-color);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-book-title a:hover {
    color: #374151;
}

.related-book-author {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-book-actions {
    margin-top: auto;
}

/* "Dettagli" is the catalogue card action (.book-actions .btn-cta.btn-cta-sm):
   the shared frame comes from frontend-layouts.css; these lines repeat the
   catalogue's quiet fill so the two cards read the same. */
.related-book-card .book-actions {
    padding-top: 0.75rem;
}

.related-book-card .book-actions .btn-cta {
    width: auto;
    gap: 0.4rem;
    background: none !important;
    color: var(--primary-color) !important;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.related-book-card .book-actions .btn-cta:hover,
.related-book-card .book-actions .btn-cta:focus-visible {
    background: none !important;
    color: var(--primary-color) !important;
    transform: none;
}

/* No mobile-only max-width override: a wider cap on mobile (≤768px) than on
   desktop (280px) caused an inverted jump — widening the window past 768px
   *shrank* the card. The uniform 280px cap above keeps the transition
   monotonic across every breakpoint. */

/* Favorites button custom styling */
.btn-fav-custom {
    background-color: var(--white) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-light) !important;
    transition: all 0.3s ease;
}

.btn-fav-custom:hover {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: #ffffff !important;
}

.btn-fav-custom:focus {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
}
.card {
background-color: transparent;
}

/* ── Shared single-resource pages (partials/resource-hero.php) ──────────
 * The book page keeps its own markup; these rules only cover what a
 * periodical, issue or article hero adds. */
.resource-title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* No image: a single column and no 600px band to fill. */
.resource-hero--plain {
    min-height: 0;
    padding: 3rem 0;
}

.resource-hero--plain .book-hero-content {
    grid-template-columns: minmax(0, 1fr);
}

.resource-placement {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--text-light, #6b7280);
}

.resource-placement a {
    color: var(--text-color);
    font-weight: 600;
    text-decoration: none;
}

.resource-placement a:hover,
.resource-placement a:focus-visible {
    color: var(--primary-color);
    text-decoration: underline;
}

.resource-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* A masthead logo is a mark, not a cover: smaller and never cropped. */
.resource-cover--logo .book-cover-large {
    max-width: min(100%, 240px);
    max-height: 240px;
    object-fit: contain;
}

/* main.css gives every img `max-width: 100% !important`, which beats the caps
   above: on a resource page the cover filled its column (375px at 1280px).
   Re-assert them for the shared hero only; the book page keeps its own sizing,
   and body.layout-command's 300px (more specific) still wins. */
.resource-hero .book-cover-large {
    max-width: min(100%, 350px) !important;
}

.resource-hero .resource-cover--logo .book-cover-large {
    max-width: min(100%, 240px) !important;
}

/* The info card of a resource page uses an <h2> for a correct outline; it
   reads as the book page's <h6> card label. */
.card-header .resource-info-title {
    color: var(--text-muted, #64748b);
    /* !important: the layout sets every h1–h4 in the display serif with
       !important; this one is a UI label, not a heading voice. */
    font-family: inherit !important;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.3;
    margin: 0;
}

.card-header .resource-info-title i {
    color: var(--primary-color);
}

/* Scoped to the resource pages: the book page's own card (genre path, review
   HTML) keeps its link style. */
.resource-info-card .meta-value a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border-color);
    text-underline-offset: 3px;
}

.resource-info-card .meta-value a:hover,
.resource-info-card .meta-value a:focus-visible {
    color: var(--primary-color);
    text-decoration-color: currentColor;
}

/* An issue's printed table of contents: title, authors, pages on the right.
   A list, not cards — these entries have no page of their own. */
.resource-toc {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border-color);
}

.resource-toc li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-color);
}

.resource-toc-main {
    min-width: 0;
}

.resource-toc-kind {
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light, #6b7280);
}

.resource-toc-title {
    font-weight: 600;
    color: var(--text-color);
}

.resource-toc-authors {
    display: block;
    font-size: 0.875rem;
    color: var(--text-light, #6b7280);
}

.resource-toc-pages {
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-light, #6b7280);
}

.resource-notice {
    margin: 2rem 0 0;
    padding: 1rem 1.25rem;
    /* A tint of the warning colour, no side stripe: DESIGN.md forbids
       coloured edges thicker than a hairline. */
    background: color-mix(in srgb, var(--warning-color, #f59e0b) 12%, var(--white, #fff));
    border: 1px solid color-mix(in srgb, var(--warning-color, #f59e0b) 35%, transparent);
    border-radius: 2px;
    color: var(--text-color);
}

.resource-actions .btn-cta i {
    font-size: 0.85em;
}

/* Previous / up / next between sibling resources (partials/resource-pager.php). */
.resource-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.resource-pager a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    max-width: 100%;
    color: var(--text-color);
    text-decoration: none;
}

.resource-pager a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-pager a:hover,
.resource-pager a:focus-visible {
    color: var(--primary-color);
}

.resource-pager-up {
    text-align: center;
}

.resource-pager-up a {
    color: var(--text-light, #6b7280);
}

.resource-pager-next {
    text-align: right;
    justify-self: end;
    min-width: 0;
}

.resource-pager-prev {
    min-width: 0;
}

/* The book page centres its action row above description and details; a
   resource page with a listing under it keeps the row on the left. */
.resource-action-buttons {
    justify-content: flex-start;
    margin-bottom: 2rem;
}

/* With only a logo there is no cover to give the band its height. */
.resource-hero:has(.resource-cover--logo) {
    min-height: 0;
    padding: 3.5rem 0;
}

/* Related records under a resource page: the book page's "Potrebbero
   interessarti" band. */
.resource-related {
    background: var(--light-bg);
    padding: 3rem 0;
    margin-top: 3rem;
}

/* A citation ready to copy: the text, then its action. */
.resource-citation {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.resource-citation-text {
    margin: 0.25rem 0 0.75rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--text-color);
}

.resource-citation-copy,
.resource-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.resource-citation-copy:hover,
.resource-citation-copy:focus-visible,
.resource-back:hover,
.resource-back:focus-visible {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.resource-back {
    width: 100%;
    margin-top: 1.5rem;
}

.resource-citation-exports {
    margin-top: 1rem;
    font-size: 0.875rem;
}

.resource-citation-exports a {
    color: var(--text-color);
    font-weight: 600;
}

.resource-access-note {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-light, #6b7280);
}

@media (max-width: 640px) {
    /* The parent is already in the breadcrumb; give the two titles the room. */
    .resource-pager {
        grid-template-columns: 1fr 1fr;
    }

    .resource-pager-up {
        display: none;
    }
}

/* Other volumes in the same series: neutral 2px chips with a 44px target. */
.book-series-section {
    margin-top: 1.5rem;
}

.book-series-title {
    margin-bottom: 0.75rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color);
}

.book-series-title i {
    color: var(--primary-color);
}

.book-series-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background: var(--white, #fff);
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.book-series-chip:hover,
.book-series-chip:focus-visible {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.book-series-number {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}