/* Blog Page Styles */

.blog-page-wrapper {
    background-color: #fff;
    width: 96.94%; /* Matches hero-overlap-outer width */
    margin: 8vw auto 0 auto; /* Matches hero-overlap-outer margin-top */
    position: relative;
}

/* ===== BLOG HEADER ===== */
.blog-header {
    padding: 4.167vw 9.792vw 2.222vw; /* top 60px, left/right 141px, bottom 32px @ 1440px */
}

.blog-header__title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 3.194vw; /* 46px @ 1440px — consistent with h2 headings site-wide */
    line-height: 1.13;
    color: #000;
    margin: 0;
}

/* ===== BLOG CONTENT ===== */
.blog-content {
    padding: 0 9.792vw 6.944vw; /* left/right 141px, bottom 100px @ 1440px */
}

/* Override TinyMCE inline styles to match site-wide body text */
.blog-content p,
.blog-content li,
.blog-content span,
.blog-content div {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1.111vw !important; /* 16px @ 1440px */
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: #2d2d2d !important;
}

.blog-content p {
    margin: 0 0 1.25vw !important; /* 18px @ 1440px */
}

/* ===== TABLET ( < 1200px ) — matches hero-overlap breakpoint ===== */
@media (max-width: 1200px) {
    .blog-page-wrapper {
        width: 95.5%;
        margin-top: 120px; /* matches hero-overlap-outer tablet */
    }

    .blog-header {
        padding: 40px 5vw 24px;
    }

    .blog-header__title {
        font-size: clamp(28px, 3.194vw, 46px);
    }

    .blog-content {
        padding: 0 5vw 60px;
    }

    .blog-content p,
    .blog-content li,
    .blog-content span,
    .blog-content div {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .blog-content p {
        margin: 0 0 16px !important;
    }
}

/* ===== MOBILE ( < 768px ) — matches hero-overlap breakpoint ===== */
@media (max-width: 768px) {
    .blog-page-wrapper {
        width: 92.5%;
        margin-top: 100px; /* matches hero-overlap-outer mobile */
    }

    .blog-header {
        padding: 30px 20px 20px;
    }

    .blog-header__title {
        font-size: 28px;
        line-height: 1.2;
    }

    .blog-content {
        padding: 0 20px 48px;
    }
}