/* ── Blog styles (blog.php) ────────────────────────────────────────────────
   Drop this inside your main stylesheet, or in a <style> block in head.php
   wrapped with:  <?php if (basename($_SERVER['PHP_SELF']) === 'blog.php'): ?> … <?php endif; ?>
   ───────────────────────────────────────────────────────────────────────── */

.soro-blog-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.soro-blog-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid #e5e5e5;
    color: #666;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .2s;
}
.soro-blog-back:hover { background: #f5f5f5; }

/* List */
.soro-blog-list { display: flex; flex-direction: column; gap: 24px; }
.soro-blog-card {
    display: flex;
    gap: 20px;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, border-color .2s;
}
.soro-blog-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    border-color: #d0d0d0;
}
.soro-blog-card-image {
    width: 140px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.soro-blog-card-content  { flex: 1; min-width: 0; }
.soro-blog-card-title    { font-size: 18px; font-weight: 600; margin: 0 0 8px; line-height: 1.3; }
.soro-blog-card-excerpt  { font-size: 14px; color: #666; margin: 0 0 12px; line-height: 1.5;
                            display: -webkit-box; -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical; overflow: hidden; }
.soro-blog-card-date     { font-size: 12px; color: #999; }

/* Single article */
.soro-blog-article-title { font-size: 32px; font-weight: 700; margin: 0 0 12px; line-height: 1.2; }
.soro-blog-article-date  { font-size: 14px; color: #666; display: block; margin-bottom: 24px; }
.soro-blog-article-image { width: 100%; max-height: 400px; object-fit: cover;
                            border-radius: 12px; margin-bottom: 24px; }
.soro-blog-article-content                        { font-size: 16px; line-height: 1.7; }
.soro-blog-article-content h1,
.soro-blog-article-content h2,
.soro-blog-article-content h3                     { margin: 32px 0 16px; line-height: 1.3; }
.soro-blog-article-content h2                     { font-size: 24px; }
.soro-blog-article-content h3                     { font-size: 20px; }
.soro-blog-article-content p                      { margin: 0 0 16px; }
.soro-blog-article-content ul,
.soro-blog-article-content ol                     { margin: 0 0 16px; padding-left: 24px; }
.soro-blog-article-content li                     { margin-bottom: 8px; }
.soro-blog-article-content a                      { color: #0066cc; }
.soro-blog-article-content img                    { max-width: 100%; height: auto; border-radius: 8px; }

/* Empty state */
.soro-blog-empty { text-align: center; padding: 48px 24px; color: #666; }

/* Responsive */
@media (max-width: 600px) {
    .soro-blog-card           { flex-direction: column; }
    .soro-blog-card-image     { width: 100%; height: 180px; }
    .soro-blog-article-title  { font-size: 24px; }
}