/* ===================================================
   BLOG POSTS SECTION (Naujienos)
   Homepage only. Enqueued as `militra-home-posts` in functions.php
   inside the is_front_page() block, depends on
   array( 'militra-front-page', 'militra-post-card' ).

   OWNERSHIP: every .militra-post-card* rule lives in post-card.css, which is
   a dependency of this file and therefore always loads FIRST. The only card
   selectors permitted here are the `.militra-posts-grid--single
   .militra-post-card…` banner overrides (section 5) and their max-999
   neutralisation — all descendant-scoped at (0,2,0), so they beat post-card's
   (0,1,0) base regardless of source order.
   =================================================== */

/* ---------------------------------------------------
   1. SHELL — full-bleed white + the single hairline masthead rule

   The hairline is LOAD-BEARING, not decoration: the Product Categories
   section above ends with 64px of its own bottom padding, so the rule sits
   dead-centre in 128px of air and is the only thing separating two
   consecutive white sections without introducing a tint. It spans the
   container's full 1200px (12px past the grid edge on each side) —
   that overhang is intentional. It is homepage-only: the blog archive has no
   section above it, so blog-archive.css deliberately does NOT copy it.
   --------------------------------------------------- */
.militra-posts-section {
    background-color: var(--color-background, #ffffff);
    margin-top: 0;
    padding: 0 0 var(--spacing-16, 4rem); /* 0 top / 64px bottom */
}

.militra-posts-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-16, 4rem) var(--spacing-4, 1rem) 0; /* 64px top / 12px sides / 0 bottom */
    border-top: 1px solid var(--color-neutral-200, #e5e7eb);
}

/* ---------------------------------------------------
   2. HEADER — the Prekių Kategorijos idiom, verbatim
   (deliberately no .militra-section-tag eyebrow: the header directly
   above has none either)
   --------------------------------------------------- */
.militra-posts-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--spacing-4, 1rem); /* 12px */
    margin-bottom: var(--spacing-12, 3rem); /* 48px */
}

.militra-posts-heading {
    min-width: 0;
}

.militra-posts-title {
    font-family: var(--font-family-heading);
    font-size: 40px;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-headings-h1, #252a36);
    margin: 0;
    line-height: 1.2;
    font-variation-settings: 'opsz' 14;
}

.militra-posts-subtitle {
    font-family: var(--font-family-body);
    font-size: 16px;
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-neutral-500, #777e90);
    margin: var(--spacing-2, 0.5rem) 0 0 0; /* 8px top */
    line-height: 1.9; /* signature relaxed leading */
    max-width: 52ch;
    font-variation-settings: 'opsz' 14;
}

/* ---------------------------------------------------
   3. VIEW-ALL CTA — .militra-about-button anatomy, namespaced.
   An <a>, never a <button> (the parent paints bare buttons orange).
   The explicit color also beats the parent global `a { color: #797979 }`.
   --------------------------------------------------- */
.militra-posts-viewall {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem); /* 8px */
    font-size: var(--font-size-base, 1rem); /* 16px */
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-neutral-900, #111827);
    text-decoration: none;
    border-bottom: 1px solid var(--color-neutral-300, #d1d5db);
    padding-bottom: var(--spacing-1, 0.25rem); /* 4px */
    transition: all 0.2s ease;
    width: fit-content;
    white-space: nowrap;
    font-variation-settings: 'opsz' 14;
}

.militra-posts-viewall:hover {
    color: var(--color-primary, #ff7544);
    border-bottom-color: var(--color-primary, #ff7544);
}

.militra-posts-viewall:hover .militra-posts-viewall-arrow {
    transform: translateX(4px);
}

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

.militra-posts-viewall-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* ---------------------------------------------------
   4. GRID — 48px gutters are what let surface-less cards read as columns.
   minmax(0, 1fr) on EVERY track is load-bearing: long Lithuanian compounds
   plus line clamps inside grid tracks blow out a bare `1fr`.
   --------------------------------------------------- */
.militra-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-12, 3rem); /* 48px */
}

/* 2 posts: keep the cards at their natural width and centre the pair */
.militra-posts-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 768px; /* 2 x 360 + 48px gap */
    margin-inline: auto;
}

/* 1 post: becomes the wide editorial banner in section 5 */
.militra-posts-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------
   5. --single — the 1-post wide editorial banner (desktop only).
   A lone 360px card centred in a 1176px row reads as broken;
   a full-width banner reads as designed. Pure CSS — the PHP renders the
   identical card markup.

   These are the ONLY card selectors this file is allowed to contain, and they
   are all descendant-scoped at (0,2,0) so they beat post-card.css's (0,1,0)
   base rules regardless of load order. blog-archive.css re-declares this same
   shape under .militra-blog-lead for the archive's lead story.
   --------------------------------------------------- */
.militra-posts-grid--single .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-posts-grid--single .militra-post-card__media {
    margin: 0;
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
    /* min-height is only a floor. Without a ceiling, a portrait/square featured
       image (e.g. 768x1024 at `medium_large`) contributes its full intrinsic
       height to the grid row and drives the whole banner to ~770px. */
    max-height: 480px;
}

.militra-posts-grid--single .militra-post-card__body {
    justify-content: center;
}

.militra-posts-grid--single .militra-post-card__title {
    font-size: var(--font-size-3xl, 30px);
    line-height: 1.3;
    min-height: 0; /* nothing to align to with one card — the reserved 2-line box is dead space here */
}

.militra-posts-grid--single .militra-post-card__excerpt {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

/* CRITICAL: kills margin-top:auto, which would otherwise beat
   justify-content:center and un-centre the body. */
.militra-posts-grid--single .militra-post-card__footer {
    margin-top: var(--spacing-8, 2rem); /* 24px */
}

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

/* ---------------------------------------------------
   6. RESPONSIVE — declared BROAD -> NARROW (max-999, then 768/428, then 480).
   This ordering is mandatory: the existing sections declare 768/428 BEFORE
   max-999, which is why the banner card is really 250px at 481-768px instead
   of the 280px it intends. Do not repeat that bug.

   Column counts: >=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 footer's date + "Skaityti daugiau" need ~274px — 2-up would spill.)

   The card's OWN responsive rules (title 18px at <=999, media 16/9 and the
   56px mark at <=480) live in post-card.css.
   --------------------------------------------------- */
@media (max-width: 999px) {
    .militra-posts-section {
        padding-bottom: var(--spacing-12, 3rem); /* 48px */
    }

    .militra-posts-container {
        padding-top: var(--spacing-12, 3rem); /* 48px */
    }

    .militra-posts-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3, 0.75rem);
        margin-bottom: var(--spacing-10, 2.5rem); /* 40px */
    }

    .militra-posts-viewall {
        order: -1;
        align-self: flex-end; /* house idiom */
    }

    .militra-posts-title {
        font-size: 32px;
    }

    .militra-posts-subtitle {
        font-size: 14px;
    }

    /* The gutter must stay WIDER than the excerpt's own 30.4px leading (16px/1.9),
       or the eye reads horizontally across the gap instead of down the column —
       these cards have no background, border or shadow to mark their edges. */
    .militra-posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-12, 3rem); /* 48px */
        row-gap: var(--spacing-16, 4rem); /* 64px — surface-less cards need more air between rows than within one */
    }

    .militra-posts-grid--pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
        margin-inline: 0;
    }

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

    /* NEUTRALISE the --single banner (same 0,2,0 specificity, later in source).
       All six overrides pair 1:1 with section 5. Miss one and a phone gets a
       320px-tall side-by-side card. */
    .militra-posts-grid--single .militra-post-card {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .militra-posts-grid--single .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-posts-grid--single .militra-post-card__body {
        justify-content: flex-start;
    }

    .militra-posts-grid--single .militra-post-card__title {
        font-size: var(--font-size-lg, 1.125rem);
        line-height: 1.4;
    }

    .militra-posts-grid--single .militra-post-card__excerpt {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .militra-posts-grid--single .militra-post-card__footer {
        margin-top: auto;
    }
}

@media (max-width: 768px) and (min-width: 428px) {
    .militra-posts-section {
        padding-bottom: var(--spacing-10, 2.5rem); /* 40px */
    }

    .militra-posts-container {
        padding-top: var(--spacing-10, 2.5rem); /* 40px */
    }

    /* Match the Prekių Kategorijos header directly above, which really does
       render centred in this band (front-page.css: .militra-categories-text
       { text-align: center } at 428-768px is never overridden by its later
       max-999 block). 32px matches what that h2 actually renders here too. */
    .militra-posts-header {
        align-items: center;
        text-align: center;
    }

    .militra-posts-viewall {
        order: 0;
        align-self: center;
    }

    .militra-posts-title {
        font-size: 32px;
    }

    .militra-posts-subtitle {
        font-size: 15px;
    }

    /* Stacked, surface-less cards need at least the desktop gutter between them,
       or consecutive cards merge into one endless column (the largest gap INSIDE
       a card is only 18px). */
    .militra-posts-grid,
    .militra-posts-grid--pair,
    .militra-posts-grid--single {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-12, 3rem); /* 48px */
        max-width: 520px;
        margin-inline: auto;
    }
}

@media (max-width: 480px) {
    .militra-posts-section {
        padding-bottom: var(--spacing-8, 2rem); /* 24px */
    }

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

    .militra-posts-header {
        align-items: center;
        text-align: center;
        margin-bottom: var(--spacing-8, 2rem); /* 24px */
    }

    .militra-posts-viewall {
        order: 0;
        align-self: center;
    }

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

    .militra-posts-subtitle {
        font-size: var(--font-size-base, 1rem); /* 16px */
        line-height: 1.6;
        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-posts-grid,
    .militra-posts-grid--pair,
    .militra-posts-grid--single {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-16, 4rem); /* 64px */
        max-width: none;
        margin-inline: 0;
    }

    /* post-card.css sets the bare .militra-post-card__media to 16/9 here at
       (0,1,0). The banner'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-posts-grid--single .militra-post-card__media {
        aspect-ratio: 16 / 9;
    }

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

/* ---------------------------------------------------
   7. REDUCED MOTION — no movement, but feedback SURVIVES.
   The card's own reduced-motion block lives in post-card.css; this one covers
   the section chrome only.
   --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .militra-posts-viewall,
    .militra-posts-viewall-arrow {
        transition: none;
    }

    .militra-posts-viewall:hover .militra-posts-viewall-arrow {
        transform: none;
    }
}