/* ═══════════════════════════════════════════════════════════════════════════
   content.css — Стили для контента статей (ps_content.py)
   
   Перенесено из inline CSS ps_content.py:85-188
   [РЕАЛИЗОВАНО В: task-2026-06-08-006]
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Базовые стили Markdown (.ps-md-content) ──────────────────────────── */
/* [ОБНОВЛЕНО В: task-2026-06-16-visual-refactor-content] — хардкод-цвета заменены на CSS-переменные */
.ps-md-content h1 { font-size: 1.5rem; font-weight: 700; margin-top: 1rem; margin-bottom: 0.5rem; }
.ps-md-content h2 { font-size: 1.25rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.5rem; }
.ps-md-content h3 { font-size: 1.1rem; font-weight: 600; margin-top: 0.5rem; margin-bottom: 0.25rem; }
.ps-md-content p { margin-bottom: 0.5rem; line-height: 1.6; }
.ps-md-content code { background: var(--bg-light); padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-size: 0.875rem; }
.ps-md-content pre { background: var(--bg-light); padding: 0.75rem; border-radius: 0.375rem; overflow-x: auto; margin-bottom: 0.75rem; }
.ps-md-content ul, .ps-md-content ol { padding-left: 1.5rem; margin-bottom: 0.5rem; }
.ps-md-content blockquote { border-left: 3px solid var(--border-light); padding-left: 0.75rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.ps-md-content img { max-width: 100%; max-height: 70vh; width: auto; height: auto; border-radius: 0.375rem; display: block; margin: 0.5rem auto; }

/* ── Тёмная тема для Markdown-контента ──────────────────────────────── */
/* Исправление P7: body.dark → body.body--dark (Quasar Dark Plugin) */
body.body--dark .ps-md-content code,
body.body--dark .ps-md-content pre {
    background: #2d2d2d; /* оставлено: нет общей переменной для code/pre в тёмной теме */
}
body.body--dark .ps-md-content blockquote {
    border-left-color: var(--border-light);
    color: var(--text-secondary);
}

/* ── Полупрозрачный фон для drawer на странице /content ──────────────── */
.q-drawer--left {
    background: transparent !important;
}

/* ── Кнопка "Участвовать" для лабораторных работ (Boosty) ────────────── */
.ps-lab-boosty-btn {
    margin-top: 0.5rem;
    /* width: 100% убран — конфликтовал с flex justify-center враппера */
    /* и nicegui-column align-items: flex-start, ломая центрирование */
    max-width: 100%;
    overflow: hidden;        /* [task-2026-06-13-mobile-card-fix] обрезаем переполнение */
    text-overflow: ellipsis; /* [task-2026-06-13-mobile-card-fix] многоточие при обрезке */
    white-space: nowrap;     /* [task-2026-06-13-mobile-card-fix] запрет переноса */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Фаза 3: Responsive сетка + визуальные улучшения
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Сетка статей (CSS Grid вместо flex-wrap) ────────────────────────── */
.ps-article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}
.ps-article-card {
    justify-self: center;
    min-width: 0;  /* [task-2026-06-13-mobile-card-fix] предотвращает переполнение flex/grid-детей */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    max-width: 100%;
    height: 100%;
}

/* [task-2026-06-13-mobile-card-fix] w-full для десктопа (≥541px) */
/* Компенсирует удаление w-full из Python-классов карточки */
@media (min-width: 541px) {
    .ps-article-card {
        width: 100%;
    }
}

/* ── Сетка авторов (CSS Grid) ───────────────────────────────────────── */
/* [РЕАЛИЗОВАНО В: task-2026-06-12-018] */
.ps-author-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    width: 100%;
    justify-content: center;
}
.ps-author-card {
    max-width: 350px;
    justify-self: center;
}
.ps-article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(var(--green-primary-rgb), 0.15);
}

/* ── Обложки статей: contain для полного отображения без обрезки ── */
/* [ОБНОВЛЕНО В: task-2026-06-17-009] — cover → contain + object-position: center */
.ps-article-card .q-img__image {
    object-fit: contain !important;
    object-position: center;
}

/* ── Контейнер тегов в карточках: защита от overflow ───────────── */
/* [ДОБАВЛЕНО В: task-2026-06-16-visual-refactor-content] */
.ps-article-card .gap-1.flex-wrap {
    max-width: 100%;
    overflow: hidden;
}

/* ── CSS-переменные для контента ─────────────────────────────────────── */
:root {
    --content-font-family: inherit;
    --content-line-height: 1.6;
    --content-max-width: 768px;
}

/* ── Унификация чипов (chip) — единый визуальный язык ──────────── */
/* [ДОБАВЛЕНО В: task-2026-06-16-visual-refactor-content] */
.ps-chip {
    border-radius: 999px;
    font-size: var(--text-caption);
    padding: 2px 10px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
}
.ps-chip--solid {
    background: var(--ps-bg-subtle-alt, rgba(0,0,0,0.05));
    color: var(--text-primary);
    border: 1px solid transparent;
}
.ps-chip--solid-cat {
    --chip-cat-bg: var(--ps-bg-subtle, rgba(255,255,255,0.05));
    background: var(--chip-cat-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
/* Цветовые варианты категорий (bg-X-1 + text-X-8) */
.ps-chip--solid-cat.bg-blue-1 { --chip-cat-bg: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
.ps-chip--solid-cat.bg-green-1 { --chip-cat-bg: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
.ps-chip--solid-cat.bg-orange-1 { --chip-cat-bg: #fff3e0; color: #e65100; border-color: #ffe0b2; }
.ps-chip--solid-cat.bg-purple-1 { --chip-cat-bg: #f3e5f5; color: #6a1b9a; border-color: #e1bee7; }
.ps-chip--solid-cat.bg-grey-1 { --chip-cat-bg: #f5f5f5; color: #424242; border-color: #e0e0e0; }
/* Тёмная тема */
body.body--dark .ps-chip--solid-cat.bg-blue-1 { --chip-cat-bg: rgba(21,101,192,0.2); color: #90caf9; border-color: rgba(21,101,192,0.3); }
body.body--dark .ps-chip--solid-cat.bg-green-1 { --chip-cat-bg: rgba(46,125,50,0.2); color: #a5d6a7; border-color: rgba(46,125,50,0.3); }
body.body--dark .ps-chip--solid-cat.bg-orange-1 { --chip-cat-bg: rgba(230,81,0,0.2); color: #ffcc80; border-color: rgba(230,81,0,0.3); }
body.body--dark .ps-chip--solid-cat.bg-purple-1 { --chip-cat-bg: rgba(106,27,154,0.2); color: #ce93d8; border-color: rgba(106,27,154,0.3); }
body.body--dark .ps-chip--solid-cat.bg-grey-1 { --chip-cat-bg: rgba(255,255,255,0.08); color: #bdbdbd; border-color: rgba(255,255,255,0.1); }
/* Защита размера эмодзи сложности от Quasar-каскада */
.ps-difficulty-label { font-size: var(--text-caption); }
.ps-chip--outline {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
}

/* ── Переопределение Quasar inline font-size:8px для чипов в карточках ── */
/* Quasar size=xs задаёт inline style="font-size: 8px", который имеет приоритет
   над CSS-классом .ps-chip. !important необходим для переопределения inline-стиля. */
/* [ДОБАВЛЕНО В: task-2026-06-17-010] */
.ps-article-card .q-chip {
    font-size: var(--text-caption) !important;
}
.ps-article-card .q-chip .q-chip__content {
    font-size: var(--text-caption) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive: @media блоки для content.css
   [РЕАЛИЗОВАНО В: task-2026-06-10-006]
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Планшет (max-width: 768px) — 2 фиксированные колонки ─────────── */
/* [ОБНОВЛЕНО В: task-2026-06-13-mobile-card-fix] */
/* Переход с auto-fit на repeat(2, 1fr) для стабильной 2-колоночной раскладки */
@media (max-width: 768px) {
    .ps-article-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    /* Сетка авторов: responsive */
    .ps-author-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 0.75rem;
    }
}

/* ── Мобильные (max-width: 540px) — 1 колонка ──────────────────── */
/* [РЕАЛИЗОВАНО В: task-2026-06-13-mobile-card-fix] */
/* Сдвиг брейкпоинта с 480px на 540px для безопасной ширины карточек */
@media (max-width: 540px) {
    .ps-article-grid,
    .ps-author-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE VISUAL POLISH — Coarse Pointer + Touch Improvements
   [РЕАЛИЗОВАНО В: task-2026-06-10-007]
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Coarse pointer: отключение hover + touch feedback ──────────────── */
/* [ОБНОВЛЕНО В: task-2026-06-12-018] */
@media (pointer: coarse) {
    .ps-article-card:hover,
    .ps-author-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .ps-article-card:active,
    .ps-author-card:active {
        transform: scale(0.97) !important;
        transition: transform 0.1s ease !important;
    }
}