/*
 * Страница сбора ниже обложки (campaign/page.html.twig, реестр AD-110).
 *
 * Свой компонент, как окно пожертвования (payment-modal.css): разметка
 * новая, классы `cp-*`, и правила темы на неё не ложатся — кроме тех, что
 * написаны на голые теги (`aside { width: 25% }`, `p { font-size: 20px }`,
 * `h2 { font-size: 48px }`, на телефоне `h2 { text-align: center }`). Их здесь
 * перебивает класс, поэтому у каждого абзаца и заголовка свой класс.
 *
 * Устройство:
 *  - на широком экране справа одна панель: сумма с «Помочь» и под ними
 *    поток пожертвований. Панель едет вместе с прокруткой и занимает высоту
 *    экрана; поток прокручивается внутри и догружает более ранние. Слева —
 *    название с «Поделиться», рассказ, мозаика фотографий, лента событий,
 *    соседние сборы акции строками. Над колонками — обложка без текста;
 *  - уже 992px панель распадается (`display: contents`): карточка сбора —
 *    сразу под обложкой, пожертвования — после рассказа и фотографий, у
 *    нижнего края — полоса с «Помочь»;
 *  - коралловый — только деньги и действие: кнопка, полоса сбора, суммы
 *    пожертвований. Заголовки — цветом текста;
 *  - движение без участия человека одно — полоса сбора дорастает при
 *    загрузке; остальное отвечает на событие: пришло пожертвование, нажата
 *    «Показать ещё». При «уменьшить движение» его нет.
 *
 * Цвета — темы: коралловый #EB5940, текст #373E5B.
 */

.cp,
.cp-hero,
.cp-dock,
.cp-toast {
    --cp-coral: #EB5940;
    --cp-coral-dark: #D4482F;
    --cp-ink: #373E5B;
    --cp-muted: #6B7086;
    --cp-faint: #8E92A6;
    --cp-line: #E7E8EF;
    --cp-track: #EEEFF4;
    --cp-paper: #F6F6F9;
    --cp-blush: #FDEFEC;
    --cp-live: #1E9E62;
    --cp-ease: cubic-bezier(.2, .8, .2, 1);
    /* Высота шапки, когда она прилипла к верху при прокрутке. */
    --cp-header: 70px;
}

.cp *,
.cp *::before,
.cp *::after,
.cp-hero *,
.cp-dock *,
.cp-toast * {
    box-sizing: border-box;
}

.cp {
    padding: 28px 0 80px;
    color: var(--cp-ink);
    font-family: Roboto, Arial, sans-serif;
}

/* ── Обложка (AD-112) ────────────────────────────────────────────────────── */

/* Картинка без текста поверх: название — под ней, в `cp-head`. Пропорции —
   превью `campaign_hero` (1320×370), то есть обложка такая же, как в прежней
   шапке; на телефоне — 2:1, иначе она вышла бы полоской в сто пикселей. */
.cp-hero {
    padding: 40px 0 0;
    font-family: Roboto, Arial, sans-serif;
}

.cp-hero__cover {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: var(--cp-paper);
}

.cp-hero__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1320 / 370;
    object-fit: cover;
}

.cp-hero__chip {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(31, 35, 56, .64);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.cp-hero__chip--live {
    background: var(--cp-coral);
    color: #fff;
}

.cp-hero__chip--live:hover,
.cp-hero__chip--live:focus {
    background: var(--cp-coral-dark);
    color: #fff;
}

.cp-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: cp-blink 1.6s ease-in-out infinite;
}

@keyframes cp-blink {
    50% { opacity: .35; }
}

/* Обложка, совпавшая с фото сбора, открывает его целиком в просмотрщике. */
.cp-hero__open {
    display: block;
    cursor: zoom-in;
}

.cp-hero__zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(31, 35, 56, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    opacity: 0;
    transform: scale(.9);
    transition: opacity .2s, transform .2s var(--cp-ease);
}

.cp-hero__open:hover .cp-hero__zoom,
.cp-hero__open:focus-visible .cp-hero__zoom {
    opacity: 1;
    transform: none;
}

.cp-hero__open:focus-visible {
    outline: 3px solid rgba(235, 89, 64, .45);
    outline-offset: 3px;
}

/* На телефоне наведения нет — значок виден сразу, иначе не догадаться,
   что обложка открывается. */
@media (hover: none) {
    .cp-hero__zoom {
        right: 10px;
        bottom: 10px;
        width: 34px;
        height: 34px;
        opacity: 1;
        transform: none;
    }
}

/* ── Название, акция, автор, «Поделиться» ─────────────────────────────────── */

.cp-head {
    margin-bottom: 30px;
}

.cp .cp-head__event {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--cp-paper);
    color: var(--cp-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    transition: background-color .2s, color .2s;
}

.cp .cp-head__event:hover,
.cp .cp-head__event:focus {
    background: var(--cp-blush);
    color: var(--cp-coral-dark);
}

.cp .cp-head__title {
    margin: 0;
    color: var(--cp-ink);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    text-align: left;
    overflow-wrap: break-word;
}

.cp-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 18px;
}

.cp-head__author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--cp-muted);
    font-size: 15px;
    line-height: 1.35;
}

.cp-head__author b {
    color: var(--cp-ink);
    font-weight: 500;
}

/* «Поделиться»: на телефоне — системное меню, на компьютере — окошко.
   Справа — когда слева автор; у акции автора нет, и кнопка встаёт слева. */
.cp-share {
    position: relative;
}

.cp-head__author + .cp-share {
    margin-left: auto;
}

.cp-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px 0 14px;
    border: 1px solid var(--cp-line);
    border-radius: 999px;
    background: #fff;
    color: var(--cp-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.cp-share__btn:hover,
.cp-share__btn[aria-expanded="true"] {
    border-color: #C9CBD6;
    background: var(--cp-paper);
}

.cp-share__menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    right: 0;
    min-width: 248px;
    padding: 6px;
    border: 1px solid var(--cp-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 48px -20px rgba(31, 35, 56, .45);
    animation: cp-menu .18s var(--cp-ease);
}

.cp-share__menu[hidden] {
    display: none;
}

@keyframes cp-menu {
    from { opacity: 0; transform: translateY(-6px); }
}

.cp .cp-share__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--cp-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.cp .cp-share__item:hover,
.cp .cp-share__item:focus-visible {
    background: var(--cp-paper);
    color: var(--cp-ink);
}

/* Иконки — классы темы (`.vk`, `.ok`…): у них своя картинка через
   `background`, здесь только круг под ней и размер. */
.cp .cp-share__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--cp-paper);
    background-size: 16px;
    color: var(--cp-ink);
}

.cp-share__item.is-done .cp-share__icon {
    background-color: #DAF0E5;
    color: var(--cp-live);
}

/* ── Колонки ─────────────────────────────────────────────────────────────── */

.cp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "main aside";
    column-gap: 40px;
    align-items: start;
}

.cp-aside {
    grid-area: aside;
    position: sticky;
    top: calc(var(--cp-header) + 20px);
}

.cp-main {
    grid-area: main;
    min-width: 0;
}

/* ── Панель: сумма и поток пожертвований ─────────────────────────────────── */

.cp-panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--cp-header) - 40px);
    overflow: hidden;
    border: 1px solid var(--cp-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 44px -30px rgba(55, 62, 91, .4);
}

.cp-card {
    flex: none;
    padding: 20px 22px 22px;
}

.cp-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 22px;
}

.cp-card__label {
    color: var(--cp-muted);
    font-size: 14px;
    line-height: 1.3;
}

.cp-state {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--cp-paper);
    color: var(--cp-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

/* Признак живой суммы. Точка мерцает, пока опрос отвечает, и гаснет, когда
   сервер недоступен — тогда и подпись другая. */
.cp-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--cp-muted);
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    cursor: help;
}

.cp-live__dot {
    position: relative;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cp-live);
    transition: background-color .3s;
}

.cp-live__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid var(--cp-live);
    border-radius: 50%;
    opacity: 0;
    animation: cp-ping 2.8s var(--cp-ease) infinite;
}

.cp-live.is-offline .cp-live__dot {
    background: #B5B8C7;
}

.cp-live.is-offline .cp-live__dot::after {
    animation: none;
}

@keyframes cp-ping {
    0% { opacity: .55; transform: scale(.6); }
    70%, 100% { opacity: 0; transform: scale(1.5); }
}

/* Сумма. Цифры моноширинные: при пересчёте вверх строка не дёргается. */
.cp-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin-top: 2px;
}

.cp-sum__value {
    color: var(--cp-ink);
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: -.01em;
    white-space: nowrap;
}

/* «+500 ₽» рядом с суммой, когда пришло пожертвование. */
.cp-sum__delta {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--cp-blush);
    color: var(--cp-coral-dark);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.cp-sum__delta.is-shown {
    animation: cp-delta 3.6s var(--cp-ease) forwards;
}

@keyframes cp-delta {
    0% { opacity: 0; transform: translateY(6px); }
    10%, 80% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-4px); }
}

.cp-progress {
    display: block;
    height: 8px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--cp-track);
}

/* Ширина, а не transform: scaleX — сжатие искривило бы скруглённый край.
   Ненулевой сбор виден хотя бы точкой: 0,3% от миллиона — это 3 000 ₽. */
.cp-progress__bar {
    display: block;
    width: max(calc(var(--cp-p, 0) * 100%), 8px);
    height: 100%;
    border-radius: inherit;
    background: var(--cp-coral);
    transition: width 1.1s var(--cp-ease);
    animation: cp-fill 1.3s var(--cp-ease) .2s backwards;
}

.cp-progress[data-empty] .cp-progress__bar {
    display: none;
}

@keyframes cp-fill {
    from { width: 0; }
}

.cp-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 10px;
    color: var(--cp-muted);
    font-size: 14px;
    line-height: 1.4;
}

.cp-meta:empty {
    display: none;
}

.cp-meta b {
    color: var(--cp-ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.cp-meta__end {
    margin-left: auto;
}

.cp-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.cp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 16px;
    background: var(--cp-coral);
    box-shadow: 0 12px 24px -14px rgba(235, 89, 64, .9);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s, transform .12s;
}

.cp-cta:hover {
    background: var(--cp-coral-dark);
}

.cp-cta:active {
    transform: translateY(1px);
}

.cp-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    background: #fff;
    color: var(--cp-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.cp-secondary:hover,
.cp-secondary:focus {
    border-color: #C9CBD6;
    background: var(--cp-paper);
    color: var(--cp-ink);
}

/* ── Поток пожертвований ─────────────────────────────────────────────────── */

/* Серый фон отделяет поток от суммы, а «облачка» на нём — белые: так это
   читается разговором, а не ведомостью. */
.cp-donations {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    border-top: 1px solid var(--cp-line);
    background: var(--cp-paper);
    scroll-margin-top: calc(var(--cp-header) + 16px);
}

.cp-donations__head {
    flex: none;
    padding: 16px 22px 6px;
}

.cp .cp-donations__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--cp-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.cp-count {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--cp-muted);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    letter-spacing: 0;
    vertical-align: middle;
}

.cp-h2 .cp-count {
    margin-left: 6px;
    background: var(--cp-paper);
    font-size: 14px;
}

.cp-donations__viewport {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.cp-donations__scroll {
    flex: 1 1 auto;
    min-height: 140px;
    padding: 2px 22px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Сдвиг при вставке сверху держит скрипт сам: Safari привязки прокрутки
       не умеет, а в Chrome она сдвинула бы ещё раз. */
    overflow-anchor: none;
    scrollbar-width: thin;
    scrollbar-color: #D3D5DF transparent;
}

/* Затенение у края, за которым есть ещё. */
.cp-donations__scroll.is-more-below {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 36px), transparent);
}

.cp-donations__scroll.is-more-above {
    -webkit-mask-image: linear-gradient(transparent, #000 28px);
    mask-image: linear-gradient(transparent, #000 28px);
}

.cp-donations__scroll.is-more-above.is-more-below {
    -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 36px), transparent);
}

/* «К новым» / «2 новых» над потоком. */
.cp-fresh {
    position: absolute;
    z-index: 2;
    top: 6px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--cp-ink);
    box-shadow: 0 8px 20px -8px rgba(31, 35, 56, .55);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transform: translateX(-50%);
    animation: cp-drop .3s var(--cp-ease);
}

.cp-fresh[hidden] {
    display: none;
}

.cp-fresh.is-news {
    background: var(--cp-coral);
}

@keyframes cp-drop {
    from { opacity: 0; transform: translate(-50%, -8px); }
}

.cp-donors,
.cp-events {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-ava {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cp-track);
    color: var(--cp-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    object-fit: cover;
}

.cp-ava--small {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.cp-ava--tone0 { background: #FBE2DC; }
.cp-ava--tone1 { background: #E6E3F6; }
.cp-ava--tone2 { background: #DAF0E5; }
.cp-ava--tone3 { background: #DCE9F6; }
.cp-ava--tone4 { background: #F5EAD5; }

/* Имени нет или оно начинается не с буквы — силуэт. */
.cp-ava--none {
    background: #E9EAF0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A3A7BA'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20c.8-3.9 3.8-6 7.5-6s6.7 2.1 7.5 6z'/%3E%3C/svg%3E") center / 60% no-repeat;
}

/* Пожертвование: буква, имя, сумма плашкой, время, слова — «облачком». */
.cp-donor {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 0;
}

.cp-donor__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-height: 36px;
    padding-top: 8px;
}

.cp-donor__name {
    min-width: 0;
    color: var(--cp-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.cp-donor__sum {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--cp-blush);
    color: var(--cp-coral-dark);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    white-space: nowrap;
}

.cp-time {
    color: var(--cp-faint);
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}

.cp-donor .cp-time {
    margin-left: auto;
}

.cp .cp-donor__text {
    width: fit-content;
    max-width: 100%;
    margin: 2px 0 0;
    padding: 8px 12px;
    border-radius: 4px 14px 14px 14px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(55, 62, 91, .05), 0 1px 3px rgba(55, 62, 91, .06);
    color: var(--cp-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Только что пришедшее: «облачко» и плашка суммы тёплые, потом остывают. */
.cp-donor.is-new .cp-donor__text {
    animation: cp-warm 6s ease-in forwards;
}

.cp-donor.is-new .cp-donor__sum {
    animation: cp-pop .5s var(--cp-ease);
}

.cp-donor.is-new .cp-time {
    color: var(--cp-coral-dark);
}

@keyframes cp-warm {
    0%, 55% { background: #FDE5DF; }
    100% { background: #fff; }
}

@keyframes cp-pop {
    0% { transform: scale(.7); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: none; }
}

.cp-empty {
    padding: 22px 6px 8px;
    color: var(--cp-muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* ── Низ списка: «Показать ещё», счёт, «Свернуть» ───────────────────────── */

.cp-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding-top: 14px;
}

.cp-more[hidden] {
    display: none;
}

.cp-donations .cp-more {
    justify-content: center;
}

.cp-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid #D6D8E2;
    border-radius: 999px;
    background: #fff;
    color: var(--cp-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.cp-more__btn:hover {
    border-color: var(--cp-ink);
}

.cp-more__btn[hidden] {
    display: none;
}

.cp-more__btn[aria-busy="true"] {
    cursor: progress;
    background: var(--cp-paper);
}

.cp-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cp-spin .7s linear infinite;
}

.cp-more__btn[aria-busy="true"] .cp-spinner {
    display: block;
}

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

.cp-more__meta {
    color: var(--cp-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.cp-more__collapse {
    margin-left: auto;
    padding: 8px 0;
    border: 0;
    background: none;
    color: var(--cp-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.cp-more__collapse:hover {
    color: var(--cp-ink);
}

.cp-more__collapse[hidden] {
    display: none;
}

.cp .cp-more__error {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: #FDEDEB;
    color: #9E2820;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.cp .cp-more__error[hidden] {
    display: none;
}

.cp-more__retry {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Заглушки, пока порция в пути: той же формы, что придёт. */
.cp-skel {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 0;
}

.cp-skel i {
    display: block;
    height: 11px;
    border-radius: 6px;
    background: linear-gradient(90deg, #E9EAF0 0%, #F4F4F8 45%, #E9EAF0 90%) 0 0 / 250% 100%;
    animation: cp-shimmer 1.3s linear infinite;
}

.cp-skel > i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.cp-skel span {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 12px;
}

.cp-skel span i:nth-child(1) { width: 46%; }
.cp-skel span i:nth-child(2) { width: 82%; height: 32px; border-radius: 4px 14px 14px 14px; }

.cp-events .cp-skel {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
}

.cp-events .cp-skel > i {
    width: 32px;
    height: 32px;
}

.cp-events .cp-skel span {
    padding-top: 0;
}

.cp-events .cp-skel span i:nth-child(2) {
    display: none;
}

@keyframes cp-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -150% 0; }
}

/* Пришедшая порция въезжает по одной записи. */
.cp-enter {
    animation: cp-enter .5s var(--cp-ease) backwards;
    animation-delay: calc(var(--cp-i, 0) * 45ms);
}

@keyframes cp-enter {
    from { opacity: 0; transform: translateY(12px); }
}

/* ── Основная колонка ────────────────────────────────────────────────────── */

.cp-main > .cp-section + .cp-section {
    margin-top: 56px;
}

.cp .cp-h2 {
    margin: 0 0 18px;
    color: var(--cp-ink);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-align: left;
}

/* Описание. Разметка из редактора: абзацы, ссылки, картинки, видео. */
.cp-story__text {
    position: relative;
    color: var(--cp-ink);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    overflow-wrap: break-word;
}

.cp .cp-story__text p {
    margin: 0 0 .9em;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.cp-story__text > :last-child {
    margin-bottom: 0;
}

.cp-story__text strong,
.cp-story__text b {
    font-weight: 700;
}

.cp-story__text a {
    color: var(--cp-coral-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cp-story__text ul,
.cp-story__text ol {
    margin: 0 0 .9em;
    padding-left: 1.3em;
    list-style: disc;
}

.cp-story__text ol {
    list-style: decimal;
}

/* Размер у картинок из редактора записан в атрибуте style. */
.cp-story__text img {
    max-width: 100%;
    height: auto !important;
    border-radius: 12px;
}

.cp-story__text iframe,
.cp-story__text video {
    max-width: 100%;
}

.cp-story__text.is-folded {
    max-height: 16.5em;
    overflow: hidden;
}

.cp-story__text.is-folded::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 7em;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%);
    pointer-events: none;
}

/* «Читать полностью» — плашкой по центру, поверх края затенения. */
.cp-story__more {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.cp-story__text.is-folded + .cp-story__more {
    margin-top: -24px;
}

.cp-story__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px 0 22px;
    border: 1px solid var(--cp-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 24px -14px rgba(55, 62, 91, .45);
    color: var(--cp-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s;
}

.cp-story__toggle:hover {
    border-color: #C9CBD6;
}

/* Картинки в описании открываются в просмотрщике (campaign-page.js). */
.cp-story__zoom {
    display: inline-block;
    cursor: zoom-in;
}

/* Ссылка на видео в тексте — со значком: по ней ждут ролик, а не статью. */
.cp .cp-story__text a[href*="youtube.com/watch"],
.cp .cp-story__text a[href*="youtu.be/"],
.cp .cp-story__text a[href*="vk.com/video"],
.cp .cp-story__text a[href*="rutube.ru/video"] {
    padding-left: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23D4482F'/%3E%3Cpath d='M6.3 5.2v5.6L11 8z' fill='%23fff'/%3E%3C/svg%3E") left center / 16px no-repeat;
}

.cp-story__toggle svg {
    transition: transform .3s var(--cp-ease);
}

.cp-story__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Фотографии — мозаикой под их число (AD-112). Плитки сверх видимых в
   разметке есть (их листает просмотрщик), но не показываются. */
.cp-photos {
    scroll-margin-top: calc(var(--cp-header) + 20px);
}

.cp-photos__grid {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-photos__tile {
    position: relative;
    min-width: 0;
    min-height: 0;
}

.cp-photos__tile.is-extra {
    display: none;
}

.cp-photos__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: var(--cp-paper);
}

.cp-photos__link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--cp-ease);
}

.cp-photos__link:hover img {
    transform: scale(1.04);
}

.cp-photos__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 35, 56, .52);
    color: #fff;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.01em;
}

.cp-photos__more--narrow {
    display: none;
}

/* Одно фото (кроме обложки) — небольшой плиткой: растянутое во всю колонку
   оно выглядело случайно увеличенным. */
.cp-photos__grid--1 {
    grid-template-columns: minmax(0, 420px);
}

.cp-photos__grid--1 .cp-photos__tile {
    aspect-ratio: 4 / 3;
}

/* Два — пополам. */
.cp-photos__grid--2 {
    grid-template-columns: 1fr 1fr;
}

.cp-photos__grid--2 .cp-photos__tile {
    aspect-ratio: 4 / 3;
}

/* Три и больше — большое слева на две строки, справа остальные. */
.cp-photos__grid--3,
.cp-photos__grid--4,
.cp-photos__grid--5 {
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 11 / 5;
}

.cp-photos__grid--3 {
    grid-template-columns: 2fr 1fr;
}

.cp-photos__grid--4,
.cp-photos__grid--5 {
    grid-template-columns: 2fr 1fr 1fr;
}

.cp-photos__grid--3 .cp-photos__tile:first-child,
.cp-photos__grid--4 .cp-photos__tile:first-child,
.cp-photos__grid--5 .cp-photos__tile:first-child {
    grid-row: 1 / 3;
}

.cp-photos__grid--4 .cp-photos__tile:nth-child(2) {
    grid-column: 2 / 4;
}

/* Стримеры, поддерживающие событие. */
.cp-streamers__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-streamer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border: 1px solid var(--cp-line);
    border-radius: 999px;
    color: var(--cp-ink);
    font-size: 15px;
    font-weight: 500;
}

.cp-streamer__ava {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.cp-streamer__live {
    color: var(--cp-coral-dark);
    font-size: 13px;
}

/* Лента событий — линия времени: буквы на одной вертикали, вехи сбора —
   тёплой карточкой поперёк линии. */
.cp-events {
    position: relative;
    z-index: 0;
}

.cp-event {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 7px 0;
}

.cp-event::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 2px;
    background: var(--cp-line);
}

.cp-event:first-child::before {
    top: 50%;
}

.cp-event:last-child::before {
    bottom: 50%;
}

.cp-event:only-child::before {
    display: none;
}

.cp-event .cp-ava {
    box-shadow: 0 0 0 4px #fff;
}

.cp .cp-event__text {
    margin: 0;
    color: var(--cp-ink);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.cp-event__who {
    margin-right: 3px;
    font-weight: 500;
}

.cp-event__what .sum {
    color: var(--cp-coral-dark);
    font-weight: 500;
}

.cp-event .cp-time {
    font-size: 13px;
}

.cp-event--milestone {
    margin: 6px -14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--cp-blush);
}

.cp-event--milestone::before {
    display: none;
}

.cp-event__flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cp-coral);
    color: #fff;
}

.cp-event--milestone .cp-event__what {
    color: var(--cp-coral-dark);
    font-weight: 500;
}

/* ── Соседние сборы акции (AD-111) ──────────────────────────────────────── */

/* Заголовок — сама акция: название, сколько событий и сколько собрано
   вместе; справа ссылка на неё. */
.cp-sibs__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 24px;
    margin-bottom: 18px;
}

.cp .cp-sibs__head .cp-h2 {
    margin: 0;
}

.cp .cp-sibs__sum {
    grid-column: 1;
    margin: 6px 0 0;
    color: var(--cp-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
}

.cp-sibs__sum b {
    color: var(--cp-ink);
    font-weight: 500;
}

.cp-nowrap {
    white-space: nowrap;
}

.cp .cp-sibs__all {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    padding: 4px 0;
    color: var(--cp-coral-dark);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.cp .cp-sibs__all:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Строки в две колонки: обложка небольшим прямоугольником, справа
   название, автор и полоса. Вся строка — ссылка (растянутое название). */
.cp-sibs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-sib {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--cp-line);
    border-radius: 18px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.cp-sib:hover {
    border-color: #D6D8E2;
    box-shadow: 0 16px 32px -22px rgba(55, 62, 91, .5);
}

/* Пропорции — превью карточки каталога (500×350): лишнего не режем. */
.cp-sib__img {
    display: block;
    width: 112px;
    height: auto;
    aspect-ratio: 10 / 7;
    border-radius: 12px;
    background: var(--cp-paper);
    object-fit: cover;
    transition: transform .4s var(--cp-ease);
}

.cp-sib__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cp .cp-sib__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--cp-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cp .cp-sib__title::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
}

.cp .cp-sib__title:focus-visible {
    outline: none;
}

.cp .cp-sib__title:focus-visible::after {
    outline: 3px solid rgba(235, 89, 64, .45);
    outline-offset: 2px;
}

.cp-sib:hover .cp-sib__title {
    color: var(--cp-coral-dark);
}

.cp-sib__people {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Автор — подпись, щелчок по нему уходит строке; трансляция — своя
   ссылка поверх растянутой ссылки строки. */
.cp-sib__author,
.cp .cp-sib__stream {
    color: var(--cp-muted);
    font-size: 13px;
    line-height: 1.4;
}

.cp-sib__author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cp .cp-sib__stream {
    position: relative;
    z-index: 1;
}

.cp .cp-sib__stream:hover {
    color: var(--cp-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cp-sib__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-sib__stream {
    flex-shrink: 0;
}

.cp-ava--tiny {
    width: 20px;
    height: 20px;
    font-size: 11px;
}

.cp-progress--thin {
    height: 5px;
    margin-top: 2px;
}

.cp-sib__meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--cp-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.cp-sib__meta b {
    color: var(--cp-ink);
    font-weight: 500;
}

/* ── «Помочь», когда кнопка карточки за краем экрана ──────────────────────── */

/* Сводка сбора с кнопкой: на телефоне — полоса у нижнего края, на широком
   экране — плавающая мини-карточка в колонке панели. На ноутбуке 1366×768
   до кнопки карточки первый экран не достаёт; стоит прокрутить на пару
   сотен пикселей — панель доезжает, прилипает, и мини-карточка гаснет. */
.cp-dock {
    position: fixed;
    z-index: 990;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--cp-ink);
    font-family: Roboto, Arial, sans-serif;
    visibility: hidden;
}

.cp-dock__sum {
    display: grid;
    flex: 1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 8px;
    min-width: 0;
}

.cp-dock__value {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cp-dock__goal {
    overflow: hidden;
    color: var(--cp-muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-progress--mini {
    grid-column: 1 / -1;
    height: 4px;
    margin-top: 6px;
}

.cp-progress--mini .cp-progress__bar {
    width: max(calc(var(--cp-p, 0) * 100%), 4px);
    animation: none;
}

.cp-cta--dock {
    flex-shrink: 0;
    width: auto;
    height: 46px;
    padding: 0 26px;
    border-radius: 14px;
    box-shadow: none;
    font-size: 16px;
}

/* Положение по горизонтали ставит скрипт по самой панели: `100vw` с
   полосой прокрутки Windows промахивался бы на её ширину. */
@media (min-width: 992px) {
    .cp-dock {
        right: 40px;
        bottom: 20px;
        width: 380px;
        padding: 12px 12px 12px 20px;
        border: 1px solid var(--cp-line);
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 22px 48px -18px rgba(55, 62, 91, .45);
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .3s var(--cp-ease), transform .3s var(--cp-ease), visibility 0s linear .3s;
    }

    .cp-dock.is-shown {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .3s var(--cp-ease), transform .3s var(--cp-ease), visibility 0s;
    }

    /* Поток прокручивается внутри панели — сворачивать его незачем. */
    .cp-donations .cp-more__collapse {
        display: none;
    }
}

/* ── Уведомление о новом пожертвовании ──────────────────────────────────── */

.cp-toast {
    position: fixed;
    z-index: 1000;
    right: 16px;
    bottom: 24px;
    left: 16px;
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 460px;
    margin: 0 auto;
    border-radius: 16px;
    background: var(--cp-ink);
    box-shadow: 0 18px 44px rgba(31, 35, 56, .32);
    color: #fff;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s var(--cp-ease), transform .3s var(--cp-ease), bottom .3s var(--cp-ease);
    pointer-events: none;
}

.cp-toast[hidden] {
    display: none;
}

.cp-toast.is-shown {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.cp-toast__body {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 6px 12px 14px;
    border: 0;
    background: none;
    color: #fff;
    font-family: Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.cp-toast__body .cp-ava {
    width: 34px;
    height: 34px;
    font-size: 15px;
}

.cp-toast__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cp-toast__text b {
    font-weight: 500;
}

.cp-toast__close {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: .7;
}

.cp-toast__close:hover {
    opacity: 1;
}

.cp-toast__close::before,
.cp-toast__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

.cp-toast__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.cp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Фокус с клавиатуры ──────────────────────────────────────────────────── */

.cp button:focus-visible,
.cp a:focus-visible,
.cp-dock button:focus-visible,
.cp-toast button:focus-visible {
    outline: 3px solid rgba(235, 89, 64, .45);
    outline-offset: 2px;
}

.cp-toast button:focus-visible,
.cp .cp-fresh:focus-visible {
    outline-color: rgba(55, 62, 91, .45);
}

.cp-donor:focus,
.cp-event:focus {
    outline: none;
}

.cp-donor:focus-visible,
.cp-event:focus-visible {
    outline: 2px solid rgba(235, 89, 64, .45);
    outline-offset: 2px;
    border-radius: 12px;
}

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

@media (max-width: 1199px) {
    .cp-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 32px;
    }

}

@media (min-width: 992px) and (max-width: 1199px) {
    .cp-dock {
        width: 340px;
    }
}

/* Панель распадается: обёртки уходят из раскладки (`display: contents`), и
   её части встают в общую колонку вперемешку с разделами рассказа. Порядок
   — `order`: карточка сбора сразу под обложкой, пожертвования — после
   рассказа и фотографий. */
@media (max-width: 991px) {
    .cp {
        padding-top: 20px;
    }

    .cp-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
        row-gap: 44px;
    }

    .cp-aside,
    .cp-panel,
    .cp-main {
        display: contents;
    }

    .cp-card {
        order: 1;
        border: 1px solid var(--cp-line);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 22px 44px -30px rgba(55, 62, 91, .4);
    }

    .cp-head {
        order: 0;
        margin-bottom: -16px;
    }

    .cp-story { order: 2; }
    .cp-photos { order: 3; }
    .cp-streamers { order: 4; }

    .cp-donations {
        order: 5;
        overflow: hidden;
        border-top: 0;
        border-radius: 22px;
    }

    .cp-feed { order: 6; }
    .cp-sibs { order: 7; }

    .cp-main > .cp-section + .cp-section {
        margin-top: 0;
    }

    .cp-donations__head {
        padding: 18px 18px 4px;
    }

    .cp-donations__scroll {
        min-height: 0;
        padding: 2px 18px 18px;
        overflow: visible;
    }

    .cp .cp-fresh {
        display: none;
    }

    .cp .cp-h2 {
        font-size: 23px;
    }

    .cp-dock {
        right: 0;
        bottom: 0;
        left: 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -10px 28px rgba(55, 62, 91, .14);
        transform: translateY(115%);
        transition: transform .35s var(--cp-ease), visibility 0s linear .35s;
    }

    .cp-dock.is-shown {
        visibility: visible;
        transform: none;
        transition: transform .35s var(--cp-ease), visibility 0s;
    }

    .cp-toast.is-above-dock {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 767px) {
    .cp {
        padding-bottom: 48px;
    }

    .cp-hero {
        padding-top: 16px;
    }

    .cp-hero__cover {
        border-radius: 18px;
    }

    .cp-hero__img {
        aspect-ratio: 2 / 1;
    }

    .cp-hero__chip {
        top: 10px;
        left: 10px;
        font-size: 13px;
    }

    .cp .cp-head__title {
        font-size: 28px;
        line-height: 1.15;
    }

    /* Мозаика на телефоне: большое во всю ширину, под ним до трёх малых. */

    .cp-photos__grid--3,
    .cp-photos__grid--4,
    .cp-photos__grid--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
        aspect-ratio: auto;
    }

    .cp-photos__grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp-photos__grid .cp-photos__tile {
        aspect-ratio: 1;
    }

    .cp-photos__grid--3 .cp-photos__tile:first-child,
    .cp-photos__grid--4 .cp-photos__tile:first-child,
    .cp-photos__grid--5 .cp-photos__tile:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 10;
    }

    .cp-photos__grid--4 .cp-photos__tile:nth-child(2) {
        grid-column: auto;
    }

    .cp-photos__tile.is-extra-narrow {
        display: none;
    }

    .cp-photos__more--wide {
        display: none;
    }

    .cp-photos__more--narrow {
        display: flex;
    }

    .cp-sibs__list {
        grid-template-columns: minmax(0, 1fr);
    }

    /* «Вся акция» — под суммой акции, а не сбоку от длинного названия. */
    .cp-sibs__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .cp .cp-sibs__all {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        margin-top: 6px;
    }

    .cp-more__collapse {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .cp-card {
        padding: 18px 18px 20px;
    }

    .cp-story__text {
        font-size: 16px;
    }

    /* Время в ленте — под текстом: справа оно отнимало у текста треть строки. */
    .cp-event {
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-areas: "ava text" "ava time";
        row-gap: 0;
    }

    .cp-event > :first-child {
        grid-area: ava;
        align-self: start;
    }

    .cp-event__text {
        grid-area: text;
    }

    .cp-event .cp-time {
        grid-area: time;
    }

    .cp-event--milestone {
        margin: 6px -10px;
        padding: 10px;
    }

    /* «Поделиться» — кружком со значком: с подписью кнопка не помещалась в
       строку с автором и уезжала на отдельную. */
    .cp-share__btn {
        justify-content: center;
        width: 40px;
        padding: 0;
    }

    .cp-share__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cp-sib {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 12px;
    }

    .cp-sib__img {
        width: 92px;
    }
}

/* Телефон боком: кнопка «Помочь» в первом экране не помещается — её держит
   полоса снизу, а карточка не тратит высоту на лишние поля. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 991px) {
    .cp {
        padding-top: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp *,
    .cp *::before,
    .cp *::after,
    .cp-dock,
    .cp-toast {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
    }

    .cp-live__dot::after {
        display: none;
    }

    /* Без движения тёплое «облачко» и «+500 ₽» просто стоят, пока их не
       снимет скрипт, — иначе мгновенная анимация сразу оставила бы их
       невидимыми. */
    .cp-donor.is-new .cp-donor__text {
        animation: none;
        background: #FDE5DF;
    }

    .cp-sum__delta.is-shown {
        animation: none;
        opacity: 1;
    }
}