/* Шаг 1 конфигуратора (6.3б, PDL-60): модели, двигатель / коробка / привод, комплектации, индикатор опций.
   Перенос CSS блока U3 (landing/docs/tilda-blocks/Ver_4_dev/u3-card-sliders.html:3–625) почти без изменений;
   убраны скелетон (данные приходят в странице) и правила под Tilda. Значения посчитаны под border-box. */
.uc-cards-block, .uc-cards-block *, .uc-cards-block *::before, .uc-cards-block *::after {
    box-sizing: border-box;
}

/* ================================================================
   ОБЩИЙ КОНТЕЙНЕР
================================================================ */
.uc-cards-block {
    padding: 45px 0;
    font-family: Arial, sans-serif;
}
.configurator {
    max-width: min(1000px, 85vw);
    margin: 0 auto;
}

@media (max-width: 640px) {
    .configurator { padding: 0 8px; max-width: 100%; }
    .uc-cards-block { padding-top: 30px; }
    .sec-label { font-size: 20px; }
}

/* ================================================================
   МЕТКА СЕКЦИИ
================================================================ */
.sec-label {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #111;
    text-transform: none;
    margin-bottom: 16px;
}

/* ================================================================
   БЛОК МОДЕЛИ — ДЕСКТОП (карусель)
================================================================ */
.carousel-wrap {
    position: relative;
    padding: 0 44px;
    margin-bottom: 32px;
}
.carousel-arrow {
    position: absolute;
    top: 66px; /* вертикальный центр изображения 132px */
    transform: translateY(-50%);
    width: 32px;
    height: 40px;
    border-radius: 8px;
    border: 0.5px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #111;
    z-index: 2;
    transition: border-color 0.15s;
}
.carousel-arrow:hover { border-color: #bbb; }
.carousel-arrow.prev { left: 0; }
.carousel-arrow.next { right: 0; }
.carousel-row {
    display: flex;
    justify-content: center;
}
.carousel-slot {
    flex: 1;
    text-align: center;
    opacity: 0.38;
    cursor: pointer;
    transition: opacity 0.2s;
    padding: 0 6px;
    box-sizing: border-box;
}
.carousel-slot.active {
    opacity: 1;
    cursor: default;
}
.carousel-slot img {
    width: 100%;
    height: 132px;
    object-fit: contain;
    display: block;
}
.carousel-name {
    font-size: 16px;
    color: #888;
    margin-top: 6px;
    line-height: 1.3;
}
.carousel-slot.active .carousel-name {
    color: #111;
    font-weight: 700;
}

/* ================================================================
   БЛОК МОДЕЛИ — МОБАЙЛ (≤640px)
================================================================ */
.m-hero {
    display: none;
    margin-bottom: 20px;
    box-sizing: border-box;
}
.m-hero-img-wrap {
    position: relative;
    width: 100%;
}
/* Swiper внутри hero */
.uc-model-swiper {
    width: 100%;
    overflow: hidden;
}
.uc-model-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
}
.m-hero-img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: contain;
    display: block;
}
.m-img-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 36px;
    border: 0.5px solid #e0e0e0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255,255,255,0.85);
    color: #111;
    font-size: 13px;
    z-index: 2;
}
.m-img-btn.prev { left: 4px; }
.m-img-btn.next { right: 4px; }
.m-model-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
}
.m-model-dot {
    height: 4px;
    border-radius: 2px;
    background: #e0e0e0;
    transition: all 0.2s;
    width: 4px;
}
.m-model-dot.active { background: #111; width: 16px; }

@media (max-width: 640px) {
    .carousel-wrap { display: none; }
    .m-hero { display: block; }
    /* Названия моделей — между фото и точками пагинации (как в макете) */
    .m-hero-names-vp {
        overflow: hidden;
        height: 18.5px;
        /* Отступы внутренние, а не внешние. Место в потоке остаётся
           прежним — 18.5 + 12 + 12 = 42.5px, — но зоной касания
           становится вся эта высота вместо одной лишь полосы текста.
           Ориентир: WCAG 2.2 SC 2.5.8 требует минимум 24×24 CSS px,
           Apple HIG рекомендует 44×44 pt.

           Поля соседей не схлопываются: у .m-hero-img-wrap нижнего
           margin нет, у .m-model-dots вместо margin — padding. */
        padding: 12px 0;
        /* Задано явно: .m-hero-names-vp лежит внутри .uc-cards-block, на
           который этот блок распространяет box-sizing: border-box (см.
           шапку файла). При border-box height вместе с padding схлопнул
           бы содержимое в отрицательную высоту. */
        box-sizing: content-box;
        /* Вертикальную прокрутку страницы браузер оставляет себе, а
           горизонталь отдаёт обработчику свайпа. Благодаря этому жест
           не требует preventDefault и не ломает скролл. */
        touch-action: pan-y;
        width: 100%;
    }
    .m-hero-names-strip {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 18px;
        transition: transform 0.32s ease;
        width: 100%;
    }
    .m-hero-name-prev,
    .m-hero-name-next {
        font-size: 16px;
        font-weight: 500;
        color: #ccc;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        flex: 1 1 0;
        min-width: 0;
    }
    .m-hero-name-prev {
        text-align: right;
        mask-image: linear-gradient(to left, black 40%, transparent 100%);
        -webkit-mask-image: linear-gradient(to left, black 40%, transparent 100%);
    }
    .m-hero-name-next {
        text-align: left;
        mask-image: linear-gradient(to right, black 40%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 40%, transparent 100%);
    }
    .m-hero-name-cur {
        font-size: 16px;
        font-weight: 700;
        color: #111;
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

/* ================================================================
   BRIDGE — разделитель секций внутри объединённого шага
================================================================ */
.bridge {
    padding: 12px 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.bridge-bar {
    width: 3px;
    height: 18px;
    background: #1a1a1a;
    border-radius: 2px;
    flex-shrink: 0;
}
.bridge-text {
    font-size: 18px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ================================================================
   КОНФИГУРАЦИЯ: двигатель / коробка / привод
================================================================ */
.plabel {
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #888;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    margin-bottom: 32px;
}
.config-col {
    padding: 0 28px;
    box-sizing: border-box;
}
.config-col:not(:last-child) { border-right: 0.5px solid #efefef; }

/* ---- Тайлы (замена uc-pill) ---- */
.uc-row { display: flex; gap: 8px; }
.uc-row--wrap { flex-wrap: wrap; }

.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 15px;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    flex: 1;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}
.uc-row--wrap .tile { flex: 0 0 calc(50% - 4px); }

.tile-icon {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    box-sizing: border-box;
}

/* Акцентный цвет шагов 1 и 2 — общий с плашкой под шапкой и кнопками
   «ДАЛЕЕ →». Рамка совпадает с заливкой, иначе вокруг плитки проступил
   бы контур; галочка на белом квадратике держит тот же тон. */
.tile--selected {
    border: 1.5px solid #51565C;
    background: #51565C;
    color: #fff;
    font-weight: 600;
}
.tile--selected .tile-icon { background: #fff; color: #51565C; }

.tile--available {
    border: 1.5px solid #d0d0d0;
    background: #fff;
    color: #1a1a1a;
    font-weight: 400;
}
.tile--available .tile-icon { background: #fff; border: 1.5px solid #c9c9c9; }
.tile--available:hover { border-color: #888; background: #f8f8f8; }

.tile--unavailable {
    border: 1.5px solid #ececec;
    background: #f7f7f7;
    color: #bbb;
    cursor: not-allowed;
    font-weight: 400;
}
.tile--unavailable .tile-icon { background: #ececec; border: 1px solid #e2e2e2; color: #bbb; }

/* ================================================================
   КОМПЛЕКТАЦИИ + ИНДИКАТОР ОПЦИЙ
================================================================ */
.trims-block { padding: 0 28px; }
/* 32px — тот же шаг между блоками, что у .carousel-wrap и .config-grid.
   Раньше этот отступ отделял ряд комплектаций от индикатора опций;
   теперь под ним заголовок «Опции», и 32px отделяют секцию от
   следующего .bridge — ровно как в макете opcii-makety.html.
   С внутрисекционным отступом .bridge (16px) не равняемся намеренно:
   между секциями зазор и должен быть шире. */
.trims-row { margin-bottom: 32px; }

/* Обёртка секции «Опции». Отступ тот же, что у .trims-block, — иначе
   индикатор и кнопки разъехались бы с плитками по левому краю.
   Скоупим под корень блока: правило про склейку CSS всех блоков в один
   документ (CLAUDE.md). Соседние правила остались нескоупленными
   исторически, в новом коде это не повторяем. */
.uc-cards-block .opts-block { padding: 0 28px; }

/* Комплектации всегда в одну строку: N тайлов делят ширину поровну.
   flex-basis: 0 + min-width: 0 — иначе тайл не сожмётся ниже своего текста
   и ряд переполнится вместо равного деления. Пересчитывается браузером
   при каждой перерисовке ряда, фиксированных ширин нет. */
.trims-row .uc-row { flex-wrap: nowrap; }
.trims-row .tile {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.opts-indicator {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 16px;
    border: 1px solid #ececec;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 36px;
    transition: border-color 0.15s;
}
.opts-indicator:hover { border-color: #d0d0d0; }

/* На десктопе .opts-top «растворяется», а его дети становятся
   flex-элементами .opts-indicator и раскладываются через order. */
.opts-top { display: contents; }

.opts-indicator-text {
    font-size: 14px;
    color: #1a1a1a;
    white-space: nowrap;
    order: 1;
}
.opts-bar {
    flex: 1;
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
    order: 2;
}
.opts-bar-fill {
    height: 100%;
    width: 0;
    background: #3B6D11;
    border-radius: 3px;
}
.opts-indicator-show {
    font-size: 13px;
    color: #888;
    white-space: nowrap;
    order: 3;
}

/* ================================================================
   NAV-КНОПКИ «← НАЗАД» и «ДАЛЕЕ →»

   Скоуп под .uc-cards-block: шаг 2 (gallery.css) объявляет те же классы,
   свойства перечислены явно. «← НАЗАД» слева, «ДАЛЕЕ →» справа.
================================================================ */
.uc-cards-block .uc-quiz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
}
.uc-cards-block .uc-quiz-btn-back {
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    border-radius: 6px;
    cursor: pointer;
    padding: 13px 24px;
    background: transparent;
    color: #1a1a1a;
    border: 0.5px solid #d0d0d0;
    white-space: nowrap;
}
.uc-cards-block .uc-quiz-btn-back:hover {
    border-color: #888888;
    background: #f8f8f8;
}
.uc-cards-block .uc-quiz-btn-next {
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    border-radius: 6px;
    cursor: pointer;
    padding: 13px 32px;
    background: var(--uc-btn-next-bg, #2D5467);
    color: #ffffff;
    border: none;
    white-space: nowrap;
}
/* --uc-btn-next-bg / --uc-btn-next-bg-hover ставит шаблон site.html из оформления марки.

   Hover светлее базового на +10.4 пункта светлоты (та же дельта, что была
   у пары #1a1a1a → #333333); тон и насыщенность базового сохранены.
   Цвет кнопки намеренно отвязан от акцента #51565C плашки и плиток. */
.uc-cards-block .uc-quiz-btn-next:hover { background: var(--uc-btn-next-bg-hover, #3C728D); }

/* ================================================================
   МОБАЙЛ: вертикальный стек + скролл-ряды с фейдами
   (паттерн фейдов — как в .modif-scroll-wrap)
================================================================ */
.uc-scroll-wrap { position: relative; }

@media (max-width: 640px) {
    .bridge { padding: 10px 18px; margin-bottom: 14px; }
    .bridge-bar { height: 16px; }
    .bridge-text { font-size: 16px; }

    /* .config-grid → .m-selectors: вертикальный стек */
    .config-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 0 18px;
        margin-bottom: 24px;
    }
    .config-col { padding: 0; }
    .config-col:not(:last-child) { border-right: none; }
    .plabel { font-size: 13px; margin-bottom: 8px; }

    /* Скролл-ряд вместо wrap-сетки */
    .uc-row {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .uc-row::-webkit-scrollbar { display: none; }
    .uc-row--wrap { flex-wrap: nowrap; }
    .uc-row .tile,
    .uc-row--wrap .tile,
    .trims-row .tile {
        flex: 0 0 auto;
        min-width: auto;
        padding: 8px 12px;
        font-size: 15px;
    }

    /* Фейды по краям скролл-рядов */
    .uc-scroll-wrap::before,
    .uc-scroll-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        width: 19px;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        transition: opacity 0.18s;
        opacity: 0;
    }
    .uc-scroll-wrap::before {
        left: 0;
        background: linear-gradient(to left, transparent, #fff);
    }
    .uc-scroll-wrap::after {
        right: 0;
        background: linear-gradient(to right, transparent, #fff);
    }
    .uc-scroll-wrap.show-left::before  { opacity: 1; }
    .uc-scroll-wrap.show-right::after  { opacity: 1; }

    .trims-block { padding: 0 18px; }
    .uc-cards-block .opts-block { padding: 0 18px; }
    /* 24px — мобильный шаг между блоками, тот же, что у .config-grid
       выше. Прежние 12px были вдвое теснее всего окружения. */
    .trims-row { margin-bottom: 24px; }

    /* Индикатор опций: две строки */
    .opts-indicator {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 14px;
        margin-bottom: 36px;
    }
    .opts-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .opts-indicator-text { font-size: 12px; order: 0; }
    .opts-indicator-show { font-size: 11px; order: 0; }
    .opts-bar { flex: none; width: 100%; order: 0; }

    /* Две кнопки в ряд, как на шаге 2. display:block + width:100% тут
       стояли под единственную кнопку; с двумя они дали бы стек во всю
       ширину. Обе кнопки — auto-ширины с nowrap, на 320px помещаются. */
    .uc-cards-block .uc-quiz-btn-back { padding: 13px 18px; }
    .uc-cards-block .uc-quiz-btn-next { padding: 13px 18px; }
}