/**
 * Content detail pages — Posts, Reviews, Studies, Publications.
 * Reading width, breadcrumbs, card shell, prose typography (design tokens).
 */

.content-detail-page {
    padding-bottom: var(--lc-space-8, 2rem);
}

.content-detail-breadcrumb {
    margin-bottom: var(--lc-space-4, 1rem);
}

.content-detail-breadcrumb .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
    padding: var(--lc-space-2, 0.5rem) 0;
    background: transparent;
    font-size: var(--lc-text-sm, 0.875rem);
}

.content-detail-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
    float: none;
}

.content-detail-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: 0;
}

.content-detail-breadcrumb .breadcrumb-item a {
    color: var(--lc-color-primary-600, #2563eb);
    text-decoration: none;
}

.content-detail-breadcrumb .breadcrumb-item a:hover {
    color: var(--lc-color-primary-700, #1d4ed8);
    text-decoration: underline;
}

.content-detail-breadcrumb .breadcrumb-item.active {
    color: var(--lc-color-text-secondary, #64748b);
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-detail-breadcrumb .breadcrumb .breadcrumb-item::before,
.content-detail-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: none;
    display: none;
    float: none;
    padding: 0;
}

.content-detail-breadcrumb .breadcrumb-separator {
    display: flex;
    align-items: center;
    padding-inline: 0.5rem;
    color: var(--lc-color-text-muted, #94a3b8);
    user-select: none;
    list-style: none;
}

.content-detail-page h1,
.content-detail-page .publication-title,
.content-detail-page .h3 {
    color: var(--lc-color-text-primary, #0f172a);
}

.content-detail-page .text-muted,
.content-detail-page .card-text.text-muted {
    color: var(--lc-color-text-secondary, #64748b) !important;
}

.content-detail-page .card {
    border-radius: var(--lc-radius-lg, 12px);
    border: var(--lc-card-border, 1px solid var(--lc-color-border-subtle, rgba(0, 0, 0, 0.08)));
    box-shadow: var(--lc-card-shadow, var(--lc-shadow-md));
    overflow: hidden;
}

.content-detail-page .card-header {
    background-color: var(--lc-color-surface-raised, #fff);
    border-bottom: 1px solid var(--lc-color-border-subtle, rgba(0, 0, 0, 0.08));
}

.content-detail-page .card-header.bg-white {
    background-color: var(--lc-color-surface-raised, #fff) !important;
}

.content-detail-prose,
.content-detail-page .post-content-full,
.content-detail-page .description-content,
.content-detail-page .content-preview,
.content-detail-page .review-summary,
.content-detail-page .content-detail-prose-block {
    max-width: var(--lc-reading-width, 45rem);
    font-size: var(--lc-text-base, 1rem);
    line-height: var(--lc-reading-line-height, 1.75);
    color: var(--lc-color-text-primary, #0f172a);
}

.content-detail-page .post-content-full p,
.content-detail-page .description-content,
.content-detail-page .content-preview,
.content-detail-page .review-summary,
.content-detail-page .content-detail-prose-block {
    margin-bottom: var(--lc-space-4, 1rem);
}

.content-detail-page .content-detail-prose-block {
    padding: var(--lc-space-4, 1rem);
    border: 1px solid var(--lc-color-border, #e2e8f0);
    border-radius: var(--lc-radius-md, 8px);
    background-color: var(--lc-color-surface-muted, #f1f5f9);
}

.content-detail-page .publication-description h4,
.content-detail-page .publication-content h4,
.content-detail-page .review-summary-section h4 {
    font-size: var(--lc-text-lg, 1.125rem);
    font-weight: 600;
    color: var(--lc-color-text-primary, #0f172a);
    margin-bottom: var(--lc-space-3, 0.75rem);
}

.content-detail-page .content-detail-back {
    margin-bottom: var(--lc-space-4, 1rem);
}

.content-detail-page .content-detail-back .btn-outline-secondary {
    font-size: var(--lc-text-sm, 0.875rem);
}

.content-detail-page .detail-cover-image {
    border-radius: var(--lc-radius-lg, 12px);
    box-shadow: var(--lc-shadow-lg, 0 4px 16px rgba(15, 23, 42, 0.12));
}

@media (prefers-reduced-motion: reduce) {
    .content-detail-page .detail-cover-image {
        transition: none;
    }

    .content-detail-page .detail-cover-image:hover {
        transform: none;
    }
}

@media (prefers-color-scheme: dark) {
    .content-detail-breadcrumb .breadcrumb-item a {
        color: #93c5fd;
    }

    .content-detail-breadcrumb .breadcrumb-item a:hover {
        color: #bfdbfe;
    }

    .content-detail-breadcrumb .breadcrumb-item.active {
        color: var(--lc-card-text-body, #cbd5e1);
    }

    .content-detail-page h1,
    .content-detail-page .publication-title,
    .content-detail-page .h3 {
        color: var(--lc-card-text-title, #e2e8f0);
    }

    .content-detail-page .card {
        background-color: var(--lc-card-bg, #1e293b);
        border-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1));
        box-shadow: var(--lc-card-shadow-dark, 0 2px 8px rgba(0, 0, 0, 0.3));
    }

    .content-detail-page .card-header,
    .content-detail-page .card-header.bg-white {
        background-color: var(--lc-card-bg, #1e293b) !important;
        border-bottom-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1)) !important;
        color: var(--lc-color-text-primary, #f1f5f9);
    }

    .content-detail-page .card-body {
        background-color: var(--lc-card-bg, #1e293b);
        color: var(--lc-color-text-primary, #f1f5f9);
    }

    .content-detail-prose,
    .content-detail-page .post-content-full,
    .content-detail-page .description-content,
    .content-detail-page .content-preview,
    .content-detail-page .review-summary,
    .content-detail-page .content-detail-prose-block {
        color: var(--lc-card-text-body, #cbd5e1);
    }

    .content-detail-page .content-detail-prose-block {
        background-color: rgba(255, 255, 255, 0.05);
        border-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1));
    }

    .content-detail-page .publication-description h4,
    .content-detail-page .publication-content h4,
    .content-detail-page .review-summary-section h4 {
        color: var(--lc-card-text-title, #e2e8f0);
    }

    .content-detail-page .border-bottom {
        border-bottom-color: var(--lc-card-footer-border, rgba(255, 255, 255, 0.1)) !important;
    }
}