/* ================================================
   BLOG POST STYLES
   Following /goodweb principles & 8-point grid
   ================================================ */

/* ===== Blog Article Container ===== */
.blog-article {
    padding: calc(var(--nav-height) + var(--space-64)) 0 var(--space-96);
    background-color: var(--color-white);
}

.blog-article__container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-24);
}

/* ===== Back Link ===== */
.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: var(--space-32);
    transition: color var(--transition-base);
}

.blog-back-link:hover {
    color: #0088CC;
}

.blog-back-link svg {
    width: 16px;
    height: 16px;
}

/* ===== Article Meta ===== */
.blog-meta {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-bottom: var(--space-24);
    font-size: var(--text-sm);
}

.blog-meta__category {
    color: var(--color-accent);
    font-weight: 600;
}

.blog-meta__separator {
    color: var(--color-gray);
}

.blog-meta__date,
.blog-meta__read-time {
    color: var(--color-gray);
}

/* ===== Article Title ===== */
.blog-title {
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-secondary);
    line-height: var(--leading-display);
    margin-bottom: var(--space-32);
}

/* ===== Author Info ===== */
.blog-author {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-bottom: var(--space-48);
    padding-bottom: var(--space-48);
    border-bottom: 1px solid var(--color-gray-light);
}

.blog-author__avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #00AEEF 0%, #0088CC 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--text-xl);
}

.blog-author__name {
    font-weight: 600;
    color: var(--color-secondary);
}

.blog-author__title {
    font-size: var(--text-sm);
    color: var(--color-gray);
}

/* ===== Article Content ===== */
.blog-content {
    font-family: var(--font-sans);
    color: #1a1a1a;
}

.blog-content p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-24);
}

.blog-content p.lead {
    font-size: var(--text-xl);
    color: #333;
    margin-bottom: var(--space-32);
}

.blog-content h2 {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-secondary);
    margin-top: var(--space-64);
    margin-bottom: var(--space-24);
}

.blog-content h3 {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-secondary);
    margin-top: var(--space-40);
    margin-bottom: var(--space-16);
}

.blog-content h4 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-secondary);
    margin-top: var(--space-32);
    margin-bottom: var(--space-12);
}

.blog-content ul,
.blog-content ol {
    margin-bottom: var(--space-24);
    padding-left: var(--space-32);
}

.blog-content li {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-12);
}

.blog-content strong {
    font-weight: 600;
    color: var(--color-secondary);
}

.blog-content code {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* ===== Callout Boxes ===== */
.blog-callout {
    background-color: #f9f9f9;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
    margin: var(--space-32) 0;
}

.blog-callout h4 {
    color: var(--color-accent);
    margin-top: 0;
    margin-bottom: var(--space-16);
}

.blog-callout ul {
    margin-bottom: 0;
}

.blog-callout li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.blog-callout li:last-child {
    margin-bottom: 0;
}

.blog-callout__bullet {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 4px;
}

/* ===== Info Cards ===== */
.blog-card {
    background-color: #f9f9f9;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
    margin-bottom: var(--space-16);
}

.blog-card h4 {
    margin-top: 0;
    margin-bottom: var(--space-12);
}

.blog-card p {
    margin-bottom: 0;
}

/* ===== CTA Box ===== */
.blog-cta {
    background: linear-gradient(135deg, rgba(0, 174, 239, 0.1) 0%, rgba(0, 136, 204, 0.05) 100%);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: var(--space-40);
    margin-top: var(--space-64);
    text-align: center;
}

.blog-cta h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-secondary);
    margin-top: 0;
    margin-bottom: var(--space-16);
}

.blog-cta p {
    margin-bottom: var(--space-24);
}

.blog-cta .btn {
    display: inline-block;
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .blog-article {
        padding: calc(var(--nav-height) + var(--space-32)) 0 var(--space-64);
    }

    .blog-title {
        font-size: var(--text-3xl);
    }

    .blog-content h2 {
        font-size: var(--text-2xl);
        margin-top: var(--space-48);
    }

    .blog-content h3 {
        font-size: var(--text-xl);
    }

    .blog-content p,
    .blog-content li {
        font-size: var(--text-base);
    }

    .blog-meta {
        flex-wrap: wrap;
        gap: var(--space-8);
    }
}