/*
Theme Name: Sierra Child
Theme URI: https://sierra.keydesign.xyz/
Description: SaaS & Tech Startup Elementor WordPress Theme
Author: Key-Design
Author URI: http://themeforest.net/user/Key-Design
Template: sierra
Version: 1.0
License: Envato Standard License
License URI: https://themeforest.net/licenses/standard
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-menu, featured-images, flexible-header, post-formats, sticky-post, translation-ready
Text Domain: sierra-child
*/

.bgi_blog_cta {
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(99.86deg, #FF9431 12.45%, #FFB978 70.63%);
    border-radius: 10px;
    margin: 40px 0;
    border: 1px solid #E2E4E8;
    overflow: hidden;
}

.bgi_blog_cta .left-wrapper {
    position: relative;
    flex: 1;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bgi_blog_cta .left-wrapper .eclipse-img-up {
    position: absolute;
    right: -17%;
    top: -2px;
    width: 40%;
    z-index: 1;
}
.eclipse-img-down {
    position: absolute;
    left:-5%;
    bottom: -2px;
    width: 32%;
    z-index: 1;
}
.bgi_blog_cta .left-wrapper h4 {
    position: relative;
    z-index:2;
    color: #fff;
    font-size: 32px;
    line-height: 120%;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    margin: 0 0 14px;
}
.bgi_blog_cta .left-wrapper p {
    position: relative;
    z-index:2;
    color: #fff;
    font-size: 16px;
    line-height: 130%;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    margin: 0 0 14px;
}
.bgi_blog_cta .left-wrapper .cta-btn-wrapper {
    position: relative;
    z-index:2;
    margin-top: 10px;
    display: inline-flex;
    flex-wrap: wrap;
}
.bgi_blog_cta .left-wrapper .cta-btn-wrapper .cta-btn {
    background: #fff;
    color: #FF7C02;
    padding: 13px 24px;
    border-radius: 10px;
    text-transform: capitalize;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}
.bgi_blog_cta .left-wrapper .cta-btn-wrapper .cta-btn::after {
    display: none !important;
}

.bgi_blog_cta .right-wrapper {
    width: 38%;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 50px;
    overflow: hidden;
}
.bgi_blog_cta .right-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: -30%;
    background: #fff;
    width: 100%;
    height: 160%;
    z-index: 1;
    border-radius: 250px 0 0 250px;
}
.bgi_blog_cta .right-wrapper figure {
    position: relative;
    z-index: 2;
    padding: 10px;
}
.bgi_blog_cta .right-wrapper figure img {}

.blog-journey-container iframe{
    height: 650px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

@media screen and (max-width: 1440px) {
    .bgi_blog_cta .left-wrapper {
        padding: 30px;
    }
    .bgi_blog_cta .left-wrapper h4 {
        font-size: 28px;
    }
    .bgi_blog_cta .right-wrapper {
        padding-left: 40px;
    }
}

@media screen and (max-width: 1024px) { 
    .bgi_blog_cta .left-wrapper {
        padding: 30px 20px;
    }
}

@media screen and (max-width: 767px) {
    .bgi_blog_cta {
        flex-direction: column-reverse;
        margin: 20px 0;
    }
    .bgi_blog_cta .left-wrapper {
        padding: 20px 15px;
    }
    .bgi_blog_cta .left-wrapper h4 {
        font-size: 22px;
    }
    .bgi_blog_cta .left-wrapper p {
        font-size: 14px;
    }
    .bgi_blog_cta .left-wrapper .cta-btn-wrapper .cta-btn {
        padding: 12px 20px;
    }
    .bgi_blog_cta .right-wrapper {
        width: 100%;
        padding-left: 0;
        padding-bottom: 20px;
    }
    .bgi_blog_cta .right-wrapper::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .bgi_blog_cta .right-wrapper figure {
        max-width: 400px;
        margin: 0 auto;
    }
}

/*
 * blog-carousel-init.js drives this carousel's Swiper instance directly. Until it
 * runs, hide the nav arrows/pagination so they don't sit there non-functional.
 */
.blogCarousel:not(.swiper-initialized) ~ .ekit-swiper-arrow,
.blogCarousel:not(.swiper-initialized) ~ .ekit-blog-carousel-pagination {
    display: none !important;
}

/*
 * Add the "bgi-blog-carousel" CSS class (Elementor: widget > Advanced tab >
 * CSS Classes) to the Blog Posts widget to apply this fix. Swiper's default CSS
 * gives slides height:100%, which resolves to 0 unless every ancestor has an
 * explicit height. height:auto lets each slide size itself from its own content
 * (post title/excerpt/thumbnail) instead, with no dependency on JS timing.
 */
.bgi-blog-carousel .blogCarousel.swiper,
.bgi-blog-carousel .swiper-wrapper,
.bgi-blog-carousel .swiper-slide {
    height: auto !important;
}

/*
 * Card design for the blog carousel, matching the bloggr.ai reference layout:
 * white rounded card, image on top, title/meta/excerpt/button body, dots below.
 */
.bgi-blog-carousel .swiper-slide {
    display: flex;
    padding: 4px;
}
.bgi-blog-carousel .elementskit-post-image-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(17, 17, 17, 0.08);
}
.bgi-blog-carousel .elementskit-entry-thumb {
    display: block;
}
.bgi-blog-carousel .elementskit-entry-thumb img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.bgi-blog-carousel .elementskit-post-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 24px;
}
.bgi-blog-carousel .entry-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}
.bgi-blog-carousel .entry-title a {
    color: #111827;
    text-decoration: none;
}
.bgi-blog-carousel .entry-title a:hover {
    color: #FF9431;
}
.bgi-blog-carousel .post-meta-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.bgi-blog-carousel .post-meta-list span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bgi-blog-carousel .post-meta-list a {
    color: inherit;
    text-decoration: none;
}
.bgi-blog-carousel .elementskit-post-body > p {
    margin: 0 0 20px;
    color: #4B5563;
    font-size: 15px;
    line-height: 1.6;
    flex-grow: 1;
}
.bgi-blog-carousel .btn-wraper {
    margin-top: auto;
}
.bgi-blog-carousel .btn-wraper .elementskit-btn {
    display: inline-block;
    background-color: #FF9431 !important;
    color: #fff !important;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
}
/* On hover, match the site's own "Get started" pricing-button hover style:
   Elementor's global secondary color (#222222, from --e-global-color-secondary
   in the kit's generated CSS) with white text, instead of staying forced
   orange. (Plain white text on the earlier light-grey attempt was unreadable,
   which is what looked like "cut off" text — dark bg + white text fixes
   that too.) */
.bgi-blog-carousel .btn-wraper .elementskit-btn:hover {
    background-color: #222222 !important;
    color: #fff !important;
}
/* ElementsKit Lite ships a ::before layer here for a background-image hover
   swap that isn't used on this button; it just sits behind it doing nothing
   useful, so drop it to stop it clashing with the theme's own hover effect. */
.bgi-blog-carousel .btn-wraper .elementskit-btn::before {
    content: none !important;
}
/*
 * Turn off the theme's "Flip" button effect (sliding text + transition) for
 * this button specifically — keep only an instant background/text color
 * swap on hover, no motion, no fade.
 */
.bgi-blog-carousel .btn-wraper .elementskit-btn,
.bgi-blog-carousel .btn-wraper .elementskit-btn .button-wrapper {
    transition: none !important;
}
.bgi-blog-carousel .btn-wraper .elementskit-btn:hover .button-wrapper {
    transform: none !important;
    opacity: 1 !important;
}
.bgi-blog-carousel .btn-wraper .elementskit-btn::after {
    content: none !important;
}

/* Nav arrows aren't part of the reference design; pagination dots sit below the cards. */
.bgi-blog-carousel .ekit-swiper-arrow {
    display: none;
}
.bgi-blog-carousel .ekit-blog-carousel-pagination {
    position: static !important;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}
.bgi-blog-carousel .ekit-blog-carousel-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    background: #D1D5DB;
    opacity: 1;
}
.bgi-blog-carousel .ekit-blog-carousel-pagination .swiper-pagination-bullet-active {
    background: #FF9431;
}