/* ═══════════════════════════════════════════
   Skidki Theme — Main Page
   Чистый CSS, BEM-нейминг.
   Адаптив: >= 768px (wide), < 768px (narrow)
   ═══════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    min-height: 100%;
}

body.page {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", sans-serif,
        "Noto Color Emoji";
    background: #e3e3e3;
    color: #000000;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* ═══════════════════════════════════════════
   Page header — логотип + бейдж «При участии»
   ═══════════════════════════════════════════ */

.page-header {
    width: 100%;
    max-width: 853px;
    height: 112px;
    padding: 0 36px 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background-image: url('../img/header-back.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.page-header__logo {
    display: inline-flex;
    text-decoration: none;
    flex: 0 0 auto;
}

.page-header__logo-img {
    display: block;
    width: auto;
    height: 112px;
    max-width: 100%;
}

.page-header__expert {
    flex: 0 0 auto;
    margin-top: -3px;
    margin-right: 30px;
}

.page-header__expert-img {
    display: block;
    width: auto;
    height: 41px;
    max-width: 100%;
}

/* ═══════════════════════════════════════════
   Page divider — пунктирная линия с ножницами
   ═══════════════════════════════════════════ */

.page-divider {
    position: relative;
    width: 100%;
    height: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Выравниваем ножницы по правому краю контентного блока (max-width: 853px) */
    padding-right: max(0px, calc((100% - 853px) / 2));
}

.page-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background-image: linear-gradient(
        to right,
        #9a9a9a 0,
        #9a9a9a 6px,
        transparent 6px,
        transparent 12px
    );
    background-size: 12px 2px;
    background-repeat: repeat-x;
}

.page-divider__scissors {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    /* Прячем полосу под ножницами «белым» просветом */
    background: #e3e3e3;
    padding: 0px;
    box-sizing: content-box;
}

/* ═══════════════════════════════════════════
   Main column — контент-лента
   ═══════════════════════════════════════════ */

.main-column {
    width: 100%;
    max-width: 853px;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 0 auto;
}

.main-column__title {
    padding: 0 19px;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #407417;
}

/* ═══════════════════════════════════════════
   Cat-select — выбор категорий интереса
   По макету Figma: cat-select (78:763) с состояниями
   select=off (свёрнутое) и select=on (раскрытое).
   ═══════════════════════════════════════════ */

.cat-select {
    padding: 0 19px;
    font-family: "Montserrat", sans-serif;
}

.cat-select__view--off {
    cursor: pointer;
}

.cat-select__title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: #9f9f9f;
}

.cat-select__title--lg {
    color: #000000;
}

.cat-select__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
}

.cat-select__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cat-select__close:focus-visible {
    outline: 2px solid #396092;
    outline-offset: 2px;
}

.cat-select__list {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 0 0;
}

.cat-select__list--off {
    gap: 7px 12px;
}

.cat-select__list--on {
    gap: 15px 12px;
}

.cat-select__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 99px;
    background: transparent;
    border: 1px solid #8b8b8b;
    color: #595959;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    text-align: center;
}

.cat-select__chip--toggle {
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.cat-select__chip--toggle:focus-visible {
    outline: 2px solid #396092;
    outline-offset: 2px;
}

.cat-select__chip--selected {
    background: #396092;
    border-color: #396092;
    color: #ffffff;
}

.cat-select__chip[hidden] {
    display: none;
}

.main-column__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-column__empty {
    text-align: center;
    color: #9f9f9f;
    padding: 40px 0;
}

/* ───── Loader / Spinner ───── */

.main-column__loader {
    display: flex;
    justify-content: center;
    padding: 24px 0 40px;
}

.main-column__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #c8c8c8;
    border-top-color: #8a38f5;
    border-radius: 50%;
    animation: skidki-spin 0.7s linear infinite;
}

.main-column__loader--hidden {
    display: none;
}

@keyframes skidki-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════
   Page footer — копирайт
   ═══════════════════════════════════════════ */

.page-footer {
    width: 100%;
    max-width: 853px;
    padding: 20px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.page-footer__copyright {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
    text-align: center;
}

.page-footer__brand {
    color: #3a6092;
}

/* ═══════════════════════════════════════════
   PostCard — BEM-блок
   По макету Figma: node 13:162 (size=narrow / size=wide)
   ═══════════════════════════════════════════ */

.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 5px 19px 19px;
    background: #ffffff;
    font-family: "Montserrat", sans-serif;
    color: #000000;
}

.post-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 25px;
}

.post-card__date {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: #9f9f9f;
}

.post-card__category {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: #3a6092;
    text-align: right;
}

.post-card__content {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.post-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 376 / 339;
    overflow: hidden;
    background: #f3f3f3;
}

.post-card__image-picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card__text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
    word-wrap: break-word;
}

.post-card__text p {
    margin: 0 0 1em;
}

.post-card__text p:last-child {
    margin-bottom: 0;
}

/* ── Эмодзи, подменённые Twemoji → Noto SVG ── */

img.emoji {
    display: inline-block;
    height: 1.1em;
    width: 1.1em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.2em;
    /* Не увеличиваем случайно через ретушь изображений в посте */
    object-fit: contain;
}

/* Fallback: если SVG не нашёлся, рисуем символ шрифтом Noto Color Emoji */
.emoji-fallback {
    font-family: "Noto Color Emoji", sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.post-card__text a,
.post-card__link {
    color: #509430;
    font-weight: 500;
    text-decoration: none;
}

.post-card__text a:hover,
.post-card__link:hover {
    text-decoration: underline;
}

/* ── Кнопка «Ещё» (скрытый блок) ── */

.post-card__text-hidden {
    margin-top: 1em;
}

.post-card__more {
    align-self: flex-start;
    margin-top: 0px;
    padding: 0;
    background: none;
    border: none;
    color: #378C10;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.post-card__more:hover {
    text-decoration: underline;
}

.post-card__more--active {
    color: #9f9f9f;
}

/* ── Блок «стоимость» (после [cost]) ── */

.post-card__cost {
    margin-top: 14px;
    padding: 10px 14px;
    background: #f3fbee;
    border-left: 3px solid #509430;
    color: #2f5c1d;
    font-size: 15px;
    font-weight: 500;
}

/* ── Модификатор: неактуальный пост ── */

.post-card--expired .post-card__image-picture,
.post-card--expired .post-card__text {
    opacity: 0.55;
}

/* ═══════════════════════════════════════════
   Wide screen (>= 768px)
   ═══════════════════════════════════════════ */

@media (min-width: 768px) {
    .page-header {
        padding: 0 36px 0 10px;
    }

    .main-column {
        padding: 20px 0;
        gap: 24px;
    }

    .main-column__list {
        gap: 24px;
    }

    .main-column__title {
        padding: 0 19px;
    }

    .cat-select {
        padding: 0 19px;
    }

    .post-card__content {
        flex-direction: row;
        gap: 34px;
    }

    .post-card__text {
        flex: 1 1 0;
        min-width: 0;
    }

    .post-card__image {
        flex: 0 1 444px;
        max-width: 444px;
        min-width: 0;
        aspect-ratio: auto;
        height: auto;
        align-self: flex-start;
        background: transparent;
        overflow: visible;
    }

    .post-card__image-picture {
        width: auto;
        height: auto;
        max-width: 100%;
        object-fit: contain;
    }
}

/* ═══════════════════════════════════════════
   Narrow screen (< 768px)
   ═══════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .page-header {
        height: 112px;
        padding: 0 12px;
        gap: 10px;
        background-image: none;
    }

    .page-header__logo-img {
        height: 112px;
    }

    .page-header__expert-img {
        height: 34px;
    }

    .main-column {
        padding: 14px 0;
        gap: 14px;
    }

    .main-column__list {
        gap: 14px;
    }

    .main-column__title {
        padding: 0 12px;
        font-size: 15px;
    }

    .cat-select {
        padding: 0 12px;
    }

    .page-footer__copyright {
        font-size: 13px;
    }
}