/* ==========================================================
   SERVICE AREA — BASE
========================================================== */

.tpservices2__icon svg {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 60px;

    fill: var(--tp-theme-color);
}

.tpservices2__icon img {
    display: block;

    width: auto;
    height: 60px;
    max-width: 100%;

    object-fit: contain;
}

.tpservices2__btn {
    position: relative;
    z-index: 4;

    background-color: var(--tp-secoundery-color);
}

.tp-services-area .tpservices2 {
    position: relative;

    box-shadow:
            rgba(0, 0, 0, .1)
            -25px 0 15px -12px;
}

/*
 * CTA kruh musí byť nad susednými kartami.
 */
.tp-services-area .tpservices2__link {

    z-index: 5;
}

.tp-services-area .tpservices2__animation-wrap {
    position: relative;
    z-index: 1;
}

/*
 * Pri hoveri karta aj CTA vystúpia nad ostatné.
 */
.tp-services-area .tpservices2__animation-wrap:hover {
    z-index: 6;
}


/* ==========================================================
   LIGHT VARIANT
========================================================== */

.light.tp-services-area {
    padding: 120px 0;

    background-color: var(--tp-gray-color);

    box-shadow:
            inset 0 10px 35px rgba(22, 26, 49, .12),
            inset 0 -10px 35px rgba(255, 255, 255, .025);
}

.light.tp-services-area .tpservices2 {
    background-color: #fff;
}

.light.tp-services-area .tpservices2:hover {
    background-color: var(--tp-secoundery-color);
}

.light.tp-services-area .tpservices2__link,
.light.tp-services-area .tpservices2__link::before,
.light.tp-services-area .tpservices2__link::after {
    background-color: var(--tp-gray-color);
}


/* ==========================================================
   DARK VARIANT
========================================================== */

.dark.tp-services-area {
    padding: 120px 0;

    background-color: var(--tp-theme-color);

    box-shadow:
            inset 0 10px 35px rgba(0, 0, 0, .12),
            inset 0 -10px 35px rgba(0, 0, 0, .025);
}

.dark.tp-services-area h2 {
    color: #fff;
}

.dark.tp-services-area .tpservices2 {
    background-color: #fff;
}

.dark.tp-services-area .tpservices2:hover {
    background-color: var(--tp-secoundery-color);
}

.dark.tp-services-area .tpservices2__link,
.dark.tp-services-area .tpservices2__link::before,
.dark.tp-services-area .tpservices2__link::after {
    background-color: var(--tp-theme-color);
}


/* ==========================================================
   SERVICES HEADING
========================================================== */

.tp-services-heading {
    position: relative;
    z-index: 8;

    margin-bottom: 65px;
}

/*
 * CTA v nadpise musí zostať nad prvou kartou,
 * aj keď má prvý stĺpec veľké odsadenie.
 */
.tp-services-heading .tp-services-btn-2 {
    position: relative;
    z-index: 10;
}


/* ==========================================================
   MASONRY OFFSET — 3 AND 6 BLOCKS
========================================================== */

@media (min-width: 1200px) {
    .tp-services-count-3 .tpservices2__column-1,
    .tp-services-count-6 .tpservices2__column-1 {
        padding-top: 160px;
    }

    .tp-services-count-3 .tpservices2__column-2,
    .tp-services-count-6 .tpservices2__column-2 {
        padding-top: 80px;
    }

    .tp-services-count-3 .tpservices2__column-3,
    .tp-services-count-6 .tpservices2__column-3 {
        padding-top: 0;
    }
}


/* ==========================================================
   THREE BLOCKS
========================================================== */

/*
 * Nadpis ostáva vľavo.
 * Karty pokračujú v rytme podobnom rozloženiu pre 5 blokov.
 */
.tp-services-count-3 .tpservices2__up {
    align-items: flex-start;
}

/*
 * Stĺpce a animačný wrapper musia držať šírku.
 */
.tp-services-count-3
.tpservices2__up
> [class*="col-"] {
    position: relative;
}

.tp-services-count-3
.tpservices2__animation-wrap {
    width: 100%;
}

/*
 * CTA kruh nesmie zmiznúť pod ďalším stĺpcom.
 */
.tp-services-count-3 .tpservices2 {
    overflow: visible;
}

.tp-services-count-3 .tpservices2__link {
    z-index: 10;
}


/* ==========================================================
   FOUR BLOCKS — FLAT ROW
========================================================== */

.tp-services-count-4 .tp-services-heading {
    margin-bottom: 70px;
}

.tp-services-count-4 .tp-services-heading--center {
    text-align: center;
}

.tp-services-count-4
.tp-services-heading--center
.tp-section-title-wrap {
    max-width: 900px;

    margin-right: auto;
    margin-left: auto;
}

.tp-services-count-4
.tp-services-heading--center
.tp-services-btn-2 {
    display: flex;
    justify-content: center;
}

.tp-services-count-4
.tpservices2__up--four {
    align-items: stretch;

    row-gap: 30px;
}

/*
 * Stĺpce budú rovnako vysoké.
 */
.tp-services-count-4
.tpservices2__up--four
> [class*="col-"] {
    position: relative;

    display: flex;

    /*
     * CTA kruh môže mierne presahovať kartu.
     */
    overflow: visible;
}

/*
 * Animácia musí vyplniť celý stĺpec.
 */
.tp-services-count-4
.tpservices2__up--four
> [class*="col-"]
> .tpservices2__animation-wrap {
    display: flex;

    width: 100%;
    height: 100%;
}

/*
 * Karty majú rovnakú výšku.
 */
.tp-services-count-4 .tpservices2 {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    margin-bottom: 0;

    overflow: visible;
}

.tp-services-count-4 .tpservices2__main {
    flex: 1 1 auto;
}

/*
 * Tlačidlo musí zostať viditeľné aj medzi úzkymi kartami.
 */
.tp-services-count-4 .tpservices2__link {
    z-index: 12;
}

.tp-services-count-4 .tpservices2__btn {
    z-index: 13;
}


/* ==========================================================
   FOUR BLOCKS — IMAGE SIZE
========================================================== */

.tp-services-count-4 .tpservices2__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;
}

.tp-services-count-4 .tpservices2__thumb > a {
    display: block;

    width: 100%;
    height: 100%;
}

.tp-services-count-4 .tpservices2__thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   FOUR BLOCKS — REMOVE OFFSETS
========================================================== */

.tp-services-count-4 .tpservices2__column-1,
.tp-services-count-4 .tpservices2__column-2,
.tp-services-count-4 .tpservices2__column-3,
.tp-services-count-4 .tpservices2__column-4 {
    padding-top: 0;
}


/* ==========================================================
   FIVE BLOCKS
========================================================== */

.tp-services-count-5 .tpservices2__right-wrap {
    position: relative;

    overflow: visible;
}

.tp-services-count-5 .tpservices2 {
    overflow: visible;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 1200px) {
    .tp-services-count-4 .container-wide {
        padding-right: clamp(30px, 4vw, 75px);
        padding-left: clamp(30px, 4vw, 75px);
    }

    /*
     * Medzera medzi štyrmi kartami.
     * Tým ostane CTA kruh viditeľný a nebude zakrytý.
     */
    .tp-services-count-4
    .tpservices2__up--four {
        --bs-gutter-x: 30px;
    }
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1199px) {
    .light.tp-services-area,
    .dark.tp-services-area {
        padding: 100px 0;
    }

    /*
     * Na tablete rušíme masonry odsadenie.
     */
    .tp-services-count-3 .tpservices2__column-1,
    .tp-services-count-3 .tpservices2__column-2,
    .tp-services-count-3 .tpservices2__column-3,
    .tp-services-count-6 .tpservices2__column-1,
    .tp-services-count-6 .tpservices2__column-2,
    .tp-services-count-6 .tpservices2__column-3 {
        padding-top: 0;
    }

    .tp-services-count-3 .tpservices2__up,
    .tp-services-count-4 .tpservices2__up--four {
        row-gap: 30px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {
    .light.tp-services-area,
    .dark.tp-services-area {
        padding: 80px 0;
    }

    .tp-services-heading {
        margin-bottom: 45px;
    }

    .tp-services-count-4
    .tpservices2__up--four {
        row-gap: 24px;
    }

    .tp-services-count-4 .tpservices2 {
        height: auto;
    }

    .tp-services-count-4
    .tpservices2__thumb {
        aspect-ratio: 16 / 10;
    }
}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 575px) {
    .tpservices2__icon svg {
        max-height: 52px;
    }

    .tpservices2__icon img {
        height: 52px;
    }

    .tp-services-count-4
    .tpservices2__up--four
    > [class*="col-"] {
        width: 100%;
    }
}

.tpservices2__content {
    margin-bottom: 10px;
}