/* =========================================================
   FELIX ELEMENTOR POSTS CAROUSEL
   Full Stylesheet
   ========================================================= */


/* ---------------------------------------------------------
   CAROUSEL CONTAINER
   --------------------------------------------------------- */

.felix-posts-carousel {
    position: relative;
    width: 100%;
    padding: 4px 4px 40px;
    overflow: hidden;
}


/* ---------------------------------------------------------
   SLIDES
   --------------------------------------------------------- */

.felix-posts-carousel .swiper-slide {
    height: auto;
    display: flex;
}

.felix-posts-carousel .swiper-slide > article {
    width: 100%;
}


/* ---------------------------------------------------------
   POST CARD
   --------------------------------------------------------- */

.felix-post-card {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border-radius: 12px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.felix-post-card:hover {
    transform: translateY(-3px);
}


/* ---------------------------------------------------------
   TITLE AREA
   --------------------------------------------------------- */

.felix-title-area {
    padding: 18px 18px 14px;
}

.felix-post-title {
    margin: 0;
    padding: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
}


/* Title link */

.felix-post-title a,
.felix-post-title a:link,
.felix-post-title a:visited {
    color: inherit;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none;
}


/* Title hover */

.felix-post-title a:hover,
.felix-post-title a:focus,
.felix-post-title a:active {
    color: inherit;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* Prevent theme/Elementor link styles from adding underline */

.elementor-widget-felix_posts_carousel
.felix-post-title a {
    text-decoration: none !important;
}

.elementor-widget-felix_posts_carousel
.felix-post-title a:hover {
    text-decoration: none !important;
}


/* ---------------------------------------------------------
   FEATURED IMAGE
   --------------------------------------------------------- */

.felix-post-card-image {
    display: block;
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;

    text-decoration: none !important;
    border: none;
}


/* Featured image */

.felix-post-card-image img,
.felix-featured-image {
    display: block;

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

    max-width: none;

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

    border: none;
    border-radius: 0;

    transition: transform 0.35s ease;
}


/* Subtle image zoom */

.felix-post-card:hover
.felix-post-card-image img {
    transform: scale(1.03);
}


/* ---------------------------------------------------------
   GENERAL CONTENT AREA
   --------------------------------------------------------- */

.felix-post-card-content {
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   READ MORE AREA
   --------------------------------------------------------- */

.felix-read-more-area {
    padding: 15px 18px 20px;
}


/* Read More link */

.felix-read-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;

    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}


.felix-read-more:hover,
.felix-read-more:focus {
    text-decoration: none !important;
}


/* Read More arrow */

.felix-read-more span {
    display: inline-block;
    transition: transform 0.2s ease;
}


.felix-read-more:hover span {
    transform: translateX(4px);
}


/* ---------------------------------------------------------
   NAVIGATION ARROWS
   --------------------------------------------------------- */

.felix-swiper-button {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    z-index: 20;

    width: 42px;
    height: 42px;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.16);

    cursor: pointer;

    font-size: 30px;
    font-weight: 400;
    line-height: 1;

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

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.felix-swiper-button:hover {
    background: #ffffff;

    transform:
        translateY(-50%)
        scale(1.06);

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.22);
}


/* Previous */

.felix-swiper-button-prev {
    left: 10px;
}


/* Next */

.felix-swiper-button-next {
    right: 10px;
}


/* Disabled arrow */

.felix-swiper-button.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}


/* ---------------------------------------------------------
   PAGINATION
   --------------------------------------------------------- */

.felix-posts-carousel .swiper-pagination {
    position: absolute;

    left: 0;
    right: 0;

    bottom: 5px !important;

    width: 100%;

    text-align: center;
}


.felix-posts-carousel
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;

    margin: 0 5px !important;

    opacity: 0.35;

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


.felix-posts-carousel
.swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
}


/* ---------------------------------------------------------
   EMPTY POSTS MESSAGE
   --------------------------------------------------------- */

.felix-posts-empty {
    width: 100%;

    padding: 25px;

    text-align: center;

    background: #f7f7f7;

    border-radius: 8px;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    .felix-post-card-image {
        height: 220px;
    }

    .felix-post-title {
        font-size: 20px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .felix-posts-carousel {
        padding-left: 2px;
        padding-right: 2px;
        padding-bottom: 35px;
    }


    /* Title */

    .felix-title-area {
        padding:
            15px
            15px
            12px;
    }


    .felix-post-title {
        font-size: 19px;
        line-height: 1.35;
    }


    /* Image */

    .felix-post-card-image {
        height: 210px;
    }


    /* Read more */

    .felix-read-more-area {
        padding:
            13px
            15px
            17px;
    }


    /* Navigation */

    .felix-swiper-button {
        width: 36px;
        height: 36px;

        font-size: 25px;
    }


    .felix-swiper-button-prev {
        left: 6px;
    }


    .felix-swiper-button-next {
        right: 6px;
    }

}


/* ---------------------------------------------------------
   VERY SMALL MOBILE DEVICES
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .felix-post-card-image {
        height: 200px;
    }

    .felix-post-title {
        font-size: 18px;
    }

}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

.felix-post-title a:focus-visible,
.felix-read-more:focus-visible,
.felix-swiper-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* =========================================================
   FORCE REMOVE ALL TITLE UNDERLINES
   ========================================================= */

.felix-posts-carousel .felix-post-title a,
.felix-posts-carousel .felix-post-title a:link,
.felix-posts-carousel .felix-post-title a:visited,
.felix-posts-carousel .felix-post-title a:hover,
.felix-posts-carousel .felix-post-title a:focus,
.felix-posts-carousel .felix-post-title a:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}


/* Remove underline generated using pseudo-elements */

.felix-posts-carousel .felix-post-title a::before,
.felix-posts-carousel .felix-post-title a::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
}


/* Some themes put the underline on the heading itself */

.felix-posts-carousel .felix-post-title,
.felix-posts-carousel .felix-post-title:hover {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}