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


/*
|--------------------------------------------------------------------------
| Article Header
|--------------------------------------------------------------------------
*/

.blog-article-header {

    width: 100%;

    max-width: 820px;

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

}


/*
|--------------------------------------------------------------------------
| Article Topic
|--------------------------------------------------------------------------
*/

.blog-article-topic {

    display: inline-flex;

    align-items: center;

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

    padding:
        .4rem .75rem;

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

    background: var(--primary-light);

    color: var(--primary);

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

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

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

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

}


/*
|--------------------------------------------------------------------------
| Article Title
|--------------------------------------------------------------------------
*/

.blog-article-title {

    max-width: 800px;

    margin: 0;

    color: var(--text);

    font-size: clamp(2rem,
            5vw,
            var(--font-5xl));

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

    line-height: 1.15;

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

}


/*
|--------------------------------------------------------------------------
| Article Excerpt
|--------------------------------------------------------------------------
*/

.blog-article-excerpt {

    max-width: 720px;

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

    color: var(--text-light);

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

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

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

}


/*
|--------------------------------------------------------------------------
| Article Meta
|--------------------------------------------------------------------------
*/

.blog-article-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: .5rem;

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

    color: var(--text-muted);

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

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

}

.blog-article-meta span,
.blog-article-meta time {

    color: var(--text-muted);

}

.blog-article-meta span:first-child {

    color: var(--text);

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

}


/*
|--------------------------------------------------------------------------
| Article Header Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .blog-article-header {

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

    }

    .blog-article-topic {

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

        padding:
            .35rem .65rem;

    }

    .blog-article-title {

        font-size: clamp(1.8rem,
                8vw,
                2.25rem);

        line-height: 1.18;

    }

    .blog-article-excerpt {

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

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

        line-height: 1.7;

    }

    .blog-article-meta {

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

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

        gap: .4rem;

    }

}