/* === Blog page === */
.blog-page-section { padding: 60px 0; background: #fff; }

.blog-page-header { text-align: center; margin-bottom: 48px; }
.blog-page-title { font-size: 2.2rem; font-weight: 700; color: #1a0a0a; margin-bottom: 12px; }
.blog-page-subtitle { font-size: 1rem; color: #6b7280; }

/* === 3-column card grid === */
.blog-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}
@media (max-width: 900px) { .blog-articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .blog-articles-grid { grid-template-columns: 1fr; } }

/* === Article card === */
.blog-article-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
}
.blog-article-card:hover { box-shadow: 0 8px 32px rgba(229,0,80,0.10); }

.blog-article-image-link { display: block; }
.blog-article-image { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #f3f4f6; }
.blog-article-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.blog-article-card:hover .blog-article-image img { transform: scale(1.04); }

.blog-article-content { padding: 20px 0 0; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.blog-article-title { font-size: 1.05rem; font-weight: 700; color: #1a0a0a; line-height: 1.4; margin: 0; }
.blog-article-title a { color: inherit; text-decoration: none; }
.blog-article-title a:hover { color: #e50050; }

.blog-article-excerpt { font-size: 0.875rem; color: #6b7280; line-height: 1.6; margin: 0; }

/* === Tags (pink pills) === */
.blog-article-tags, .blog-detail-tags-list { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tag {
    background: #fce7ef;
    color: #e50050;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.blog-article-footer { margin-top: auto; padding-top: 8px; }
.blog-read-more {
    color: #e50050;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.blog-read-more:hover { text-decoration: underline; }

/* === Pagination === */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}
.blog-pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 30px;
    border: 2px solid #e50050;
    color: #e50050;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.blog-pagination-btn--disabled { opacity: 0.4; pointer-events: none; }
.blog-pagination-btn:not(.blog-pagination-btn--disabled):hover { background: #e50050; color: #fff; }
.blog-pagination-info { font-size: 0.875rem; color: #6b7280; }

/* === Empty state === */
.blog-empty { text-align: center; padding: 80px 20px; color: #6b7280; }
.blog-empty-icon { font-size: 3rem; margin-bottom: 16px; color: #e50050; }

/* === Detail page === */
.blog-detail-page-section { padding: 60px 0; }
.blog-detail-back { margin-bottom: 32px; }
.blog-back-link { color: #e50050; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.blog-back-link:hover { text-decoration: underline; }

.blog-detail-header { margin-bottom: 24px; }
.blog-detail-title { font-size: 2rem; font-weight: 700; color: #1a0a0a; line-height: 1.3; margin-bottom: 12px; }
.blog-detail-meta { color: #6b7280; font-size: 0.9rem; }

.blog-detail-image { margin-bottom: 32px; border-radius: 16px; overflow: hidden; }
.blog-detail-image img { width: 100%; max-height: 480px; object-fit: cover; display: block; }

.blog-detail-body { font-size: 1rem; line-height: 1.8; color: #374151; }
.blog-detail-body h2 { font-size: 1.4rem; font-weight: 700; color: #1a0a0a; margin: 32px 0 12px; }
.blog-detail-body h3 { font-size: 1.15rem; font-weight: 600; color: #1a0a0a; margin: 24px 0 8px; }
.blog-detail-body p { margin: 0 0 16px; }
.blog-detail-body a { color: #e50050; }
.blog-detail-body ul, .blog-detail-body ol { margin: 0 0 16px 24px; }

.blog-detail-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid #f3f4f6; display: flex; flex-direction: column; gap: 16px; }
.blog-detail-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.blog-detail-tags-label { font-weight: 600; color: #374151; }
.blog-back-to-list { color: #e50050; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.blog-back-to-list:hover { text-decoration: underline; }

/* Feed-layout era: the old layout's global .container is gone — size the
   blog containers ourselves. */
.blog-page-section .container,
.blog-detail-page-section .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}