/* ===== Блок «Работа с карточкой» для страницы отзывов =====

   Стили собраны из инлайнового <style> главной. Инлайн на главной оставлен
   как есть: там блок работает, и трогать живой CSS ради переиспользования —
   лишний риск. Дубль осознанный; при следующей правке блока менять оба места.

   Отличие страницы отзывов: блок стоит в потоке над результатами, а не в
   левом поле — колонка отзывов шире, слева места нет, справа реклама.
   Поэтому абсолютное позиционирование из медиазапросов здесь отключено
   модификатором .wb-card-work--flow. */

.wb-card-work[hidden] {
        display: none !important;
    }

.wb-card-work {
        width: 100%;
        margin: 0 0 16px;
    }

.wb-card-work__sticky {
        width: 100%;
        padding: 16px;
        border: 1px solid rgba(139, 92, 246, 0.20);
        border-radius: var(--r-lg);
        background: rgba(255, 255, 255, 0.90);
        box-shadow: 0 16px 42px rgba(88, 61, 153, 0.12);
        backdrop-filter: blur(18px) saturate(130%);
        -webkit-backdrop-filter: blur(18px) saturate(130%);
    }

.wb-card-work__title {
        margin: 0 0 13px;
        color: var(--text);
        font-size: 16px;
        line-height: 1.25;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

.wb-card-work__product {
        display: grid;
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 11px;
        align-items: start;
        padding-bottom: 14px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--line);
    }

.wb-card-work__image {
        display: block;
        width: 68px;
        height: 86px;
        border-radius: 12px;
        object-fit: cover;
        background: #f5f1ff;
        border: 1px solid rgba(139, 92, 246, 0.14);
    }

.wb-card-work__image--empty {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #8b5cf6;
        font-size: 20px;
    }

.wb-card-work__product-info {
        min-width: 0;
    }

.wb-card-work__product-name {
        display: -webkit-box;
        overflow: hidden;
        margin: 0 0 5px;
        color: var(--text);
        font-size: 13px;
        line-height: 1.35;
        font-weight: 750;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

.wb-card-work__article {
        display: block;
        margin-bottom: 7px;
        color: var(--text-2);
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 650;
    }

.wb-card-work__wb-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: #6d28d9;
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 750;
        text-decoration: none;
    }

.wb-card-work__wb-link:hover {
        color: #5b21b6;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.wb-card-work__actions {
        display: grid;
        gap: 8px;
    }

/* display: grid бьёт атрибут hidden — у них одинаковый вес, а авторский стиль
   идёт после браузерного. Пустой слот действий из-за этого занимал ячейку, и в
   раскладке «в потоке» посреди блока зияла дыра. */
.wb-card-work__actions[hidden] {
        display: none;
    }

.wb-card-work__action {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 16px;
        gap: 9px;
        align-items: center;
        min-height: 66px;
        padding: 9px 10px;
        border: 1px solid rgba(139, 92, 246, 0.14);
        border-radius: 13px;
        color: var(--text);
        background: rgba(139, 92, 246, 0.045);
        text-decoration: none;
        transition: transform .15s ease, border-color .15s ease, background .15s ease;
    }

.wb-card-work__action:hover {
        transform: translateY(-1px);
        border-color: rgba(139, 92, 246, 0.30);
        background: rgba(139, 92, 246, 0.09);
    }

.wb-card-work__action-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        color: #6d28d9;
        background: rgba(139, 92, 246, 0.13);
        font-size: 15px;
    }

.wb-card-work__action-copy {
        min-width: 0;
    }

.wb-card-work__action-copy strong,
    .wb-card-work__action-copy span {
        display: block;
    }

.wb-card-work__action-copy strong {
        margin-bottom: 2px;
        font-size: 12.5px;
        line-height: 1.25;
        font-weight: 800;
    }

.wb-card-work__action-copy span {
        color: var(--text-2);
        font-size: 10.75px;
        line-height: 1.3;
        font-weight: 550;
    }

.wb-card-work__action > .bi-chevron-right {
        color: #8b5cf6;
        font-size: 12px;
    }

/* Блок виден всегда, поэтому до первого поиска в слоте товара стоит
       заглушка — пустая колонка выглядела бы поломкой. */
    .wb-card-work__product-slot {
        display: block;
    }

.wb-card-work__placeholder {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 12px;
        border: 1px dashed rgba(23, 16, 50, 0.16);
        border-radius: 13px;
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--muted, #5d6678);
    }

.wb-card-work__placeholder .bi {
        font-size: 16px;
        color: #8b5cf6;
        flex-shrink: 0;
    }

/* История переехала внутрь блока: сверху отбивка, рамка не нужна —
       её роль уже играет сам блок. */
    .wb-card-work__history {
        margin-top: 10px;
    }

.wb-card-work__history .wb-history__list {
        max-height: 320px;
        overflow-y: auto;
    }

.wb-card-work__promo {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 16px;
        gap: 9px;
        align-items: center;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid rgba(20, 184, 166, 0.28);
        border-radius: 13px;
        color: var(--text);
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.11), rgba(139, 92, 246, 0.07));
        text-decoration: none;
        transition: transform .15s ease, border-color .15s ease, background .15s ease;
    }

.wb-card-work__promo:hover {
        transform: translateY(-1px);
        border-color: rgba(20, 184, 166, 0.45);
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.16), rgba(139, 92, 246, 0.10));
    }

.wb-card-work__promo-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        color: #0f766e;
        background: rgba(20, 184, 166, 0.18);
        font-size: 15px;
    }

.wb-card-work__promo-copy {
        min-width: 0;
    }

.wb-card-work__promo-copy strong,
    .wb-card-work__promo-copy span {
        display: block;
    }

.wb-card-work__promo-copy strong {
        margin-bottom: 2px;
        font-size: 12.5px;
        line-height: 1.25;
        font-weight: 800;
    }

.wb-card-work__promo-copy span {
        color: var(--text-2);
        font-size: 10.75px;
        line-height: 1.3;
        font-weight: 550;
    }

.wb-card-work__promo > .bi-chevron-right {
        color: #0f766e;
        font-size: 12px;
    }

/* ===== СВОРАЧИВАНИЕ КАРТОЧКИ НА МОБИЛКЕ =====
       На десктопе карточка стоит в левом поле и всегда раскрыта. Ниже 1280px она
       уезжает в поток над результатами и занимала бы целый экран до фотографий,
       поэтому там заголовок становится кнопкой, а тело по умолчанию свёрнуто.
       Разметку с кнопкой рисует main.js (renderCardWorkSidebar). */
    .wb-card-work__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        text-align: left;
        cursor: default;
    }

.wb-card-work__title {
        margin: 0;
    }

.wb-card-work__chev {
        display: none;
        flex: 0 0 auto;
        color: var(--text-2);
        font-size: 13px;
        transition: transform .18s ease;
    }

.wb-card-work__body {
        margin-top: 13px;
    }

@media (max-width: 1279.98px) {
    .wb-card-work__toggle {
            cursor: pointer;
        }
    .wb-card-work__chev {
            display: inline-block;
        }
    .wb-card-work__body {
            display: none;
        }
    .wb-card-work.is-open .wb-card-work__body {
            display: block;
        }
    .wb-card-work.is-open .wb-card-work__chev {
            transform: rotate(180deg);
        }
}

@media (min-width: 1360px) {
    .wb-card-work {
            position: absolute;
            top: 0;
            right: calc(100% + 20px);
            bottom: 0;
            width: 270px;
            margin: 0;
        }
    .wb-card-work__stack {
            position: sticky;
            top: 100px;
        }

    .wb-card-work__sticky {
        }
}

@media (min-width: 1280px) and (max-width: 1359.98px) {
    .wb-card-work {
            position: absolute;
            top: 0;
            right: calc(100% + 14px);
            bottom: 0;
            width: 230px;
            margin: 0;
        }
    .wb-card-work__stack {
            position: sticky;
            top: 96px;
        }

    .wb-card-work__sticky {
            padding: 13px;
        }
    .wb-card-work__product {
            grid-template-columns: 58px minmax(0, 1fr);
        }
    .wb-card-work__image {
            width: 58px;
            height: 76px;
        }
    .wb-card-work__action,
        .wb-card-work__promo {
            grid-template-columns: 30px minmax(0, 1fr) 12px;
            gap: 7px;
            padding: 8px;
        }
    .wb-card-work__action-icon,
        .wb-card-work__promo-icon {
            width: 30px;
            height: 30px;
        }
}

/* ===== HISTORY (свёрнутая по умолчанию) ===== */
    .wb-history {
        width: min(100%, var(--content-width));
        margin: 32px auto;
        border-radius: var(--r-md);
        background: var(--surface);
        border: 1px solid var(--line);
        overflow: hidden;
    }

.wb-history__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        font-size: 14px;
        color: var(--text-2);
        transition: background .15s ease;
    }

.wb-history__head:hover {
        background: rgba(255, 255, 255, 0.02);
        color: var(--text);
    }

.wb-history__title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
    }

.wb-history__chev {
        font-size: 12px;
        color: var(--text-3);
        transition: transform .2s ease;
    }

.wb-history[open] .wb-history__chev {
        transform: rotate(180deg);
    }

.wb-history__list {
        padding: 0 18px 16px;
        display: grid;
        gap: 8px;
    }

@media (max-width: 767.98px) {
    .wb-card-work__sticky {
            padding: 14px;
        }
    .wb-card-work__action {
            min-height: 64px;
        }
}

/* ===== Вариант «в потоке» (страница отзывов) =====

   На главной блок — узкий рейл 270px слева. Здесь колонка 1040px, и если
   просто поставить блок в поток, товар, промо и история превращаются в три
   растянутые полосы во всю ширину: пусто и неопрятно.

   Поэтому на широком экране раскладываем в три колонки, а карточку блока
   делаем плотнее — меньше паддинги, меньше заголовок. */

.wb-card-work--flow {
    position: static !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 16px !important;
    inset: auto !important;
}

.wb-card-work--flow .wb-card-work__sticky {
    padding: 14px 16px;
    box-shadow: 0 8px 24px rgba(88, 61, 153, 0.08);
}

.wb-card-work--flow .wb-card-work__title {
    margin: 0;
    font-size: 14px;
}

.wb-card-work--flow .wb-card-work__toggle {
    margin-bottom: 12px;
}

.wb-card-work--flow .wb-card-work__body {
    display: block !important;
}

/* На мобилке блок свёрнут, как на главной. Раньше !important выше бил
   правило сворачивания, и на телефоне вся «Работа с карточкой» — заглушка,
   три промо и история — разворачивалась стеной над отзывами, ради которых
   человек и пришёл. */
@media (max-width: 899.98px) {
    .wb-card-work--flow .wb-card-work__body {
        display: none !important;
    }

    .wb-card-work--flow.is-open .wb-card-work__body {
        display: block !important;
    }

    .wb-card-work--flow .wb-card-work__toggle {
        cursor: pointer;
        margin-bottom: 0;
    }

    .wb-card-work--flow.is-open .wb-card-work__toggle {
        margin-bottom: 12px;
    }

    .wb-card-work--flow .wb-card-work__chev {
        display: inline-block;
    }

    .wb-card-work--flow.is-open .wb-card-work__chev {
        transform: rotate(180deg);
    }
}

/* История внутри колонки не должна раздувать блок по высоте. */
.wb-card-work--flow .wb-card-work__history {
    margin-top: 0;
}

.wb-card-work--flow .wb-card-work__history .wb-history__list {
    max-height: 210px;
    overflow-y: auto;
}

.wb-card-work--flow .wb-card-work__promo {
    margin-top: 0;
    height: 100%;
}

@media (min-width: 900px) {
    .wb-card-work--flow .wb-card-work__body {
        display: grid !important;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 14px;
        align-items: start;
    }

    .wb-card-work--flow .wb-card-work__product-slot,
    .wb-card-work--flow .wb-card-work__promo,
    .wb-card-work--flow .wb-card-work__history {
        min-width: 0;
    }

    .wb-card-work--flow .wb-card-work__placeholder {
        height: 100%;
    }

    /* Пять плиток в три колонки оставляют дырку в углу. Отдаём истории две
       колонки — она замыкает ряд, и блок выглядит собранным, а не обрубленным. */
    .wb-card-work--flow .wb-card-work__history {
        grid-column: span 2;
    }
}

/* Узкий экран: обычная колонка, но без лишнего воздуха. */
@media (max-width: 899.98px) {
    .wb-card-work--flow .wb-card-work__promo,
    .wb-card-work--flow .wb-card-work__history {
        margin-top: 10px;
    }
}

/* ===== История внутри «Работы с карточкой» =====
   Карточки истории свёрстаны под широкий блок: крупное превью, длинный
   заголовок, ряд миниатюр. В колонке 270px это разносит название по
   одной букве в строку и карточка вырастает на пол-экрана.
   Здесь — компактный вариант: маленькое превью, заголовок в две строки
   с многоточием, метаданные одной строкой, лишнее скрыто. */
.wb-card-work__history .wb-history-filters,
.wb-card-work__history .wb-history-card__photos {
    display: none;
}

.wb-card-work__history .wb-history-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid rgba(23, 16, 50, 0.07);
}

.wb-card-work__history .wb-history-card:last-of-type {
    border-bottom: 0;
}

.wb-card-work__history .wb-history-card__image {
    width: 40px;
    height: 52px;
    min-width: 40px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(23, 16, 50, 0.05);
}

.wb-card-work__history .wb-history-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wb-card-work__history .wb-history-card__body {
    min-width: 0;
}

.wb-card-work__history .wb-history-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    padding: 0;
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.wb-card-work__history .wb-history-card__meta {
    display: flex;
    /* Одной строкой, как и в рейле: перенос возвращал карточке два лишних ряда. */
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 4px 6px;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--muted, #5d6678);
}

.wb-card-work__history .wb-history-card__meta span {
    padding: 0;
    background: none;
    border: 0;
}

.wb-card-work__history .wb-history-pagination {
    margin-top: 8px;
    font-size: 11.5px;
}

.wb-card-work__history .wb-history-pagination button {
    padding: 4px 8px;
    font-size: 11.5px;
}

/* Анкета под блоком. В потоке (страница отзывов) она такой же ширины,
   как сам блок, поэтому ограничиваем — узкая карточка читается лучше. */
.wb-card-work__quiz {
    margin-top: 14px;
}

/* ===== Общая обёртка карточки и анкеты =====
   Прилипает при прокрутке именно она. Раньше sticky висел на самой карточке
   .wb-card-work__sticky, и при прокрутке карточка уезжала вниз, а анкета
   оставалась там, где её поставил поток, — карточка наползала на неё сверху.
   Теперь оба блока едут вместе, как один рейл.

   Своей полосы прокрутки у рейла нет намеренно: вторая прокрутка внутри
   страницы раздражает сильнее, чем то, что у высокого рейла нижняя часть
   недоступна, пока он прилип. Как только колонка результатов заканчивается,
   рейл едет вместе со страницей и виден целиком. */
.wb-card-work__stack {
    display: block;
}

.wb-card-work__quiz[hidden] {
    display: none;
}

.wb-card-work--flow .wb-card-work__quiz {
    max-width: 520px;
}

/* ===== Левое поле на широком экране (страница отзывов) =====

   Колонка результатов здесь 1040px внутри оболочки 1200px, поэтому рейл
   помещается в левое поле только начиная с ~1640px: 1040 + 2×(270 + 20).
   Ниже блок остаётся в потоке над результатами и раскладывается в три
   колонки — правила выше.

   Позиционируется от .service-feedback-result-layout (у неё position:
   relative), поэтому в разметке блок лежит первым ребёнком этой колонки —
   так же, как на главной он лежит внутри .wb-results. */
@media (min-width: 1640px) {
    .wb-card-work--flow {
        position: absolute !important;
        top: 0 !important;
        right: calc(100% + 20px) !important;
        left: auto !important;
        bottom: auto !important;
        width: 270px !important;
        margin: 0 !important;
        z-index: 6;
    }

    /* В узкой колонке сетка из трёх колонок не нужна — обратно в столбик. */
    .wb-card-work--flow .wb-card-work__body {
        display: block !important;
    }

    .wb-card-work--flow .wb-card-work__promo,
    .wb-card-work--flow .wb-card-work__history {
        margin-top: 10px;
    }

    .wb-card-work--flow .wb-card-work__quiz {
        max-width: none;
    }

    .wb-card-work--flow .wb-card-work__history .wb-history__list {
        max-height: 320px;
    }
}