/*
 * @module publication_details_content
 * @version 1.0.2
 * История 1.0.2 — 2026-10-05: только мобильное описание выровнено по ширине;
 * переносы русского текста и боковые отступы уменьшают большие пробелы.
 * @since 2026-10-05
 * Назначение: стили интерфейса, перенесённые из partials/pages/publication_details_content.html.
 * Связи: исходный HTML, PageRuntime и docs/modules/TEMPLATE_ASSETS.md.
 * Причина: HTML хранит разметку/серверные данные, JS — поведение, CSS — оформление.
 * История 1.0.0: исходные функции и комментарии сохранены при выделении файла.
 * История 1.0.1: проверены подключения, JSON и состояния после SPA-переходов.
 * Проверки: tests/test_template_assets.py и tests/template-assets.test.cjs.
 */
/* 🔹 Переопределяем base.html: убираем белый фон и ограничение ширины */
    body.publication-details-layout {
        background-color: #f3f4f6 !important;
        padding-top: 74px !important;
    }
    body.publication-details-layout .container-wrapper {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.publication-details-layout #main-content {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 2rem 1rem !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* === СТИЛИ КАРТОЧКИ ПУБЛИКАЦИИ (уникальные для этой страницы) === */
    .wide-card {
        background-color: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 1.25rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        margin: 0 auto;
        max-width: 1200px;
        box-sizing: border-box;
        overflow: hidden;
        word-wrap: break-word;
        width: 100%;
    }
    .wide-card:hover {
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .wide-card-content { margin-left: 0; width: 100%; }
    .wide-card-header {
        position: relative;
        margin: 1rem 0 1.25rem;
    }
    .wide-title-button::before {
        content: ''; position: absolute; left: 0; top: calc(50% + 0.1em);
        transform: translateY(-50%);
        width: 4px; height: 36px; border-radius: 999px;
        background: #dc2626;
    }
    .publication-title-category {
        display: inline-flex; align-items: center; gap: 0.4rem;
        margin: 0 1.5rem 0.65rem; color: #b91c1c; font-size: 0.75rem;
        font-weight: 700; line-height: 1.4;
    }
    
    .wide-card-header .wide-title-button {
        display: block; width: 100%; box-sizing: border-box;
        position: relative; top: 0; overflow: visible; text-overflow: clip;
        font-size: clamp(1.875rem, 3.5vw, 2.75rem); font-weight: 800; color: #292125;
        margin: 0; text-align: left; max-width: 100%; white-space: normal;
        overflow-wrap: anywhere; border: none; background: transparent;
        cursor: default;
        padding: 0.35rem 1rem; border-radius: 0.5rem;
        line-height: 1.2; letter-spacing: -0.025em;
        text-wrap: balance;
    }
    .wide-card-header .wide-title-button:hover {
        background: transparent; color: #292125;
    }

    /* 🔹 ОПИСАНИЕ: ЦЕНТР + КОРРЕКТНЫЕ ПЕРЕНОСЫ */
    .wide-card-description {
        line-height: 1.6; color: #374151; margin-top: 0.75rem; margin-bottom: 0.25rem;
        text-align: center; white-space: normal; overflow-wrap: break-word;
        word-break: normal; hyphens: none; text-wrap: balance;
    }

    /* 🔹 ДЕТАЛИ ПУБЛИКАЦИИ */
    .wide-card-details {
        display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.5rem;
        margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb;
        font-size: 0.875rem; align-items: center;
    }
    .pub-detail { display: flex; align-items: center; color: #6b7280; }
    .pub-detail i { color: #9ca3af; min-width: 16px; text-align: center; margin-right: 0.25rem; }

    /* 🔹 ИКОНКА СТАТУСА */
    .published-badge {
        color: #22c55e; display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; transition: all 0.2s ease; padding: 0.25rem; border-radius: 0.375rem;
        font-size: 1.15em;
    }
    .badge-hover { display: none; }
    .published-badge:hover, .published-badge:active { color: #dc2626; background-color: #fee2e2; }
    .published-badge:hover .badge-default, .published-badge:active .badge-default { display: none; }
    .published-badge:hover .badge-hover, .published-badge:active .badge-hover { display: inline-flex; }

    /* 🔹 ИКОНКА РЕДАКТИРОВАНИЯ */
    .edit-detail-icon {
        display: inline-flex; align-items: center; justify-content: center;
        color: #9ca3af; cursor: pointer; transition: all 0.2s ease;
        padding: 0.25rem 0.35rem; border-radius: 0.25rem; font-size: 1.1em;
    }
    .edit-detail-icon:hover { color: #2563eb; background-color: #eff6ff; }

    /* 🔹 ГАЛЕРЕЯ ИЗОБРАЖЕНИЙ */
    .gallery-wrapper { margin-bottom: 1rem; }
    .main-image-container {
        position: relative; width: 100%; border-radius: 0.5rem; overflow: hidden;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        min-height: 300px; max-height: 500px; display: flex; align-items: center; justify-content: center;
    }
    .main-image { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease; }
    .main-image-placeholder { color: #9ca3af; text-align: center; padding: 2rem; }
    .main-image-placeholder i { font-size: 3rem; margin-bottom: 0.5rem; display: block; }

    .gallery-nav {
        position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5);
        color: white; border: none; width: 40px; height: 40px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; z-index: 10;
    }
    .gallery-nav:hover { background: rgba(0, 0, 0, 0.7); }
    .gallery-nav.prev { left: 1rem; } .gallery-nav.next { right: 1rem; }

    .image-counter {
        position: absolute; bottom: 1rem; right: 1rem; background: rgba(0, 0, 0, 0.6);
        color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;
    }

    .thumbnails-container { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
    .thumbnail {
        flex-shrink: 0; width: 70px; height: 70px; border-radius: 0.375rem; overflow: hidden;
        cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s, transform 0.2s;
        background: #e5e7eb; display: flex; align-items: center; justify-content: center;
    }
    .thumbnail:hover { border-color: #9ca3af; transform: scale(1.05); }
    .thumbnail.active { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2); }
    .thumbnail img { width: 100%; height: 100%; object-fit: cover; }
    .thumbnail.empty { display: none; }

    /* ═══════════════════════════════════════════════════════════════════ */
    /* 🔹 ПОХОЖИЕ СОБЫТИЯ (similar publications) v2.0                   */
    /* ═══════════════════════════════════════════════════════════════════ */
    .similar-section {
        max-width: 1200px;
        margin: 2rem auto 0;
        padding: 0;
        box-sizing: border-box;
    }
    .similar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .similar-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #111827;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
    }
    .similar-title i {
        color: #dc2626;
        font-size: 1.1rem;
    }

    .similar-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .similar-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        overflow: hidden;
        transition: all 0.2s ease;
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
    }
    .similar-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        border-color: #dc2626;
        text-decoration: none;
        color: inherit;
    }

    .similar-card-image {
        width: 100%;
        height: 140px;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }
    .similar-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .similar-card-image .no-image {
        color: #9ca3af;
        font-size: 2rem;
    }

    .similar-card-body {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    .similar-card-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: #111827;
        line-height: 1.3;
        margin-bottom: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.4em;
    }
    .similar-card-meta {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.75rem;
        color: #6b7280;
        margin-top: auto;
    }
    .similar-card-meta .meta-row {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    .similar-card-meta i {
        color: #9ca3af;
        width: 14px;
        text-align: center;
        flex-shrink: 0;
        font-size: 0.7rem;
    }
    .similar-card-meta .price-free {
        color: #16a34a;
        font-weight: 600;
    }
    .similar-card-meta .category-badge {
        display: inline-block;
        padding: 0.125rem 0.5rem;
        background: #ede9fe;
        color: #5b21b6;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 500;
        align-self: flex-start;
        margin-bottom: 0.25rem;
    }

    /* === АДАПТИВ: мобильные ≤768px (только для карточки) === */
    @media (max-width: 768px) {
        .wide-card-details .pub-detail-empty,
        .wide-card-details .pub-views-label { display: none; }
        body.publication-details-layout #main-content { padding: 1rem 0.5rem !important; }
        .wide-card { width: 100%; max-width: min(480px, 95vw) !important; margin: 0 auto !important; padding: clamp(0.625rem, 2vw, 1rem); }
        .wide-card-content { margin-left: 0; }
        .wide-card-header { margin: 0.75rem 0 1rem; }
        .publication-title-category { margin-left: 1rem; margin-right: 1rem; }
        .wide-title-button::before { height: 28px; }
        .wide-card-header .wide-title-button { font-size: clamp(1.5rem, 5vw, 2rem); padding: 0.3rem 0.75rem; }
        .wide-card-description {
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: clamp(8px, 2.5vw, 14px) !important;
            padding-right: clamp(8px, 2.5vw, 14px) !important;
            text-align: justify !important;
            text-align-last: left;
            text-justify: inter-word;
            text-indent: 0 !important;
            margin-top: 0.75rem !important;
            width: 100% !important;
            box-sizing: border-box !important;
            white-space: normal !important;
            hyphens: auto !important;
            word-break: normal !important;
            overflow-wrap: break-word !important;
            text-wrap: wrap !important;
            line-height: 1.75;
            letter-spacing: normal;
        }
        .wide-card-details { margin-left: 0 !important; padding-left: 0 !important; gap: 0.4rem 0.6rem !important; flex-wrap: wrap !important; margin-bottom: 0.5rem !important; padding-bottom: 0.5rem !important; align-items: center !important; }
        .published-badge, .edit-detail-icon { padding: 0.2rem !important; margin: 0 !important; }
        .gallery-nav { display: none !important; }
        .main-image-container { min-height: 200px; max-height: 300px; }
        .thumbnail { width: 55px; height: 55px; }
        .image-counter { font-size: 0.7rem; padding: 0.2rem 0.5rem; bottom: 0.5rem; right: 0.5rem; background: rgba(0, 0, 0, 0.4); }
        
        /* Адаптив для похожих */
        .similar-section { padding: 0; margin-top: 1.5rem; }
        .similar-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
        .similar-card-image { height: 120px; }
        .similar-title { font-size: 1.1rem; }
    }
    @media (min-width: 769px) and (max-width: 1024px) { 
        .wide-card { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
        .similar-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 480px) {
        .similar-grid { grid-template-columns: 1fr; }
        .similar-card-image { height: 160px; }
        .similar-card {
            flex-direction: row;
            height: 110px;
        }
        .similar-card-image {
            width: 110px;
            height: 100%;
            flex-shrink: 0;
        }
        .similar-card-body { padding: 0.625rem; }
    }
    .publication-owner-actions {
        position: absolute; top: 0; right: 0; z-index: 10;
        display: flex; align-items: center; gap: 0.25rem;
        padding: 0.375rem; background: #fff;
        border-bottom-left-radius: 1.25rem;
        box-shadow: -3px 3px 10px rgb(0 0 0 / 5%);
    }
    .publication-owner-actions .published-badge,
    .publication-owner-actions .edit-detail-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin: 0 !important; padding: 0 !important;
        border-radius: 0.75rem;
    }