/* =========================================================
   БЛОК 3: ДОГЛЯД ПІСЛЯ ПРОЦЕДУРИ (Слайдер на мобилке)
========================================================= */
.aftercare-lumenis-container {
    margin: 40px 0;
    font-family: inherit;
    /* Если включен слайдер, overflow будет управляться самим Swiper */
}

.aftercare-lumenis-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.aftercare-lumenis-intro {
    text-align: center;
    font-size: 16px;
    margin-bottom: 40px;
    line-height: 1.5;
    color: #555;
}

/* На ПК и Планшете это обычная CSS Grid сетка */
.aftercare-lumenis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.aftercare-lumenis-item {
    background-color: #f7f9fa; /* Светло-серый фон карточки */
    border-radius: 30px;
    padding: 30px 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    height: 100%; /* Чтобы все карточки были одной высоты в Grid */
    max-height: 455px;
}

.aftercare-lumenis-image {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover;
    flex-shrink: 0;
}

.aftercare-lumenis-text {
    font-size: 18px;
    letter-spacing: -0.8px;
    line-height: 1.4;
    color: #333;
}

.aftercare-lumenis-outro {
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: #555;
}

/* Прячем элементы пагинации Swiper на ПК и планшете, так как там не слайдер */
.aftercare-lumenis-pagination {
    display: none;
}


.aftercare-lumenis-intro-wrap,.aftercare-lumenis-outro-wrap{
    font-size: 18px;
    text-align: center;
}
.aftercare-lumenis-intro-wrap{padding-bottom: 30px;}
.aftercare-lumenis-outro-wrap{padding-top: 30px;}

/* АДАПТИВНОСТЬ (Догляд) */



/* Планшеты (от 768px до 991px): 1 колонка (карточки друг под другом, как на скрине) */
@media (max-width: 991px) {
    .aftercare-lumenis-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        /* На планшете не используем слайдер, просто сетка из 1 колонки */
    }
}

/* Мобильные телефоны (до 767px): Включается логика слайдера */
@media (max-width: 767px) {
    /* Удален overflow: hidden, так как он обрезал схлопнувшуюся высоту флексбоксов */

    .aftercare-lumenis-title {
        font-size: 22px;
    }

    .aftercare-lumenis-intro {
        font-size: 15px;
    }

    /* Отключаем Grid на мобилке, чтобы Owl Carousel мог построить свою разметку */
    .aftercare-lumenis-grid {
        display: block;
        margin-bottom: 10px;
    }

    .aftercare-lumenis-item {
        padding: 15px;
        gap: 15px;
        width: 100%;
        height: auto; /* Сбрасываем 100% высоту, чтобы карточка тянулась по контенту */
        box-sizing: border-box;

    }

    .aftercare-lumenis-image {
        width: 80px !important;
        height: 80px !important;
    }

    /* =========================================================================
       НАТИВНЫЙ CSS СЛАЙДЕР ДЛЯ МОБИЛЬНЫХ (БЕЗ OWL CAROUSEL)
       ========================================================================= */
    /* Скрываем нативный скроллбар */
    .my-aftercare-blocks::-webkit-scrollbar {
        display: none;
    }

    /* Стили для кастомных точек */
    .native-slider-dots {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .native-dot {
        padding: 5px;
        cursor: pointer;
    }
    .native-dot span {
        width: 10px;
        height: 10px;
        margin: 0 2px;
        background: #D6D6D6;
        display: block;
        transition: opacity 200ms ease, background 200ms ease;
        border-radius: 30px;
    }
    .native-dot.active span {
        background: #0077b5 !important;
    }
}

/* Применяем Scroll Snap на мобилке (до 767px включительно) */
@media (max-width: 767px) {
    .aftercare-lumenis-grid.my-aftercare-blocks {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
        gap: 15px;
        padding-bottom: 5px; /* чтобы не обрезалась тень */
    }
    .aftercare-lumenis-grid.my-aftercare-blocks .aftercare-lumenis-item {
        flex: 0 0 100%; /* Карточка занимает всю ширину контейнера */
        scroll-snap-align: start;
        width: 100px !important;
    }
}