/* ===================================================
   POST CARD (.militra-post-card)
   Handle: militra-post-card. Deps: none.
   Loaded on: the front page, every blog listing, and the single post
   (the related band reuses the card).

   THE SINGLE SOURCE OF TRUTH for every .militra-post-card* selector.
   Extracted verbatim from home-posts.css sections 5-11 (+ their @supports,
   responsive and reduced-motion bits) so that the homepage row, the blog
   archive, the lead story and the related band all render ONE card.

   NO OTHER STYLESHEET MAY DEFINE A BARE .militra-post-card RULE.
   Exactly three descendant-scoped exceptions exist in the whole codebase:
     - home-posts.css   : .militra-posts-grid--single .militra-post-card…  (the homepage 1-post banner)
     - blog-archive.css : .militra-blog-lead .militra-post-card…           (the archive lead story)
     - single-post.css  : .militra-single-related .militra-post-card__media { background-color:#fff }
   Because CSS load order = dependency order, this file always lands FIRST and
   those three consumers can override at their higher (0,2,0) specificity.

   MEDIA-QUERY ORDER IS BROAD -> NARROW: max-999, then 480.
   =================================================== */

/* ---------------------------------------------------
   1. CARD — a bare column, no box.
   The site is flat-at-rest; the media tile (section 2) carries the hover
   shadow. Equal-height row contract: flex column + __body{flex:1} +
   __footer{margin-top:auto} bottom-pins every date to ONE optical baseline.
   Do not break it.
   --------------------------------------------------- */
.militra-post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.militra-post-card:hover,
.militra-post-card:focus-within {
    transform: translateY(-2px);
}

/* Parent-theme bleed guard: the contract uses <a> only, but if a bare
   <button> ever lands inside a card, the newer boltpress paints it orange. */
.militra-post-card button {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
}

/* ---------------------------------------------------
   2. MEDIA TILE — the only surface in the card
   --------------------------------------------------- */
.militra-post-card__media {
    position: relative;
    margin: 0 0 var(--spacing-6, 1.5rem) 0; /* 18px */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--border-radius-md, 15px);
    background-color: var(--color-background-alt, #f9f3ee); /* cream — never flashes white */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.militra-post-card:hover .militra-post-card__media,
.militra-post-card:focus-within .militra-post-card__media {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* the site's canonical card shadow */
}

.militra-post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* photographic — NOT contain */
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* translateZ(0) pre-empts the WebKit 1px hairline bleed past the rounded
   mask during the zoom. */
.militra-post-card:hover .militra-post-card__image,
.militra-post-card:focus-within .militra-post-card__image {
    transform: scale(1.04) translateZ(0);
}

/* aspect-ratio fallback for pre-2021 engines */
@supports not (aspect-ratio: 16 / 10) {
    .militra-post-card__media {
        height: 225px;
    }
}

/* ---------------------------------------------------
   3. NO-IMAGE PLACEHOLDER — zero new assets, zero extra requests.
   ONE mark, THREE field tones (all warm/neutral). The tone cycle exists
   only so three consecutive image-less posts don't read as a printing error.
   --------------------------------------------------- */
.militra-post-card__mark {
    width: 72px;
    height: 72px;
    color: var(--color-primary, #ff7544);
    opacity: 0.16;
}

.militra-post-card__media--ph-1 {
    background-color: var(--color-background-alt, #f9f3ee);
    background-image: none;
}

.militra-post-card__media--ph-2 {
    background-image: linear-gradient(135deg, #ffffff 0%, var(--color-background-alt, #f9f3ee) 55%, #ffe6d8 100%);
}

.militra-post-card__media--ph-3 {
    background-image: linear-gradient(315deg, #ffffff 0%, #f4f5f7 60%, var(--color-background-alt, #f9f3ee) 100%);
}

/* ---------------------------------------------------
   4. BODY + KICKER
   Dark-on-peach (~11:1). Deliberately NOT .militra-section-tag
   (orange-on-white, ~2.8:1) — different component, accessible contrast.
   It is a FLOW element below the media, not an absolutely-positioned chip:
   no z-index, no click dead-zone under the stretched link.
   --------------------------------------------------- */
.militra-post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.militra-post-card__kicker {
    align-self: flex-start;
    max-width: 100%;
    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-accent, #252a36);
    background-color: rgba(255, 117, 68, 0.10); /* peach tint of --color-primary */
    border-radius: var(--border-radius-full, 9999px);
    padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem); /* 4px 10px */
    margin: 0 0 var(--spacing-4, 1rem) 0; /* 12px */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------
   5. TITLE — 2 lines RESERVED so every excerpt starts on the same line.
   Explicitly beats the parent globals `h3 { 20px/700/#252a36 }` and
   `a { color: #797979 }`. NEVER switch this element to display:flex —
   the -webkit-line-clamp dies silently.
   --------------------------------------------------- */
.militra-post-card__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl, 1.25rem); /* 20px */
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    color: var(--color-headings-general, #252a36);
    margin: 0 0 var(--spacing-3, 0.75rem) 0; /* 10px */
    min-height: calc(2 * 1.4em); /* reserve the 2-line box */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease-in-out;
    font-variation-settings: 'opsz' 14;
}

.militra-post-card__title a,
.militra-post-card__link {
    color: inherit;
    text-decoration: none;
}

.militra-post-card:hover .militra-post-card__title,
.militra-post-card:focus-within .militra-post-card__title {
    color: var(--color-primary, #ff7544);
}

/* Stretched link — ONE tab stop per card. The focus ring traces the whole
   card (not the ragged 2-line inline text) because the card is
   overflow:visible, so the ring is never clipped.
   "Skaityti daugiau" is aria-hidden decorative text, NEVER a second link. */
.militra-post-card__link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    border-radius: var(--border-radius-md, 15px);
}

.militra-post-card__link:focus-visible {
    outline: none;
}

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

/* ---------------------------------------------------
   6. EXCERPT — absent entirely when empty; the layout does not care,
   because the footer is bottom-pinned.
   --------------------------------------------------- */
.militra-post-card__excerpt {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base, 1rem); /* 16px */
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.9; /* signature */
    color: var(--color-text, #777e90);
    margin: 0 0 var(--spacing-6, 1.5rem) 0; /* 18px */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-variation-settings: 'opsz' 14;
}

/* ---------------------------------------------------
   7. META RULE (footer) — the card's spine.
   margin-top:auto pushes it to the floor of a stretched flex column, so all
   date lines land on ONE optical baseline no matter how long the titles run.
   That single alignment is what makes the row read as designed.
   --------------------------------------------------- */
.militra-post-card__footer {
    margin-top: auto; /* pins to the card floor */
    padding-top: var(--spacing-4, 1rem); /* 12px */
    border-top: 1px solid var(--color-neutral-200, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3, 0.75rem);
    flex-wrap: wrap;
    row-gap: var(--spacing-2, 0.5rem); /* safety net: two nowrap items can never overflow the track */
}

.militra-post-card__date {
    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;
}

.militra-post-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem); /* 14px */
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-muted, #797979); /* QUIET at rest — a caption, not a button */
    white-space: nowrap;
    transition: color 0.2s ease;
    font-variation-settings: 'opsz' 14;
}

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

.militra-post-card:hover .militra-post-card__more,
.militra-post-card:focus-within .militra-post-card__more {
    color: var(--color-primary, #ff7544);
}

.militra-post-card:hover .militra-post-card__more-arrow,
.militra-post-card:focus-within .militra-post-card__more-arrow {
    transform: translateX(4px);
}

/* ---------------------------------------------------
   8. RESPONSIVE — BROAD -> NARROW. Only the card's own rules live here;
   the grid ladders belong to the consumers (home-posts.css, blog-archive.css).
   --------------------------------------------------- */
@media (max-width: 999px) {
    .militra-post-card__title {
        font-size: var(--font-size-lg, 1.125rem); /* 18px */
    }
}

@media (max-width: 480px) {
    .militra-post-card__media {
        aspect-ratio: 16 / 9; /* shorter scroll */
    }

    .militra-post-card__mark {
        width: 56px;
        height: 56px;
    }

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

/* ---------------------------------------------------
   9. REDUCED MOTION — no movement, but feedback SURVIVES.
   Colour changes and the media-tile shadow are information, not motion:
   keep title -> orange, "Skaityti daugiau" -> orange, and the media shadow.
   Kill every transform and every transition.
   --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .militra-post-card,
    .militra-post-card__media,
    .militra-post-card__image,
    .militra-post-card__title,
    .militra-post-card__more,
    .militra-post-card__more-arrow {
        transition: none;
    }

    .militra-post-card:hover,
    .militra-post-card:focus-within {
        transform: none;
    }

    .militra-post-card:hover .militra-post-card__image,
    .militra-post-card:focus-within .militra-post-card__image {
        transform: none;
    }

    .militra-post-card:hover .militra-post-card__more-arrow,
    .militra-post-card:focus-within .militra-post-card__more-arrow {
        transform: none;
    }
}