/*DIRECTIONS*/
/* Общая ширина обоих рядов */
.directions-top,
.directions-bottom {
    width: 100%;
}

/* Верхние две карточки */
.directions-top > .kt-row-column-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.direction-large {
    aspect-ratio: 16 / 9;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.direction-large > .kt-inside-inner-col {
    width: 100%;
    height: 100%;
    min-height: 0 !important;

    display: flex;
    flex-direction: column;
}

/* Нижние четыре карточки */
.directions-bottom-main > .kt-row-column-wrap {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.directions-bottom-uslugi > .kt-row-column-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.direction-small {
    /* aspect-ratio: 4 / 3; */
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;
}

.direction-small > .kt-inside-inner-col {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
}

/* =============================================
   Большие карточки направлений текст и градиент
   ============================================= */

.direction-large {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: none !important;
    background: transparent;
    isolation: isolate;
}

/* Блок изображения */
.direction-large__image {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    margin: 0 !important;
}

.direction-large__image,
.direction-large__image figure,
.direction-large__image img {
    width: 100%;
    height: 100%;
}

.direction-large__image figure {
    margin: 0 !important;
}

.direction-large__image img {
    display: block;
    object-fit: cover;
    object-position: center;

    transition: transform .6s cubic-bezier(.2,.65,.3,1);
}

/* Затемнение */
.direction-large::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(0,0,0,.20) 60%,
        rgba(0,0,0,.82) 100%
    );
}

/* Контент */
.direction-large__content {
    position: absolute !important;
    inset: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 28px 30px 24px;
    color: #fff;
}

/* Заголовок */
.direction-large__content h2 {
    margin: 0 0 8px;
    color: #fff;

    font-size: clamp(24px,2vw,32px);
    line-height: 1.1;
    font-weight: 500;

    /* одинаковая высота блока заголовка */
    min-height: 2.2em;
}

/* Описание */
.direction-large__content p {
    margin: 0;
    max-width: 430px;

    color: rgba(255,255,255,.86);

    font-size: clamp(14px,1vw,17px);
    line-height: 1.35;

    min-height: 2.8em;
}

/* Стрелка */
.direction-large__arrow {
    margin-top: 18px;

    color: #FA4B05;
    font-size: 28px;
    line-height: 1;

    transition:
        transform .25s ease,
        color .25s ease;
}

/* Hover */
@media (hover:hover) {

    .direction-large:hover .direction-large__image img {
        transform: scale(1.045);
    }

    .direction-large:hover .direction-large__arrow {
        transform: translateX(6px);
    }

}

/* Планшет */
@media (max-width: 1024px) {
    .directions-bottom > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Мобильный */
@media (max-width: 783px) {
    .directions-top > .kt-row-column-wrap,
    .directions-bottom > .kt-row-column-wrap {
        grid-template-columns: 1fr !important;
    }

    .direction-large {
        aspect-ratio: 4 / 3;
    }

    .direction-small {
        /* aspect-ratio: 16 / 9; */
    }


}
/* =========================================
   Маленькие карточки направлений
   Мобильная версия
   ========================================= */

@media (max-width: 1024px) {

    /* Карточки в одну колонку */
.directions-bottom > .kt-row-column-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

    .directions-bottom > .kt-row-column-wrap >
    .wp-block-kadence-column {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Внешняя Section-карточка */
    .directions-bottom .direction-small {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    /* Цветная область карточки */
    .directions-bottom
    .direction-small
    > .kt-inside-inner-col {

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 126px !important;

        gap: 20px !important;
        padding: 20px 22px !important;

        box-sizing: border-box;

        border: 1px solid transparent;
        border-radius: 18px;

        overflow: hidden;

        transition:
            border-color .25s ease,
            box-shadow .25s ease;
    }

    /* Обёртка блока Custom HTML */
    .direction-small
    > .kt-inside-inner-col
    > .wp-block-html {

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 52px !important;

        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Контейнер иконки внутри HTML */
    .direction-small .service-icon {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 48px !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .direction-small .service-icon svg {
        display: block;

        width: 100% !important;
        height: 100% !important;

        color: #7688a3;
    }

    /* Группа с заголовком и описанием */
    .direction-small
    > .kt-inside-inner-col
    > .image-overlay-text {

        display: flex !important;
        flex: 1 1 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;

        background: transparent !important;
    }

    /* Возможная внутренняя оболочка Group */
    .direction-small .image-overlay-text
    > .wp-block-group__inner-container {

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Заголовок */
    .direction-small .image-overlay-text h2,
    .direction-small .image-overlay-text h3,
    .direction-small .image-overlay-text
    .wp-block-heading {

        width: 100% !important;
        min-height: 0 !important;
        max-width: none !important;

        margin: 0 0 7px !important;
        padding: 0 !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;

        font-size: 20px !important;
        line-height: 1.15 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    /* Описание */
    .direction-small .image-overlay-text p {
        width: 100% !important;
        max-width: 360px !important;

        margin: 0 !important;
        padding: 0 !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;

        font-size: 14px !important;
        line-height: 1.4 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    /* Активное состояние в центре экрана */
    .direction-small.is-active
    > .kt-inside-inner-col {

        border-color: #fa4b05;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, .08);
    }
}


/* Узкие телефоны */

@media (max-width: 420px) {

    .directions-bottom
    .direction-small
    > .kt-inside-inner-col {

        min-height: 116px !important;

        gap: 16px !important;
        padding: 17px 18px !important;

        border-radius: 16px;
    }

    .direction-small
    > .kt-inside-inner-col
    > .wp-block-html {

        flex-basis: 44px !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    .direction-small .service-icon {
        width: 42px !important;
        height: 42px !important;
    }

    .direction-small .image-overlay-text h2,
    .direction-small .image-overlay-text h3,
    .direction-small .image-overlay-text
    .wp-block-heading {

        margin-bottom: 6px !important;
        font-size: 18px !important;
    }

    .direction-small .image-overlay-text p {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
}
/*Иконки*/
.service-icon svg {
    width: 56px;
    height: 56px;
    stroke: #718096;
}

@media (max-width: 783px) {

    .directions-bottom > .kt-row-column-wrap {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

@media (min-width: 784px) and (max-width: 1024px) {

    .directions-bottom
    .direction-small
    > .kt-inside-inner-col {
        min-height: 132px !important;
        gap: 16px !important;
        padding: 18px 20px !important;
    }

    .direction-small
    > .kt-inside-inner-col
    > .wp-block-html {
        flex: 0 0 44px !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    .direction-small .service-icon {
        width: 42px !important;
        height: 42px !important;
    }

    .direction-small .image-overlay-text h2,
    .direction-small .image-overlay-text h3,
    .direction-small .image-overlay-text .wp-block-heading {
        margin-bottom: 6px !important;
        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    .direction-small .image-overlay-text p {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
}


/* =========================================
   Анимация нижних карточек
   ========================================= */

/* Анимируем именно цветную внутреннюю часть */
.direction-small > .kt-inside-inner-col {
    border: 1px solid transparent;
    border-radius: 16px;

    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

    will-change: transform;
}


/* Десктоп: эффект при наведении */
@media (hover: hover) and (pointer: fine) {

    .direction-small:hover > .kt-inside-inner-col {
        border-color: #dad7c8;
        transform: translateY(-2px);

        box-shadow:
            0 10px 30px rgba(0, 0, 0, .08);
    }
}


/* Планшет и мобильный: тот же эффект через класс is-active */
@media (max-width: 1024px) {

    .direction-small.is-active > .kt-inside-inner-col {
        border-color: #dad7c8;
        transform: translateY(-2px);

        box-shadow:
            0 10px 30px rgba(0, 0, 0, .08);
    }
}

.direction-small {
    overflow: visible !important;
}