/* =========================================
   ГАЛЕРЕЯ ПРОЕКТА
========================================= */

.morefx-project-gallery {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
}


/* Главная картинка */

.morefx-project-gallery__main {
    position: relative;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0;

    border-radius: 16px;
    background: #eeeeee;
}

.morefx-project-gallery__main-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 1;
    transform: scale(1);

    transition:
        opacity 0.18s ease,
        transform 0.35s ease;
}

.morefx-project-gallery__main-image.is-changing {
    opacity: 0;
    transform: scale(1.01);
}


/* Миниатюры */

.morefx-project-gallery__thumbs {
    display: grid;
    grid-auto-flow: column;

    /*
     * Одновременно видны три миниатюры.
     * Остальные прокручиваются горизонтально.
     */
    grid-auto-columns: calc((100% - 12px) / 3);

    gap: 6px;
    margin-top: 6px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.morefx-project-gallery__thumbs::-webkit-scrollbar {
    display: none;
}


/* Кнопка-миниатюра */

.morefx-project-gallery__thumb {
    position: relative;

    display: block;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;

    border: 0;
    border-radius: 12px;

    background: #eeeeee;
    cursor: pointer;

    scroll-snap-align: start;

    appearance: none;
    -webkit-appearance: none;
}

.morefx-project-gallery__thumb::after {
    content: "";

    position: absolute;
    inset: 0;

    border: 2px solid transparent;
    border-radius: inherit;

    pointer-events: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.morefx-project-gallery__thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.35s ease,
        opacity 0.2s ease;
}

.morefx-project-gallery__thumb:hover img {
    transform: scale(1.035);
}

.morefx-project-gallery__thumb.is-active::after {
    border-color: #FA4B05;
    background: rgba(250, 75, 5, 0.04);
}

.morefx-project-gallery__thumb:not(.is-active) img {
    opacity: 0.88;
}

.morefx-project-gallery__thumb:focus-visible {
    outline: 3px solid rgba(250, 75, 5, 0.28);
    outline-offset: 3px;
}


/* Точки */

.morefx-project-gallery__dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;
    margin-top: 14px;
}

.morefx-project-gallery__dot {
    width: 8px;
    height: 8px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #dddddd;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.morefx-project-gallery__dot:hover {
    background: #bdbdbd;
}

.morefx-project-gallery__dot.is-active {
    background: #FA4B05;
    transform: scale(1.12);
}

.morefx-project-gallery__dot:focus-visible {
    outline: 3px solid rgba(250, 75, 5, 0.28);
    outline-offset: 3px;
}


/* Планшеты */

@media (max-width: 1024px) {

    .morefx-project-gallery__main {
        border-radius: 14px;
    }

    .morefx-project-gallery__thumb {
        border-radius: 10px;
    }
}


/* Телефоны */

@media (max-width: 783px) {

    .morefx-project-gallery__main {
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }

    .morefx-project-gallery__thumbs {
        grid-auto-columns: calc((100% - 8px) / 3);
        gap: 4px;
        margin-top: 4px;
    }

    .morefx-project-gallery__thumb {
        border-radius: 8px;
    }

    .morefx-project-gallery__dots {
        gap: 10px;
        margin-top: 12px;
    }

    .morefx-project-gallery__dot {
        width: 7px;
        height: 7px;
    }
}
/* Расстояние между большой картинкой и миниатюрами */
.morefx-project-gallery .morefx-project-gallery__main {
    margin: 0 !important;
}

.morefx-project-gallery .morefx-project-gallery__thumbs {
    margin-top: 6px !important;
}

/* =========================================
   УСЛУГА: ТЕКСТОВАЯ КАРТОЧКА + ГАЛЕРЕЯ
========================================= */

/*
 * Растягиваем обе колонки Row Layout
 * до высоты самой высокой колонки.
 */
.service-showcase > .kt-row-column-wrap {
    align-items: stretch !important;
}


/*
 * Обе колонки становятся flex-контейнерами.
 */
.service-showcase > .kt-row-column-wrap > .wp-block-kadence-column {
    display: flex !important;
    flex-direction: column;
}


/*
 * Внутренняя оболочка каждой колонки
 * занимает всю доступную высоту.
 */
.service-showcase
> .kt-row-column-wrap
> .wp-block-kadence-column
> .kt-inside-inner-col {
    width: 100%;
    height: 100%;
}


/*
 * Левая карточка растягивается
 * до высоты галереи.
 */
.service-showcase__card {
    height: 100%;
}


/*
 * Внутреннее содержимое карточки:
 * верх, середина и кнопка распределяются
 * по всей высоте.
 */
.service-showcase__card > .kt-inside-inner-col {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;

    height: 100%;
    min-height: 100%;

    padding: 40px 32px;
}


/*
 * Убираем лишние стандартные отступы
 * у смысловых групп.
 */
.service-showcase__head,
.service-showcase__body {
    margin: 0;
}


/*
 * Расстояние между номером и заголовком.
 */
.service-showcase__head {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


/*
 * Расстояние между описанием и списком.
 */
.service-showcase__body {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Галерея становится опорой для точек */
.morefx-project-gallery {
    position: relative;
}

/* Точки выводим за пределы высоты галереи */
.morefx-project-gallery__dots {
    position: absolute;

    top: 100%;
    left: 0;
    right: 0;

    margin-top: 12px;

    z-index: 5;
}

.anchor-section {
    scroll-margin-top: 110px;
}