/* ==========================================================================
   Страница «Новость карточка» — текст публикации и колонка «Другие новости».
   Карточки в колонке — общий news-card.css, кнопка — общий .btn.

   Figma: 144:5391  — десктоп 1440 × 2137
          144:5693  — шапка статьи 872 × 695
          144:5717  — текст статьи 872 × 618
          144:5597  — колонка «Другие новости» 484 × 1529
          279:12161 — мобильный 375 × 2886

   WP: template-parts/blocks/article*.php
   ========================================================================== */

/* Колонка «Другие новости» залита серым и уходит за правый край контейнера,
   поэтому сетка построена от края экрана, а не внутри .container:
   поле | статья 872 | 24 | колонка 424 | поле */
.article {
    display: grid;
    grid-template-columns:
        calc(var(--container-offset) + var(--container-pad))
        minmax(0, 872fr)
        24px
        minmax(0, 424fr)
        calc(var(--container-offset) + var(--container-pad));
}

/* Серая заливка колонки — отдельный элемент сетки, а не фон самой колонки.
   Она должна доходить до края экрана, а карточки внутри — заканчиваться
   на правой границе контейнера. Задать это полем внутри колонки нельзя:
   в --container-offset проценты считаются от ширины блока, к которому
   относится свойство, и внутри колонки они дали бы её ширину, а не ширину
   экрана — на мониторе шире 1440px карточки вылезали за контейнер */
.article::before {
    content: "";
    grid-area: 1 / 4 / 2 / 6;
    background-color: var(--c-grey-200);
}

.article__body {
    grid-row: 1;
    grid-column: 2;
    /* 24px — отбивка от шапки сайта: крошки в макете стоят на 128px */
    padding: 24px 0 96px;
}

/* --------------------------------------------------------------------------
   Шапка статьи: заголовок, рубрика с датой и «Поделиться»
   -------------------------------------------------------------------------- */

.article__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

.article__title {
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    /* на очень узких экранах «Поделиться» переносится на свою строку */
    gap: 8px 24px;
}

.article__meta-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.article__date {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    color: var(--c-grey-500);
}

/* --------------------------------------------------------------------------
   Фотография
   Кадр и кадрирование те же, что у карточки новости (news-card.css):
   в макете это один и тот же фрейм «3:2»
   -------------------------------------------------------------------------- */

.article__media {
    position: relative;
    aspect-ratio: 736 / 507;
    overflow: hidden;
    margin-top: 8px;
}

.article__media img {
    position: absolute;
    top: 0;
    left: -30.98%;
    width: 130.94%;
    height: 110.34%;
    max-width: none;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Текст статьи
   -------------------------------------------------------------------------- */

.article__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 56px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-800);
}

.article__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.article__subtitle {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
}

/* В макете между абзацами внутри одного куска оставлена пустая строка,
   а список идёт сразу за вводной строкой */
.article__block p + p,
.article__block ul + p {
    margin-top: 1.4em;
}

.article__list {
    /* отступ до маркера из макета */
    padding-left: 20px;
    list-style: disc;
}

.article__list b {
    font-weight: 700;
}

/* Выделенный абзац с красной линейкой слева */
.article__note {
    padding-left: 16px;
    border-left: 2px solid var(--c-red-400);
}

.article__back {
    align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Колонка «Другие новости»
   Серая заливка тянется от шапки сайта до подвала, поэтому колонка
   растягивается по высоте статьи
   -------------------------------------------------------------------------- */

.article__aside {
    grid-area: 1 / 4 / 2 / 5;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    /* 24px слева — отбивка карточек от края серой заливки */
    padding: 64px 0 0 24px;
}

/* заголовок колонки есть только в мобильном макете */
.article__aside-head {
    display: none;
}

.article__aside-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* --------------------------------------------------------------------------
   Планшет
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .article__title {
        font-size: 28px;
    }
}

/* Ниже 1024px колонка уже не помещается рядом со статьёй и уходит вниз,
   как в мобильном макете */
@media (max-width: 1023px) {
    .article {
        display: block;
    }

    .article::before {
        display: none;
    }

    .article__body {
        max-width: var(--container-width);
        margin: 0 auto;
        padding: 16px var(--container-pad) 56px;
    }

    .article__aside {
        max-width: var(--container-width);
        margin: 0 auto;
        gap: 16px;
        padding: 0 var(--container-pad) 56px;
    }

    /* в мобильном макете отбивка от фотографии до текста меньше */
    .article__text {
        margin-top: 24px;
    }

    .article__aside-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .article__aside-title {
        font-size: 20px;
        font-weight: 700;
        line-height: normal;
        color: var(--c-grey-800);
    }

    /* карточки встают в ленту, которая листается пальцем */
    .article__aside-list {
        flex-direction: row;
        gap: 7px;
        margin-right: calc(-1 * var(--container-pad));
        padding-right: var(--container-pad);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .article__aside-list::-webkit-scrollbar {
        display: none;
    }

    .article__aside-list .news-card {
        flex: 0 0 168px;
    }

    /* кнопка есть только в десктопном макете */
    .article__aside-btn {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Мобильная версия — 375 × 2886
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .article__head {
        gap: 24px;
    }

    .article__title {
        font-size: 28px;
        line-height: normal;
    }

    .article__meta-group {
        gap: 8px;
    }

    .article__meta .tag {
        height: 20px;
        padding: 0 4px;
        font-size: 12px;
        letter-spacing: 0.24px;
    }

    .article__date {
        font-size: 12px;
    }

    /* «Поделиться» на шаг мельче */
    .article__meta .share {
        gap: 4px;
        font-size: 12px;
    }

    .article__meta .share img {
        width: 16px;
        height: 16px;
    }

    .article__subtitle {
        font-size: 20px;
    }
}