/* Global Styles */
.wiki-article-page {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-main);
    min-height: 100vh;
    padding-top: 0;
}

/* --- LAYOUT: используем wiki-editor-container из editor-layout.css — идентичные отступы, gap, ширины --- */
/* Переопределения только для статьи (если нужны) */

.card-image-container {
    position: relative;
    width: 100%;
    /* Fixed height ~9vw matches news */
    height: 9vw; 
    overflow: hidden;
    background: var(--darker);
}

.card-image, .rec-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.item-card:hover .card-image, .rec-item:hover .rec-image {
    transform: scale(1.05);
    filter: brightness(0.7);
}

.card-content, .rec-content {
    padding: 0.8vw; /* Tighter padding */
    display: flex;
    flex-direction: column;
    gap: 0.3vw;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    margin-bottom: 0.2vw;
}

.card-icon {
    width: 1.6vw;
    height: 1.6vw;
    background: var(--primary);
    border-radius: 0.4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8vw;
    flex-shrink: 0;
}

.card-title, .rec-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.9vw;
    font-weight: 600;
    color: var(--card-text);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.6vw;
    border-top: 0.1vw solid var(--border);
    margin-top: auto;
}

.card-meta-info, .rec-views {
    font-size: 0.75vw;
    color: var(--primary);
    font-weight: 600;
}

.explore-link {
    color: var(--primary);
    font-size: 0.75vw;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3vw;
    transition: all 0.3s ease;
}

.explore-link:hover {
    gap: 0.5vw;
    color: var(--primary-dark);
}

/* --- MAIN CONTENT --- */
.article-main {
    background: var(--paper);
    border-radius: var(--radius);
    border: 0.1vw solid var(--border);
    padding: 1.5vw;
}

.article-header {
    margin-bottom: 1.5vw;
}

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5vw;
}

/* Breadcrumbs */
.vc-breadcrumb {
    font-size: 0.9vw;
    color: var(--muted);
    display: flex;
    align-items: center;
}

.vc-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    position: relative;
    font-weight: 500;
    /* Animation Setup */
    background-image: linear-gradient(to right, var(--primary), var(--primary));
    background-size: 0% 0.1vw;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.vc-breadcrumb a:hover {
    color: #779bc3;
    background-size: 100% 0.1vw;
}

.vc-breadcrumb .sep {
    margin: 0 0.5vw;
    color: var(--muted);
}

.vc-lastupdate {
    font-size: 0.8vw;
    color: var(--muted);
}

.vc-view-count {
    font-size: 0.85vw;
    color: var(--muted);
    margin-bottom: 0.5vw;
}

.article-header h1 {
    font-size: 2vw;
    margin: 1vw 0;
    color: var(--text);
    font-weight: 800;
    letter-spacing: 0.05vw;
}

/* Article Text & Link Animation */
.article-text {
    font-size: 0.95vw;
    line-height: 1.7;
    color: var(--text);
}

/* Link Animation Style */
.article-text a {
    color: #779bc3;
    text-decoration: none;
    font-weight: 500;
    background-image: linear-gradient(to right, var(--primary), var(--primary));
    background-size: 0% 0.12vw;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding-bottom: 0.1vw;
}

.article-text a:hover {
    background-size: 100% 0.12vw;
    color: var(--primary-dark);
}

.article-text h2 {
    font-size: 1.2vw;
    margin: 1.5vw 0 1vw;
    padding-left: 0.8vw;
    position: relative;
    color: var(--text);
}

.article-text h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.2vw;
    background: #779bc3;
    border-radius: 0.2vw;
}

.article-text h3 {
    font-size: 1.1vw;
    margin: 1.2vw 0 0.8vw;
    padding-left: 1vw;
    color: #779bc3;
}

.article-text p { margin: 0 0 1vw 0; }
.article-text ul, .article-text ol { margin: 0 0 1vw 1.5vw; padding-left: 0.5vw; }
.article-text li { margin-bottom: 0.5vw; }

/* Contents Table */
.contents-section {
    margin: 1.5vw 0;
    border: 0.1vw solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
}
.contents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8vw;
    color: white;
    background-color: #779bc3;
}
.contents-header h2 { margin: 0; font-size: 1.1vw; font-weight: 500; }
.contents-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 0.9vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5vw;
}

.contents-toggle [data-lucide],
.contents-toggle .lucide-icon {
    width: 1vw;
    height: 1vw;
}

.contents-toggle [data-lucide] svg,
.contents-toggle .lucide-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}
.contents-table { width: 100%; border-collapse: collapse; }
.contents-table.is-hidden { display: none; }
.contents-table td { padding: 0.5vw 1vw; border-top: 0.1vw solid var(--border); font-size: 0.9vw; }
/* Styled links in TOC */
.contents-table a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.contents-table a:hover { color: #779bc3; }

/* Gallery */
.gallery-section {
    margin: 1.5vw 0;
    border: 0.1vw solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
}
.gallery-header { padding: 0.8vw; color: white; background-color: #779bc3; display: flex; justify-content: space-between; align-items: center; }
.gallery-header h2 { margin: 0; font-size: 1.1vw; font-weight: 500; }
.gallery-toggle { background: none; border: none; color: white; font-size: 0.9vw; cursor: pointer; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1vw; padding: 1vw; }
.gallery-grid.is-hidden { display: none; }
.gallery-item { overflow: hidden; position: relative; border-radius: 0.3vw; background: #000; margin: 0; }
.gallery-item img { width: 100%; display: block; transition: transform 0.3s; }
.gallery-item:hover img { transform: scale(1.03); }

/* Правый сайдбар на странице статьи — sticky как в редакторе */
.wiki-article-right-sidebar {
    position: sticky !important;
    top: 6vw !important;
}

/* Скрываем редакторские элементы на странице статьи */
.wiki-article-right-sidebar .image-controls,
.wiki-article-right-sidebar .image-placeholder {
    display: none !important;
}

/* Statistics Card — идентично article-progress-card в редакторе */
.wiki-article-right-sidebar .statistics-card-container {
    background: #ffffff !important;
    border-radius: 1rem !important;
    box-shadow: 0 0.069vw 0.138vw 0 rgba(0, 0, 0, 0.05) !important;
    border: 0.069vw solid #e5e7eb !important;
    overflow: hidden !important;
}

.wiki-article-right-sidebar .statistics-title {
    padding: 0.75rem 1rem;
    border-bottom: 0.069vw solid #e5e7eb;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e1e24;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.wiki-article-right-sidebar .statistics-table {
    width: 100%;
    border-collapse: collapse;
}

.wiki-article-right-sidebar .statistics-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-bottom: 0.069vw solid rgba(229, 231, 235, 0.5);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.wiki-article-right-sidebar .statistics-table td:first-child {
    color: #6b7280;
}

.wiki-article-right-sidebar .statistics-table td:last-child {
    font-weight: 600;
    color: #1e1e24;
}

.wiki-article-right-sidebar .vote-buttons-container {
    padding: 0.75rem 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.wiki-article-right-sidebar .vote-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 0.069vw solid #e5e7eb;
    background: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e1e24;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Lucide иконки в статистике и правом сайдбаре */
.wiki-article-right-sidebar .lucide-icon,
.wiki-article-right-sidebar [data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.wiki-article-right-sidebar .lucide-icon svg,
.wiki-article-right-sidebar [data-lucide] svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.wiki-article-right-sidebar .vote-btn .lucide-icon,
.wiki-article-right-sidebar .vote-btn [data-lucide] {
    width: 1rem;
    height: 1rem;
}

/* --- TOP NAVIGATION --- */
.vc-topbar {
    position: fixed;
    top: 5.5vw;
    left: 4.5vw;
    right: 0;
    z-index: 1000;
    background-color: #779bc3;
    border-bottom: 0.1vw solid rgba(0,0,0,0.1);
    padding: 0.8vw 0;
}

.vc-topbar__inner {
    margin: 0 auto;
    padding: 0 1vw;
    /* Added left padding for shift */
    padding-left: 2vw; 
    display: flex;
    gap: 0.8vw;
    align-items: center;
}

.vc-topbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6vw;
    font-size: 0.9vw;
    color: white;
    padding: 0.6vw 0.8vw;
    background: rgba(255,255,255,0.1);
    border-radius: 0.5vw;
    text-decoration: none;
    transition: all 0.15s;
    border: none;
    cursor: pointer;
}
.vc-topbar__btn--ghost { background: transparent; border: 0.1vw solid rgba(255,255,255,0.3); }
.vc-topbar__btn:hover { background: rgba(255,255,255,0.2); }
.vc-topbar__btn--bookmark.active { background: rgba(255,255,255,0.25); }
.vc-topbar__btn--bookmark.active i { color: #FFD700; }

/* Share Menu */
.vc-share { position: relative; }
.vc-share__menu {
    position: absolute; top: 100%; right: 0; margin-top: 0.5vw; min-width: 12vw;
    background: var(--paper); border: 0.1vw solid var(--border); border-radius: 0.5vw;
    box-shadow: var(--shadow); display: none; z-index: 110;
}
.vc-share:hover .vc-share__menu { display: block; }
.vc-share__menu button, .vc-share__menu a {
    display: block; width: 100%; text-align: left; padding: 0.6vw 0.8vw;
    background: none; border: none; color: var(--text); font-size: 0.85vw;
    cursor: pointer; text-decoration: none;
}
.vc-share__menu button:hover, .vc-share__menu a:hover { background: var(--paper-2); }

/* Variables */
:root {
    --bg: #f5f6f8;
    --paper: #ffffff;
    --paper-2: #f8f9fa;
    --border: rgba(15,17,20,.08);
    --muted: #667085;
    --text: #111318;
    --radius: 0.5vw;
    --shadow: 0 0.3vw 1vw rgba(0,0,0,.1);
    --accent1: #779bc3;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Inherited */
    --card-bg: #ffffff;
    --card-text: #1e293b;
    --card-border: #e2e8f0;
    --primary: #6366F1;
    --primary-dark: #4F46E5;
    --card-shadow: 0 0.4vw 1.2vw rgba(0, 0, 0, 0.08);
    --hover-shadow: 0 0.8vw 2.4vw rgba(99, 102, 241, 0.15);
    --darker: #020617;
}

@media (max-width: 82.873vw) {
    .wiki-article-container.wiki-editor-container {
        grid-template-columns: 16vw 1fr calc(19.337vw + 1.5vw);
    }
}

@media (max-width: 68.508vw) {
    .wiki-article-container.wiki-editor-container {
        grid-template-columns: 1fr;
    }
    .wiki-article-container .left-sidebar,
    .wiki-article-container .right-sidebar {
        display: none;
    }
    .vc-topbar {
        top: 5.5vw;
        left: 0;
    }
}