/* Blog page redesign — supplemental styles loaded only on blog pages */

.blog-archive { background-color: #fff; }

.blog-hero { background-color: #fff7e8; }
.blog-hero h1 { margin: 0 0 0.5rem; }
.blog-hero nav a { color: #690000; text-decoration: none; }
.blog-hero nav a:hover { text-decoration: underline; }

.cat-chip {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid #1a1a1a;
    border-radius: 999px;
    font-size: 0.875rem;
    color: #1a1a1a;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.cat-chip:hover { background-color: #f3f3f3; }
.cat-chip-active {
    background-color: #690000;
    color: #fff;
    border-color: #690000;
}
.cat-chip-active:hover { background-color: #690000; color: #fff; }

.featured-post { background-color: #fafafa; }
.featured-post h2 a { color: inherit; text-decoration: none; }
.featured-post h2 a:hover { text-decoration: underline; }

.sidebar-card { background-color: #fff; }
.sidebar-card h3 { font-size: 1.125rem; margin: 0 0 1rem; }
.sidebar-card ul { list-style: none; padding: 0; margin: 0; }
.sidebar-card a { color: inherit; text-decoration: none; }
.sidebar-card a:hover { text-decoration: underline; }

.bg-light { background-color: #fafafa; }
.border-color { border-color: #e5e5e5; }

/* Line clamp fallback (Tailwind 2 doesn't ship line-clamp) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pagination */
.pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    margin-right: 0.4rem;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    text-decoration: none;
    color: #1a1a1a;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background-color: #690000;
    color: #fff;
    border-color: #690000;
}

/* Sticky sidebar fallback */
@media (min-width: 1024px) {
    .blog-archive aside .sticky { position: sticky; top: 1.5rem; }
}

@media (max-width: 1023px) {
    .blog-hero { padding: 2.5rem 0; }
    .blog-hero h1 { font-size: 2rem; }
    .featured-post .grid { gap: 1.5rem; }
}