/* ===================================================
   BLOG ARCHIVE / INDEX (Naujienos)
   Handle: militra-blog-archive. Deps: militra-post-card, militra-pagination.
   Loaded on: home.php, page-naujienos.php, archive.php, index.php AND on
   single.php (the related band reuses .militra-blog-grid).

   OWNERSHIP: this file contains NO bare .militra-post-card* rule and NO
   .pagination rule. post-card.css and pagination.css own those outright and
   load first (dependency order = cascade order). The ONLY card selectors here
   are the six .militra-blog-lead .militra-post-card… banner overrides (and
   their six neutralisations), all at (0,2,0).

   MEDIA-QUERY ORDER IS BROAD -> NARROW: max-999, then 768/428, then 480.
   (home-posts.css documents why the reverse order is a bug. Do not repeat it.)

   NO `overflow` on .militra-blog, .militra-blog__container, .militra-blog-lead
   or .militra-blog-grid: this file also loads on the single post, where a
   non-visible overflow on an ancestor would silently kill the sticky TOC rail.
   =================================================== */

/* The real painted height of the fixed header.
   .militra-custom-header is padding:39px 0 around a container of
   height: var(--header-height) = 49px  ->  127px desktop.
   The mobile queries drop that padding to 27px            ->  103px at <=768px.
   Declared here AND in single-post.css: either file may load alone. */
:root {
    --militra-header-total: calc(var(--header-height, 49px) + 78px); /* 127px */
}

@media (max-width: 768px) {
    :root {
        --militra-header-total: calc(var(--header-height, 49px) + 54px); /* 103px */
    }
}

/* ---------------------------------------------------
   1. SHELL + CONTAINER

   The template sets no body padding — body.militra-header-active clears the
   fixed header. The container matches .militra-posts-container's 1200px /
   12px-sides box but has NO border-top: that hairline is homepage-only (it
   separated two consecutive white sections; there is no section above the
   archive).
   --------------------------------------------------- */
.militra-blog {
    background-color: var(--color-background, #ffffff);
    /* Bottom air before the footer. custom-footer.css contributes only its own
       margin: var(--spacing-6) — the template must supply the rest. */
    padding: 0 0 96px;
}

.militra-blog__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px var(--spacing-4, 1rem) 0; /* 64px top / 12px sides / 0 bottom */
}

/* page-naujienos.php only: the Page's own body copy, printed above the listing. */
.militra-blog__intro {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.9;
    color: var(--color-text, #777e90);
    max-width: 68ch;
    margin: 0 0 48px 0;
    overflow-wrap: anywhere;
    font-variation-settings: 'opsz' 14;
}

.militra-blog__intro > :first-child {
    margin-top: 0;
}

.militra-blog__intro > :last-child {
    margin-bottom: 0;
}

.militra-blog__intro a {
    color: var(--color-primary, #ff7544);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.militra-blog__intro a:hover {
    text-decoration: none;
}

.militra-blog__intro a:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm, 4px);
}

/* ---------------------------------------------------
   2. MASTHEAD

   Left-aligned, single column (the homepage header is a space-between row
   because it carries a view-all CTA; the masthead has none — its CTA lives in
   the hairline rule below it).

   The eyebrow is NOT orange text: #ff7544 on white is ~2.8:1 and fails AA at
   12px. The accent appears as a 24x2px tick before the label, the same way the
   card kicker uses dark-on-peach instead of orange-on-white.
   --------------------------------------------------- */
.militra-blog-masthead {
    max-width: 100%;
    min-width: 0;
}

.militra-blog-masthead__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 0.75rem);
    font-family: var(--font-family-body);
    font-size: var(--font-size-xs, 0.75rem); /* 12px */
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.025em; /* the site's only letter-spacing */
    color: var(--color-text-muted, #797979);
    margin: 0 0 var(--spacing-4, 1rem) 0;
    font-variation-settings: 'opsz' 14;
}

/* The accent, used as a MARK not as text. */
.militra-blog-masthead__eyebrow::before {
    content: '';
    flex: 0 0 auto;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-primary, #ff7544);
}

.militra-blog-masthead__title {
    font-family: var(--font-family-heading);
    font-size: 40px; /* rhymes with the homepage h2 */
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
    color: var(--color-headings-h1, #252a36);
    margin: 0;
    overflow-wrap: anywhere; /* long Lithuanian compounds */
    font-variation-settings: 'opsz' 14;
}

.militra-blog-masthead__lede {
    font-family: var(--font-family-body);
    font-size: 16px;
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.9; /* signature relaxed leading */
    color: var(--color-neutral-500, #777e90);
    margin: var(--spacing-2, 0.5rem) 0 0 0;
    max-width: 56ch;
    overflow-wrap: anywhere;
    /* Term descriptions can run long; cap at 3 lines.
       NEVER give this element display:flex — it would kill the clamp. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-variation-settings: 'opsz' 14;
}

/* The hairline rule under the masthead: count on the left, back-link on the right. */
.militra-blog-masthead__rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3, 0.75rem);
    row-gap: var(--spacing-2, 0.5rem);
    margin-top: 32px;
    padding-top: var(--spacing-4, 1rem);
    border-top: 1px solid var(--color-neutral-200, #e5e7eb);
    min-height: 24px; /* the rule keeps its presence even when both children are absent */
}

.militra-blog-masthead__count {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm, 0.875rem); /* 14px */
    color: var(--color-text-muted, #797979);
    white-space: nowrap;
    font-variation-settings: 'opsz' 14;
}

/* Back-link. An <a>, never a <button>. The explicit color beats the parent
   global `a { color: #797979 }`. Mirror of .militra-posts-viewall with the
   arrow reversed and no border-bottom (the rule above IS the underline). */
.militra-blog-masthead__back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    margin-left: auto; /* pinned right even when the count is absent */
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-neutral-900, #111827);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
    font-variation-settings: 'opsz' 14;
}

.militra-blog-masthead__back:hover {
    color: var(--color-primary, #ff7544);
}

.militra-blog-masthead__back:hover .militra-blog-masthead__back-arrow {
    transform: translateX(-4px);
}

.militra-blog-masthead__back:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 4px;
    border-radius: var(--border-radius-sm, 4px);
}

.militra-blog-masthead__back-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* ---------------------------------------------------
   3. CATEGORY FILTER CHIPS

   Rendered only when >=2 terms exist (PHP guard). Chips are <a>, so there is
   no bare-<button> orange risk — but the neutralisation guard below is cheap
   insurance against a future parent update.

   The active chip is DARK on white, never orange-filled: white on #ff7544 is
   ~2.6:1 and fails.
   --------------------------------------------------- */
.militra-blog-filters {
    margin-top: 32px;
}

.militra-blog-filters__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.militra-blog-filters__item {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.militra-blog-filters__chip {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    max-width: 260px;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--border-radius-full, 9999px);
    background-color: var(--color-background, #ffffff);
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm, 0.875rem); /* 14px */
    font-weight: var(--font-weight-medium, 500);
    line-height: 1;
    color: var(--color-neutral-900, #111827); /* beats the parent global a{color:#797979} */
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* long term names truncate, never wrap the row */
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    font-variation-settings: 'opsz' 14;
}

.militra-blog-filters__chip:hover {
    color: var(--color-primary, #ff7544);
    border-color: var(--color-primary, #ff7544);
    background-color: rgba(255, 117, 68, 0.06);
}

.militra-blog-filters__chip:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 3px;
}

/* ACTIVE — dark on white. NOT orange-filled: white on #ff7544 is ~2.6:1. */
.militra-blog-filters__chip.is-current,
.militra-blog-filters__chip.is-current:hover {
    background-color: var(--color-accent, #252a36);
    border-color: var(--color-accent, #252a36);
    color: #ffffff;
}

/* Parent-theme bleed guard: (0,2,0) beats a future `button:hover{background:#ff7544}` at (0,1,1). */
.militra-blog-filters button,
.militra-blog-filters button:hover,
.militra-blog-filters button:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
    font: inherit;
}

/* ---------------------------------------------------
   4. LEAD STORY (page-1 hero) — .militra-blog-lead

   Its own block ABOVE the grid, NEVER a grid item (no grid-column:1/-1) —
   that choice deletes the whole span/parity/neutralisation bug class.
   This is home-posts.css section 5's banner shape re-declared under a new
   scope. All six overrides are (0,2,0) so the <=999px neutralisation in the
   responsive block can match them exactly.
   --------------------------------------------------- */
.militra-blog .militra-blog-lead {
    margin-top: 48px;
}

.militra-blog-lead .militra-post-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--spacing-12, 3rem); /* 48px */
    align-items: stretch;
}

.militra-blog-lead .militra-post-card__media {
    margin: 0;
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
    /* The ceiling is mandatory: without it a portrait medium_large (768x1024)
       contributes its full intrinsic height and drives the banner to ~770px. */
    max-height: 480px;
}

.militra-blog-lead .militra-post-card__body {
    justify-content: center;
}

.militra-blog-lead .militra-post-card__title {
    font-size: var(--font-size-3xl, 30px);
    line-height: 1.3;
    min-height: 0; /* the reserved 2-line box is dead space with no row to align to */
}

.militra-blog-lead .militra-post-card__excerpt {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

/* CRITICAL: margin-top:auto from post-card.css would beat justify-content:center
   and un-centre the body. Replace it with a real margin. */
.militra-blog-lead .militra-post-card__footer {
    margin-top: var(--spacing-8, 2rem); /* 24px */
}

@supports not (aspect-ratio: 16 / 10) {
    .militra-blog-lead .militra-post-card__media {
        height: 100%;
    }
}

/* ---------------------------------------------------
   5. GRID + THE LEAD HAIRLINE

   .militra-blog-grid is PURE GEOMETRY, no margins — the single post's related
   band reuses it and must not have to unpick a stray margin-top. All archive
   spacing is scoped under .militra-blog.
   --------------------------------------------------- */
.militra-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-12, 3rem); /* 48px gutters — what lets surface-less cards read as columns */
}

/* minmax(0, 1fr) on EVERY track is load-bearing: long Lithuanian compounds
   plus line clamps blow out a bare 1fr. */
.militra-blog-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 768px; /* 2 x 360 + 48 */
    margin-inline: auto;
}

.militra-blog-grid--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    margin-inline: auto;
}

/* Archive-scoped spacing only. */
.militra-blog .militra-blog-grid {
    margin-top: 48px;
}

/* The separating hairline falls out of the adjacent sibling: it exists ONLY when
   a lead exists, and vanishes on page 2+ where the lead is suppressed. That is
   the intended reading — the lead is a page-1 editorial act, not a permanent
   slot. (0,3,0) beats the (0,2,0) rule above. */
.militra-blog .militra-blog-lead + .militra-blog-grid {
    margin-top: 64px;
    padding-top: 64px;
    border-top: 1px solid var(--color-neutral-200, #e5e7eb);
}

/* ---------------------------------------------------
   6. EMPTY STATE — replaces lead + grid + pager entirely.
   --------------------------------------------------- */
.militra-blog__empty {
    max-width: 520px;
    margin: 64px auto 0;
    padding: 64px var(--spacing-4, 1rem) 80px;
    text-align: center;
}

.militra-blog__empty-mark {
    width: 72px;
    height: 72px;
    color: var(--color-primary, #ff7544);
    opacity: 0.16; /* the same ghost weight as the card placeholder */
    display: block;
    margin: 0 auto var(--spacing-6, 1.5rem);
}

.militra-blog__empty-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl, 1.5rem); /* 24px */
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--color-headings-general, #252a36);
    margin: 0;
    overflow-wrap: anywhere;
    font-variation-settings: 'opsz' 14;
}

.militra-blog__empty-text {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.9;
    color: var(--color-text, #777e90);
    margin: var(--spacing-2, 0.5rem) 0 0 0;
    font-variation-settings: 'opsz' 14;
}

/* THE CTA PAINTS ITSELF. Do not make it depend on .boltpress-btn-primary.
   That class is still on the <a> (harmless, and it picks up the parent's fill if
   the compat bridge is ever re-enabled), but NOTHING loaded on a blog page styles
   it. Verified against the parent on disk:
     - boltpress/assets/css/woocommerce.css is the ONLY file defining it, as
       `.boltpress-wc-styled .boltpress-btn-primary` — and BOTH halves fail here:
       the file is enqueued only when is_woocommerce()||is_cart()||is_checkout()
       ||is_account_page() (inc/integrations/woocommerce/enqueue.php:36-40), and the
       .boltpress-wc-styled body class is added under the same condition
       (inc/integrations/woocommerce/hooks.php:71-78). A blog page is neither.
     - The site-wide generated token CSS emits `.bp-btn-primary`, the NEW name —
       not `.boltpress-btn-primary` (inc/design-system/class-design-tokens-manager.php:566).
     - The child's own .boltpress-btn-* rules live in base.css, which is DISABLED
       (the compat bridge, commented out in functions.php).
   Left unstyled, the empty state's CTA rendered as bare undecorated text — which is
   the FIRST thing the owner sees on a blog with no posts yet. So it is a real button
   here, in the one file that owns the empty state.

   It is an <a>, so the parent's blanket `button{}` paint does not reach it and no
   neutralisation is needed. Specificity is (0,1,0), the same as .boltpress-btn-primary,
   but blog-archive.css is enqueued at priority 20 — after base.css (10) and after the
   design tokens (5) — so this wins under every parent version, bridge on or off. */
.militra-blog__empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    padding: 14px 28px;
    border: none;
    border-radius: var(--border-radius-md, 8px);
    background-color: var(--color-primary, #ff7544);
    color: #ffffff;
    font-family: var(--font-family-body);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.militra-blog__empty-cta:hover {
    color: #ffffff; /* the parent's link styles must not repaint the label */
    filter: brightness(0.94); /* the parent's own primary-button hover vocabulary */
    transform: translateY(-1px);
}

.militra-blog__empty-cta:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .militra-blog__empty-cta {
        transition: none;
    }

    .militra-blog__empty-cta:hover {
        transform: none;
    }
}

/* ---------------------------------------------------
   7. PAGINATION — SPACING HOOK ONLY.
   pagination.css owns the pager's look (and must produce a pixel-identical
   result to search's). This is the ONLY .pagination-related rule permitted in
   this file; every internal (.nav-links, .page-numbers, .current, .prev/.next,
   the 16px svg, the <=480px shrink to 36px) lives there.
   --------------------------------------------------- */
.militra-blog .militra-blog__container > .pagination {
    margin-top: 64px;
}

/* ---------------------------------------------------
   8. RESPONSIVE — BROAD -> NARROW (mandatory order: 999 -> 768/428 -> 480).

   Column ladder, identical to the homepage row:
   >=1000 -> 3 · 769-999 -> 2 · <=768 -> 1.
   (1-up below 768 is required: at 481-768 a 2-up track is only ~219-363px, and
   the card footer's date + "Skaityti daugiau" needs ~274px.)
   --------------------------------------------------- */
@media (max-width: 999px) {
    .militra-blog {
        padding-bottom: 64px;
    }

    .militra-blog__container {
        padding-top: 48px;
    }

    .militra-blog-masthead__title {
        font-size: 32px;
    }

    .militra-blog-masthead__lede {
        font-size: 14px;
    }

    .militra-blog-masthead__rule {
        margin-top: 24px;
    }

    .militra-blog-filters {
        margin-top: 24px;
    }

    .militra-blog__intro {
        margin-bottom: 40px;
    }

    /* 2-up. The gutter must stay WIDER than the excerpt's own 30.4px leading
       (16px x 1.9) or the eye reads across the gap — the cards have no
       background, border or shadow to mark their edges. */
    .militra-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-12, 3rem); /* 48px */
        row-gap: var(--spacing-16, 4rem); /* 64px */
    }

    .militra-blog-grid--pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-12, 3rem);
        row-gap: var(--spacing-16, 4rem);
        max-width: none;
        margin-inline: 0;
    }

    .militra-blog-grid--solo {
        max-width: 520px;
        margin-inline: auto;
    }

    .militra-blog .militra-blog-lead {
        margin-top: 40px;
    }

    .militra-blog .militra-blog-grid {
        margin-top: 40px;
    }

    .militra-blog .militra-blog-lead + .militra-blog-grid {
        margin-top: 48px;
        padding-top: 48px;
    }

    /* === NEUTRALISE THE LEAD BANNER — MATCHING (0,2,0), LATER IN SOURCE ===
       Six up, six down. Miss ONE of these and a phone gets a 320px-tall
       side-by-side card. This is the single most likely place to break. */
    .militra-blog-lead .militra-post-card {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .militra-blog-lead .militra-post-card__media {
        margin: 0 0 var(--spacing-6, 1.5rem) 0;
        aspect-ratio: 16 / 10;
        height: auto;
        min-height: 0;
        max-height: none; /* the aspect-ratio tile owns the height again */
    }

    .militra-blog-lead .militra-post-card__body {
        justify-content: flex-start;
    }

    .militra-blog-lead .militra-post-card__title {
        font-size: var(--font-size-lg, 1.125rem); /* 18px — matches the card ladder */
        line-height: 1.4;
        min-height: calc(2 * 1.4em); /* restore the reserved 2-line box */
    }

    .militra-blog-lead .militra-post-card__excerpt {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .militra-blog-lead .militra-post-card__footer {
        margin-top: auto; /* back to the bottom-pinned baseline */
    }

    .militra-blog .militra-blog__container > .pagination {
        margin-top: 48px;
    }
}

@media (max-width: 768px) and (min-width: 428px) {
    .militra-blog {
        padding-bottom: 48px;
    }

    .militra-blog__container {
        padding-top: 40px;
    }

    /* 1-up, centred column — identical to the homepage row in this band. */
    .militra-blog-grid,
    .militra-blog-grid--pair,
    .militra-blog-grid--solo {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-12, 3rem); /* 48px */
        max-width: 520px;
        margin-inline: auto;
    }

    .militra-blog-lead {
        max-width: 520px;
        margin-inline: auto;
    }

    /* Full-bleed chip scroller: the row must run to the viewport edge, never wrap
       into a wall. The mask sits on the SCROLL CONTAINER's border box, so the
       fade is fixed at its right edge.
       (The mask is polish. If a chip's focus ring is ever seen clipped, DELETE
       THE MASK FIRST before touching anything else.) */
    .militra-blog-filters {
        margin-inline: calc(-1 * var(--spacing-4, 1rem));
    }

    .militra-blog-filters__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-inline: var(--spacing-4, 1rem);
        padding-block: 2px; /* so the focus ring is not clipped by the overflow */
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
    }

    .militra-blog-filters__list::-webkit-scrollbar {
        display: none;
    }

    .militra-blog-filters__item {
        flex: 0 0 auto;
    }

    .militra-blog-filters__chip {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .militra-blog {
        padding-bottom: 40px;
    }

    .militra-blog__container {
        padding-top: 32px;
        padding-left: var(--spacing-2, 0.5rem); /* 8px */
        padding-right: var(--spacing-2, 0.5rem); /* 8px */
    }

    .militra-blog-masthead__title {
        font-size: var(--font-size-2xl, 1.5rem); /* 24px */
        line-height: 1.3;
    }

    .militra-blog-masthead__lede {
        font-size: var(--font-size-base, 1rem);
        line-height: 1.6;
        max-width: none;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    .militra-blog-masthead__rule {
        margin-top: 20px;
    }

    /* Re-derive the scroller for this band (the block above is bounded at
       min-width:428px). */
    .militra-blog-filters {
        margin-top: 20px;
        margin-inline: calc(-1 * var(--spacing-2, 0.5rem));
    }

    .militra-blog-filters__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-inline: var(--spacing-2, 0.5rem);
        padding-block: 2px;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    }

    .militra-blog-filters__list::-webkit-scrollbar {
        display: none;
    }

    .militra-blog-filters__item {
        flex: 0 0 auto;
    }

    .militra-blog-filters__chip {
        max-width: none;
    }

    /* 64px: the 16:9 tile makes the cards shorter here, so they need MORE
       separation, not less — nothing but air marks the card boundary. */
    .militra-blog-grid,
    .militra-blog-grid--pair,
    .militra-blog-grid--solo {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-16, 4rem); /* 64px */
        max-width: none;
        margin-inline: 0;
    }

    .militra-blog-lead {
        max-width: none;
        margin-inline: 0;
    }

    /* post-card.css sets .militra-post-card__media { aspect-ratio:16/9 } here at
       (0,1,0). The lead's media was pinned to 16/10 at (0,2,0) in the max-999
       block, so it needs a MATCHING (0,2,0) override or it stays 16:10. */
    .militra-blog-lead .militra-post-card__media {
        aspect-ratio: 16 / 9;
    }

    @supports not (aspect-ratio: 16 / 9) {
        .militra-blog-lead .militra-post-card__media {
            height: 200px;
        }
    }

    .militra-blog .militra-blog-lead {
        margin-top: 32px;
    }

    .militra-blog .militra-blog-grid {
        margin-top: 32px;
    }

    .militra-blog .militra-blog-lead + .militra-blog-grid {
        margin-top: 40px;
        padding-top: 40px;
    }

    .militra-blog__empty {
        margin-top: 40px;
        padding: 48px var(--spacing-2, 0.5rem) 56px;
    }

    .militra-blog__empty-mark {
        width: 56px;
        height: 56px;
    }

    .militra-blog .militra-blog__container > .pagination {
        margin-top: 40px;
    }
}

/* ---------------------------------------------------
   9. REDUCED MOTION — kill every transition and transform.
   Colour feedback SURVIVES: hover-orange on the back-link and the chips is
   information, not motion (the same doctrine post-card.css applies to the card
   title and "Skaityti daugiau").
   --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .militra-blog-masthead__back,
    .militra-blog-masthead__back-arrow,
    .militra-blog-filters__chip {
        transition: none;
    }

    .militra-blog-masthead__back:hover .militra-blog-masthead__back-arrow {
        transform: none;
    }
}