/* ============================================
   MOBILE SECTIONS — ≤991px
   All mobile sections live in `.mobile-sections`
   and replace the desktop `.container` content.
   ============================================ */

/* ── По умолчанию мобильные секции скрыты ── */
.mobile-sections {
    display: none;
}

/* ── Точка перелома: ≤991px ── */
@media (max-width: 991px) {

    /* Скрываем десктопный контейнер */
    .container {
        display: none !important;
    }

    /* Показываем мобильные секции */
    .mobile-sections {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* ── Общий стиль мобильной секции ── */
    .mob-section {
        position: relative;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .mob-section .mob-bg {
        position: relative;
        width: 100%;
    }

    .mob-section .mob-bg img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* ── Reveal-анимации для мобильных секций ── */
    .mob-section .mob-bg {
        opacity: 0;
        transition: opacity 0.6s var(--ease-reveal);
    }

    .mob-section.visible .mob-bg {
        opacity: 1;
    }


    /* ── Мобильные заглушки ── */
    .mob-placeholder {
        padding: 60px 20px;
        background: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
    }

    .mob-placeholder .placeholder-box {
        border: 2px dashed #A98058;
        padding: 30px;
        color: #A98058;
        text-align: center;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .mob-placeholder .placeholder-box h2 {
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }

    /* ════════════════════════════════════════
       MOBILE CALCULATOR
       ════════════════════════════════════════ */

    .mob-calculator {
        background: var(--color-bg);
        padding: 40px 20px 30px;
    }

    /* ── Заголовок ── */
    .mob-calc__title {
        font-family: var(--font-primary);
        font-weight: 300;
        font-size: 32px;
        letter-spacing: 0.15em;
        color: #fff;
        text-align: center;
        margin: 0 0 4px;
        text-transform: uppercase;
    }

    .mob-calc__subtitle {
        font-family: var(--font-primary);
        font-weight: 400;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
        margin: 0 0 28px;
        letter-spacing: 0.05em;
    }

    /* ── Блок с лейблом ── */
    .mob-calc__block {
        margin-bottom: 20px;
    }

    .mob-calc__label {
        display: block;
        font-family: var(--font-primary);
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 14px;
        letter-spacing: 0.02em;
    }

    /* ── Разделитель ── */
    .mob-calc__divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, rgba(169, 128, 88, 0.5) 0%, rgba(169, 128, 88, 0.1) 100%);
        margin: 20px 0;
    }

    /* ── Кастомный Radio ── */
    .mob-calc__radio {
        display: inline-block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        background: transparent;
        flex-shrink: 0;
        position: relative;
        transition: border-color 0.2s ease;
        box-sizing: border-box;
    }

    .mob-calc__radio::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #a98058;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.2s ease;
    }

    /* ── Цвет: 2×2 Grid ── */
    .mob-calc__color-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .mob-calc__color-item {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mob-calc__color-item img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 6px;
        border: 2px solid transparent;
        transition: border-color 0.2s ease;
        box-sizing: border-box;
    }

    .mob-calc__radio-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-primary);
        font-size: 15px;
        color: #fff;
        letter-spacing: 0.02em;
    }

    /* ── Активное состояние цвета ── */
    .mob-calc__color-item.active img {
        border-color: #a98058;
    }

    .mob-calc__color-item.active .mob-calc__radio {
        border-color: #a98058;
    }

    .mob-calc__color-item.active .mob-calc__radio::after {
        transform: translate(-50%, -50%) scale(1);
    }

    /* ── Тип: горизонтальный ряд ── */
    .mob-calc__type-row {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .mob-calc__type-item {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-primary);
        font-size: 15px;
        color: #fff;
        letter-spacing: 0.02em;
    }

    .mob-calc__type-item.active .mob-calc__radio {
        border-color: #a98058;
    }

    .mob-calc__type-item.active .mob-calc__radio::after {
        transform: translate(-50%, -50%) scale(1);
    }

    /* ── Размер: 2×2 Grid ── */
    .mob-calc__size-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 20px;
    }

    .mob-calc__size-item {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-primary);
        font-size: 15px;
        color: #fff;
        letter-spacing: 0.02em;
    }

    .mob-calc__size-item.active .mob-calc__radio {
        border-color: #a98058;
    }

    .mob-calc__size-item.active .mob-calc__radio::after {
        transform: translate(-50%, -50%) scale(1);
    }

    /* ── Превью ── */
    .mob-calc__preview {
        margin: 24px 0;
    }

    .mob-calc__preview img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }

    /* ── Футер и разделитель ── */
    .mob-calc__divider-svg {
        margin-top: 33px;
        margin-bottom: 12px;
        display: block;
        width: 100%;
    }

    .mob-calc__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .mob-calc__price-block {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .mob-calc__price-label {
        font-family: var(--font-primary);
        font-weight: 400;
        font-size: 11px;
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
    }

    .mob-calc__price {
        font-family: var(--font-primary);
        font-weight: 400;
        font-size: 24px;
        line-height: 67%;
        letter-spacing: 0.1em;
        color: #fff;
        white-space: nowrap;
    }

    .mob-calc__order-btn {
        font-family: var(--font-primary);
        font-weight: 400;
        font-size: 14px;
        letter-spacing: 0.05em;
        color: #fff;
        background: #a98058;
        border: 1.45px solid #f6b66b;
        border-radius: 58px;
        padding: 0;
        width: 171px;
        height: 41px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        cursor: pointer;
    }

    .mob-calc__order-btn:hover {
        background: #b8905f;
    }

    .mob-calc__order-btn:active {
        transform: scale(0.97);
    }

    /* ════════════════════════════════════════
       MOB SECTION 15 — CTA: Создайте панно TRIO
       ════════════════════════════════════════ */

    .mob-cta {
        background: var(--color-bg);
        padding: 0;
        position: relative;
    }

    .mob-cta__image {
        width: 100%;
        overflow: hidden;
    }

    .mob-cta__image img {
        display: block;
        width: 100%;
        height: auto;
    }

    .mob-cta__content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 20px 60px;
    }

    .mob-cta__title {
        font-family: var(--font-primary);
        font-weight: 700;
        font-size: 24px;
        line-height: 110%;
        text-align: center;
        color: #e8d6ac;
        margin: 0 0 35px;
    }

    .mob-cta__btn {
        font-family: var(--font-primary);
        font-weight: 400;
        font-size: 14px;
        line-height: 120%;
        color: #fff;
        border: 1.45px solid #f6b66b;
        border-radius: 58px;
        padding: 15px 34px;
        background: #a98058;
        box-sizing: border-box;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        transition: background 0.3s ease, transform 0.15s ease;
    }

    .mob-cta__btn:hover {
        background: #b8905f;
    }

    .mob-cta__btn:active {
        transform: scale(0.97);
    }

    /* ── Reveal animation for mob-cta ── */
    .mob-cta .mob-cta__image {
        opacity: 0;
        transition: opacity 0.6s var(--ease-reveal);
    }

    .mob-cta.visible .mob-cta__image {
        opacity: 1;
    }

    .mob-cta .mob-cta__content {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.6s var(--ease-reveal) 0.15s,
            transform 0.6s var(--ease-reveal) 0.15s;
    }

    .mob-cta.visible .mob-cta__content {
        opacity: 1;
        transform: translateY(0);
    }

    /* ════════════════════════════════════════
       MOB SECTION 16 — Download Cards
       ════════════════════════════════════════ */

    .mob-downloads {
        background: var(--color-bg);
        padding: 0 20px 40px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .mob-dl-card {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        /* Reset for button variant */
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
        text-align: left;
        font: inherit;
        color: inherit;
        width: 100%;
    }

    .mob-dl-card__image {
        width: 100%;
        overflow: hidden;
        border-radius: 2px;
    }

    .mob-dl-card__image img {
        display: block;
        width: 100%;
        height: auto;
    }

    .mob-dl-card__info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 16px;
    }

    .mob-dl-card__text {
        font-family: var(--font-primary);
        font-weight: 400;
        font-size: 14px;
        line-height: 120%;
        letter-spacing: 0.1em;
        color: #fff;
    }

    .mob-dl-card__link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-primary);
        font-weight: 700;
        font-size: 14px;
        line-height: 120%;
        letter-spacing: 0.1em;
        color: #a98058;
        text-decoration: none;
        white-space: nowrap;
    }

    /* ── Reveal animation for mob-downloads ── */
    .mob-downloads .mob-dl-card {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s var(--ease-reveal),
            transform 0.6s var(--ease-reveal);
    }

    .mob-downloads.visible .mob-dl-card {
        opacity: 1;
        transform: translateY(0);
    }

    .mob-downloads.visible .mob-dl-card:nth-child(2) {
        transition-delay: 0.12s;
    }

    /* ════════════════════════════════════════
       MOB SECTION 18 — Слайдер (Swiper)
       ════════════════════════════════════════ */

    .mob-slider {
        margin: 23px 0 63px 0;
        background: transparent;
        overflow: hidden;
        /* Swiper сам управляет переполнением */
    }

    .mob-slider__controls {
        display: flex;
        gap: 30px;
        padding-left: 20px;
        margin-bottom: 15px;
    }

    .mob-slider__btn {
        background: transparent;
        border: none;
        padding: 15px;
        margin: -15px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Специфичные стили для Swiper, чтобы показать края соседних слайдов */
    .mob-swiper {
        width: 100%;
        overflow: visible;
        /* Позволяем видеть соседние слайды за пределами основного контейнера, если нужно */
    }

    .mob-slider__slide {
        /* Ширина задается через JS (slidesPerView: 1.2), но можно задать через CSS для auto */
        box-sizing: border-box;
        border-radius: 4px;
        overflow: hidden;
    }

    .mob-slider__slide img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 4px;
    }
}