/*
|--------------------------------------------------------------------------
| Bali Indo Tour
| Blog Detail - Article Content
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Article Content
|--------------------------------------------------------------------------
*/

.blog-article-content {

    width: 100%;

    max-width: 760px;

    color: var(--text-light);

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

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

    line-height: 1.85;

}


/*
|--------------------------------------------------------------------------
| Paragraph
|--------------------------------------------------------------------------
*/

.blog-article-content p {

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

}

.blog-article-content p:last-child {

    margin-bottom: 0;

}


/*
|--------------------------------------------------------------------------
| Content Section
|--------------------------------------------------------------------------
*/

.blog-content-section {

    margin-top: var(--space-4xl);

}

.blog-content-section:first-of-type {

    margin-top: var(--space-3xl);

}


/*
|--------------------------------------------------------------------------
| Content Heading
|--------------------------------------------------------------------------
*/

.blog-content-section h2 {

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

    color: var(--text);

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

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

    line-height: 1.3;

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

}


/*
|--------------------------------------------------------------------------
| Content Image
|--------------------------------------------------------------------------
*/

.blog-content-image {

    width: 100%;

    margin:
        var(--space-2xl) 0 var(--space-2xl);

}

.blog-content-image img {

    display: block;

    width: 100%;

    height: auto;

    aspect-ratio: 16 / 10;

    object-fit: cover;

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

}


/*
|--------------------------------------------------------------------------
| Image Caption
|--------------------------------------------------------------------------
*/

.blog-content-image figcaption {

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

    color: var(--text-muted);

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

    line-height: var(--lh-md);

}


/*
|--------------------------------------------------------------------------
| Content Info
|--------------------------------------------------------------------------
*/

.blog-content-info {

    margin:
        var(--space-2xl) 0 var(--space-2xl);

    padding:
        var(--space-lg) var(--space-xl);

    border-left:
        3px solid var(--primary);

    background: var(--primary-light);

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

}

.blog-content-info strong {

    display: block;

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

    color: var(--primary-dark);

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

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

    line-height: var(--lh-sm);

}

.blog-content-info p {

    margin: 0;

    color: var(--text-light);

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

    line-height: 1.7;

}


/*
|--------------------------------------------------------------------------
| Read Details
|--------------------------------------------------------------------------
*/

.blog-content-read-more {

    display: inline-flex;

    align-items: center;

    margin-top: var(--space-xs);

    color: var(--primary);

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

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

    line-height: var(--lh-md);

    text-decoration: none;

}

.blog-content-read-more::after {

    content: "→";

    margin-left: .5rem;

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

}

.blog-content-read-more:hover {

    color: var(--primary-dark);

    text-decoration: none;

}

.blog-content-read-more:hover::after {

    transform: translateX(4px);

}


/*
|--------------------------------------------------------------------------
| Article Links
|--------------------------------------------------------------------------
*/

.blog-article-content a:not(.blog-content-read-more) {

    color: var(--primary);

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

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;

}

.blog-article-content a:not(.blog-content-read-more):hover {

    color: var(--primary-dark);

}


/*
|--------------------------------------------------------------------------
| Strong Text
|--------------------------------------------------------------------------
*/

.blog-article-content strong {

    color: var(--text);

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

}


/*
|--------------------------------------------------------------------------
| Lists
|--------------------------------------------------------------------------
*/

.blog-article-content ul,
.blog-article-content ol {

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

    padding-left: var(--space-xl);

}

.blog-article-content ul {

    list-style: disc;

}

.blog-article-content ol {

    list-style: decimal;

}

.blog-article-content li {

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

    padding-left: .25rem;

}

.blog-article-content li:last-child {

    margin-bottom: 0;

}


/*
|--------------------------------------------------------------------------
| Blockquote
|--------------------------------------------------------------------------
*/

.blog-content-quote {

    margin:
        var(--space-3xl) 0;

    padding:
        var(--space-lg) 0 var(--space-lg) var(--space-xl);

    border-left:
        3px solid var(--primary);

    color: var(--text);

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

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

    line-height: 1.7;

}

.blog-content-quote p {

    margin: 0;

}


/*
|--------------------------------------------------------------------------
| Conclusion
|--------------------------------------------------------------------------
*/

.blog-content-conclusion {

    margin-top: var(--space-4xl);

    padding-top: var(--space-3xl);

    border-top:
        1px solid var(--border);

}


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

@media (max-width: 767.98px) {

    .blog-article-content {

        max-width: none;

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

        line-height: 1.8;

    }


    /*
    |--------------------------------------------------------------------------
    | Paragraph
    |--------------------------------------------------------------------------
    */

    .blog-article-content p {

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

    }


    /*
    |--------------------------------------------------------------------------
    | Section
    |--------------------------------------------------------------------------
    */

    .blog-content-section {

        margin-top: var(--space-3xl);

    }

    .blog-content-section:first-of-type {

        margin-top: var(--space-2xl);

    }


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

    .blog-content-section h2 {

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

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

        line-height: 1.35;

    }


    /*
    |--------------------------------------------------------------------------
    | Image
    |--------------------------------------------------------------------------
    */

    .blog-content-image {

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

    }

    .blog-content-image img {

        aspect-ratio: 16 / 10;

        border-radius: var(--radius);

    }


    /*
    |--------------------------------------------------------------------------
    | Info
    |--------------------------------------------------------------------------
    */

    .blog-content-info {

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

        padding:
            var(--space-lg);

    }


    /*
    |--------------------------------------------------------------------------
    | Read Details
    |--------------------------------------------------------------------------
    */

    .blog-content-read-more {

        margin-top: 0;

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

    }


    /*
    |--------------------------------------------------------------------------
    | Quote
    |--------------------------------------------------------------------------
    */

    .blog-content-quote {

        margin:
            var(--space-2xl) 0;

        padding:
            var(--space-md) 0 var(--space-md) var(--space-lg);

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

        line-height: 1.65;

    }


    /*
    |--------------------------------------------------------------------------
    | Conclusion
    |--------------------------------------------------------------------------
    */

    .blog-content-conclusion {

        margin-top: var(--space-3xl);

        padding-top: var(--space-2xl);

    }

}