/* Blog listing */
.blogs-page .hero,
.media-page .hero { min-height: 62vh; }
.blogs-page .hero::before,
.media-page .hero::before { background-image: none; }
.blogs-page .hero .cover,
.media-page .hero .cover { animation: none; }
.hero-content { bottom: 2rem; }
.blogs-page .hero-content { align-items: flex-start; text-align: left; }
.blogs-page .hero-content p { margin-right: 0; margin-left: 0; text-align: left; }
.blogs-page .sections > section:first-child > .section-label { display: none; }
.media-page .hero-content { align-items: flex-start; text-align: left; }
.media-page .hero-content p { margin-right: 0; margin-left: 0; text-align: left; }
.listing-display { display: flex; align-items: flex-start; gap: 8rem; }
.blogs-page .listing-display { display: block; }
.blogs-page .listing-display .article-sidebar { display: none; }
.listing-display .article-sidebar { width: 20rem; flex-shrink: 0; }
.listing-display .article-sidebar-inner { position: sticky; top: 4.5rem; }
.listing-display > .sections { min-width: 0; flex: 1; padding-top: 0; }
.blog-grid-large { gap: 2.5rem; }
.blog-grid-large .blog-card-image { aspect-ratio: 16 / 10; }
.blog-grid-large .blog-read-popup { opacity: 0; padding-top: 0.35rem; }
.blog-grid-large .blog-card:hover .blog-read-popup { opacity: 1; }
.blog-grid-large .article-read-text { opacity: 0.75; margin-left: -1rem; }
.blog-grid-large .blog-card:hover .article-read-text { opacity: 1; margin-left: 0; }
.blog-grid-large .article-read-text { font-size: 0.75rem; }
.blog-grid-large .article-read-text { font-size: 0.75rem; }

.blog-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; max-width: 1100px; margin-bottom: 2rem; }
.blog-filter label { width: 100%; color: var(--text-meta); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; }
.blog-filter input { flex: 1 1 24rem; min-width: 18rem; padding: 0.9rem 1rem; border: 1px solid var(--border-mid); border-radius: var(--radius-sm); outline: none; background: var(--code-bg); color: var(--text-header); font: inherit; font-size: 0.85rem; }
.blog-filter input:focus { border-color: var(--text-meta); }
.blog-filter input::-webkit-search-cancel-button { width: 1rem; height: 1rem; cursor: pointer; filter: invert(1) grayscale(1); }
.blog-filter-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.blog-filter-tags button { padding: 0.6rem 0.9rem; border: 1px solid var(--border-mid); border-radius: var(--radius-pill); color: var(--text-meta); font-size: 0.7rem; letter-spacing: 0.06em; cursor: pointer; box-shadow: 0 0 0.6rem rgba(200, 200, 200, 0.04); }
.blog-filter-tags button:hover, .blog-filter-tags button.filter-active { border-color: var(--text-body); color: var(--text-header); }
.blog-filter-tags button.filter-active { box-shadow: 0 0 0.8rem rgba(225, 225, 225, 0.12); }
.post-card[hidden] { display: none; }
.blog-empty { display: none; color: var(--text-meta); }
.blog-empty:not([hidden]) { display: block; }
.article-featured .blog-row-thumb img, .media-page .blog-row-thumb img { max-width: none !important; width: 100% !important; height: 100% !important; min-width: 100%; min-height: 100%; object-fit: cover !important; object-position: center center !important; }
.media-page .blog-row-thumb { display: block; width: 12rem; height: 6rem; overflow: hidden; background: var(--surface); position: relative; aspect-ratio: 2 / 1; }
.media-page .blog-row-thumb img { display: block; }

@media (max-width: 600px) {
	.media-page .blog-row-thumb { display: block; }
}

@media (max-width: 900px) { .blog-grid-large { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .listing-display { display: block; } .listing-display .article-sidebar { width: auto; margin-bottom: 2rem; } .listing-display .article-sidebar-inner { position: static; } }
@media (max-width: 600px) { .blog-grid-large { grid-template-columns: 1fr; } }