/**
 * Small, hand-maintained overrides for defects in the synced assets/css/main.css
 * that must NOT be hand-patched there (see CLAUDE.md / AI/known-issues.md -
 * main.css is overwritten on every front-end sync with no warning) and must
 * NOT be fixed by editing the front-end project directly either. Each rule
 * here should link back to the bug it works around and be removed once a
 * fresh sync actually fixes it upstream.
 */

/**
 * GW report, 2026-10: the mobile Blog filters sheet (.filters-sheet) has an
 * unwanted horizontal scroll on geeksforless.com/blog/ - a long category
 * pill ("Mobile App Development", "Software Development") pushes the
 * sheet wider than the viewport. Root cause: `.filters-sheet-pills` is a
 * 2-column CSS grid (`grid-template-columns: repeat(2, 1fr)`), and a grid
 * track's default minimum width is its content's min-content size, not 0 -
 * combined with `.filter-pill`'s `white-space: nowrap`, a long category
 * name's un-wrappable min-content width forces its whole column (and the
 * sheet) wider than the screen. Front-end's own test data only ever used
 * short category names (ENGINEERING, AI & ML, ...), so this never
 * surfaced there - it's real WordPress category data exposing a latent
 * CSS bug, not something wrong with the markup this theme renders.
 * `minmax(0, 1fr)` is the standard fix for exactly this class of grid
 * overflow; `white-space: normal` lets a long name wrap onto a second
 * line inside its pill instead of overflowing past it.
 */
.filters-sheet-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filters-sheet-pills .filter-pill {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}