/* ============================================
   BLOG SHARED STYLES
   ============================================ */

.blog-post-content p {
    font-size: var(--type-scale-01);
    /* 0.9rem equivalent */
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
}

.blog-post-content h3 {
    font-size: var(--type-scale-04);
    /* Adjusted for hierarchy */
    font-family: var(--font-expressive);
    color: var(--color-brand-primary);
    margin-top: var(--spacing-05);
}

.blog-post-content h4 {
    font-size: var(--type-scale-03);
    font-family: var(--font-expressive);
    color: var(--color-brand-primary);
}

.blog-meta span,
.blog-tags,
.blog-tags .tag,
.blog-tags .tag-label,
.blockquote p,
.blog-post-content table td,
.blog-post-content table th,
.blog-post-content li,
.blog-text-content p {
    font-size: var(--type-scale-01);
    color: var(--color-text-secondary);
}

/* CTA Sections in Blog */
.cta-section {
    background: var(--color-brand-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-06);
    margin: var(--spacing-06) 0;
}

.cta-section h2,
.cta-section h3,
.cta-section p {
    color: var(--color-white) !important;
}

.cta-btn {
    display: inline-block;
    background: var(--color-white);
    color: var(--color-brand-primary);
    padding: var(--spacing-03) var(--spacing-05);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: transform var(--transition-base) ease;
    margin-top: var(--spacing-03);
}

.cta-btn:hover {
    transform: scale(1.05);
    color: var(--color-brand-accent);
}

/* Blog Hero */
.blog-hero {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    min-height: 50vh !important;
    display: flex;
    align-items: center;
    color: var(--color-white);
}

.blog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.blog-hero .container {
    position: relative;
    z-index: 2;
}