/* Blog listing + single post styles */

.blog_section
{
    padding: 60px 0 80px;
}

.blog_intro
{
    margin-bottom: 50px;
    text-align: center;
}

.blog_intro p
{
    color: #4b505e;
    font-size: 17px;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

/* Card grid */
.blog_card
{
    background: #fff;
    border: 1px solid #eaeaf0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}

.blog_card:hover
{
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.blog_card_thumb_link
{
    display: block;
    overflow: hidden;
    background: #f7f8fb;
}

.blog_card_thumb
{
    width: 100%;
    aspect-ratio: 1200 / 630; /* match the recommended upload ratio so 1200x630 images aren't cropped */
    height: auto;
    object-fit: cover; /* still useful as a fallback for images uploaded at a different ratio */
    display: block;
    transition: transform 0.3s;
}

.blog_card:hover .blog_card_thumb
{
    transform: scale(1.04);
}

.blog_card_thumb_placeholder
{
    width: 100%;
    aspect-ratio: 1200 / 630;
    background: linear-gradient(135deg, #1786d8 0%, #00aff0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
}

.blog_card_body
{
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog_card_title
{
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: #2d3340;
}

.blog_card_title a
{
    color: inherit;
    text-decoration: none;
}

.blog_card_title a:hover
{
    color: #1786d8;
    text-decoration: none;
}

.blog_card_meta
{
    color: #8b93a3;
    font-size: 13px;
    margin-bottom: 10px;
}

.blog_card_excerpt
{
    color: #4b505e;
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 14px;
    flex: 1;
    overflow: hidden;
    /* Don't show inner block-level cruft from WP */
}

.blog_card_excerpt p:last-child
{
    margin-bottom: 0;
}

.blog_card_more
{
    color: #1786d8;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    align-self: flex-start;
}

.blog_card_more:hover
{
    color: #0d6cb0;
    text-decoration: none;
}

.blog_card_more::after
{
    content: " ←";
}

/* Empty state */
.blog_empty
{
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    font-size: 17px;
}

/* Pagination */
.blog_pagination
{
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.blog_pagination a,
.blog_pagination span
{
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #d6dae2;
    border-radius: 6px;
    color: #2d3340;
    text-decoration: none;
    font-size: 14px;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
}

.blog_pagination a:hover
{
    border-color: #1786d8;
    color: #1786d8;
    text-decoration: none;
}

.blog_pagination .blog_page_active
{
    background: #1786d8;
    border-color: #1786d8;
    color: #fff;
    cursor: default;
}

.blog_pagination .blog_page_disabled
{
    color: #c0c4cc;
    background: #f7f8fb;
    cursor: default;
}

/* Single post page — blue topbar matches the navbar's height (the area that turns white on scroll) */
.blog_post_topbar
{
    background: #2c82ed;
    background-image: linear-gradient(40deg, #2c82ed 0%, #38d0fc 100%);
    height: 80px;
}

.blog_post_section
{
    padding: 30px 0 80px;
}

.blog_back_link
{
    display: inline-block;
    color: #6b7280;
    font-size: 15px;
    text-decoration: none;
    margin-bottom: 16px;
}

.blog_back_link:hover
{
    color: #1786d8;
    text-decoration: none;
}

.blog_back_link::before
{
    content: "→ ";
}

.blog_post_article
{
    background: #fff;
    border: 1px solid #eaeaf0;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

.blog_post_hero
{
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    display: block;
    background: #f7f8fb;
}

.blog_post_hero_placeholder
{
    width: 100%;
    height: 280px;
    background: linear-gradient(135deg, #1786d8 0%, #00aff0 100%);
}

.blog_post_inner
{
    padding: 36px 40px 50px;
}

.blog_post_title
{
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: #2d3340;
    margin: 0 0 12px;
}

.blog_post_meta
{
    color: #8b93a3;
    font-size: 14px;
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid #f0f1f5;
}

.blog_post_body
{
    font-size: 16px;
    line-height: 1.8;
    color: #2d3340;
    font-weight: 400; /* override marketing body 300 */
}

/* Responsive body scaling — keeps em-based heading sizes in sync with viewport,
   matching the editor's responsive base (with a higher floor for readability). */
@media (max-width: 1199px) { .blog_post_body { font-size: 15.5px; } }
@media (max-width: 991px)  { .blog_post_body { font-size: 15px;   } }
@media (max-width: 767px)  { .blog_post_body { font-size: 14.5px; } }

.blog_post_body p
{
    color: inherit;
    margin-bottom: 16px;
}

.blog_post_body b,
.blog_post_body strong
{
    font-weight: 700;
}

.blog_post_body img
{
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 14px 0;
}

.blog_post_body h1, .blog_post_body h2, .blog_post_body h3,
.blog_post_body h4, .blog_post_body h5, .blog_post_body h6
{
    margin-top: 28px;
    margin-bottom: 12px;
    color: #2d3340;
    font-weight: 700;
    line-height: 1.3;
}

.blog_post_body h1 { font-size: 1.86em; }
.blog_post_body h2 { font-size: 1.72em; }
.blog_post_body h3 { font-size: 1.58em; }
.blog_post_body h4 { font-size: 1.43em; }
.blog_post_body h5 { font-size: 1.29em; }
.blog_post_body h6 { font-size: 1.15em; }

.blog_post_body ul,
.blog_post_body ol
{
    padding-right: 28px;
    padding-left: 0;
    margin-bottom: 16px;
}

.blog_post_body ul { list-style-type: disc; }
.blog_post_body ol { list-style-type: decimal; }

.blog_post_body li
{
    margin-bottom: 6px;
    color: inherit;
}

.blog_post_body li p
{
    margin-bottom: 0;
}

.blog_post_body pre
{
    background: #eef4fb;
    border: 1px solid #cfddee;
    color: #2d3340;
    border-radius: 6px;
    padding: 14px;
    direction: ltr;
    text-align: left;
    overflow-x: auto;
    font-family: "Source Code Pro", monospace;
    font-size: 14px;
}

.blog_post_body a
{
    color: #1786d8;
}

.blog_post_body a:hover
{
    color: #0d6cb0;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px)
{
    .blog_post_inner { padding: 22px 22px 32px; }
    .blog_post_title { font-size: 24px; }
    .blog_section { padding: 30px 0 40px; }
}