/*
|--------------------------------------------------------------------------
| Blog Sidebar CTA
|--------------------------------------------------------------------------
*/

.blog-sidebar-cta {

    padding: var(--space-xl);

    background: var(--primary);

    border: 0;

    border-radius: var(--radius-xl);

    color: var(--white);

}


/*
|--------------------------------------------------------------------------
| CTA Label
|--------------------------------------------------------------------------
*/

.blog-sidebar-cta .blog-sidebar-label {

    display: block;

    margin-bottom: var(--space-md);

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

    font-size: var(--font-xs);

    font-weight: var(--fw-bold);

    line-height: 1.3;

    letter-spacing: .05em;

    text-transform: uppercase;

}


/*
|--------------------------------------------------------------------------
| CTA Heading
|--------------------------------------------------------------------------
*/

.blog-sidebar-cta h2 {

    margin: 0 0 var(--space-sm);

    color: var(--white);

    font-size: var(--font-xl);

    font-weight: var(--fw-bold);

    line-height: 1.3;

    letter-spacing: var(--ls-tight);

}


/*
|--------------------------------------------------------------------------
| CTA Description
|--------------------------------------------------------------------------
*/

.blog-sidebar-cta p {

    margin: 0 0 var(--space-lg);

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

    font-size: var(--font-sm);

    line-height: 1.6;

}


/*
|--------------------------------------------------------------------------
| CTA Button
|--------------------------------------------------------------------------
*/

.blog-sidebar-button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 42px;

    padding:
        .6rem var(--space-lg);

    color: var(--text);

    background: var(--secondary);

    border-radius: var(--radius);

    font-size: var(--font-sm);

    font-weight: var(--fw-semibold);

    line-height: 1.2;

    text-align: center;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);

}

.blog-sidebar-button:hover {

    color: var(--text);

    background: var(--secondary-dark);

    transform: translateY(-1px);

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .blog-sidebar-cta {

        padding: var(--space-xl);

        border-radius: var(--radius-lg);

    }

    .blog-sidebar-cta .blog-sidebar-label {

        margin-bottom: var(--space-sm);

    }

    .blog-sidebar-cta h2 {

        font-size: var(--font-lg);

    }

    .blog-sidebar-cta p {

        margin-bottom: var(--space-md);

        font-size: var(--font-sm);

        line-height: 1.55;

    }

    .blog-sidebar-button {

        min-height: 42px;

    }

}