/*
    Лента карточек — одна строка с прокруткой вбок.

    Сетка на сотне анкет превращает страницу в ленту вниз длиной в десяток
    экранов: человек уходит вглубь и уже не может вернуться к тому, что видел
    в начале. Строка держит его на одном экране: сколько нужно, столько и
    пролистал.

    На телефоне это работает само — пальцем; на ноутбуке к ленте добавлены
    стрелки (js/card-strip.js): колесо там крутит страницу вниз, а не ленту
    вбок.
*/

.app-strip {
    position: relative;
}

/* Сама лента. display:flex вместо сетки — карточки идут подряд и уходят за
   правый край, а не переносятся на следующую строку. */
.app-strip .app-cards {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Место под тень карточек: без него нижняя тень срезается краем ленты. */
    padding: 4px 2px 10px;
    /* Полосу прокрутки прячем: лента листается пальцем и стрелками, а серая
       черта под карточками читается как элемент оформления. */
    scrollbar-width: none;
}

.app-strip .app-cards::-webkit-scrollbar { display: none; }

/* Карточка не сжимается: во flex-строке она иначе ужимается до нитки, чтобы
   поместились все. Ширина задана здесь, а не сеткой, — лента шире экрана по
   замыслу.

   Ширина подобрана так, чтобы на телефоне за двумя карточками у края всегда
   выглядывала третья. При 44vw две вставали ровно по ширине колонки, ряд
   выходил без хвоста и читался как «здесь всё» — листать никто не пробовал. */
.app-strip .app-card {
    flex: 0 0 clamp(140px, 40vw, 190px);
    scroll-snap-align: start;
}

/* На телефоне лента идёт до самых краёв экрана, а не по колонке текста.
   Обрезанная краем карточка — самый сильный намёк на продолжение: она уходит
   под край, как страница книги, и рука тянется её вытащить. Отступ, снятый
   полем, возвращается изнутри, чтобы первая карточка стояла ровно под
   заголовком. */
@media (max-width: 760px) {
    .app-strip .app-cards {
        margin-left: -4vw;
        margin-right: -4vw;
        padding-left: 4vw;
        padding-right: 4vw;
        /* Чтобы прилипание не прятало карточку под левым краем. */
        scroll-padding-left: 4vw;
    }
}

/* Полоса под лентой: где мы в списке и сколько его видно.

   На телефоне ни стрелок, ни полосы прокрутки нет, и ровный ряд карточек
   читается как «здесь всё» — листать никто не пробует. Полоса говорит сразу
   две вещи: список длиннее экрана и вот эта его часть перед глазами. */
.strip-progress {
    position: relative;
    height: 4px;
    margin: 2px 2px 6px;
    border-radius: 999px;
    background: rgba(124, 58, 237, .12);
}

.strip-progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, #7C3AED, #DB2777);
    transition: left .12s linear;
}

/* Затухание у правого края: обрезанная карточка под мягким краем читается как
   «дальше есть ещё», а не как обрезанная вёрстка. Слева не гасим — там начало
   списка, и оно должно быть чётким. */
.app-strip .app-cards {
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

/* Дошли до конца — гасить нечего: маска у последней карточки выглядела бы
   обрывом там, где список кончился. */
.app-strip .app-cards.is-at-end {
    mask-image: none;
    -webkit-mask-image: none;
}

/* Стрелки. Только на широком экране: на телефоне листают пальцем, и кнопка
   поверх карточек там отнимает у лица место. */
.strip-arrow { display: none; }

@media (min-width: 761px) {
    .app-strip .app-card { flex-basis: 210px; }

    .strip-arrow {
        display: flex;
        position: absolute;
        top: 38%;
        transform: translateY(-50%);
        z-index: 2;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(124, 58, 237, .18);
        border-radius: 50%;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 4px 16px rgba(76, 29, 149, .16);
        color: var(--violet, #7C3AED);
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        transition: opacity .15s ease;
    }

    .strip-arrow-prev { left: -6px; }
    .strip-arrow-next { right: -6px; }
    .strip-arrow:hover { background: #fff; }

    /* У края кнопка гаснет, но остаётся на месте: исчезающая дёргает соседей
       и перебрасывает ленту прямо под курсором. */
    .strip-arrow.is-off { opacity: .25; pointer-events: none; }
}