.blogs-page{--brand:#07998d;--brand-dark:#057a72;--brand-2:#21bba7;--brand-soft:#eafbf7;--brand-line:#bde9df;--ink:#10223d;--text:#2e405a;--muted:#77869a;--line:#e4eaf1;--surface:#fff;--surface-2:#f6f9fc;--shadow-sm:0 12px 32px rgba(21,45,76,.07);--shadow-md:0 18px 42px rgba(21,45,76,.11);--shadow-lg:0 25px 70px rgba(21,45,76,.12);--topbar-height:4.375rem}
:root[data-theme="dark"] .blogs-page{--brand:#39d7c5;--brand-dark:#20b7a8;--brand-2:#46dfca;--brand-soft:rgba(34,197,177,.11);--brand-line:rgba(57,215,197,.24);--ink:#f1f7fb;--text:#c8d4df;--muted:#8fa1b3;--line:#243648;--surface:#111e2c;--surface-2:#0d1824;--shadow-sm:0 14px 34px rgba(0,0,0,.2);--shadow-md:0 19px 45px rgba(0,0,0,.26);--shadow-lg:0 26px 70px rgba(0,0,0,.3)}
.blogs-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 25px;
}

.blogs-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: clamp(28px, 5vw, 68px);
    align-items: center;
    padding: clamp(34px, 5vw, 68px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 30px;
    background:
        radial-gradient(circle at 5% 95%, rgba(7, 153, 141, .13), transparent 20rem),
        radial-gradient(circle at 96% 2%, rgba(67, 215, 190, .14), transparent 19rem),
        var(--surface);
    box-shadow: var(--shadow-lg);
}

.blogs-hero::before {
    content: "";
    position: absolute;
    inset: auto auto -130px -100px;
    width: 310px;
    height: 310px;
    border: 1px solid var(--brand-line);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(7, 153, 141, .025), 0 0 0 84px rgba(7, 153, 141, .018);
    pointer-events: none;
}

.blogs-hero-copy {
    position: relative;
    z-index: 1;
}

.blogs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    color: var(--brand);
    font-size: .71rem;
    font-weight: bold;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.blogs-kicker i {
    font-size: .66rem;
}

.blogs-hero h1 {
    max-width: 690px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.55rem, 4.3vw, 4.35rem);
    font-weight: bold;
    letter-spacing: -.06em;
    line-height: 1.01;
}

.blogs-hero h1 em {
    color: var(--brand);
    font-style: normal;
}

.blogs-hero-copy > p {
    max-width: 650px;
    margin: 21px 0 25px;
    color: var(--muted);
    font-size: .96rem;
    line-height: 1.72;
}

.blogs-search {
    display: grid;
    max-width: 650px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 15px 35px rgba(26, 56, 86, .08);
}

.blogs-search > i {
    justify-self: center;
    color: var(--brand);
    font-size: .8rem;
}

.blogs-search input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: .78rem;
}

.blogs-search input::placeholder {
    color: var(--muted);
}

.blogs-search button {
    min-height: 42px;
    padding: 0 17px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--brand-dark), var(--brand));
    color: #fff;
    font-size: .72rem;
    font-weight: bold;
    cursor: pointer;
}

.blogs-hero-stats {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 26px;
}

.blogs-hero-stats > span {
    display: grid;
    min-width: 112px;
    gap: 1px;
    padding: 0 20px;
    border-left: 1px solid var(--line);
}

.blogs-hero-stats > span:first-child {
    padding-left: 0;
    border-left: 0;
}

.blogs-hero-stats b {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: bold;
}

.blogs-hero-stats small {
    color: var(--muted);
    font-size: .62rem;
}

.featured-story {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    transform: rotate(1.1deg);
    transition: transform .25s ease;
}

.featured-story:hover {
    transform: rotate(0) translateY(-4px);
}

.featured-visual {
    position: relative;
    display: grid;
    min-height: 255px;
    place-items: center;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}

.featured-visual.is-facebook {
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .22), transparent 11rem),
        linear-gradient(135deg, #0e4fa2, #1877f2 55%, #65a5ff);
}

.featured-visual > i {
    position: relative;
    z-index: 2;
    font-size: 5.5rem;
    filter: drop-shadow(0 18px 20px rgba(0, 40, 95, .28));
}

.visual-grid {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
    background-size: 35px 35px;
    transform: perspective(500px) rotateX(58deg) scale(1.45);
}

.featured-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(4, 30, 68, .34);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: .65rem;
    font-weight: bold;
}

.featured-body {
    padding: 22px;
}

.story-category,
.post-category {
    color: var(--brand);
    font-size: .63rem;
    font-weight: bold;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.featured-body h2 {
    margin: 8px 0 9px;
    font-size: 1.2rem;
    line-height: 1.38;
}

.featured-body h2 a,
.post-body h3 a {
    color: var(--ink);
    font-weight: bold;
    text-decoration: none;
}

.featured-body h2 a:hover,
.post-body h3 a:hover {
    color: var(--brand);
}

.featured-body > p {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.62;
}

.story-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.story-author {
    display: flex;
    align-items: center;
    gap: 9px;
}

.story-author > b {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .62rem;
}

.story-author > span {
    display: grid;
    gap: 2px;
}

.story-author strong {
    color: var(--ink);
    font-size: .67rem;
}

.story-author small {
    color: var(--muted);
    font-size: .59rem;
}

.story-meta > a {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border-radius: 11px;
    background: var(--brand-soft);
    color: var(--brand);
    text-decoration: none;
}

.topic-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 24px 0 30px;
    padding: 14px 15px 14px 19px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.topic-copy {
    display: grid;
    flex: 0 0 auto;
    gap: 2px;
}

.topic-copy span {
    color: var(--ink);
    font-size: .72rem;
    font-weight: bold;
}

.topic-copy strong {
    color: var(--muted);
    font-size: .61rem;
}

.topic-filters {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

.topic-filters::-webkit-scrollbar {
    display: none;
}

.topic-filters button {
    display: inline-flex;
    min-height: 37px;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .67rem;
    font-weight: bold;
    cursor: pointer;
    transition: .18s ease;
}

.topic-filters button:hover,
.topic-filters button.is-active {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}

.blogs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    align-items: start;
    gap: 26px;
}

.latest-posts {
    min-width: 0;
}

.blogs-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
}

.blogs-section-head > div > span {
    display: block;
    margin-bottom: 4px;
    color: var(--brand);
    font-size: .64rem;
    font-weight: bold;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.blogs-section-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.45rem;
    font-weight: bold;
    letter-spacing: -.025em;
}

.sort-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .63rem;
    font-weight: bold;
}

.sort-control select {
    height: 36px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: 0;
    background: var(--surface);
    color: var(--ink);
    font-size: .66rem;
    font-weight: bold;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.post-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.post-card:hover {
    border-color: var(--brand-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.post-card[hidden] {
    display: none;
}

.post-thumb {
    position: relative;
    display: grid;
    aspect-ratio: 16 / 8.8;
    place-items: center;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}

.post-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .19;
    background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 1.2px);
    background-size: 17px 17px;
}

.post-thumb > i {
    position: relative;
    z-index: 1;
    font-size: 3.1rem;
    filter: drop-shadow(0 12px 14px rgba(0,0,0,.2));
}

.post-thumb > span {
    position: absolute;
    z-index: 1;
    bottom: 13px;
    left: 14px;
    font-size: .63rem;
    font-weight: bold;
}

.post-thumb > b {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    background: rgba(6, 25, 44, .28);
    backdrop-filter: blur(10px);
    font-size: .56rem;
}

.post-thumb.is-facebook { background: linear-gradient(135deg,#0d4c9c,#1877f2 60%,#73afff); }
.post-thumb.is-tiktok { background: linear-gradient(135deg,#10141c,#282d3a 55%,#ff2f73); }
.post-thumb.is-instagram { background: linear-gradient(135deg,#6b39ba,#dd2a7b 52%,#f9a12f); }
.post-thumb.is-youtube { background: linear-gradient(135deg,#9f1018,#ff0000 55%,#ff6969); }
.post-thumb.is-facebook-alt { background: linear-gradient(135deg,#063d5a,#0b7ca5 55%,#46d4c0); }
.post-thumb.is-strategy { background: linear-gradient(135deg,#4c2b8f,#7b52c9 55%,#b290f2); }
.post-thumb.is-tiktok-alt { background: linear-gradient(135deg,#143b3d,#0d8880 55%,#31d2c3); }
.post-thumb.is-reels { background: linear-gradient(135deg,#833ab4,#c13584 52%,#fd6d4a); }

.post-body {
    padding: 17px;
}

.post-body h3 {
    margin: 7px 0 8px;
    font-size: .86rem;
    line-height: 1.47;
}

.post-body > p {
    display: -webkit-box;
    min-height: 42px;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.58;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .59rem;
}

.post-footer span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.empty-posts {
    display: grid;
    min-height: 280px;
    place-items: center;
    align-content: center;
    gap: 7px;
    border: 1px dashed var(--line);
    border-radius: 20px;
    background: var(--surface);
    color: var(--muted);
    text-align: center;
}

.empty-posts i {
    margin-bottom: 4px;
    color: var(--brand);
    font-size: 2rem;
}

.empty-posts strong {
    color: var(--ink);
    font-size: .82rem;
}

.empty-posts span {
    font-size: .68rem;
}

.blogs-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 27px;
}

.blogs-pagination button {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    font-size: .68rem;
    font-weight: bold;
    cursor: pointer;
}

.blogs-pagination button.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.blogs-pagination button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.blogs-aside {
    align-self: stretch;
}

.blogs-aside-sticky {
    position: sticky;
    top: calc(var(--topbar-height) + 22px);
    display: grid;
    gap: 16px;
}

.blogs-trending,
.newsletter-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.blogs-trending > header {
    padding: 19px 18px 16px;
    border-bottom: 1px solid var(--line);
    background: radial-gradient(circle at 100% 0, rgba(7,153,141,.16), transparent 9rem), var(--surface);
}

.blogs-trending > header > span,
.newsletter-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--brand);
    font-size: .61rem;
    font-weight: bold;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.blogs-trending h2,
.newsletter-card h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.18rem;
    font-weight: bold;
}

.blogs-trending h2 b {
    color: var(--brand);
}

.blogs-trending header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .66rem;
}

.blogs-trending > div > article {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 81px;
    padding: 12px 15px 12px 12px;
    border-bottom: 1px solid var(--line);
    transition: background .18s ease;
}

.blogs-trending > div > article:last-child {
    border-bottom: 0;
}

.blogs-trending > div > article:hover {
    background: var(--brand-soft);
}

.blogs-trending article > b {
    color: color-mix(in srgb, var(--muted) 68%, transparent);
    font-size: 1.85rem;
    font-weight: bold;
    letter-spacing: -.09em;
}

.blogs-trending article:hover > b {
    color: var(--brand);
}

.blogs-trending article > span {
    display: grid;
    gap: 7px;
}

.blogs-trending article a {
    color: var(--ink);
    font-size: .7rem;
    font-weight: bold;
    line-height: 1.45;
    text-decoration: none;
}

.blogs-trending article small {
    color: var(--muted);
    font-size: .58rem;
}

.blogs-trending article small i {
    margin-right: 4px;
}

.newsletter-card {
    padding: 20px;
    background:
        radial-gradient(circle at 92% 8%, rgba(7,153,141,.15), transparent 9rem),
        var(--surface);
}

.newsletter-icon {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    margin-bottom: 13px;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--brand-dark), var(--brand-2));
    color: #fff;
}

.newsletter-card > p {
    margin: 8px 0 14px;
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.58;
}

.newsletter-card form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 6px;
}

.newsletter-card input {
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: 0;
    background: var(--surface-2);
    color: var(--ink);
    font-size: .65rem;
}

.newsletter-card button {
    border: 0;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
}

.newsletter-card > small {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-size: .54rem;
    line-height: 1.5;
}

.newsletter-card > small i {
    margin-right: 4px;
    color: var(--brand);
}

.blogs-bottom-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 34px;
    padding: 27px 29px;
    border-radius: 21px;
    background:
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.17), transparent 13rem),
        linear-gradient(135deg,#056f68,#07998d 58%,#21bba7);
    color: #fff;
}

.blogs-bottom-cta > div {
    display: grid;
    gap: 4px;
}

.blogs-bottom-cta > div > span {
    color: #bffdf1;
    font-size: .63rem;
    font-weight: bold;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.blogs-bottom-cta h2 {
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: bold;
}

.blogs-bottom-cta p {
    margin: 0;
    color: rgba(235,255,252,.76);
    font-size: .71rem;
}

.blogs-bottom-cta > a {
    display: inline-flex;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    border-radius: 12px;
    background: #fff;
    color: #057a72;
    font-size: .71rem;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0,50,46,.18);
}

@media (max-width: 1199.98px) {
    .blogs-hero {
        grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
        gap: 30px;
        padding: 40px;
    }

    .blogs-layout {
        grid-template-columns: minmax(0, 1fr) 270px;
        gap: 20px;
    }
}

@media (max-width: 991.98px) {
    .blogs-page {
        width: 100%;
    }

    .blogs-hero {
        grid-template-columns: 1fr;
    }

    .featured-story {
        width: min(100%, 620px);
        transform: none;
    }

    .topic-bar {
        display: grid;
        gap: 12px;
    }

    .topic-copy {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .blogs-layout {
        display: block;
    }

    .blogs-aside {
        margin-top: 30px;
    }

    .blogs-aside-sticky {
        position: static;
        grid-template-columns: minmax(0, 1fr) minmax(250px, .75fr);
        align-items: start;
    }
}

@media (max-width: 767.98px) {
    .blogs-page {
        width: 100%;
        padding-top: 18px;
    }

    .blogs-hero {
        gap: 27px;
        padding: 25px 20px 21px;
        border-radius: 22px;
    }

    .blogs-kicker {
        margin-bottom: 12px;
        font-size: .62rem;
    }

    .blogs-hero h1 {
        font-size: clamp(2.15rem, 11vw, 3rem);
        line-height: 1.03;
    }

    .blogs-hero-copy > p {
        margin: 15px 0 19px;
        font-size: .82rem;
    }

    .blogs-search {
        grid-template-columns: 35px minmax(0, 1fr) 39px;
        border-radius: 14px;
    }

    .blogs-search input {
        height: 41px;
        font-size: .72rem;
    }

    .blogs-search button {
        width: 39px;
        min-height: 39px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        font-size: 0;
    }

    .blogs-search button::before {
        content: "\f002";
        color: #fff;
        font-family: "Font Awesome 5 Free";
        font-size: .72rem;
        font-weight: 900;
    }

    .blogs-hero-stats {
        justify-content: space-between;
        margin-top: 20px;
    }

    .blogs-hero-stats > span {
        min-width: 0;
        padding: 0 11px;
    }

    .blogs-hero-stats b {
        font-size: .88rem;
    }

    .blogs-hero-stats small {
        font-size: .53rem;
    }

    .featured-story {
        border-radius: 18px;
    }

    .featured-visual {
        min-height: 190px;
    }

    .featured-visual > i {
        font-size: 4rem;
    }

    .featured-body {
        padding: 17px;
    }

    .featured-body h2 {
        font-size: 1.02rem;
    }

    .topic-bar {
        margin: 17px 0 25px;
        padding: 13px;
    }

    .topic-filters {
        margin: 0 -2px;
    }

    .blogs-section-head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 14px;
    }

    .blogs-section-head h2 {
        font-size: 1.25rem;
    }

    .sort-control {
        width: 100%;
        justify-content: space-between;
    }

    .sort-control select {
        min-width: 150px;
    }

    .posts-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .post-card {
        border-radius: 17px;
    }

    .blogs-aside-sticky {
        grid-template-columns: 1fr;
    }

    .blogs-trending {
        border-radius: 17px;
    }

    .blogs-bottom-cta {
        display: grid;
        gap: 19px;
        margin-top: 26px;
        padding: 22px;
        border-radius: 18px;
    }

    .blogs-bottom-cta h2 {
        font-size: 1.08rem;
    }

    .blogs-bottom-cta > a {
        justify-self: end;
    }
}

@media (max-width: 389.98px) {
    .blogs-hero-stats > span {
        padding: 0 8px;
    }

    .story-author small {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.empty-posts[hidden]{display:none}

body.blogs-view #content-wrapper{overflow-x:clip!important;overflow-y:visible!important}
#content .blogs-page .blogs-hero h1{font-size:clamp(2.55rem,4.3vw,4.35rem)!important;line-height:1.01!important}
#content .blogs-page .featured-body h2{font-size:1.2rem!important;line-height:1.38!important}
#content .blogs-page .blogs-section-head h2{font-size:1.45rem!important}
#content .blogs-page .post-body h3{font-size:.86rem!important;line-height:1.47!important}
#content .blogs-page .blogs-trending h2,#content .blogs-page .newsletter-card h2{font-size:1.18rem!important}
#content .blogs-page .blogs-bottom-cta h2{font-size:1.25rem!important;color:#fff!important}
.topic-filters a{display:inline-flex;min-height:37px;flex:0 0 auto;align-items:center;gap:7px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--muted);font-size:.67rem;font-weight:bold;text-decoration:none;transition:.18s ease}
.topic-filters a:hover,.topic-filters a.is-active{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand);text-decoration:none}
.featured-visual.has-image,.post-thumb.has-image{background:#123}.featured-visual>img,.post-thumb>img{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover}.featured-visual.has-image:after,.post-thumb.has-image:after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(4,19,34,.05),rgba(4,19,34,.54))}.featured-visual.has-image>.featured-badge,.post-thumb.has-image>span,.post-thumb.has-image>b{z-index:2}.featured-visual.has-image>i,.post-thumb.has-image>i{display:none}
.blogs-pagination a,.blogs-pagination span{display:grid;width:37px;height:37px;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);font-size:.68rem;font-weight:bold;text-decoration:none}.blogs-pagination span.is-active{border-color:var(--brand);background:var(--brand);color:#fff}.blogs-pagination .is-disabled{opacity:.45}
:root[data-theme="dark"] .sort-control select,:root[data-theme="dark"] .blogs-search input,:root[data-theme="dark"] .newsletter-card input{color-scheme:dark}
@media(max-width:767.98px){#content .blogs-page .blogs-hero h1{font-size:clamp(2.15rem,11vw,3rem)!important;line-height:1.03!important}#content .blogs-page .featured-body h2{font-size:1.02rem!important}#content .blogs-page .blogs-section-head h2{font-size:1.25rem!important}#content .blogs-page .blogs-bottom-cta h2{font-size:1.08rem!important}}
.blogs-page .blog-breadcrumb{display:flex;align-items:center;gap:9px;min-width:0;margin:0 0 24px;color:var(--muted);font-size:.72rem;font-weight:700;white-space:nowrap;overflow:hidden}
.blogs-page .blog-breadcrumb a{color:var(--muted);text-decoration:none}
.blogs-page .blog-breadcrumb a:hover{color:var(--brand)}
.blogs-page .blog-breadcrumb span:last-child{min-width:0;overflow:hidden;color:var(--text);text-overflow:ellipsis}
.blogs-page .blog-breadcrumb i{flex:0 0 auto;font-size:.58rem}
.blogs-toast{position:fixed;z-index:1090;right:22px;bottom:22px;display:flex;align-items:center;gap:10px;max-width:min(360px,calc(100vw - 28px));padding:13px 16px;border:1px solid var(--brand-line);border-radius:13px;background:var(--surface);box-shadow:0 16px 42px rgba(5,23,38,.2);color:var(--text);font-size:.76rem;font-weight:bold;opacity:0;pointer-events:none;transform:translateY(14px);transition:.22s ease}
.blogs-toast i{color:var(--brand)}
.blogs-toast.is-visible{opacity:1;transform:translateY(0)}
#content-wrapper:has(.blogs-page){overflow-x:clip!important;overflow-y:visible!important}
@media(max-width:767.98px){.blogs-page .blog-breadcrumb{margin-bottom:18px}.blogs-toast{right:14px;bottom:82px}}