/* =========================================================================
   Инфоцентр — витрина и страница статьи (тема Air, шаг 2).

   Значения перенесены ДОСЛОВНО из утверждённого демо-макета
   (docs/superpowers/specs/2026-08-31-infocenter-demo.html): размеры шрифтов,
   веса, трекинг, отступы, пропорции обложек, тень и сдвиг при наведении.
   Цвета берутся токенами из 00-tokens.css — своих не вводим.

   НЕ ТРОГАТЬ БЕЗ ПОНИМАНИЯ:

   1. Пагинация здесь НЕ описана: используется общий компонент .letters-pagination
      из 03-pager.css, он подключён в AirBlogAsset. Дублировать его стили нельзя —
      разъедутся с остальными экранами.

   2. ДВЕ РАЗНЫЕ ПРОПОРЦИИ ОБЛОЖКИ, и это не ошибка. Владелец загружает ОДИН файл
      1600 x 1000 (16:10), а показывается он по-разному:
        - в карточке витрины — 16:10, то есть целиком;
        - на странице статьи — в панорамном окне 21:8, браузер обрезает верх и низ.
      Исходный файл в базе не меняется: обрезка чисто визуальная, через object-fit.
      Отсюда практическое следствие для владельца: важный объект на обложке лучше
      располагать ближе к центру кадра.

   3. object-fit: cover ОБЯЗАТЕЛЕН на обеих обложках. Без него реальная картинка
      растянется под окно и исказит пропорции — в макете на этом месте были
      SVG-заглушки, у которых такой проблемы нет.

   4. Планшетный диапазон 768-1180 px задан требованием спеки §10 (две карточки):
      в макете этот случай не показан, три карточки на планшете дают нечитаемо
      мелкий заголовок.
   ========================================================================= */

/* ------------------------------------------------------- каркас страницы */

/* Контейнер раздела — как .letters-shell и .balance-shell у соседних экранов.
   ИМЕННО ОН задаёт ширину контента и отступы; без него страница прилипает
   к левому краю окна. Значения повторяют .letters-shell: витрина такая же широкая.

   Крошки отдельно НЕ описываем — используется общий .page-breadcrumb
   из 03-shared.css, тот же, что на «Письмах», «Транзакциях» и в профиле. */
.blog-shell {
    animation: scFade 0.4s ease;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 22px 80px;
    color: var(--text);
}

/* ------------------------------------------------------------------ витрина */

/* Заголовок витрины скрыт ВИЗУАЛЬНО, но остаётся в разметке и в доступности.
   Приём стандартный: элемент вынесен за пределы экрана, а не выключен display:none —
   при display:none поисковик и экранный диктор его игнорируют, и h1 теряет смысл.
   Причина решения — в комментарии views/air/blog/index.php. */
.blog-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.blog-grid {
    display: grid;
    /* 3 в ряд — принятый владельцем вариант (§2 спеки). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 32px;
}


/* Карточка — ССЫЛКА целиком (как в макете), поэтому снимаем подчёркивание
   и наследуем цвет текста: иначе весь блок станет синим и подчёркнутым. */
.blog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(28, 58, 110, 0.12);
}

.blog-card__cover {
    display: block;
    width: 100%;
    /* 16:10 — родная пропорция файла 1600 x 1000, картинка видна целиком. */
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--subtle);
}

.blog-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 16px 17px 18px;
}

/* Порядок в карточке макетный: дата идёт ПЕРЕД заголовком. */
.blog-card__date {
    color: var(--subtle);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.blog-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--text);
}

.blog-card:hover .blog-card__title {
    color: var(--blue);
}

.blog-card__excerpt {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

/* Явный призыв открыть материал. margin-top:auto прижимает его к низу карточки,
   поэтому «Читать →» стоит на одной линии во всех карточках ряда независимо
   от длины описания. */
.blog-card__more {
    margin-top: auto;
    padding-top: 4px;
    color: var(--blue);
    font-size: 13.5px;
    font-weight: 700;
}

.blog-empty {
    max-width: 640px;
    margin: 40px auto;
    padding: 32px;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
}

/* ------------------------------------------------------------ страница статьи */

/* Статья — белая карточка, как остальные экраны сайта.
   overflow:hidden обязателен: он обрезает верхние углы обложки по радиусу карточки,
   иначе прямоугольная картинка вылезает за скругление. */
.blog-article {
    max-width: 860px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Обложка — ШАПКА карточки: во всю ширину, без боковых отступов и без своего
   скругления (его даёт overflow родителя). */
.blog-article__cover {
    display: block;
    width: 100%;
    /* 21:8 — панорамное окно (см. пункт 2 шапки). Файл тот же 16:10,
       верх и низ обрезаются визуально. */
    aspect-ratio: 21 / 8;
    object-fit: cover;
    background: var(--subtle);
}

/* Внутренние отступы карточки — только у контента, не у обложки. */
.blog-article__inner {
    padding: 32px 40px 40px;
}

.blog-article__title {
    margin: 0 0 12px;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.022em;
    text-wrap: balance;
    color: var(--text);
}

.blog-article__date {
    display: block;
    margin: 0 0 24px;
    color: var(--subtle);
    font-size: 13.5px;
    font-weight: 600;
}

/* Тело статьи. Селекторы перечислены поимённо и совпадают со списком разрешённых
   тегов в ArticleBodyProcessor: другой разметки в body быть не может. */
.blog-article__body {
    color: var(--text);
}

.blog-article__body p {
    margin: 0 0 17px;
    font-size: 16.5px;
    line-height: 1.68;
}

.blog-article__body h2 {
    margin: 30px 0 12px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

/* h3 в макете не показан: берём ступень ниже h2, сохраняя его характер. */
.blog-article__body h3 {
    margin: 26px 0 10px;
    font-size: 18.5px;
    font-weight: 800;
    letter-spacing: -0.012em;
}

.blog-article__body ul,
.blog-article__body ol {
    margin: 0 0 17px;
    padding-left: 24px;
    font-size: 16.5px;
    line-height: 1.68;
}

.blog-article__body li {
    margin-bottom: 6px;
}

.blog-article__body a {
    color: var(--blue);
}

.blog-article__body blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    border-left: 3px solid var(--blue-line);
    background: var(--blue-soft);
    border-radius: var(--radius-control);
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.68;
}

.blog-article__body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px auto;
    border-radius: var(--radius-control);
}

/* ------------------------------------------------------------------ CTA */

/* Блок показывается только при article.show_cta — чекбокс в админке им управляет.
   Раскладка макетная: левая группа «заголовок + пояснение», кнопка справа.
   Группа обязательна как отдельный элемент — см. комментарий в view.php. */
.blog-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 34px;
    margin-bottom: 0;
    padding: 24px 26px;
    border: 1px solid var(--blue-line);
    border-radius: var(--radius-card);
    background: var(--blue-soft);
}

.blog-cta__text-group {
    /* Не даём группе растянуться на всю строку: кнопка должна остаться справа,
       а на узком экране обе части переносятся (flex-wrap выше). */
    flex: 1 1 320px;
}

.blog-cta__title {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}

.blog-cta__text {
    color: var(--muted);
    font-size: 14.5px;
}

/* Кнопка CTA описана ЗДЕСЬ, и это не дублирование.
   В теме Air НЕТ глобального класса кнопки: .btn-navy определён только внутри
   .air-send-page (screens/send.css), то есть на страницу блога не распространяется.
   Класс .btn-primary из демо-макета — принадлежность самого макета, в проекте его нет.
   Поставь мы любой из них — кнопка осталась бы без стилей.
   Визуал перенесён из макета (.btn-primary), радиус — токеном темы. */
.blog-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--blue);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(44, 107, 237, 0.28);
    transition: background 0.15s ease;
}

.blog-cta__button:hover,
.blog-cta__button:focus {
    background: var(--blue-hover);
    color: #fff;
    text-decoration: none;
}

/* --------------------------------------------------------- предпросмотр */

/* Полоса видна только владельцу на странице предпросмотра — чтобы её нельзя было
   спутать с опубликованной статьёй. */
.blog-preview-bar {
    margin: 0 0 24px;
    padding: 12px 20px;
    text-align: center;
    background: var(--amber);
    border-radius: var(--radius-control);
    color: var(--text);
    font-size: 15px;
}

/* ------------------------------------------------------------------ адаптив */

/* Планшет: две карточки (пункт 4 шапки). */
@media (max-width: 1180px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .blog-grid {
        /* 14px — расстояние между карточками из мобильного макета (.phone-body). */
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    /* Заголовок СТАТЬИ на телефоне макетом не задан — мобильной страницы статьи
       в макете нет. 26px выбраны как ступень между витриной и десктопными 36px:
       крупнее заголовка раздела, но не разрывает узкую колонку. */
    .blog-article__title {
        font-size: 26px;
        line-height: 1.2;
    }

    .blog-article__body p,
    .blog-article__body ul,
    .blog-article__body ol,
    .blog-article__body blockquote {
        font-size: 16px;
    }

    /* Обложка статьи: на телефоне панорама 21:8 выродилась бы в узкую полоску
       высотой около 140 px — возвращаем родные 16:10, картинка видна целиком. */
    .blog-article__cover {
        aspect-ratio: 16 / 10;
    }

    /* На узком экране боковые отступы карточки меньше — иначе текст остаётся
       в слишком узкой колонке. */
    .blog-article__inner {
        padding: 20px 18px 24px;
    }

    /* CTA складывается вертикально: кнопка уходит под текст и занимает всю ширину,
       иначе на узком экране она прижимается к краю и попадает под палец неудобно. */
    .blog-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        padding: 20px;
    }

    .blog-cta__text-group {
        flex: 0 1 auto;
    }

    /* На телефоне кнопка во всю ширину: так по ней удобнее попасть пальцем. */
    .blog-cta__button {
        width: 100%;
    }
}