/* ==========================================================================
   PAGES / BLOG — постраничные стили раздела «блог»

   Этап 10.3: сюда переехали инлайновые <style> из шаблонов блога. Перенос
   был сделан КАК ЕСТЬ — правила, селекторы и значения не менялись.
   Этап 10.4: секция post_detail переведена с хардкод-цветов на ролевые
   токены (см. её заголовок). Хардкод-цветов в файле больше не осталось,
   кроме двух rgba-теней — они чёрные, как у .card в ядре, и от темы
   не зависят по смыслу.

   Файл подключается через {% block extra_css %} в:
     blog/templates/blog/post_detail.html
     blog/templates/blog/post_list.html
   Один файл на обе страницы — секции не пересекаются по селекторам, а
   раздельные blog-detail.css / blog-list.css дали бы два лишних запроса
   ради ~4 КБ. Если раздел вырастет — резать по этим же секциям.
   ========================================================================== */


/* ==========================================================================
   1. POST DETAIL — блок статистики и действий над статьёй
   Источник: blog/templates/blog/post_detail.html (инлайн-<style>).

   10.3 перенёс секцию как есть — со всеми хардкод-цветами (#f8f9fa, #e9ecef,
   #dee2e6, #6c757d, #495057, #dc3545, white). 10.4 снял Bootstrap, и стало
   видно, во что это обходится: плашка .post-actions темы не знала и в ТЁМНОЙ
   теме оставалась светлой, а вложенные кнопки красились токенами темы, то есть
   светлым по светлому. Замеры на светлой плашке в тёмной теме:
     .btn-outline-warning  1.94:1 / 1.72:1 по стопам градиента (норма 4.5:1)
     .btn-outline-primary  2.49:1
     .btn-outline-secondary 3.07:1
     .heart-button.btn-outline-danger 4.30:1
   Здесь секция переведена на токены целиком: и подложка, и собственный текст
   блока, и три .heart-button-правила с бутстраповским красным.
   ========================================================================== */

.post-actions {
    /* Подложка на токенах — иначе плашка не следует теме, и любой корректный
       тематический токен внутри неё обязан провалиться (см. замеры выше).

       ПОЧЕМУ --card, а не --muted. По смыслу это приглушённая плашка, и
       --muted напрашивался первым, но он не проходит: в СВЕТЛОЙ теме
       --muted = oklch(0.95) темнее фона страницы (0.9731), и на нём
       --warning-text («В избранное») даёт 4.47:1 — мимо AA на 0.03. Это не
       придирка к третьему знаку, а системное ограничение: --warning-text
       подобран по контрасту с --card и с фоном страницы, самая светлая
       подложка задаёт потолок его светлоты. Значит, подложка не имеет права
       быть темнее фона страницы. Из ролевых токенов этому отвечают только
       --card (1.0) и --accent (0.97) — их и берём.

       Градиент сохранён, оба стопа на токенах — приём тот же, что у
       .series-hero в pages/tutorials.css. Направление «поверхность → соседняя
       поверхность» работает в обеих темах: в светлой 1.0 → 0.97 (плашка чуть
       темнеет к правому нижнему углу, как и было у #f8f9fa → #e9ecef), в
       тёмной 0.12 → 0.20 (плашка светлеет, то есть приподнимается над фоном
       0.08). Худший стоп для текста — --accent, по нему и считался запас:
       минимум 4.74:1 в светлой теме и 4.78:1 в тёмной.

       Оговорка про рамку: в тёмной теме --border (0.2) совпадает с --accent,
       поэтому у правого нижнего угла контур сливается с собственной заливкой.
       Плашку там очерчивает сам градиент и тень; трогать --border ради этого
       нельзя — он общий для всех .card, это правка ядра, не страницы. */
    background: linear-gradient(135deg, var(--card) 0%, var(--accent) 100%);
    border-radius: 12px;
    padding: 20px;
    /* Рамка и тень — те же, что у .card в 03-components.css: плашка играет
       роль карточки, и расхождение здесь читалось бы как рассогласование. */
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.post-stats-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.post-stats {
    display: flex;
    gap: 30px;
    align-items: center;
}

.stat-item {
    /* Имя класса пересекается с профилем: в 03-components.css есть
       .stat-item внутри мобильной @media (flex/text-align с !important).
       Коллизия существовала и до переноса — фиксируется здесь как факт,
       разводить имена будем в 10.4. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 60px;
}

/* Собственный текст плашки. Хардкоды #6c757d / #495057 держались только на
   том, что подложка была светлой всегда; после перевода плашки на токены они
   бы «поехали» вместе с темой (#495057 на тёмной плашке — 1.29:1). Роли
   очевидны: цифра — основной текст, иконка и подпись — второстепенный. */
.stat-item i {
    font-size: 18px;
    color: var(--muted-foreground);
    margin-bottom: 4px;
}

.stat-item span {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1;
}

.stat-item small {
    font-size: 11px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.post-interactions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.favorite-section {
    display: flex;
    align-items: center;
}

/* Адаптивность */
@media (max-width: 768px) {
    .post-stats-container {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .post-stats {
        justify-content: space-around;
        gap: 20px;
    }

    .post-interactions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .stat-item {
        min-width: 50px;
    }

    .stat-item .icon {
        /* 16px — то же, что раньше давал font-size: 16px на <i> FontAwesome
           (этап 10.8: <i> заменён на <svg class="icon">, размер теперь
           задаётся width/height, а не font-size). */
        width: 1rem;
        height: 1rem;
    }

    .stat-item span {
        font-size: 14px;
    }
}

/* Стили для кнопки лайка в форме сердечка */
.heart-button {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.3s ease;
    font-size: 12px;
}

.heart-button:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.heart-button .icon {
    /* 15px — то же, что раньше давал font-size: 15px на <i> FontAwesome.
       Этап 10.8 заменил <i> на <svg class="icon">: размер width/height,
       а не font-size; margin оставлен для прежнего выравнивания по счётчику. */
    width: 0.9375rem;
    height: 0.9375rem;
    margin-bottom: 1px;
}

.heart-button .likes-count {
    font-size: 8px;
    font-weight: bold;
    line-height: 1;
}

/* Ниже был хардкод-красный #dc3545 (Bootstrap danger) и серый #6c757d. Ядро
   для тех же классов давно красится токенами, но эти правила специфичнее
   (.heart-button.btn-*) и молча перебивали его — лайк разъезжался по цвету с
   остальными danger-кнопками страницы. Теперь значения те же, что в ядре.

   Почему правила не удалены, раз они дублируют ядро: .heart-button выше
   объявляет `border: 1px solid` БЕЗ цвета, то есть сбрасывает border-color в
   currentColor. Специфичность у .heart-button (0,1,0) и у .btn-danger (0,1,0)
   одинаковая, а pages/blog.css подключён ПОСЛЕ 03-components.css — значит,
   при удалении этих правил рамка залитой кнопки лайка стала бы белой
   (currentColor = #fff). Явный border-color здесь и держит её красной. */
.heart-button.btn-danger {
    background-color: var(--destructive);
    border-color: var(--destructive);
    /* Чистый белый, а не --destructive-foreground — по той же причине, что
       и у .btn-danger в ядре: 4.76:1 против 4.53:1, запас над AA вдвое шире. */
    color: #fff;
}

.heart-button.btn-outline-danger {
    background-color: transparent;
    /* Текст — --destructive-text (роль текста, норма 4.5:1), рамка —
       --destructive (роль линии, норма 3:1). Разделение ролей объяснено
       у --destructive-text в 00-tokens.css. */
    border-color: var(--destructive);
    color: var(--destructive-text);
}

.heart-button.btn-outline-danger:hover {
    background-color: var(--destructive);
    color: #fff;
}

.heart-button.btn-outline-secondary {
    background-color: transparent;
    /* Было #6c757d и на рамке, и на тексте. Рамка ушла на
       --border-interactive: он и подобран под норму 3:1 для контуров. */
    border-color: var(--border-interactive);
    color: var(--muted-foreground);
}

.heart-button.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.heart-button.disabled:hover {
    transform: none;
    box-shadow: none;
}


/* --------------------------------------------------------------------------
   POST DETAIL — сетка блока «Похожие записи»

   Этап 10.4: замена бутстраповской сетки (.row + .col-md-6) на CSS Grid.
   Почему Grid, а не Flex: карточки в ряду должны быть одной высоты (заголовок
   статьи бывает в одну строку, бывает в две) — Grid выравнивает их сам, без
   height: 100% на карточке; и колонки задаются одним свойством вместо пары
   «отрицательные margin у .row + padding у колонки».

   Точка перелома — 768px, а НЕ бутстраповские 992px (md). Причины:
     • 768px — фактическое текущее поведение страницы: в ядре
       (03-components.css) уже лежит правило `.col-md-6 { width: 50% }` внутри
       @media (min-width: 768px), и оно перебивает Bootstrap 3, потому что наши
       модули подключены ПОСЛЕ bootstrap.min.css. То есть 992px здесь не
       работали уже давно, и 768px сохраняет рендер один в один;
     • 768px — брейкпоинт нашей дизайн-системы (768/1024), а не BS3 (768/992/1200);
     • карточка «похожей записи» — это заголовок и дата, ей хватает половины
       ширины уже на планшете; вводить ради неё 1024px (как у .post-card-grid,
       где карточка с превью и тегами) значило бы держать её растянутой
       на всю ширину без нужды.

   Сама .card / .card-body / .card-title / .card-text объявлены в ядре
   (03-components.css) — это псевдонимы наших компонентов, здесь не дублируем.
   -------------------------------------------------------------------------- */

.similar-posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Порядок значений: сначала row-gap, потом column-gap.
       Горизонтальный 1.5rem повторяет бутстраповский жёлоб (0.75rem padding
       с каждой стороны колонки), вертикальный 1rem — бывший .mb-3 на карточке.
       Разные значения оставлены намеренно: так перенос точно не сдвигает
       вёрстку, а не «примерно похоже». */
    gap: 1rem 1.5rem;
}

@media (min-width: 768px) {
    .similar-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================================
   2. POST LIST — переключатель вида «сетка / список»
   Источник: blog/templates/blog/post_list.html (инлайн-<style>).
   Состояние кнопок хранится в localStorage, переключает класс .view-list
   на #post-list-container — логика в инлайн-<script> того же шаблона.
   Здесь всё уже на актуальных токенах, хардкод-цветов нет.
   ========================================================================== */

/* View toggle (grid/list) */
.list-header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.view-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 0.75);
    overflow: hidden;
    background-color: var(--card);
}

.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0.5rem 0.625rem;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.view-toggle-btn:hover {
    color: var(--foreground);
    background-color: var(--accent);
}

/* Кольцо фокуса — ВНУТРЬ (отрицательный offset).

   Базовое правило (03-components.css) рисует обводку снаружи с offset +2px,
   и здесь она не появлялась вовсе: .view-toggle объявлен с overflow: hidden
   (иначе скруглённые углы группы срезали бы углы крайних кнопок), а кнопки
   заполняют группу от края до края. Замерено в браузере: до рамки оставался
   1px при нужных 4px (2px offset + 2px толщины) — то есть переключатель
   «сетка/список» был для клавиатуры немой парой кнопок (WCAG 2.1 SC 2.4.7).

   Тот же приём и по той же причине применён в ядре к .search-input и
   .header-search input. Цвет общий, var(--ring): 5.27:1 к карточке в светлой
   теме и 7.75:1 в тёмной при норме 3:1. */
.view-toggle-btn:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.view-toggle-btn.active {
    /* Активная кнопка — залитая ПЛАШКА с текстом поверх, а не акцентная
       обводка, поэтому фон берётся из --primary-surface, не из --primary.
       --primary в тёмной теме светлее (0.70) — он рассчитан на роль цвета
       текста/иконки НА фоне страницы; под почти белым --primary-foreground
       он давал 2.48:1 при норме AA 4.5:1. --primary-surface (0.50) — 5.38:1. */
    background-color: var(--primary-surface);
    color: var(--primary-foreground);
}

/* Кольцо на АКТИВНОЙ кнопке — цветом её текста, а не общим --ring.

   Следствие того, что обводка ушла внутрь (см. правило выше): внутри активной
   кнопки лежит не карточка, а заливка --primary-surface — та же краска, что и
   --ring, только на другой светлоте. Замерено: 1.04:1 в светлой теме при норме
   3:1, то есть на выбранном режиме просмотра обводки было бы не видно вовсе —
   ровно там, где фокус чаще всего и оказывается. --primary-foreground для того
   и заведён как передний план этой поверхности: замерено 4.81:1 в светлой теме
   и 5.37:1 в тёмной. */
.view-toggle-btn.active:focus-visible {
    outline-color: var(--primary-foreground);
}

/* List view: single column, more compact, horizontal-leaning layout */
#post-list-container.view-list {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
}

#post-list-container.view-list .post-card {
    padding: 0.875rem 1.125rem;
}

#post-list-container.view-list .post-card-title {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}

#post-list-container.view-list .post-card-excerpt {
    -webkit-line-clamp: 2;
    margin-bottom: 0.625rem;
}