:root {
    --blog-blue: #1f304c;
    --blog-ink: #152033;
    --blog-muted: #5d6b82;
    --blog-bg: #f7f9fc;
    --blog-line: #dce4ee;
}

html,
body.blog-body {
    background: var(--blog-bg) !important;
    color: var(--blog-ink);
    min-height: 100vh;
}

body.blog-body {
    display: flex;
    flex-direction: column;
    font-family: 'Bricolage Grotesque', sans-serif;
}

body.blog-body main {
    flex: 1;
}

body.blog-body .navbar {
    background: var(--blog-blue);
}

body.blog-body .navbar-item,
body.blog-body .navbar-link {
    color: #ffffff;
}

body.blog-body .navbar-item:hover,
body.blog-body .navbar-item:focus,
body.blog-body .navbar-link:hover,
body.blog-body .navbar-link:focus {
    background-color: transparent;
    color: #cbd8ec;
}

body.blog-body .navbar-dropdown .navbar-item,
body.blog-body .dropdown-content .dropdown-item {
    color: #ffffff;
}

body.blog-body .navbar-dropdown .navbar-item:hover,
body.blog-body .navbar-dropdown .navbar-item:focus,
body.blog-body .dropdown-content .dropdown-item:hover,
body.blog-body .dropdown-content .dropdown-item:focus {
    background-color: transparent !important;
    color: #cbd8ec !important;
}

body.blog-body img[src="/static/img/logo.png"],
body.blog-body .navbar-item img,
body.blog-body footer img {
    border-radius: 50%;
    border: 3px solid white;
}

.blog-hero,
.blog-article-hero {
    background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
    padding-bottom: 4rem;
    padding-top: 3rem;
}

.blog-kicker,
.blog-card-date {
    color: var(--blog-blue);
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.blog-hero .title,
.blog-article-hero .title {
    color: var(--blog-ink);
    line-height: 1.03;
}

.blog-hero .subtitle,
.blog-article-hero .subtitle {
    color: var(--blog-muted);
    font-size: 1.25rem;
    line-height: 1.55;
}

.blog-hero-panel {
    align-items: center;
    background: var(--blog-blue);
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    gap: 1rem;
    min-height: 210px;
    padding: 2rem;
}

.blog-hero-panel i {
    color: #ffd86b;
    font-size: 3rem;
}

.blog-hero-panel p {
    font-size: 1.45rem;
    line-height: 1.25;
}

.blog-list-section {
    padding-top: 3rem;
}

.blog-card {
    background: #ffffff;
    border: 1px solid var(--blog-line);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(31, 48, 76, 0.08);
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.blog-card:hover,
.blog-card:focus {
    border-color: rgba(31, 48, 76, 0.32);
    box-shadow: 0 22px 54px rgba(31, 48, 76, 0.13);
    color: inherit;
    transform: translateY(-3px);
}

.blog-card-image {
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 0;
    display: block;
    object-fit: cover;
    width: 100%;
}

.blog-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.35rem;
}

.blog-card h2 {
    color: var(--blog-ink);
    font-size: 1.35rem;
    line-height: 1.18;
    margin: 0.4rem 0 0.65rem;
}

.blog-card p {
    color: var(--blog-muted);
    line-height: 1.55;
}

.blog-card-author,
.blog-author-row {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.blog-card-author {
    margin-top: auto;
    padding-top: 1rem;
}

.blog-card-author img,
.blog-author-row img {
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--blog-line);
    height: 42px;
    object-fit: cover;
    width: 42px;
}

.blog-card-author span,
.blog-author-row strong {
    color: var(--blog-ink);
}

.blog-author-row span {
    color: var(--blog-muted);
    display: block;
    font-size: 0.95rem;
}

.blog-back-link {
    color: var(--blog-blue);
    display: inline-block;
    font-weight: 900;
    margin-bottom: 1.25rem;
}

.blog-article-image {
    border-radius: 8px;
    box-shadow: 0 22px 54px rgba(31, 48, 76, 0.16);
    overflow: hidden;
}

.blog-article-image img {
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 0;
    display: block;
    object-fit: cover;
    width: 100%;
}

.blog-article-section {
    background: #ffffff;
    padding-top: 3.5rem;
}

.blog-content {
    color: #253149;
    font-family: Arial, sans-serif;
    font-size: 1.08rem;
    line-height: 1.8;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
    color: var(--blog-ink);
    font-family: 'Bricolage Grotesque', sans-serif;
    line-height: 1.2;
    margin-top: 2.2rem;
}

.blog-content h2 {
    font-size: 2rem;
}

.blog-content h3 {
    font-size: 1.55rem;
}

.blog-content a {
    color: #1268b3;
    font-weight: 700;
}

.blog-content blockquote {
    background: #f0f5fb;
    border-left: 5px solid var(--blog-blue);
    border-radius: 0 8px 8px 0;
    color: #31415c;
    padding: 1rem 1.25rem;
}

.blog-content table {
    border-collapse: collapse;
    display: block;
    margin: 1.5rem 0;
    overflow-x: auto;
    width: 100%;
}

.blog-content th,
.blog-content td {
    border: 1px solid var(--blog-line);
    padding: 0.8rem;
    text-align: left;
}

.blog-content th {
    background: #edf3fa;
    color: var(--blog-ink);
}

.blog-content img {
    border: 0;
    border-radius: 8px;
    display: block;
    height: auto;
    margin: 1.5rem 0;
    max-width: 100%;
}

.blog-empty-state {
    background: #ffffff;
    border: 1px solid var(--blog-line);
    border-radius: 8px;
}

@media screen and (max-width: 1024px) {
    body.blog-body .navbar-menu {
        background: var(--blog-blue) !important;
        padding: 16px !important;
    }

    .blog-article-hero .column.is-7,
    .blog-article-hero .column.is-5,
    .blog-article-section .column.is-8,
    .blog-list-section .column.is-4 {
        flex: none;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    #desktop_only,
    #desktop_only2 {
        display: none;
    }

    .blog-hero,
    .blog-article-hero {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 2rem;
    }

    .blog-article-section,
    .blog-list-section {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .blog-hero .title,
    .blog-article-hero .title {
        font-size: 2.35rem;
    }
}