/* Страница новости.

   Подключается только здесь, через @push('css'), вместе с prose.css —
   текст статьи приходит из того же редактора, что и описание сервера,
   и оформляется общими правилами `.wprose`.

   Композиция: обложка во всю ширину, поверх неё крошки, дата и
   заголовок; ниже узкая колонка чтения; в подвале «поделиться» и
   возврат к ленте; в самом низу три соседние новости карточками с
   главной.

   ПРО ЕДИНИЦЫ: у `html` в теме плавающий размер шрифта (75% до 540 px,
   87% до 840 px, дальше 100%), поэтому 1rem на телефоне — это 12 px, а
   не 16. Всё, что должно быть заданного размера, пишем в пикселях.

   Язык оформления общий с сайтом: прямые углы, бронзовый волосок,
   стальная подложка. Ничего круглого и никаких срезанных плашек.
       #907b5b  бронза
       #c6b89a  светлая бронза
       #e0d6bf  текст заголовков
       #8c949b  второстепенный текст                                  */

.art {
    --art-bronze: #907b5b;
    --art-bronze-light: #c6b89a;
    --art-ink: #e0d6bf;
    --art-muted: #8c949b;
    --art-line: rgba(144, 123, 91, .34);
    display: block;
}

/* Тема снимает подчёркивание только при наведении — в покое все ссылки
   шли подчёркнутыми. Внутри статьи подчёркивание рисуем сами там, где
   оно нужно: в тексте, правилами .wprose. */
.art a {
    text-decoration: none;
}

/* Контейнер темы задаёт только ширину, а по горизонтали его центрирует
   секция, которой у нас нет: статья лежит в `.page` напрямую. Поэтому
   центрируем сами, иначе текст прижимается к левому краю экрана. */
.art .container {
    margin-left: auto;
    margin-right: auto;
}

/* ======================= Обложка ======================= */

.art__hero {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    padding: 150px 0 42px;
    overflow: hidden;
}

/* Шапка сайта прижата к верху окна, поэтому у обложки свой отступ
   сверху — иначе крошки уезжают под меню. На узких экранах шапка ниже,
   и отступ меньше. */
@media (max-width: 1199px) {
    .art__hero {
        min-height: 320px;
        padding-top: 112px;
        padding-bottom: 30px;
    }
}

.art__cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    z-index: -2;
}

/* Затемнение: плотное снизу, где лежит текст, и прозрачное сверху,
   чтобы картинка осталась картинкой. Низ уходит в цвет страницы —
   обложка не кончается линией, а растворяется в тексте. */
.art__shade {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
    rgba(10, 12, 15, .82) 0%,
    rgba(10, 12, 15, .42) 34%,
    rgba(15, 18, 22, .78) 72%,
    rgba(21, 24, 29, .97) 93%,
    #15181d 100%);
}

/* Новость без картинки: вместо пустоты — арт раздела новостей, тот же,
   что под лентой на главной. */
.art__hero_plain {
    background-image: url(../../../../../img/bg/section-news.webp);
    background-size: cover;
    background-position: 50% 46%;
    background-repeat: no-repeat;
}

/* ---- крошки ---- */

/* Крошки, дата и заголовок стоят над той же колонкой, в которой идёт
   текст: иначе заголовок прижат к краю контейнера, а статья начинается
   на две сотни пикселей правее, и страница выглядит собранной из двух
   разных. */
.art__crumbs,
.art__meta,
.art__title {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.art__crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.art__crumb {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--art-muted);
    transition: color .25s;
}

.art__crumb:hover {
    color: var(--art-bronze-light);
}

/* Разделитель крошек — короткая косая черта, тот же знак, что между
   фактами в карточке сервера. */
.art__crumb-sep {
    display: inline-block;
    width: 1px;
    height: 10px;
    background: linear-gradient(180deg, rgba(198, 184, 154, .8), rgba(144, 123, 91, .25));
    transform: skewX(-18deg);
}

/* ---- дата и время чтения ---- */

.art__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.art__date,
.art__read {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--art-bronze-light);
}

.art__read {
    color: var(--art-muted);
}

.art__meta-sep {
    width: 4px;
    height: 4px;
    background: var(--art-bronze);
}

/* ---- заголовок ---- */

.art__title {
    margin-top: 0;
    margin-bottom: 0;
    font-family: var(--font-display);
    font-size: clamp(27px, 4.2vw, 48px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-wrap: balance;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .75), 0 0 28px rgba(0, 0, 0, .5);
}

/* ======================= Колонка чтения ======================= */

.art__main {
    position: relative;
    padding: 36px 0 54px;
}

/* Узкая мера: строка длиной в книжную, около 70 знаков. Читать текст
   во всю ширину экрана невозможно. */
.art__body,
.art__cta,
.art__foot {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.art__body {
    font-size: 16px;
    line-height: 1.75;
}

/* Первый абзац крупнее — он задаёт тон и отделяет начало от обложки. */
.art__body > p:first-child {
    font-size: 18px;
    line-height: 1.7;
    color: #c8cfd6;
}

/* ---- кнопка внешней ссылки ---- */

.art__cta {
    margin-top: 28px;
}

/* Та же бронзовая полоса, что у кнопки на первом экране: плотная
   слева, растворяется вправо. */
.art__cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 58px 0 22px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #14171a;
    background: linear-gradient(90deg,
    #efe2c4 0%, #d5c4a0 34%, #b7a27c 58%,
    rgba(144, 123, 91, .3) 86%, rgba(144, 123, 91, 0) 100%);
    transition: transform .2s, filter .2s;
}

.art__cta-btn:after {
    content: "";
    position: absolute;
    right: 26px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-top: 1px solid rgba(20, 23, 26, .8);
    border-right: 1px solid rgba(20, 23, 26, .8);
    transform: rotate(45deg);
    transition: right .25s;
}

.art__cta-btn:hover {
    transform: translateY(-1px);
    filter: brightness(106%);
}

.art__cta-btn:hover:after {
    right: 20px;
}

/* ======================= Подвал статьи ======================= */

.art__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg,
    rgba(198, 184, 154, .5) 0%, rgba(144, 123, 91, .18) 55%, rgba(144, 123, 91, 0) 100%) 1;
}

.art__share-ttl {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--art-muted);
}

.art__share {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.art__sh {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border: 0;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--art-ink);
    background: linear-gradient(180deg, rgba(49, 55, 60, .85) 0%, rgba(28, 32, 35, .85) 100%);
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .2);
    transition: box-shadow .25s, background .25s, color .25s, transform .2s;
}

.art__sh svg {
    width: 17px;
    height: 17px;
    color: var(--art-bronze-light);
    transition: color .25s;
}

.art__sh:hover {
    transform: translateY(-1px);
    color: #f0e7d4;
    background: linear-gradient(180deg, rgba(58, 65, 70, .92) 0%, rgba(34, 39, 43, .92) 100%);
    box-shadow: inset 0 0 0 1px rgba(198, 184, 154, .42);
}

.art__sh:hover svg {
    color: #efe2c4;
}

/* Подтверждение копирования: кнопка сама говорит, что сработало, —
   всплывающих сообщений на сайте нет. */
.art__sh_copy.is-done {
    color: #cfe3cf;
    box-shadow: inset 0 0 0 1px rgba(88, 160, 106, .55);
}

.art__sh_copy.is-done svg {
    color: #7fbf90;
}

/* Возврат к ленте прижат к правому краю подвала. */
.art__back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--art-bronze);
    transition: color .25s, gap .25s;
}

.art__back-ch {
    width: 6px;
    height: 6px;
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
}

.art__back:hover {
    color: var(--art-bronze-light);
    gap: 13px;
}

/* ======================= Другие новости ======================= */

.art__more {
    position: relative;
    z-index: 0;
    padding: 42px 0 60px;
    background-image: url(../../../../../img/bg/section-news.webp);
    background-size: cover;
    background-position: 50% 54%;
    background-repeat: no-repeat;
}

.art__more:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
    #15181d 0%,
    rgba(21, 24, 29, .92) 12%,
    rgba(21, 24, 29, .8) 46%,
    rgba(21, 24, 29, .95) 88%,
    #15181d 100%);
}

.art__more-ttl {
    margin: 0 0 22px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--art-ink);
}

/* Ровно три колонки: с `auto-fit` единственная оставшаяся новость
   растягивалась во всю ширину и выглядела баннером, а не карточкой. */
.art__more-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

@media (max-width: 960px) {
    .art__more-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .art__more-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Карточка новости взята с главной. Там она лежит в слайде, который
   задаёт ей положение; здесь кладём её в сетку сами. */
.art__more-list .post {
    position: relative;
}

/* ======================= Узкие экраны ======================= */

@media (max-width: 1023px) {
    .art__main {
        padding: 28px 0 44px;
    }
}

/* Ниже 768 px тема снимает боковые поля у контейнера, и текст упирался
   в края экрана. */
@media (max-width: 767px) {
    .art__hero .container,
    .art__main .container,
    .art__more .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .art__body {
        font-size: 15px;
    }

    .art__body > p:first-child {
        font-size: 16px;
    }

    .art__foot {
        gap: 12px;
    }

    /* Возврат уходит на свою строку: вместе с кнопками он не влезал и
       прижимался к ним вплотную. */
    .art__back {
        margin-left: 0;
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .art__sh,
    .art__back,
    .art__cta-btn {
        transition: none;
    }
}