/*
 * Платформа для стримеров /stream_platform (page/stream_platform.html.twig,
 * реестр AD-121).
 *
 * Надстройка над profile.css: переменные, кнопки `pf-btn` и значки — оттуда,
 * карточки «Стримов фонда» — общая карусель (catalog.css, AD-120). Здесь
 * только своё: вступление с итогами, шаги, «Куда идут донаты», вопросы,
 * баннеры и окно инструкции. Корень — `.pf.st`.
 *
 * Тема задаёт правила голым тегам (`h2 48px`, `p 20px/300`, на телефоне
 * центрированные `h2…h6`, `header { min-height }`), поэтому у каждого
 * заголовка и абзаца свой класс с явным размером и выравниванием.
 *
 * Ширины: шаги и вопросы — в колонку уже 860px; на телефоне (уже 600px)
 * кнопки вступления — во всю ширину, итоги — столбиком, баннеры листаются
 * пальцем без стрелок, и край следующего выглядывает справа.
 */

/* Roboto 900 — из roboto-heavy.css, его подключает шаблон перед этим файлом. */

.pf.st {
    padding: 0;
}

.pf.st--after {
    padding: 0 0 96px;
}

/* Карусель «Стримов фонда» тема поднимает на 35px (general.css,
   `.reached-goals-block { margin-top: -35px }`) — на главной под ней
   пустое поле, а здесь она наезжала на карточки шагов. */
.pf.st:not(.st--after) {
    padding-bottom: 72px;
}

.pf.st + .cards-slider {
    margin-top: 0;
}

.st-wrap {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 30px;
}

.st-sec {
    padding-top: 72px;
    /* Переход по «Как это работает» (#how): заголовок — ниже закреплённой
       шапки сайта (68px, на телефоне 64), а не под ней (AD-124). */
    scroll-margin-top: 32px;
}

.st-sec--first {
    padding-top: 64px;
}

/* ── Заголовки и текст ───────────────────────────────────────────────────── */

.pf .st-h2 {
    margin: 0 0 8px;
    color: var(--pf-ink);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-align: left;
}

.pf .st-h3 {
    margin: 18px 0 8px;
    color: var(--pf-ink);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.pf .st-sub {
    max-width: 620px;
    margin: 0 0 32px;
    color: var(--pf-muted);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

.pf .st-sub--tight {
    margin-bottom: 0;
}

.pf .st-text {
    margin: 0;
    color: #5A6078;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
}

.pf .st-text--lg {
    margin-bottom: 12px;
    color: var(--pf-ink);
    font-size: 16px;
    line-height: 1.6;
}

.pf .st-text--muted {
    color: #5A6078;
}

/* ── Вступление ──────────────────────────────────────────────────────────── */

.st-hero {
    position: relative;
    overflow: hidden;
    padding: 80px 30px 72px;
    background: linear-gradient(180deg, var(--pf-blush) 0%, #FFF8F6 60%, #fff 100%);
    text-align: center;
}

/* Круги — фоном самого блока, без лишней разметки: кольцо слева вверху и
   пятно справа внизу. */
.st-hero::before,
.st-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.st-hero::before {
    top: 60px;
    left: -140px;
    width: 360px;
    height: 360px;
    border: 40px solid rgba(235, 89, 64, .08);
}

.st-hero::after {
    right: -100px;
    bottom: -120px;
    width: 300px;
    height: 300px;
    background: rgba(235, 89, 64, .07);
}

.st-hero__in {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}

.st-kicker {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--pf-coral-ink);
    font-size: 13px;
    font-weight: 500;
}

.pf .st-h1 {
    margin: 20px 0 18px;
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.025em;
    text-align: center;
}

.st-h1__a,
.st-h1__b {
    display: block;
}

.st-h1__a {
    color: var(--pf-coral);
}

.st-h1__b {
    color: var(--pf-ink);
}

.pf .st-lead {
    max-width: 600px;
    margin: 0 auto;
    color: #5A6078;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    text-align: center;
}

.st-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

.pf .st-btn {
    min-height: 54px;
    padding: 0 24px;
    border-radius: 16px;
    font-size: 16px;
}

.st-stats {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    margin-top: 40px;
    padding: 18px 32px;
    border: 1px solid #F3D9D2;
    border-radius: 22px;
    background: #fff;
    text-align: left;
}

.st-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-stat__n {
    color: var(--pf-ink);
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.st-stat__n--accent {
    color: var(--pf-coral);
}

.st-stat__t {
    color: var(--pf-muted);
    font-size: 14px;
    line-height: 1.35;
}

.st-stats__sep {
    flex: none;
    width: 1px;
    height: 48px;
    background: #F3D9D2;
}

/* ── Как это работает ────────────────────────────────────────────────────── */

.st-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Пунктир между номерами шагов. */
.st-steps::before {
    content: '';
    position: absolute;
    top: 22px;
    right: 16%;
    left: 16%;
    border-top: 2px dashed #F3B7AC;
}

.st-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
}

.st-step__n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 4px solid var(--pf-paper);
    border-radius: 50%;
    background: var(--pf-coral);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.st-step__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    width: 100%;
    margin-top: 16px;
    padding: 22px;
    border: 1px solid var(--pf-line);
    border-radius: 22px;
    background: #fff;
}

.st-step__pic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 168px;
    padding: 16px;
    border-radius: 16px;
    background: var(--pf-paper);
}

.st-step__pic--blush {
    background: var(--pf-blush);
}

.st-step__pic--chat {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 16px;
}

.pf .st-step__more {
    margin-top: 14px;
}

.st-bar {
    display: block;
    height: 5px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--pf-track);
}

.st-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--pf-coral);
}

/* Шаг 1 — набросок карточки события. */
.st-mini {
    width: 210px;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 28px -18px rgba(55, 62, 91, .5);
}

.st-mini__cover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    background: linear-gradient(135deg, #F7A08F 0%, var(--pf-coral) 100%);
    color: #fff;
}

.st-mini__body {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    text-align: left;
}

.st-mini__ev,
.st-mini__goal {
    color: var(--pf-muted);
    font-size: 10px;
    font-weight: 500;
}

.st-mini__goal {
    margin-top: 4px;
    font-weight: 400;
}

.st-mini__title {
    margin-top: 2px;
    color: var(--pf-ink);
    font-size: 13px;
    font-weight: 700;
}

/* Шаг 2 — окно OBS со счётчиком. */
.st-obs {
    width: 230px;
    overflow: hidden;
    border: 1px solid var(--pf-field-line);
    border-radius: 12px;
    background: #fff;
}

.st-obs__bar {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    background: var(--pf-track);
}

.st-obs__bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #C9CCD8;
}

.st-obs__bar span {
    margin-left: 6px;
    color: var(--pf-muted);
    font-size: 10px;
    white-space: nowrap;
}

.st-obs__scene {
    padding: 14px;
    background: #2B2F45;
}

.st-counter {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    text-align: left;
}

.st-counter__t {
    color: var(--pf-muted);
    font-size: 9px;
}

.st-counter__n {
    color: var(--pf-ink);
    font-size: 16px;
    font-weight: 900;
}

.st-counter .st-bar {
    margin-top: 5px;
}

/* Шаг 3 — донаты в чате. */
.st-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #fff;
    font-size: 12px;
    text-align: left;
    animation: st-in .4s var(--pf-ease) both;
    animation-delay: var(--d, 0s);
}

.st-msg__av {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--pf-ink);
    font-size: 11px;
    font-weight: 700;
}

.st-msg__av--coral { background: #FBE2DC; }
.st-msg__av--blue  { background: #DCE9F6; }
.st-msg__av--green { background: #DAF0E5; }

.st-msg__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--pf-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-msg__sum {
    flex: none;
    color: var(--pf-money);
    font-weight: 700;
}

@keyframes st-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ── Куда идут донаты ────────────────────────────────────────────────────── */

.st-why {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: 40px;
    padding: 32px;
    border: 1px solid var(--pf-line);
    border-radius: 26px;
    background: #fff;
}

/* Скошенная рамка со скруглением нарисована в самом файле темы (белые клинья
   по краям) — своё скругление и обрезка её бы срезали. */
.st-why__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 580 / 353;
}

.pf .st-h2--why {
    margin-bottom: 14px;
    font-size: 30px;
    line-height: 1.2;
}

.st-why__help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 22px;
}

.st-why__to {
    color: var(--pf-muted);
    font-size: 14px;
    line-height: 1.4;
}

.st-why__to a {
    color: var(--pf-ink);
    font-weight: 500;
}

.st-why__to a:hover {
    color: var(--pf-money);
}

/* ── Вопросы ─────────────────────────────────────────────────────────────── */

.st-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.st-faq__item {
    display: flex;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--pf-line);
    border-radius: 22px;
    background: #fff;
}

.st-faq__mark {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--pf-blush);
    color: var(--pf-coral-ink);
    font-size: 20px;
    font-weight: 900;
}

.pf .st-h3--faq {
    margin-top: 0;
    font-size: 18px;
}

/* ── Баннеры ─────────────────────────────────────────────────────────────── */

.st-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.st-nav {
    display: flex;
    gap: 10px;
}

.st-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1.5px solid var(--pf-field-line);
    border-radius: 50%;
    background: #fff;
    color: var(--pf-ink);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, opacity .15s;
}

.st-nav__btn:hover:not(:disabled) {
    border-color: #C9CCD8;
    background: #FBFBFD;
}

.st-nav__btn:disabled {
    opacity: .4;
    cursor: default;
}

/* Лента прокручивается сама (стрелки листают её скриптом), поэтому пальцем
   и колесом с наклоном она листается и без скрипта. Полосу прокрутки
   прячем: её роль — у стрелок, а на телефоне — у выглядывающего края. */
.st-banners {
    display: flex;
    gap: 20px;
    margin: 0 -8px;
    padding: 8px;
    overflow-x: auto;
    list-style: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    /* Привязка — к краю содержимого, а не к краю ленты: без этого первая
       карточка вставала на 8px левее заголовка, лента не возвращалась к
       нулю, и «назад» не гас никогда. */
    scroll-padding-inline: 8px;
    scrollbar-width: none;
}

.st-banners::-webkit-scrollbar {
    display: none;
}

.st-banner {
    display: flex;
    flex: none;
    flex-direction: column;
    width: 340px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--pf-line);
    border-radius: 22px;
    background: #fff;
    scroll-snap-align: start;
}

.st-banner__pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    padding: 16px 20px;
    background: var(--pf-paper);
}

.st-banner__pic img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 22px -16px rgba(55, 62, 91, .6);
}

.st-banner__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 18px 20px;
}

.st-banner__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.st-banner__title {
    color: var(--pf-ink);
    font-size: 16px;
    font-weight: 700;
}

.st-banner__size {
    margin-top: 2px;
    color: var(--pf-muted);
    font-size: 13px;
}

.pf .st-banner__dl {
    flex: none;
    width: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 14px;
}

/* ── Окно инструкции ─────────────────────────────────────────────────────── */

.st-modal {
    width: calc(100% - 32px);
    max-width: 620px;
    max-height: calc(100% - 32px);
    margin: auto;
    padding: 32px 36px;
    overflow-y: auto;
    border: 0;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
    color: var(--pf-ink);
    font-family: Roboto, Arial, sans-serif;
}

.st-modal[open] {
    animation: st-drop .25s var(--pf-ease);
}

.st-modal::backdrop {
    background: rgba(35, 38, 58, .55);
}

@keyframes st-drop {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.st-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--pf-muted);
    cursor: pointer;
}

.st-modal__close:hover {
    background: #F0F1F5;
}

.st-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--pf-blush);
    color: var(--pf-coral);
}

.pf .st-h2--modal {
    margin: 16px 0 8px;
    padding-right: 40px;
    font-size: 26px;
    line-height: 1.2;
}

.st-howto {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

.st-howto li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 0;
    color: var(--pf-ink);
    font-size: 15px;
    line-height: 1.5;
}

.st-howto li > span {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--pf-coral);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.st-note {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--pf-paper);
    color: var(--pf-muted);
}

.st-note .pf-i {
    margin-top: 1px;
}

.pf .st-note p {
    margin: 0;
    color: #5A6078;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
}

.st-note b {
    color: var(--pf-ink);
    font-weight: 500;
}

.pf .st-modal__ok {
    width: 100%;
    margin-top: 20px;
    border-radius: 16px;
}

/* ── Ширины ──────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .pf .st-h1 {
        font-size: 60px;
    }
}

@media (max-width: 860px) {
    .st-steps,
    .st-faq,
    .st-why {
        grid-template-columns: minmax(0, 1fr);
    }

    .st-steps::before {
        display: none;
    }

    .st-why {
        gap: 24px;
        padding: 20px;
    }

    .pf .st-h2 {
        font-size: 28px;
    }
}

@media (max-width: 600px) {
    .st-wrap {
        padding: 0 16px;
    }

    .st-sec {
        padding-top: 56px;
    }

    .st-hero {
        padding: 40px 16px 48px;
    }

    .pf .st-h1 {
        font-size: 40px;
    }

    .pf .st-lead {
        font-size: 16px;
    }

    .st-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .st-stats {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px 20px;
    }

    .st-stats__sep {
        width: auto;
        height: 1px;
    }

    .st-stat__n {
        font-size: 26px;
    }

    .st-nav {
        display: none;
    }

    /* Лента — от края до края экрана, первая карточка вровень с текстом. */
    .st-banners {
        gap: 12px;
        margin: 0 -16px;
        padding: 8px 16px;
        scroll-padding-inline: 16px;
    }

    /* Следующая карточка выглядывает хотя бы на 40px и на 320: стрелок здесь
       нет, и край соседней — единственный знак, что лента листается. */
    .st-banner {
        width: min(290px, calc(100vw - 72px));
    }

    .st-modal {
        padding: 24px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .st *,
    .st-modal[open] {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}