/*
 * Экономика creators: центр (`ec`) и страница темы (`ec--article`).
 * Раздел текстовый и денежный, поэтому ритм держат числа: крупная сумма
 * в карточке потока, три-четыре факта над разбором темы.
 * Цвет только смысловой: зелёный — деньги к автору, коралловый — от автора,
 * фиолетовый — правила Epic и наше мнение, серый — то, чего у портала нет.
 */

.ec {
    padding: 4px 0 var(--section-gap);
}

/* Шапка раздела */

.ec__head {
    max-width: 74ch;
    margin-bottom: 28px;
}

.ec__badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: rgba(104, 80, 245, .12);
    color: var(--purple);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.ec__head h1 {
    margin-top: 14px;
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -.02em;
}

.ec__lead {
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: var(--fs-body);
}

.ec__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.ec .section__head--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.ec__section-lead {
    max-width: 74ch;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* Метки: кто это сказал и в какую сторону идут деньги */

.ec-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.ec-tag--in {
    background: rgba(47, 177, 112, .12);
    color: var(--success);
}

.ec-tag--out {
    background: rgba(249, 97, 96, .12);
    color: var(--danger);
}

.ec-tag--portal,
.ec-tag--rule {
    background: rgba(104, 80, 245, .12);
    color: var(--purple);
}

/* Потоки денег */

.ec__streams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gap-sm);
}

.ec__stream {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: 100%;
    border-top: 3px solid var(--success);
}

.ec__stream--out {
    border-top-color: var(--danger);
}

.ec__stream-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--text-primary);
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.25;
}

.ec__stream-value {
    color: var(--success);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}

.ec__stream--out .ec__stream-value {
    color: var(--danger);
}

.ec__stream-note {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    line-height: 1.45;
}

.ec__stream-text {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.ec__streams-note {
    max-width: 74ch;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Карточки тем */

.ec__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap-sm);
}

.ec__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.ec__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ec__card-head .icon {
    flex: none;
    margin-top: 3px;
    color: var(--text-muted);
    transition: color var(--transition), transform var(--transition);
}

.ec__card:hover .icon {
    color: var(--primary);
    transform: translateX(2px);
}

.ec__card-title {
    color: var(--text-primary);
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.25;
}

.ec__card-text {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.ec__card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.ec__card-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec__card-fact-value {
    color: var(--primary);
    font-size: var(--fs-body);
    font-weight: 800;
}

.ec__card-fact-label {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

/* Чего здесь нет */

.ec__absent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--gap-sm);
}

.ec__absent-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ec__absent-icon {
    flex: none;
    margin-top: 2px;
    color: var(--text-muted);
}

.ec__absent-title {
    font-size: var(--fs-body);
    font-weight: 800;
}

.ec__absent-text {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.ec__scale {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: var(--gap-sm);
    background: var(--bg-soft);
    border-color: transparent;
    box-shadow: none;
}

.ec__scale-text {
    max-width: 74ch;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

/* Правила Epic */

.ec__fair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--gap-sm);
    list-style: none;
}

.ec__fair-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ec__fair-num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-xs);
    background: rgba(104, 80, 245, .12);
    color: var(--purple);
    font-size: var(--fs-sm);
    font-weight: 800;
}

.ec__fair-title {
    font-size: var(--fs-body);
    font-weight: 800;
}

.ec__fair-text {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

/* Оговорка про налоги */

.ec__notice {
    background: var(--bg-soft);
    border-color: transparent;
    box-shadow: none;
}

.ec__notice--top {
    margin-bottom: 4px;
}

.ec__notice-title {
    font-size: var(--fs-h3);
    font-weight: 800;
}

.ec__notice-text {
    max-width: 78ch;
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.ec__notice .btn {
    margin-top: 16px;
}

/* Дальше по порядку */

.ec__next {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gap-sm);
}

.ec__next-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.ec__next-title {
    color: var(--text-primary);
    font-size: var(--fs-h3);
    font-weight: 800;
}

.ec__next-text {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.ec__next-card .icon {
    margin-top: auto;
    color: var(--primary);
}

/* Источники */

.ec__sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--gap-sm);
}

.ec__source-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: var(--fs-body);
    font-weight: 700;
}

.ec__source-text {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.ec__sources-note {
    max-width: 78ch;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
}

/* Страница темы */

.ec--article .ec__head {
    max-width: 78ch;
}

.ec__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gap-sm);
}

.ec__fact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ec__fact-label {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ec__fact-value {
    color: var(--text-primary);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.ec__fact-note {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

/*
 * Две колонки, а не три: разбор — сплошной текст, и в узкой колонке блок
 * вытягивается в ленту на два экрана. 440px подобраны так, чтобы третья
 * колонка не помещалась в контент 1320px.
 */
.ec__blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: var(--gap-sm);
    align-items: start;
}

.ec__block-title {
    font-size: var(--fs-h3);
    font-weight: 800;
}

.ec__block-text {
    max-width: 74ch;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

/* Что можно и чего нельзя */

.ec__rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--gap-sm);
}

.ec__rule {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-left: 3px solid var(--danger);
}

.ec__rule--yes {
    border-left-color: var(--success);
}

.ec__rule-icon {
    flex: none;
    margin-top: 2px;
    color: var(--danger);
}

.ec__rule--yes .ec__rule-icon {
    color: var(--success);
}

.ec__rule-title {
    font-size: var(--fs-body);
    font-weight: 800;
}

.ec__rule-text {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

/* Мнение портала */

.ec__portal {
    background: rgba(104, 80, 245, .06);
    border-color: rgba(104, 80, 245, .16);
    box-shadow: none;
}

.ec__portal-list {
    margin-top: 14px;
    list-style: none;
}

.ec__portal-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

/* Строку держим узкой, а разделитель — во всю карточку. */
.ec__portal-list li > span {
    max-width: 82ch;
}

.ec__portal-list li + li {
    border-top: 1px solid rgba(104, 80, 245, .12);
}

.ec__portal-list .icon {
    flex: none;
    margin-top: 3px;
    color: var(--purple);
}

/* Ссылки на документацию */

.ec__links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gap-sm);
}

.ec__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 100%;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.ec__link .icon {
    flex: none;
    color: var(--text-muted);
    transition: color var(--transition), transform var(--transition);
}

.ec__link:hover .icon {
    color: var(--primary);
    transform: translateX(2px);
}

@media (max-width: 720px) {
    .ec__stream-value {
        font-size: 26px;
    }

    .ec__fact-value {
        font-size: 23px;
    }

    .ec__blocks,
    .ec__rules,
    .ec__fair,
    .ec__absent,
    .ec__sources {
        grid-template-columns: 1fr;
    }
}