/* Shared outer layout for all Epiloguely blog and news articles. */
.main-content { min-width: 0; }

.blog-container {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 36px auto !important;
    padding: 0 18px 80px !important;
    font-family: 'Inter', sans-serif;
}

.blog-header-card {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 28px !important;
    padding: 52px 42px !important;
    border-radius: 24px !important;
    overflow: hidden;
}

.blog-header-card h1 {
    max-width: 1180px;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(2.05rem, 4.5vw, 3.45rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;
    overflow-wrap: anywhere;
}

.blog-header-card .blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
}

.blog-content-section {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 28px !important;
    padding: 44px !important;
    border: 1px solid rgba(15, 23, 42, .07) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 5px 20px rgba(15, 23, 42, .045) !important;
}

.blog-content-section .blog-text,
.blog-content-section > p:not([class]),
.blog-content-section li {
    font-size: 1.04rem;
    line-height: 1.82;
}

.blog-content-section .section-title,
.blog-content-section > h2 {
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.article-hero-image {
    position: relative !important;
    isolation: isolate;
    display: grid !important;
    width: 100% !important;
    min-height: 220px;
    aspect-ratio: 1920 / 728 !important;
    margin-bottom: 32px !important;
    overflow: hidden !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 16px !important;
    background: #0f172a !important;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .12) !important;
}

.article-hero-image > img {
    grid-area: 1 / 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-position: center !important;
}

.article-hero-image > img:only-child,
.article-hero-image .hero-image-main {
    z-index: 1;
    object-fit: contain !important;
}

.article-hero-image .hero-image-blur,
.article-hero-image > img:first-child:not(:only-child) {
    z-index: 0;
    object-fit: cover !important;
    filter: blur(18px) brightness(.64) !important;
    transform: scale(1.12) !important;
}

.blog-container img { max-width: 100%; }

@media (max-width: 760px) {
    .blog-container {
        margin: 20px auto !important;
        padding: 0 10px 56px !important;
    }

    .blog-header-card {
        padding: 34px 20px !important;
        border-radius: 18px !important;
    }

    .blog-content-section {
        padding: 24px 18px !important;
        border-radius: 16px !important;
    }

    .article-hero-image {
        min-height: 170px;
        aspect-ratio: 16 / 9 !important;
        border-radius: 13px !important;
    }

    .blog-content-section .blog-text,
    .blog-content-section > p:not([class]),
    .blog-content-section li {
        font-size: 1rem;
        line-height: 1.76;
    }
}