/* =========================
   BLOG DETAIL
   ========================= */

.blog-detail-hero {
    background: #708090;
    padding: 90px 20px 70px;
    color: #fff;
}

.blog-detail-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.blog-detail-hero h1 {
    font-size: 40px;
    margin: 0 0 10px;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.blog-detail-meta {
    font-size: 14px;
    opacity: .9;
}

.blog-detail-wrapper {
    max-width: 900px;
    padding: 60px 20px;
}

/* Cover image */
.blog-detail-cover {
    margin-bottom: 40px;
}

    .blog-detail-cover img {
        width: 100%;
        border-radius: 20px;
        object-fit: cover;
    }

/* Content */
.blog-detail-content {
    font-size: 18px;
    line-height: 1.9;
    color: #1f2933;
}

.blog-detail-summary {
    font-size: 20px;
    font-weight: 600;
    color: #374151;
    border-left: 4px solid var(--accent);
    padding-left: 18px;
    margin-bottom: 40px;
}

/* HTML content (editor output) */
.blog-detail-body p {
    margin-bottom: 22px;
}

.blog-detail-body h2 {
    font-size: 28px;
    margin: 50px 0 18px;
}

.blog-detail-body h3 {
    font-size: 22px;
    margin: 40px 0 14px;
}

.blog-detail-body ul {
    margin: 20px 0 30px 22px;
}

.blog-detail-body li {
    margin-bottom: 10px;
}

/* Responsive */
@media(max-width: 768px) {
    .blog-detail-hero h1 {
        font-size: 32px;
    }

    .blog-detail-content {
        font-size: 17px;
    }
}