/* Knowledge Hub — mobile / responsive overrides for the PUBLIC pages
   (listing + article). Loaded LAST in both templates so these win on small
   screens. Media-queries only. The article shell's TOC-rail collapse lives in
   knowledge-hub-article.css (@max-width:1100px). Breakpoints per design-system. */

/* ===== TABLET (≤1100px) ===== */
@media (max-width: 1100px) {
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1023px) {
    .posts-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}

/* ===== MOBILE (≤767px) ===== */
@media (max-width: 767px) {
    /* --- Listing --- */
    .blog-container { padding: 32px 16px 64px; }
    .blog-hero { margin-bottom: 36px; }
    .blog-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
    .blog-hero p { font-size: 1.02rem; }

    .filter-section { flex-direction: column; align-items: stretch; gap: 12px; }
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* fade the trailing edge so it reads as horizontally scrollable */
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
                mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-btn { flex: 0 0 auto; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
    .blog-search { width: 100%; }
    .blog-search__input { width: 100%; }

    .featured-card { grid-template-columns: 1fr; }
    .featured-card__img { min-height: 200px; }
    .featured-card__body { padding: 28px; }
    .featured-card h2 { font-size: 1.5rem; }

    .posts-grid { grid-template-columns: 1fr; }
    .pagination { flex-wrap: wrap; }

    /* --- Article --- */
    .article-shell { padding: 24px 16px 64px; }
    .article-title { font-size: clamp(1.6rem, 7vw, 2rem); }
    .article-meta { gap: 14px; }
    .article-content { font-size: 1.06rem; }
    .article-content h2 { font-size: 1.45rem; }
    .code-copy { padding: 9px 14px; }  /* comfortable tap target on phones */
    .featured-hero-image { max-height: none; aspect-ratio: 16 / 9; object-fit: cover; }

    .article-foot { flex-direction: column; align-items: flex-start; }
    .article-byline { flex-direction: column; gap: 14px; }
}

/* ===== SMALL MOBILE (≤767px / ≤479px) ===== */
@media (max-width: 767px) {
    .related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 479px) {
    .featured-card__body { padding: 22px; }
    .post-card__body { padding: 20px; }
    .article-share { flex-wrap: wrap; }
}