/* =============================================================
 * CAP-015: Bambu Lab Wiki UI — единые стили для /guides/
 *
 * Стили для контента wiki.bambulab.com на 1-sloy.ru /guides/.
 * Загружаются через $APPLICATION->SetAdditionalCSS() или
 * result_modifier.php для iblock=60.
 * Акцентный цвет: #7FBFB5 (Капалин)
 * ============================================================= */

/* ===== 1. Content wrapper / detail page ===== */
.guides-detail .guides-content,
.guides-detail .content,
.content.guides-wiki {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    max-width: 800px;
}

/* ===== 2. Typography ===== */
.guides-detail .content h2,
.guides-detail .guides-content h2,
.content.guides-wiki h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #7FBFB5;
    color: #111;
    scroll-margin-top: 80px;
}

.guides-detail .content h3,
.guides-detail .guides-content h3,
.content.guides-wiki h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.75rem 0 0.5rem;
    color: #222;
    scroll-margin-top: 80px;
}

.guides-detail .content h4,
.guides-detail .guides-content h4,
.content.guides-wiki h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    color: #333;
    scroll-margin-top: 80px;
}

.guides-detail .content p,
.guides-detail .guides-content p,
.content.guides-wiki p {
    margin: 0 0 1rem;
}

.guides-detail .content strong,
.guides-detail .guides-content strong,
.content.guides-wiki strong {
    font-weight: 600;
}

.guides-detail .content em,
.guides-detail .guides-content em,
.content.guides-wiki em {
    font-style: italic;
}

.guides-detail .content ul,
.guides-detail .content ol,
.guides-detail .guides-content ul,
.guides-detail .guides-content ol,
.content.guides-wiki ul,
.content.guides-wiki ol {
    margin: 0 0 1rem 1.5rem;
    padding: 0;
}

.guides-detail .content li,
.guides-detail .guides-content li,
.content.guides-wiki li {
    margin-bottom: 0.25rem;
    line-height: 1.7;
}

.guides-detail .content code,
.guides-detail .guides-content code,
.content.guides-wiki code {
    font-size: 0.875em;
    padding: 0.15em 0.35em;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: #d63384;
}

.guides-detail .content pre,
.guides-detail .guides-content pre,
.content.guides-wiki pre {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 1.25rem 0;
}

.guides-detail .content pre code,
.guides-detail .guides-content pre code,
.content.guides-wiki pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* ===== 3. Bambu Note blocks ===== */
.guides-detail .content .bambu-note,
.guides-detail .guides-content .bambu-note,
.content.guides-wiki .bambu-note {
    position: relative;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    border-left: 4px solid #7FBFB5;
    background: #f0faf8;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.guides-detail .content .bambu-note--warning,
.guides-detail .guides-content .bambu-note--warning,
.content.guides-wiki .bambu-note--warning {
    border-left-color: #e53935;
    background: #ffebee;
}

.guides-detail .content .bambu-note--tip,
.guides-detail .guides-content .bambu-note--tip,
.content.guides-wiki .bambu-note--tip {
    border-left-color: #43a047;
    background: #e8f5e9;
}

.guides-detail .content .bambu-note--endnotes,
.guides-detail .guides-content .bambu-note--endnotes,
.content.guides-wiki .bambu-note--endnotes {
    border-left-color: #757575;
    background: #f5f5f5;
    font-size: 0.9rem;
    color: #666;
}

.guides-detail .content .bambu-note strong:first-child,
.guides-detail .guides-content .bambu-note strong:first-child,
.content.guides-wiki .bambu-note strong:first-child {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
}

/* ===== 4. Tables ===== */
.guides-detail .content table,
.guides-detail .guides-content table,
.content.guides-wiki table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.95rem;
}

.guides-detail .content table th,
.guides-detail .content table td,
.guides-detail .guides-content table th,
.guides-detail .guides-content table td,
.content.guides-wiki table th,
.content.guides-wiki table td {
    padding: 0.625rem 0.75rem;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
}

.guides-detail .content table th,
.guides-detail .guides-content table th,
.content.guides-wiki table th {
    background: #f5f5f5;
    font-weight: 600;
    color: #333;
}

.guides-detail .content table tr:nth-child(even) td,
.guides-detail .guides-content table tr:nth-child(even) td,
.content.guides-wiki table tr:nth-child(even) td {
    background: #fafafa;
}

.guides-detail .content table tr:hover td,
.guides-detail .guides-content table tr:hover td,
.content.guides-wiki table tr:hover td {
    background: #f0faf8;
}

/* ===== 5. Images ===== */
.guides-detail .content img,
.guides-detail .guides-content img,
.content.guides-wiki img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1.25rem 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.guides-detail .content figure,
.guides-detail .guides-content figure,
.content.guides-wiki figure {
    margin: 1.25rem 0;
    text-align: center;
}

.guides-detail .content figure img,
.guides-detail .guides-content figure img,
.content.guides-wiki figure img {
    margin: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.guides-detail .content figure figcaption,
.guides-detail .guides-content figure figcaption,
.content.guides-wiki figure figcaption {
    font-size: 0.85rem;
    color: #888;
    margin-top: 0.5rem;
}

/* ===== 6. Links ===== */
.guides-detail .content a,
.guides-detail .guides-content a,
.content.guides-wiki a {
    color: #1976d2;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.guides-detail .content a:hover,
.guides-detail .guides-content a:hover,
.content.guides-wiki a:hover {
    border-bottom-color: #1976d2;
}

/* ===== 7. TOC (Table of Contents) Sidebar ===== */
.guides-toc-wrapper {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.guides-toc-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.guides-toc-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.guides-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guides-toc-list li {
    margin: 0;
    line-height: 1.4;
}

.guides-toc-list a {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    color: #555;
    text-decoration: none;
    border-bottom: none;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

.guides-toc-list a:hover {
    background: #f0faf8;
    color: #7FBFB5;
}

.guides-toc-list .toc-h3 {
    padding-left: 1.25rem;
    font-size: 0.8rem;
    color: #777;
}

.guides-toc-list .toc-active {
    background: #f0faf8;
    color: #7FBFB5;
    font-weight: 600;
}

/* ===== 8. Section Navigation (sidebar left) ===== */
.guides-section-nav {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.guides-section-nav-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.guides-section-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guides-section-nav-list li {
    margin: 0;
}

.guides-section-nav-list a {
    display: block;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    color: #555;
    text-decoration: none;
    border-bottom: none;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

.guides-section-nav-list a:hover,
.guides-section-nav-list a.active {
    background: #f0faf8;
    color: #7FBFB5;
    font-weight: 600;
}

/* ===== 9. Wiki listing cards (section page) ===== */
.guides-section-page .guides-section-header {
    margin-bottom: 1.5rem;
}

.guides-section-page .guides-section-desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

.guides-section-page .guides-article-card {
    display: block;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}

.guides-section-page .guides-article-card:hover {
    border-color: #7FBFB5;
    box-shadow: 0 2px 8px rgba(127, 191, 181, 0.15);
}

.guides-section-page .guides-article-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 0.25rem;
}

.guides-section-page .guides-article-card-text {
    font-size: 0.85rem;
    color: #888;
    line-height: 1.5;
}

.guides-section-page .guides-article-card:hover .guides-article-card-title {
    color: #7FBFB5;
}

/* ===== 10. Breadcrumbs ===== */
.guides-breadcrumbs {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 1rem;
}

.guides-breadcrumbs a {
    color: #7FBFB5;
    text-decoration: none;
    border-bottom: none;
}

.guides-breadcrumbs a:hover {
    text-decoration: underline;
}

.guides-breadcrumbs .sep {
    margin: 0 0.35rem;
    color: #ccc;
}

/* ===== 11. Detail page header ===== */
.guides-detail-header {
    margin-bottom: 1.5rem;
}

.guides-detail-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.5rem;
}

.guides-detail-meta {
    font-size: 0.8rem;
    color: #999;
}

/* ===== 12. Responsive ===== */
@media (max-width: 768px) {
    .guides-toc-wrapper,
    .guides-section-nav {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .guides-detail .content table,
    .guides-detail .guides-content table,
    .content.guides-wiki table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .guides-detail .content .bambu-note,
    .guides-detail .guides-content .bambu-note,
    .content.guides-wiki .bambu-note {
        margin: 0.75rem 0;
        padding: 0.75rem 1rem;
    }

    .guides-detail .content h2,
    .guides-detail .guides-content h2,
    .content.guides-wiki h2 { font-size: 1.25rem; }

    .guides-detail .content h3,
    .guides-detail .guides-content h3,
    .content.guides-wiki h3 { font-size: 1.1rem; }

    .guides-detail-header h1 { font-size: 1.35rem; }

    .guides-section-page .guides-article-card {
        padding: 0.75rem 1rem;
    }
}

/* ===== 13. Image placeholders (CAP-016) ===== */
.wiki-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    margin: 1.25rem 0;
    background: #f0faf8;
    border: 2px dashed #7FBFB5;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    color: #7FBFB5;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.wiki-img-placeholder__label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.25rem 0.75rem;
    border: 1px solid #7FBFB5;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    color: #7FBFB5;
}

.wiki-img-placeholder__path {
    font-size: 0.7rem;
    color: #a0d5ce;
    word-break: break-all;
    max-width: 100%;
}

/* ===== 14. Subsection title ===== */
.guides-subsection-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #222;
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #7FBFB5;
}

/* ===== 15. Section content on section pages ===== */
.guides-section-content {
    margin-bottom: 1.5rem;
}

.guides-section-content .content.guides-wiki {
    max-width: 100%;
}/* BAMBUWIKI-004: Sidebar navigation tree */
.bambu-sidebar-wrapper {
    display: flex;
    flex-direction: row;
    gap: 24px;
    max-width: 100%;
}

.bambu-sidebar-tree-column {
    flex: 0 0 280px;
    min-width: 240px;
    max-width: 320px;
}

.bambu-sidebar-content-column {
    flex: 1;
    min-width: 0;
}

/* Sidebar tree */
.bambu-sidebar-tree {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.bambu-tree__header {
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #111;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    letter-spacing: 0.02em;
}

.bambu-tree__list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.bambu-tree__sublist {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
}

.bambu-tree__sublist--collapsed {
    display: none;
}

.bambu-tree__item {
    margin: 0;
    position: relative;
}

.bambu-tree__link {
    display: flex;
    align-items: center;
    padding: 5px 14px 5px 8px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #444;
    text-decoration: none;
    transition: all 0.12s ease;
    gap: 4px;
}

.bambu-tree__link:hover {
    color: #1976d2;
    background: #f0f4f8;
    text-decoration: none;
}

.bambu-tree__item--active > .bambu-tree__link {
    color: #1976d2;
    font-weight: 600;
    background: #e8f0fe;
    border-left: 3px solid #1976d2;
    padding-left: 5px;
}

.bambu-tree__item--parent-active > .bambu-tree__link {
    font-weight: 500;
    color: #333;
}

.bambu-tree__text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* Toggle button */
.bambu-tree__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: #888;
    flex-shrink: 0;
    transition: transform 0.15s ease;
    font-size: 0;
    margin-left: -2px;
}

.bambu-tree__toggle:hover {
    color: #1976d2;
}

.bambu-tree__item--expanded > .bambu-tree__sublist {
    display: block;
}

.bambu-tree__item--expanded > .bambu-tree__toggle svg {
    transform: rotate(90deg);
}

.bambu-tree__toggle--spacer {
    visibility: hidden;
}

/* =============================================================
 * CAP-020: Right sidebar — PAGE CONTENTS, TAGS, LAST EDITED, Share/Print
 * ============================================================= */

.guides-detail__layout {
    display: flex;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.guides-detail__content {
    flex: 1;
    min-width: 0;
    max-width: 800px;
}

.guides-detail__sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-top: 0.5rem;
}

.guides-sidebar-block {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.guides-sidebar-block:last-child {
    border-bottom: none;
}

.guides-sidebar-block__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin-bottom: 0.75rem;
}

/* TOC links */
.guides-sidebar-toc__item {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: #555;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.guides-sidebar-toc__item:hover {
    color: #1976d2;
    text-decoration: none;
}

.guides-sidebar-toc__item--active {
    color: #1976d2;
    font-weight: 500;
    border-left: 2px solid #1976d2;
    padding-left: 0.5rem;
}

.guides-sidebar-toc__item--h3 {
    padding-left: 0.75rem;
    font-size: 0.8rem;
}

.guides-sidebar-toc__item--h4 {
    padding-left: 1.5rem;
    font-size: 0.775rem;
}

/* Tags */
.guides-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.guides-sidebar-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    color: #1976d2;
    background: #e8f0fe;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.guides-sidebar-tag:hover {
    background: #d2e3fc;
    text-decoration: none;
}

/* Last edited */
.guides-sidebar-meta__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.guides-sidebar-meta__date {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.15rem;
}

/* Share / Print */
.guides-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* =============================================================
 * CAP-020: Hide B242YA chat bot and subscribe block on wiki pages
 *
 * bambu-wiki.css only loads on /guides/ via SetAdditionalCSS,
 * so styles here are automatically scoped to wiki pages.
 * ============================================================= */

/* Hide B242YA chat widget (renders as fixed-position element) */
[id*="b242ya"],
div[style*="position: fixed"][style*="bottom"],
.b24-widget-button-wrapper {
    display: none !important;
}

/* Hide subscribe blocks on wiki pages */
.subscribe-block-wrapper,
div[data-ajax-load-block="FOOTER_TOGGLE_SUBSCRIBE"],
.subscribe-block,
form[action*="subscribe"],
.footer__subscribe,
.footer-subscribe {
    display: none !important;
}

.guides-sidebar-btn {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: #555;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}

.guides-sidebar-btn:hover {
    background: #e9ecef;
    color: #333;
}

/* Breadcrumbs */
.guides-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #888;
}

.guides-breadcrumb__link {
    color: #1976d2;
    text-decoration: none;
}

.guides-breadcrumb__link:hover {
    text-decoration: underline;
}

.guides-breadcrumb__sep {
    color: #ccc;
    margin: 0 0.15rem;
}

.guides-breadcrumb__current {
    color: #555;
    font-weight: 500;
}

/* =============================================================
 * CAP-020: Homepage /guides/ product cards
 * ============================================================= */

.guides-homepage {
    max-width: 900px;
}

.guides-homepage__welcome {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.25rem;
}

.guides-homepage__subtitle {
    font-size: 1rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.guides-homepage__beginner-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: #1976d2;
    font-weight: 500;
}

.guides-homepage__section-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #222;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #7FBFB5;
}

.guides-homepage__section-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.guides-homepage__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.guides-homepage__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 1rem 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
    overflow: hidden;
}

.guides-homepage__card:hover {
    border-color: #1976d2;
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.12);
    text-decoration: none;
}

.guides-homepage__card-img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    transition: transform 0.25s ease;
}

.guides-homepage__card:hover .guides-homepage__card-img {
    transform: scale(1.05);
}

.guides-homepage__card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.3;
    padding: 0.6rem 0.5rem 0;
}

.guides-homepage__card:hover .guides-homepage__card-title {
    color: #1976d2;
}

/* =============================================================
 * CAP-020: Sub-section cards (manual/maintenance/troubleshooting)
 * ============================================================= */

.guides-subsection-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.guides-subsection-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.guides-subsection-card:hover {
    background: #e8f0fe;
    border-color: #1976d2;
    text-decoration: none;
}

.guides-subsection-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.3rem;
}

.guides-subsection-card:hover .guides-subsection-card__title {
    color: #1976d2;
}

.guides-subsection-card__count {
    font-size: 0.8rem;
    color: #888;
}