/* ==========================================================================
 BLOG.CSS - Blog Grid, Article Layout, Related Posts
 Sell Chicago Properties
 Mobile-first blog system
 ========================================================================== */

/* ---------------------------------------------------------------------------
 1. BLOG LISTING GRID
 --------------------------------------------------------------------------- */

.blog-grid {
 display: grid;
 gap: var(--space-6);
}
@media (min-width: 768px) {
 .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
 .blog-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ---------------------------------------------------------------------------
 2. BLOG CARD
 --------------------------------------------------------------------------- */

.blog-card {
 display: flex;
 flex-direction: column;
 background: var(--color-white);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-md);
 overflow: hidden;
 text-decoration: none;
 transition: box-shadow var(--transition-base);
}
.blog-card:hover {
 box-shadow: var(--shadow-md);
}
.blog-card__image {
 width: 100%;
 height: 200px;
 object-fit: cover;
}
.blog-card__body {
 padding: var(--space-5);
 display: flex;
 flex-direction: column;
 flex: 1;
}
.blog-card__badge {
 display: inline-block;
 margin-bottom: var(--space-3);
}
.blog-card__title {
 font-size: 1.125rem;
 font-weight: var(--fw-semibold);
 color: var(--color-navy);
 margin-bottom: var(--space-2);
 line-height: 1.3;
}
.blog-card__excerpt {
 font-size: 0.9375rem;
 color: var(--color-text-light);
 line-height: 1.6;
 flex: 1;
}
.blog-card__meta {
 margin-top: var(--space-4);
 padding-top: var(--space-3);
 border-top: 1px solid var(--color-border);
 font-size: 0.8125rem;
 color: var(--color-text-muted);
}


/* ---------------------------------------------------------------------------
 3. ARTICLE LAYOUT
 --------------------------------------------------------------------------- */

.article {
 max-width: var(--container-narrow);
 margin: 0 auto;
 padding: var(--space-8) var(--space-4);
}
.article__header {
 margin-bottom: var(--space-6);
}
.article__meta {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-4);
 font-size: 0.875rem;
 color: var(--color-text-muted);
 margin-bottom: var(--space-5);
}
.article__featured-image {
 width: 100%;
 height: auto;
 border-radius: var(--radius-md);
 margin-bottom: var(--space-6);
}


/* ---------------------------------------------------------------------------
 4. ARTICLE BODY - Prose Styles
 --------------------------------------------------------------------------- */

.article__body {
 font-size: 1rem;
 line-height: 1.8;
 color: var(--color-text);
}
.article__body h2 {
 margin-top: var(--space-8);
 margin-bottom: var(--space-4);
}
.article__body h3 {
 margin-top: var(--space-6);
 margin-bottom: var(--space-3);
}
.article__body p {
 margin-bottom: var(--space-4);
 color: var(--color-text-light);
}
.article__body ul, .article__body ol {
 margin-bottom: var(--space-4);
 padding-left: var(--space-5);
}
.article__body li {
 margin-bottom: var(--space-2);
 color: var(--color-text-light);
 line-height: 1.7;
}
.article__body ul li { list-style-type: disc; }
.article__body ol li { list-style-type: decimal; }
.article__body a {
 color: var(--color-accent);
 text-decoration: underline;
 text-underline-offset: 2px;
}
.article__body a:hover {
 color: var(--color-accent-dark);
}
.article__body img {
 width: 100%;
 height: auto;
 border-radius: var(--radius-md);
 margin: var(--space-6) 0;
}
.article__body blockquote {
 border-left: 3px solid var(--color-accent);
 padding: var(--space-4) var(--space-5);
 margin: var(--space-6) 0;
 background: var(--color-accent-light);
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 font-style: italic;
 color: var(--color-text-light);
}


/* ---------------------------------------------------------------------------
 5. RELATED POSTS
 --------------------------------------------------------------------------- */

.related-posts {
 margin-top: var(--space-10);
 padding-top: var(--space-8);
 border-top: 1px solid var(--color-border);
}
.related-posts h2 {
 margin-bottom: var(--space-5);
}
.related-posts__grid {
 display: grid;
 gap: var(--space-5);
}
@media (min-width: 768px) {
 .related-posts__grid { grid-template-columns: repeat(3, 1fr); }
}