/* Premium editorial treatment for Digitnetic's public blog detail route. */
.premium-blog-article {
    --digitnetic-ink: #171a38;
    --digitnetic-navy: #080c1c;
    --digitnetic-purple: #9562f7;
    --digitnetic-orange: #ff822b;
    --digitnetic-line: #e4e4ef;
    background: #f7f7fb;
}

.premium-blog-article .post-header {
    position: relative;
    padding: 120px 0;
    overflow: visible;
    background: #eef3ff;
    color: #0d1435;
    text-align: center;
    border-bottom: 1px solid rgba(116, 96, 210, .12);
}

.premium-blog-article .post-header::after {
    display: none;
}

.premium-blog-article .post-header .container { position: relative; z-index: 1; max-width: 920px; }
.premium-blog-article .article-breadcrumb { margin-bottom: 48px; color: #5d6485; }
.premium-blog-article .article-breadcrumb a { color: #0d1435; }
.premium-blog-article .post-header .badge { display: inline-block; padding: 7px 10px; border: 1px solid rgba(149, 98, 247, .25); border-radius: 999px; background: rgba(149, 98, 247, .08); color: #5d2ac6; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.premium-blog-article .post-header h1 { max-width: 820px; margin: 0 auto 25px; color: #0d1435; font-family: Sora, Poppins, sans-serif; font-size: clamp(42px, 6vw, 76px); font-weight: 800; letter-spacing: -2.5px; line-height: 1.02; text-align: center; }
.premium-blog-article .post-header .mt-3 { color: #4b5779; font-size: 12px; }
.premium-blog-article .post-header .mx-3 { margin: 0 10px !important; color: #7f86a8; }

.premium-blog-article > section.py-5 { padding: 58px 0 90px !important; }
.premium-blog-article .sidebar-card { border: 1px solid var(--digitnetic-line); border-radius: 12px; box-shadow: 0 20px 50px rgba(18, 19, 53, .08); }
.premium-blog-article .sidebar-card.card { overflow: hidden; }
.premium-blog-article .sidebar-card .card-img-top { width: 100%; max-height: 480px; object-fit: cover; }
.premium-blog-article .sidebar-card .card-body { padding: 32px 38px 42px; }
.premium-blog-article .post-content { color: #454862; font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.85; }
.premium-blog-article .post-content h2, .premium-blog-article .post-content h3 { margin-top: 42px; color: var(--digitnetic-ink); font-family: Sora, Poppins, sans-serif; line-height: 1.25; }
.premium-blog-article .article-takeaway { border-left: 3px solid var(--digitnetic-purple); border-radius: 8px; background: #f1edff; color: #555674; }
.premium-blog-article .article-takeaway h2 { color: var(--digitnetic-ink); font-family: Sora, Poppins, sans-serif; }
.premium-blog-article .post-meta { color: #777b98; font-size: 11px; }
.premium-blog-article .blog-category { color: var(--digitnetic-purple); font-weight: 700; }
.premium-blog-article .sidebar-card .card-title { color: var(--digitnetic-ink); font-family: Sora, Poppins, sans-serif; font-size: 22px; font-weight: 700; }
.premium-blog-article .article-toc {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start;
    z-index: 10;
    isolation: isolate;
    background: #fff;
}
.premium-blog-article .article-toc-list { margin: 0; padding-left: 24px; color: var(--digitnetic-purple); list-style-position: outside; }
.premium-blog-article .article-toc-list { max-height: calc(100vh - 190px); overflow-y: auto; padding-right: 10px; }
.premium-blog-article .article-toc-list::-webkit-scrollbar { width: 6px; }
.premium-blog-article .article-toc-list::-webkit-scrollbar-track { background: #f1edff; border-radius: 999px; }
.premium-blog-article .article-toc-list::-webkit-scrollbar-thumb { background: #c4a9f6; border-radius: 999px; }
.premium-blog-article .article-toc-list li { margin-bottom: 10px; padding-left: 4px; }
.premium-blog-article .article-toc-list li::marker { font-size: 11px; font-weight: 700; }
.premium-blog-article .article-toc-list a { color: var(--digitnetic-ink); font-size: 13px; line-height: 1.45; text-decoration: none; }
.premium-blog-article .article-toc-list a:hover { color: var(--digitnetic-purple); }
.premium-blog-article .article-toc-list .article-toc-subitem { margin-left: 0; padding-left: 12px; }
.premium-blog-article .blog-post-content h2,
.premium-blog-article .blog-post-content h3 { scroll-margin-top: 120px; }
.premium-blog-article .article-recent-posts { margin-top: 42px; }
.premium-blog-article .article-recent-posts-heading { margin-bottom: 20px; }
.premium-blog-article .article-recent-posts-heading > span { color: var(--digitnetic-purple); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.premium-blog-article .article-recent-posts-heading h2 { margin: 5px 0 0; color: var(--digitnetic-ink); font-family: Sora, Poppins, sans-serif; font-size: 30px; }
.premium-blog-article .recent-post-card { display: flex; align-items: center; height: 100%; gap: 16px; padding: 16px; border: 1px solid var(--digitnetic-line); border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgba(18, 19, 53, .06); }
.premium-blog-article .recent-post-card-image { flex: 0 0 82px; display: block; }
.premium-blog-article .recent-post-card-image img { display: block; width: 82px; height: 82px; border-radius: 8px; object-fit: cover; }
.premium-blog-article .recent-post-card-content { min-width: 0; }
.premium-blog-article .recent-post-card-content h3 { margin: 0 0 8px; font-family: Sora, Poppins, sans-serif; font-size: 15px; line-height: 1.35; }
.premium-blog-article .recent-post-card-content h3 a { color: var(--digitnetic-ink); text-decoration: none; }
.premium-blog-article .recent-post-card-content h3 a:hover { color: var(--digitnetic-purple); }
.premium-blog-article .recent-post-card-content small { color: #777b98; font-size: 11px; }
.premium-blog-article .article-categories { margin-top: 42px; }
.premium-blog-article .article-categories-heading { margin-bottom: 20px; }
.premium-blog-article .article-categories-heading > span { color: var(--digitnetic-purple); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.premium-blog-article .article-categories-heading h2 { margin: 5px 0 0; color: var(--digitnetic-ink); font-family: Sora, Poppins, sans-serif; font-size: 30px; }
.premium-blog-article .article-category-list { display: flex; flex-wrap: wrap; gap: 12px; }
.premium-blog-article .article-category-link { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--digitnetic-line); border-radius: 999px; background: #fff; color: var(--digitnetic-ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.premium-blog-article .article-category-link:hover { border-color: var(--digitnetic-purple); color: var(--digitnetic-purple); transform: translateY(-2px); }
.premium-blog-article .article-category-link b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: #f1edff; color: var(--digitnetic-purple); font-size: 11px; }
.premium-blog-article .recent-post { border-color: var(--digitnetic-line); }
.premium-blog-article .recent-post h6 { color: var(--digitnetic-ink); line-height: 1.35; }
.premium-blog-article .category-link:hover { background: #f1edff; color: var(--digitnetic-purple); }
.premium-blog-article .article-related { margin-top: 48px; }
.premium-blog-article .article-related h2 { color: var(--digitnetic-ink); font-family: Sora, Poppins, sans-serif; font-size: 30px; }
.premium-blog-article .article-related a { min-height: 100%; border-color: var(--digitnetic-line) !important; border-radius: 8px !important; background: #fff; }

@media (max-width: 767px) {
    .premium-blog-article .post-header { padding: 54px 0 66px; }
    .premium-blog-article .article-breadcrumb { margin-bottom: 34px; }
    .premium-blog-article .post-header h1 { font-size: clamp(38px, 11vw, 58px); letter-spacing: -1.6px; }
    .premium-blog-article > section.py-5 { padding-top: 30px !important; }
    .premium-blog-article .sidebar-card .card-body { padding: 24px 22px 30px; }
    .premium-blog-article .post-content { font-size: 15px; line-height: 1.75; }
    .premium-blog-article .article-recent-posts { margin-top: 30px; }
    .premium-blog-article .article-recent-posts-heading h2 { font-size: 24px; }
    .premium-blog-article .article-categories { margin-top: 30px; }
    .premium-blog-article .article-categories-heading h2 { font-size: 24px; }
    .premium-blog-article .article-toc {
        position: static;
        top: auto;
    }
    .premium-blog-article .article-toc-list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}