/* =========================================================
   📰 Раздел «Проект» — материалы о самом каталоге

   Не лента карточек-анонсов, а оглавление (якоря) слева + одна
   непрерывная лента с ПОЛНЫМ текстом всех статей подряд справа —
   читать без остановки. Оглавление подсвечивается при прокрутке
   через IntersectionObserver (см. front/js/project_scrollspy.js).
   ========================================================= */

.project-page{
    padding-block:1.4rem 4rem;
}

.project-empty{
    text-align:center;
    color:var(--color-muted);
    font-size:.92rem;
    padding:3.2rem 1rem;
    background:var(--color-surface);
    border:1px dashed var(--color-border);
    border-radius:var(--radius-lg);
}

/* Один акцент на раздел: чип, оглавление и текущая карточка. */
.project-tone--orange{ --project-tone:#a64b1b; --project-tone-soft:#fcebdd; }
.project-tone--green{ --project-tone:#256348; --project-tone-soft:#e5f2e9; }
.project-tone--blue{ --project-tone:#285e88; --project-tone-soft:#e8f0f8; }
.project-tone--sand{ --project-tone:#735a32; --project-tone-soft:#f3ecdb; }

/* --------- макет: оглавление слева + лента справа --------- */
.project-layout{
    display:grid;
    grid-template-columns:17rem minmax(0,1fr);
    gap:2rem;
    align-items:start;
}
@media (max-width:820px){
    .project-layout{ grid-template-columns:1fr; gap:1rem; }
}

.project-toc{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:.5rem;
    position:sticky;
    top:calc(var(--header-height, 74px) + 1rem);
    max-height:calc(100vh - var(--header-height, 74px) - 2rem);
    overflow-y:auto;
}
.project-toc__title{
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--color-muted);
    padding:.6rem .7rem .35rem;
}
.project-toc__group{
    border-top:1px solid var(--color-border-subtle);
    padding:.3rem 0;
}
.project-toc__group:first-of-type{
    border-top:0;
}
.project-toc__group-title{
    display:flex;
    align-items:center;
    gap:.25rem;
    width:calc(100% - .3rem);
    font:inherit;
    font-size:.8rem;
    font-weight:700;
    text-align:left;
    color:var(--color-fg);
    background:color-mix(in srgb, var(--project-tone-soft) 55%, var(--color-surface));
    border:0;
    border-left:2px solid var(--project-tone);
    border-radius:6px;
    margin:.25rem .15rem .35rem;
    padding:.5rem .55rem;
    cursor:pointer;
}
.project-toc__group-title:hover{ background:var(--project-tone-soft); }
.project-toc__group-title:focus-visible,
.project-section__toggle:focus-visible{ outline:2px solid var(--project-tone); outline-offset:2px; }
.project-toc__group-count{
    margin-left:auto;
    color:var(--color-muted);
    font-weight:500;
    font-variant-numeric:tabular-nums;
}
.project-chevron{
    display:inline-block;
    flex:none;
    width:.45rem;
    height:.45rem;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .15s ease;
}
[aria-expanded="false"] > .project-chevron{ transform:rotate(-45deg); }
.project-toc__items[hidden],
.project-section__articles[hidden]{ display:none !important; }
.project-toc__group-title::before{
    content:'§';
    display:inline-block;
    width:1rem;
    margin-right:.25rem;
    color:var(--project-tone);
    font-size:1.05rem;
    font-weight:700;
    line-height:1;
    vertical-align:-.04em;
}
.project-toc__group.is-current .project-toc__group-title{
    color:var(--project-tone);
}
.project-toc__item{
    position:relative;
    display:block;
    font-size:.82rem;
    color:var(--color-muted);
    text-decoration:none;
    padding:.42rem .7rem .42rem 1.35rem;
    margin-left:.85rem;
    border-radius:8px;
    transition:background-color .15s ease, color .15s ease;
}
.project-toc__item::before{
    content:'';
    position:absolute;
    left:.52rem;
    top:50%;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--color-border);
    transform:translateY(-50%);
    transition:background-color .15s ease, transform .15s ease;
}
.project-toc__item:hover{
    background:var(--color-bg);
    color:var(--color-fg);
}
.project-toc__item:hover::before{
    background:var(--color-muted);
}
.project-toc__item.is-active{
    background:var(--project-tone-soft);
    color:var(--project-tone);
    font-weight:700;
}
.project-toc__item.is-active::before{
    background:var(--project-tone);
    transform:translateY(-50%) scale(1.35);
}

/* На планшете и мобильном оглавление превращается в закреплённую
   строку чипсов — длинный столбец якорей до контента только мешал
   бы. Ссылки и data-атрибуты те же — их слушает project_scrollspy.js,
   меняется только раскладка.

   Строка — вторая строка шапки, а не плавающая «таблетка»: вплотную
   под мобильной шапкой (64px, topo_header_mobile.css — а не
   --header-height, это 74px десктопа: в щели проглядывал текст), на
   всю ширину экрана (отрицательные поля на гуттер .container) и с
   фоном страницы — лента уходит под неё целиком, не виднеясь по
   краям и в скруглённых углах. Правый край растворяется — видно, что
   строку можно листать вбок. */
@media (max-width:820px){
    .project-toc{
        --project-toc-header:64px;

        position:sticky;
        top:var(--project-toc-header);
        z-index:5;
        display:flex;
        gap:.4rem;
        max-height:none;
        overflow-x:auto;
        overflow-y:visible;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
        scroll-padding-inline:var(--space-4);
        margin-inline:calc(-1 * var(--space-4));
        padding:.45rem 2rem .45rem var(--space-4);
        background:var(--color-bg);
        border:0;
        border-bottom:1px solid var(--color-border-subtle);
        border-radius:0;
        box-shadow:0 6px 10px -8px rgba(0,0,0,.28);
        -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
        mask-image:linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
    }
    .project-toc__title{ display:none; }
    .project-toc__group{
        display:flex;
        align-items:center;
        gap:.4rem;
        border-top:0;
        padding:0 .15rem 0 .5rem;
        flex:0 0 auto;
        border-left:2px solid var(--project-tone);
    }
    .project-toc__group:first-of-type{ border-left:0; padding-left:0; }
    /* Название раздела в строке — подпись, а не кнопка: сворачивать
       раздел из навигации было неожиданно (жмёшь, чтобы перейти, —
       статьи пропадают). Свернуть по-прежнему можно заголовком раздела
       в самой ленте (.project-section__toggle). */
    .project-toc__group-title{
        display:flex;
        width:auto;
        flex:0 0 auto;
        white-space:nowrap;
        scroll-snap-align:start;
        margin:0;
        padding:.35rem .15rem;
        border-left:0;
        background:none;
        color:var(--project-tone);
        font-size:.7rem;
        font-weight:800;
        letter-spacing:.05em;
        text-transform:uppercase;
        pointer-events:none;
    }
    .project-toc__group-title .project-chevron,
    .project-toc__group-count{ display:none; }
    .project-toc__items{
        display:flex;
        align-items:center;
        gap:.4rem;
    }
    .project-toc__item{
        flex:0 0 auto;
        white-space:nowrap;
        scroll-snap-align:start;
        padding:.38rem .75rem;
        margin-left:0;
        border:1px solid var(--color-border);
    }
    .project-toc__item::before{ display:none; }
    .project-toc__item.is-active{
        border-color:var(--project-tone);
    }
}

/* Заголовок раздела остаётся в ленте, когда его статьи свёрнуты. */
.project-section{ display:flex; flex-direction:column; gap:.7rem; }
.project-section__heading{ margin:0; font:inherit; }
.project-section__toggle{
    display:flex;
    align-items:center;
    gap:.65rem;
    width:100%;
    padding:.8rem 1.15rem;
    font:inherit;
    text-align:left;
    color:var(--project-tone);
    background:color-mix(in srgb, var(--project-tone-soft) 65%, var(--color-surface));
    border:1px solid color-mix(in srgb, var(--project-tone) 20%, var(--color-border));
    border-radius:12px;
    cursor:pointer;
}
.project-section__toggle:hover{ background:var(--project-tone-soft); }
.project-section__symbol{ font-size:1.3rem; font-weight:700; line-height:1; }
.project-section__name{ font-family:var(--font-display); font-size:1.06rem; font-weight:700; }
.project-section__count{ margin-left:auto; color:var(--color-muted); font-size:.76rem; white-space:nowrap; }
.project-section__articles{ display:flex; flex-direction:column; gap:1rem; }
@media (max-width:480px){
    .project-section__toggle{ gap:.45rem; padding:.7rem .8rem; }
    .project-section__count{ font-size:.7rem; }
}

/* --------- непрерывная лента: полный текст статей подряд --------- */
.project-scroll{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

/*
 * Каждая статья — своя «сцена»: отдельная карточка, а не просто абзац
 * между линиями. Активная (та, что сейчас на экране — см.
 * project_scrollspy.js) получает то же акцентное выделение, что и её
 * пункт в оглавлении слева, — подсветка не только в списке, но и там,
 * где реально читаешь.
 */
.project-entry{
    padding:1.7rem clamp(1.3rem,3vw,2rem);
    background:var(--color-surface);
    border:1px solid var(--color-border-subtle);
    border-radius:16px;
    cursor:pointer;
    transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
    scroll-margin-top:calc(var(--header-height, 74px) + 1rem);
}
.project-entry:hover{
    border-color:var(--color-border);
    box-shadow:var(--shadow-sm);
}
.project-entry.is-active{
    /* Лёгкий оттенок, не полная плашка --color-primary-light: карточка
       держит абзацы полного текста, насыщенный фон мешал бы читать. */
    background:color-mix(in srgb, var(--project-tone) 3%, var(--color-surface));
    border-color:color-mix(in srgb, var(--project-tone) 30%, var(--color-border));
    box-shadow:inset 3px 0 0 var(--project-tone), var(--shadow-sm);
}

.project-entry__eyebrow{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.4rem;
    margin-bottom:.6rem;
}

.project-entry__share{
    position:relative;
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.8rem;
    height:1.8rem;
    flex:none;
    padding:0;
    color:var(--color-muted);
    background:none;
    border:1px solid transparent;
    border-radius:50%;
    cursor:pointer;
    transition:color .15s ease, background-color .15s ease, border-color .15s ease;
}
.project-entry__share:hover{
    color:var(--color-fg);
    background:var(--color-bg);
    border-color:var(--color-border);
}
/* /styles_core/front/project.css — та же галочка, что у табло страницы.
   Класс is-copied выставляет общий обработчик /front/js/topo_share.js. */
.project-entry__share.is-copied{
    background:var(--color-accent, #6baa75);
    border-color:var(--color-accent, #6baa75);
    color:#fff;
}
.project-entry__share.is-copied svg{
    visibility:hidden;
}
.project-entry__share.is-copied::after{
    content:'✓';
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.85rem;
    font-weight:800;
}

.project-entry__title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.4rem;
    line-height:1.3;
    color:var(--color-fg);
    text-wrap:balance;
    margin:0 0 .7rem;
}

.project-entry__body{
    font-size:.95rem;
    line-height:1.75;
    color:var(--color-fg);
    max-width:66ch;
}
.project-entry__body p{
    margin:0 0 1rem;
}

.project-tag{
    display:inline-block;
    font-size:.78rem;
    line-height:1.2;
    font-weight:700;
    letter-spacing:0;
    text-transform:none;
    color:var(--project-tone);
    background:var(--project-tone-soft);
    padding:.3rem .7rem;
    border-radius:999px;
}

.project-entry__body h2,
.project-entry__body h3{
    font-family:var(--font-display);
    margin:1.6rem 0 .7rem;
    color:var(--color-fg);
}
.project-entry__body a{
    color:var(--color-primary);
}
.project-entry__body img{
    max-width:100%;
    height:auto;
    border-radius:8px;
}

/*
 * Фото и галереи из медиатеки (кнопка «Медиатека» в Орде — тот же
 * механизм, что у «Статей», site/writer_db/articles/media_picker.js):
 * та же раскладка, что у .article-read-body в styles_core/front/articles.css
 * — одиночное фото 16:9, в галерее 4:3, подпись под фото, лупа по
 * ховеру; клик открывает лайтбокс (front/js/article_gallery_lightbox.js).
 */
.project-entry__body .article-photo{
    position:relative;
    margin:1.8rem 0;
}
.project-entry__body .article-photo img{
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
    margin:0;
    border-radius:var(--radius-md);
    cursor:zoom-in;
}
.project-entry__body .article-gallery .article-photo img{
    aspect-ratio:4 / 3;
}
.project-entry__body .article-photo figcaption{
    margin-top:.6rem;
    font-size:.78rem;
    line-height:1.4;
    color:var(--color-muted);
    text-align:center;
}
.project-entry__body .article-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:16px;
    margin:1.8rem 0;
}
.project-entry__body .article-gallery .article-photo{
    margin:0;
}
.project-entry__body .article-photo::after{
    content:"";
    position:absolute;
    inset:0 0 auto auto;
    width:30px;
    height:30px;
    margin:10px;
    border-radius:50%;
    background:rgba(20, 14, 3, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E") center / 16px no-repeat;
    opacity:0;
    transition:opacity .15s ease;
    pointer-events:none;
}
.project-entry__body .article-photo:hover::after{
    opacity:1;
}


/* Ссылки на самостоятельные статьи и переходы в конце материала. */
.project-entry__title a{
    color:inherit;
    text-decoration:none;
}
.project-entry__title a:hover{
    color:var(--color-primary);
}
.project-article-nav{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem 1.5rem;
    padding:.5rem 1rem;
    font-size:.9rem;
}
.project-article-nav a{
    color:var(--color-primary);
}

/* Переход из строки оглавления на телефоне: статья встаёт под шапку
   (64px) И саму строку (~3.3rem, см. .project-toc выше), а не только
   под шапку — иначе ярлык и верх заголовка оставались под строкой.
   В конце файла: базовое .project-entry выше перебило бы это правило. */
@media (max-width:820px){
    .project-entry{
        scroll-margin-top:calc(64px + 3.3rem + .75rem);
    }
}