/* ═══════════════════════════════════════════════════════════
   Blog Grid — GitHub-inspired filter + card layout
   Loaded on /blog/ page only.
   Uses GitHub design-system color tokens (gh-*).
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens (GitHub palette) ── */
:root {
   --gh-heading: #24292f;
   --gh-body: #1f2328;
   --gh-muted: #57606a;
   --gh-link: #0550ae;
   --gh-border: rgba(233, 237, 241, 0.996);
   --gh-border-strong: #afb8c1;
   --gh-checkbox-border: #8c959f;
   --gh-canvas: #ffffff;
   --gh-label-purple: #8250df;
   --gh-label-pink: #bf3989;
}

/* ── Blog grid font stack (Mona Sans → system fallback) ── */
#blog-grid {
   font-family: "Mona Sans", MonaSansFallback, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ── Custom filter checkbox ── */
.blog-filter-checkbox {
   appearance: none;
   -webkit-appearance: none;
   width: 20px;
   height: 20px;
   min-width: 20px;
   border: 2px solid var(--gh-checkbox-border);
   border-radius: 4px;
   background-color: var(--gh-canvas);
   cursor: pointer;
   position: relative;
   transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.blog-filter-checkbox:checked {
   background-color: var(--gh-link);
   border-color: var(--gh-link);
}

.blog-filter-checkbox:checked::after {
   content: '';
   position: absolute;
   left: 4px;
   top: 1px;
   width: 8px;
   height: 12px;
   border: solid #fff;
   border-width: 0 2.5px 2.5px 0;
   transform: rotate(42deg);
}

.blog-filter-checkbox:focus-visible {
   outline: 2px solid var(--gh-link);
   outline-offset: 2px;
}

/* ── Filter toggle icon (mobile) ── */
.blog-filter-icon-btn {
   padding: 4px;
   background: none;
   border: none;
   cursor: pointer;
   color: #252525;
}

.blog-filter-icon-btn:hover {
   color: var(--gh-muted);
}

/* ── Label pill (outline ring via mask) ── */
.blog-label-pill {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 26px;
   padding: 3px 14px;
   border-radius: 24px;
   font-size: 13px;
   font-weight: 500;
   line-height: 20px;
}


/* ── Card hover: arrow animation ── */
.blog-card-link:hover .blog-card-arrow-stem {
   opacity: 1;
   transform: translateX(0);
}

.blog-card-arrow-stem {
   opacity: 0;
   transform: translateX(-4px);
   transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ── No-image placeholder ── */
.blog-no-image {
   width: 100%;
   aspect-ratio: 16 / 9;
   background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ── Blog filter sidebar headings ── */
.blog-filter-heading {
   font-family: "Mona Sans Mono", monospace;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--gh-muted);
   line-height: 1.3;
}