/* SublimeShop editorial pages: category hub, category archive and article detail. */
.sublime-blog {
    --blog-purple: #7138e8;
    --blog-pink: #ec2ea9;
    --blog-cyan: #19c6c9;
    --blog-ink: #101936;
    --blog-muted: #69738b;
    --blog-line: #ebe7f7;
    --blog-soft: #f8f6ff;
    color: var(--blog-ink);
    background: #fbfaff;
}

.sublime-blog a { text-decoration: none; }

.sublime-blog__hero {
    position: relative;
    overflow: hidden;
    padding: 45px 0 60px;
    background:
        radial-gradient(circle at 12% 8%, rgba(25, 198, 201, .18), transparent 26%),
        radial-gradient(circle at 88% 3%, rgba(236, 46, 169, .17), transparent 29%),
        linear-gradient(135deg, #fbfaff 0%, #f3eeff 58%, #effdff 100%);
}

.sublime-blog__hero::before,
.sublime-blog__hero::after {
    position: absolute;
    border: 1px solid rgba(113, 56, 232, .13);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.sublime-blog__hero::before {
    top: -190px;
    right: 11%;
    width: 370px;
    height: 370px;
    box-shadow: 0 0 0 22px rgba(113, 56, 232, .025), 0 0 0 48px rgba(113, 56, 232, .018);
}

.sublime-blog__hero::after {
    bottom: -210px;
    left: 7%;
    width: 400px;
    height: 400px;
    border-color: rgba(25, 198, 201, .15);
}

.sublime-blog__hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 265px;
    align-items: center;
    gap: 44px;
}

.sublime-blog__crumbs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 18px;
    padding: 9px 13px;
    border: 1px solid rgba(113, 56, 232, .14);
    border-radius: 12px;
    color: var(--blog-muted);
    background: rgba(255, 255, 255, .72);
    font-size: 11px;
}

.sublime-blog__crumbs a { color: var(--blog-ink); font-weight: 800; }
.sublime-blog__crumbs a:hover,
.sublime-blog__crumbs i { color: var(--blog-purple); }

.sublime-blog__hero-copy h1 {
    max-width: 780px;
    margin: 0 0 12px;
    color: var(--blog-ink);
    font-size: clamp(30px, 4vw, 49px);
    font-weight: 800;
    line-height: 1.42;
}

.sublime-blog__hero-copy p {
    max-width: 730px;
    margin: 0;
    color: var(--blog-muted);
    font-size: 14px;
    line-height: 2.05;
}

.sublime-blog__eyebrow,
.sublime-blog__section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--blog-purple);
    font-size: 11px;
    font-weight: 800;
}

.sublime-blog__eyebrow { margin-bottom: 11px; }
.sublime-blog__eyebrow i { color: var(--blog-pink); }

.sublime-blog__hero-art {
    position: relative;
    display: grid;
    min-height: 210px;
    place-items: center;
    border: 1px solid rgba(113, 56, 232, .13);
    border-radius: 32px;
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 18px 42px rgba(78, 39, 149, .08);
}

.sublime-blog__hero-art::before {
    position: absolute;
    width: 128px;
    height: 128px;
    border-radius: 38% 62% 56% 44%;
    content: "";
    background: linear-gradient(135deg, rgba(113, 56, 232, .95), rgba(236, 46, 169, .82));
    box-shadow: 24px 25px 0 rgba(25, 198, 201, .17), 0 24px 38px rgba(113, 56, 232, .23);
    transform: rotate(-18deg);
}

.sublime-blog__hero-art i {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 57px;
}

.sublime-blog__hero-art span {
    position: absolute;
    right: 19px;
    bottom: 18px;
    z-index: 1;
    padding: 7px 10px;
    border: 1px solid rgba(113, 56, 232, .12);
    border-radius: 10px;
    color: var(--blog-purple);
    background: rgba(255, 255, 255, .86);
    font-size: 10px;
    font-weight: 800;
}

.sublime-blog__category-section { padding: 25px 0 0; }

.sublime-blog__category-panel {
    position: relative;
    padding: 22px 25px;
    border: 1px solid var(--blog-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(65, 38, 123, .055);
}

.sublime-blog__category-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.sublime-blog__category-panel h2 {
    margin: 5px 0 0;
    color: var(--blog-ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
}

.sublime-blog__category-panel p {
    max-width: 470px;
    margin: 0;
    color: var(--blog-muted);
    font-size: 11px;
    line-height: 1.9;
}

.sublime-blog__category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.sublime-blog__category-list li { display: flex; }

.sublime-blog__category-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid #e7e0f8;
    border-radius: 12px;
    color: var(--blog-ink);
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.sublime-blog__category-link i { color: var(--blog-purple); font-size: 13px; }

.sublime-blog__category-link:hover,
.sublime-blog__category-link.is-active {
    border-color: #cfc0f6;
    color: var(--blog-purple);
    background: #fbf9ff;
    transform: translateY(-2px);
}

.sublime-blog__category-link.is-active {
    border-color: var(--blog-purple);
    background: #f3eeff;
    box-shadow: 0 8px 18px rgba(113, 56, 232, .1);
}

.sublime-blog__category-link small {
    display: inline-grid;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    place-items: center;
    border-radius: 8px;
    color: var(--blog-purple);
    background: #f1ecff;
    font-size: 9px;
    font-weight: 800;
}

.sublime-blog__main { padding: 47px 0 92px; }

.sublime-blog__section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.sublime-blog__section-heading h2 {
    margin: 5px 0 0;
    color: var(--blog-ink);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    line-height: 1.5;
}

.sublime-blog__section-heading p {
    max-width: 430px;
    margin: 0;
    color: var(--blog-muted);
    font-size: 12px;
    line-height: 1.9;
}

.sublime-blog__all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid #e1d8f7;
    border-radius: 12px;
    color: var(--blog-purple);
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    transition: background .2s ease, transform .2s ease;
}

.sublime-blog__all-link:hover { background: #f4f0ff; transform: translateY(-2px); }

.sublime-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.sublime-blog__card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--blog-line);
    border-radius: 20px;
    color: var(--blog-ink);
    background: #fff;
    box-shadow: 0 14px 36px rgba(65, 38, 123, .055);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sublime-blog__card:hover {
    border-color: #d9cef7;
    box-shadow: 0 22px 44px rgba(65, 38, 123, .12);
    transform: translateY(-5px);
}

.sublime-blog__card-media {
    position: relative;
    display: block;
    height: 214px;
    overflow: hidden;
    background: linear-gradient(135deg, #f0ebff, #eafcff);
}

.sublime-blog__card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.sublime-blog__card:hover .sublime-blog__card-media img { transform: scale(1.045); }

.sublime-blog__card-category {
    position: absolute;
    right: 14px;
    bottom: 13px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 9px;
    color: #fff;
    background: rgba(54, 23, 125, .82);
    backdrop-filter: blur(8px);
    font-size: 10px;
    font-weight: 700;
}

.sublime-blog__card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 19px 19px 17px;
}

.sublime-blog__card-meta,
.sublime-blog__article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: #8a91a4;
    font-size: 10px;
}

.sublime-blog__card-meta i,
.sublime-blog__article-meta i { margin-left: 3px; color: var(--blog-purple); }

.sublime-blog__card h2 {
    min-height: 57px;
    margin: 12px 0 9px;
    color: var(--blog-ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.8;
}

.sublime-blog__card h2 a { color: inherit; }
.sublime-blog__card h2 a:hover { color: var(--blog-purple); }

.sublime-blog__card-excerpt {
    min-height: 58px;
    margin: 0 0 17px;
    color: var(--blog-muted);
    font-size: 11px;
    line-height: 2;
}

.sublime-blog__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid #f0edf7;
}

.sublime-blog__read-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--blog-purple);
    font-size: 11px;
    font-weight: 800;
}

.sublime-blog__read-more i { transition: transform .2s ease; }
.sublime-blog__card:hover .sublime-blog__read-more i { transform: translateX(-4px); }

.sublime-blog__empty {
    padding: 62px 20px;
    border: 1px dashed #d7cef1;
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

.sublime-blog__empty i {
    display: block;
    margin-bottom: 12px;
    color: var(--blog-purple);
    font-size: 42px;
}

.sublime-blog__empty h2 { margin: 0 0 7px; font-size: 18px; }
.sublime-blog__empty p { margin: 0; color: var(--blog-muted); font-size: 12px; }

.sublime-blog__pagination { display: flex; justify-content: center; margin-top: 31px; }
.sublime-blog__pagination .tav-pagination__list {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.sublime-blog__pagination .tav-pagination__link {
    display: grid;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    place-items: center;
    border: 1px solid var(--blog-line);
    border-radius: 10px;
    color: var(--blog-muted);
    background: #fff;
    font-size: 11px;
    text-decoration: none;
}
.sublime-blog__pagination .tav-pagination__item.is-active .tav-pagination__link,
.sublime-blog__pagination .tav-pagination__link:hover { border-color: var(--blog-purple); color: #fff; background: var(--blog-purple); }
.sublime-blog__pagination .tav-pagination__item.is-disabled .tav-pagination__link,
.sublime-blog__pagination .tav-pagination__item.is-ellipsis .tav-pagination__link { color: #a4a8b5; background: #faf9fd; }
.sublime-blog__pagination .pagination { gap: 6px; margin: 0; }
.sublime-blog__pagination .page-item .page-link {
    display: grid;
    min-width: 34px;
    height: 34px;
    place-items: center;
    padding: 0 8px;
    border: 1px solid var(--blog-line);
    border-radius: 10px !important;
    color: var(--blog-muted);
    background: #fff;
    font-size: 11px;
    box-shadow: none;
}

.sublime-blog__pagination .page-item.active .page-link,
.sublime-blog__pagination .page-item .page-link:hover {
    border-color: var(--blog-purple);
    color: #fff;
    background: var(--blog-purple);
}

.sublime-blog__article-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 275px;
    align-items: start;
    gap: 25px;
}

.sublime-blog__article-card {
    overflow: hidden;
    border: 1px solid var(--blog-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(65, 38, 123, .065);
}

.sublime-blog__article-cover {
    position: relative;
    height: 390px;
    overflow: hidden;
    background: linear-gradient(135deg, #f0ebff, #eafcff);
}

.sublime-blog__article-cover::after {
    position: absolute;
    inset: 60% 0 0;
    content: "";
    background: linear-gradient(transparent, rgba(16, 25, 54, .42));
    pointer-events: none;
}

.sublime-blog__article-cover img { width: 100%; height: 100%; object-fit: cover; }

.sublime-blog__article-cover-label {
    position: absolute;
    right: 24px;
    bottom: 22px;
    z-index: 1;
    padding: 7px 11px;
    border-radius: 9px;
    color: #fff;
    background: rgba(113, 56, 232, .92);
    font-size: 10px;
    font-weight: 800;
}

.sublime-blog__article-body { padding: 34px 42px 42px; }

.sublime-blog__article-body h1 {
    margin: 12px 0 18px;
    color: var(--blog-ink);
    font-size: clamp(27px, 4vw, 43px);
    font-weight: 800;
    line-height: 1.58;
}

.sublime-blog__article-lead {
    margin: 0 0 28px;
    padding: 17px 19px;
    border-right: 4px solid var(--blog-purple);
    border-radius: 11px;
    color: #53607a;
    background: #f6f2ff;
    font-size: 14px;
    line-height: 2.05;
}

.sublime-blog__article-content {
    color: #4c5870;
    font-size: 15px;
    line-height: 2.2;
}

.sublime-blog__article-content p { margin: 0 0 18px; }
.sublime-blog__article-content h2 { margin: 35px 0 12px; color: var(--blog-ink); font-size: 25px; line-height: 1.65; }
.sublime-blog__article-content h3 { margin: 27px 0 10px; color: #2b3260; font-size: 20px; line-height: 1.7; }
.sublime-blog__article-content ul,
.sublime-blog__article-content ol { margin: 16px 0 23px; padding-inline-start: 25px; }
.sublime-blog__article-content li { margin-bottom: 8px; }
.sublime-blog__article-content blockquote { margin: 26px 0; padding: 18px 21px; border: 1px solid #e4d9ff; border-radius: 13px; color: #5433a4; background: #faf8ff; }
.sublime-blog__article-content a { color: var(--blog-purple); text-decoration: underline; text-underline-offset: 3px; }
.sublime-blog__article-content img { max-width: 100%; height: auto; border-radius: 15px; }
.sublime-blog__article-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.sublime-blog__article-content th,
.sublime-blog__article-content td { padding: 9px 12px; border: 1px solid var(--blog-line); }

.sublime-blog__article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 29px;
    padding-top: 21px;
    border-top: 1px solid #f0edf7;
}

.sublime-blog__article-tags a {
    padding: 6px 10px;
    border-radius: 9px;
    color: var(--blog-purple);
    background: #f5f1ff;
    font-size: 10px;
    font-weight: 700;
}

.sublime-blog__sidebar { display: grid; gap: 16px; }

.sublime-blog__side-panel {
    padding: 20px;
    border: 1px solid var(--blog-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 13px 32px rgba(65, 38, 123, .05);
}

.sublime-blog__side-panel--sticky { position: sticky; top: 104px; }

.sublime-blog__side-panel h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px;
    color: var(--blog-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
}

.sublime-blog__side-panel h2 i { color: var(--blog-purple); }

.sublime-blog__side-links {
    display: grid;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.sublime-blog__side-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--blog-muted);
    font-size: 11px;
    line-height: 1.6;
    transition: color .2s ease, background .2s ease;
}

.sublime-blog__side-links a:hover,
.sublime-blog__side-links a.is-active { color: var(--blog-purple); background: #f6f2ff; }
.sublime-blog__side-links a i { color: var(--blog-purple); font-size: 10px; }

.sublime-blog__related { margin-top: 42px; }
.sublime-blog__related .sublime-blog__section-heading { margin-bottom: 18px; }
.sublime-blog__related .sublime-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sublime-blog__related .sublime-blog__card-media { height: 155px; }
.sublime-blog__related .sublime-blog__card h2 { min-height: 0; font-size: 14px; }
.sublime-blog__related .sublime-blog__card-excerpt { display: none; }

@media (max-width: 1199px) {
    .sublime-blog__hero-inner { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
    .sublime-blog__article-wrap { grid-template-columns: minmax(0, 1fr) 245px; }
}

@media (max-width: 991px) {
    .sublime-blog__hero-inner { grid-template-columns: minmax(0, 1fr) 200px; }
    .sublime-blog__hero-art { min-height: 175px; }
    .sublime-blog__hero-art::before { width: 102px; height: 102px; }
    .sublime-blog__hero-art i { font-size: 45px; }
    .sublime-blog__grid,
    .sublime-blog__related .sublime-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sublime-blog__article-wrap { grid-template-columns: 1fr; }
    .sublime-blog__sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sublime-blog__side-panel--sticky { position: static; }
}

@media (max-width: 767px) {
    .sublime-blog__hero { padding: 31px 0 42px; }
    .sublime-blog__hero-inner { grid-template-columns: 1fr; gap: 25px; }
    .sublime-blog__hero-art { min-height: 125px; }
    .sublime-blog__hero-art::before { width: 74px; height: 74px; border-radius: 28px; }
    .sublime-blog__hero-art i { font-size: 31px; }
    .sublime-blog__hero-art span { right: 13px; bottom: 11px; }
    .sublime-blog__category-panel { padding: 18px; }
    .sublime-blog__category-panel-head,
    .sublime-blog__section-heading { align-items: start; flex-direction: column; gap: 10px; }
    .sublime-blog__category-panel p,
    .sublime-blog__section-heading p { max-width: none; }
    .sublime-blog__main { padding: 34px 0 68px; }
    .sublime-blog__grid,
    .sublime-blog__related .sublime-blog__grid,
    .sublime-blog__sidebar { grid-template-columns: 1fr; }
    .sublime-blog__card-media { height: 225px; }
    .sublime-blog__article-cover { height: 260px; }
    .sublime-blog__article-body { padding: 25px 19px 32px; }
    .sublime-blog__article-body h1 { font-size: 27px; }
    .sublime-blog__article-content { font-size: 14px; line-height: 2.1; }
    .sublime-blog__article-content h2 { font-size: 21px; }
    .sublime-blog__related .sublime-blog__card-media { height: 190px; }
}

@media (max-width: 420px) {
    .sublime-blog__crumbs { font-size: 10px; }
    .sublime-blog__hero-copy h1 { font-size: 29px; }
    .sublime-blog__category-link { width: 100%; justify-content: space-between; }
    .sublime-blog__card-body { padding: 17px 16px 15px; }
}