/* ═══════════════════════════════════════════════════
   mlab blog index (/blog)
   Sits on mlab-engineering.css (.eng-root tokens, hero,
   search box, chips, empty state) and mlab-editorial.css
   (kv strip, section titles). Category bar: .mlab-ui-tabs
   with the sliding pill from mlab-tabs.js.
═══════════════════════════════════════════════════ */

.blog-root a:focus-visible { outline: 2px solid var(--eng-accent); outline-offset: 2px; }

/* ─── Controls: categories, search, tags, active filters ─── */
.blog-controls {
    position: relative;
    margin: 1.25rem 0 1.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--eng-line);
    border-radius: 16px;
    background: var(--eng-surface);
}
.blog-tabs-wrap { min-width: 0; }
/* Full-width bar: when the categories wrap, both rows span the panel evenly. */
.blog-tabs { display: flex; }
.blog-tabs .mlab-ui-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    text-decoration: none; white-space: nowrap;
}
.blog-tab-count {
    font-family: var(--eng-mono); font-size: .68rem; color: var(--eng-faint);
    font-variant-numeric: tabular-nums;
}
.blog-tabs .mlab-ui-tab.active .blog-tab-count { color: var(--eng-accent); }

.blog-refine {
    display: flex; align-items: flex-start; gap: .75rem 1.25rem;
    margin-top: .9rem;
}
.blog-search { flex: 0 0 300px; max-width: 300px; }
.blog-tags { display: flex; align-items: baseline; gap: .5rem .75rem; min-width: 0; padding-top: .45rem; }
.blog-tags-label {
    flex: 0 0 auto;
    font-family: var(--eng-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--eng-muted);
}
.blog-root a.eng-filter-chip { text-decoration: none; }
.blog-root .eng-filter-chip[aria-current] { color: var(--eng-ink); background: var(--eng-accent-soft); border-color: rgba(217, 119, 6, .4); }
.blog-root .eng-filter-chip[aria-current] span { color: var(--eng-accent); }

.blog-active {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--eng-line);
    font-size: .85rem; color: var(--eng-muted);
}
.blog-active-count { margin-right: .25rem; }
.blog-active-count strong { color: var(--eng-ink); font-variant-numeric: tabular-nums; }
.blog-active-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .22rem .4rem .22rem .65rem; border-radius: 999px;
    font-size: .78rem; font-weight: 500; color: var(--eng-ink); text-decoration: none;
    background: var(--eng-accent-soft); border: 1px solid rgba(217, 119, 6, .35);
    transition: border-color .15s ease;
}
.blog-active-pill :is(i, svg) { width: 13px; height: 13px; color: var(--eng-muted); }
.blog-active-pill:hover { color: var(--eng-ink); border-color: var(--eng-accent); }
.blog-active-pill:hover :is(i, svg) { color: var(--eng-accent); }
.blog-active-clear { margin-left: auto; font-size: .78rem; color: var(--eng-muted); text-decoration: underline; text-underline-offset: 3px; }
.blog-active-clear:hover { color: var(--eng-ink); }

/* ─── Shared bits ─── */
.blog-section-head { margin-bottom: 1.25rem; }
.blog-section { margin-top: 2.5rem; }
.blog-kicker {
    display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
    font-family: var(--eng-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--eng-accent); font-weight: 600; margin-bottom: .55rem;
}
.blog-kicker time { color: var(--eng-muted); font-weight: 500; }
.blog-kicker-flag {
    padding: .12rem .45rem; border-radius: 5px;
    color: #fff; background: var(--eng-accent);
}
.blog-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    font-family: var(--eng-mono); font-size: .74rem; color: var(--eng-muted);
}
.blog-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.blog-root img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-lead-cover, .blog-side-cover, .blog-tile-cover {
    overflow: hidden; background: var(--eng-sunken);
    aspect-ratio: 1200 / 630;
}
.blog-lead-cover img, .blog-side-cover img, .blog-tile-cover img { transition: transform .45s var(--eng-ease); }

/* ─── Front page: lead story + two side stories ─── */
.blog-front-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 1.25rem;
}
.blog-front-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.blog-lead {
    display: flex; flex-direction: column;
    border: 1px solid var(--eng-line); border-radius: 18px; overflow: hidden;
    background: var(--eng-surface); color: inherit; text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.blog-lead:hover { color: inherit; border-color: var(--eng-line-strong); box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .35); }
.blog-lead:hover img { transform: scale(1.025); }
.blog-lead-body { padding: 1.4rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.blog-lead-title {
    font-family: var(--eng-serif); font-size: clamp(1.45rem, 2.4vw, 1.95rem); font-weight: 600;
    line-height: 1.15; letter-spacing: -.02em; color: var(--eng-ink); margin: 0 0 .7rem;
}
.blog-lead-excerpt { color: var(--eng-muted); font-size: .98rem; line-height: 1.65; margin: 0 0 1.1rem; max-width: 66ch; }
.blog-lead-cta {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem;
    font-size: .88rem; font-weight: 600; color: var(--eng-ink);
}
.blog-lead-cta :is(i, svg) { width: 16px; height: 16px; color: var(--eng-accent); transition: transform .25s var(--eng-ease); }
.blog-lead:hover .blog-lead-cta :is(i, svg),
.blog-more-card--eng:hover .blog-lead-cta :is(i, svg) { transform: translateX(4px); }

.blog-front-side { display: flex; flex-direction: column; gap: 1.25rem; }
.blog-side {
    display: flex; flex-direction: column; flex: 1;
    border: 1px solid var(--eng-line); border-radius: 16px; overflow: hidden;
    background: var(--eng-surface); color: inherit; text-decoration: none;
    transition: border-color .2s ease;
}
.blog-side:hover { color: inherit; border-color: var(--eng-line-strong); }
.blog-side:hover img { transform: scale(1.03); }
.blog-side-body { padding: .95rem 1.1rem 1.1rem; }
.blog-side-title {
    font-family: var(--eng-serif); font-size: 1.05rem; font-weight: 600; line-height: 1.3;
    letter-spacing: -.01em; color: var(--eng-ink); margin: 0 0 .55rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ─── Grid ─── */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.blog-tile {
    position: relative; display: flex; flex-direction: column;
    border: 1px solid var(--eng-line); border-radius: 16px; overflow: hidden;
    background: var(--eng-surface); color: inherit; text-decoration: none;
    transition: border-color .2s ease, transform .2s var(--eng-ease), box-shadow .2s ease;
}
.blog-tile:hover { color: inherit; border-color: var(--eng-line-strong); transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(15, 23, 42, .4); }
.blog-tile:hover img { transform: scale(1.04); }
.blog-tile-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.05rem; }
.blog-tile-title {
    font-family: var(--eng-serif); font-size: 1.08rem; font-weight: 600; line-height: 1.3;
    letter-spacing: -.01em; color: var(--eng-ink); margin: 0 0 .5rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-tile-excerpt {
    flex: 1; color: var(--eng-muted); font-size: .86rem; line-height: 1.6; margin: 0 0 .9rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-tile-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding-top: .75rem; border-top: 1px solid var(--eng-line);
}
.blog-tile-tags { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.blog-tile-read {
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    font-family: var(--eng-mono); font-size: .72rem; color: var(--eng-muted);
}
.blog-tile-read :is(i, svg) { width: 15px; height: 15px; color: var(--eng-ink); transition: transform .25s var(--eng-ease); }
.blog-tile:hover .blog-tile-read :is(i, svg) { transform: translate(2px, -2px); color: var(--eng-accent); }

/* ─── Empty state ─── */
.blog-empty { border: 1px dashed var(--eng-line-strong); border-radius: 16px; border-bottom-style: dashed; }
.blog-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.25rem; }

/* ─── Pagination ─── */
.blog-pager {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem;
    margin: 2.25rem 0 .5rem;
}
.blog-pager-pages { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.blog-pager-step, .blog-pager-num {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    min-width: 36px; height: 36px; padding: 0 .7rem; border-radius: 10px;
    border: 1px solid var(--eng-line); background: var(--eng-surface);
    font-size: .85rem; font-weight: 500; color: var(--eng-ink); text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, background .15s ease;
}
.blog-pager-step :is(i, svg) { width: 15px; height: 15px; }
.blog-pager-step:hover, .blog-pager-num:hover { color: var(--eng-ink); border-color: var(--eng-line-strong); background: var(--eng-sunken); }
.blog-pager-num.is-active { color: #fff; background: var(--primary, #111827); border-color: var(--primary, #111827); }
.blog-pager-step.is-disabled { opacity: .45; }
.blog-pager-gap { display: inline-flex; align-items: center; height: 36px; padding: 0 .25rem; color: var(--eng-muted); }
.blog-pager-info { flex-basis: 100%; text-align: center; font-family: var(--eng-mono); font-size: .72rem; color: var(--eng-muted); }

/* ─── Cross-links: engineering + feed ─── */
.blog-more {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem;
    margin: 3rem 0 1rem;
}
.blog-more-card {
    position: relative; overflow: hidden;
    border: 1px solid var(--eng-line); border-radius: 18px; background: var(--eng-surface);
    padding: 1.6rem 1.7rem; color: inherit; text-decoration: none;
    transition: border-color .2s ease;
}
.blog-more-card--eng:hover { color: inherit; border-color: var(--eng-line-strong); }
.blog-more-card--eng::after {
    content: ""; position: absolute; right: -110px; top: -140px; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 119, 6, .14), transparent 65%); pointer-events: none;
}
.blog-more-inner { position: relative; z-index: 1; }
.blog-more-card .eng-eyebrow :is(i, svg) { width: 13px; height: 13px; color: var(--eng-accent); }
.blog-more-title {
    font-family: var(--eng-serif); font-size: 1.3rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em;
    color: var(--eng-ink); margin: .6rem 0 .5rem; max-width: 34ch;
}
.blog-more-card p { color: var(--eng-muted); font-size: .9rem; line-height: 1.6; margin: 0; max-width: 52ch; }
.blog-more-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.blog-more-actions .mlab-ui-btn { text-decoration: none; }

/* ─── Dark ─── */
html[data-bs-theme=dark] .blog-pager-num.is-active { color: #111827; background: #f8fafc; border-color: #f8fafc; }
html[data-bs-theme=dark] .blog-lead:hover,
html[data-bs-theme=dark] .blog-tile:hover { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); }

/* ─── Responsive ─── */
@media (max-width: 1199.98px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .blog-front-grid, .blog-more { grid-template-columns: minmax(0, 1fr); }
    .blog-front-side { flex-direction: row; }
    .blog-front-side .blog-side { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 767.98px) {
    .blog-hero { padding: 1.8rem 1.25rem 1.1rem; }
    .blog-controls { padding: .85rem; }
    .blog-refine { flex-direction: column; align-items: stretch; }
    .blog-search { flex: 1 1 auto; max-width: none; }
    .blog-search kbd { display: none; }
    /* One scrolling row instead of a wall of wrapped tabs. */
    .blog-tabs-wrap { overflow-x: auto; scrollbar-width: none; border-radius: var(--radius, 10px); }
    .blog-tabs-wrap::-webkit-scrollbar { display: none; }
    .blog-tabs { display: inline-flex; flex-wrap: nowrap; }
    .blog-tags { flex-direction: column; gap: .5rem; padding-top: 0; }
    .blog-active-clear { margin-left: 0; }
    .blog-front-side { flex-direction: column; }
    .blog-side { flex-direction: row; }
    .blog-side-cover { flex: 0 0 38%; aspect-ratio: auto; min-height: 100%; }
    .blog-side-body { padding: .75rem .9rem; }
    .blog-side-title { font-size: .98rem; }
    .blog-lead-body { padding: 1.1rem 1.15rem 1.25rem; }
    .blog-grid { grid-template-columns: minmax(0, 1fr); }
    .blog-more-card { padding: 1.3rem 1.25rem; }
    .blog-pager-step { padding: 0 .55rem; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-root img, .blog-tile, .blog-lead-cta :is(i, svg), .blog-tile-read :is(i, svg) { transition: none; }
    .blog-tile:hover { transform: none; }
    .blog-root a:hover img { transform: none; }
}