/* ===================================================
   POST PRODUCT BAND — "Susijusios prekės" on single.php
   Handle: militra-post-products.
   Deps: militra-single-post, militra-product-card
   -> this file always lands LAST and wins at equal specificity.
   Enqueued ONLY on posts where militra_has_post_products() is true.

   OWNERSHIP — READ BEFORE ADDING A RULE:
   This file owns .militra-post-products* AND NOTHING ELSE, plus exactly one
   borrowed property: `grid-template-columns` on `.products`, always under a
   .militra-post-products scope. The card and the base grid belong to
   assets/css/woocommerce/product-card.css (a dependency — it always loads first)
   and it is SHARED WITH THE SHOP. Never edit it, never restate it here.

   Token convention (single-post.css §0): ALWAYS the fallback form,
   var(--color-primary, #ff7544). NEVER --boltpress-*. Load-bearing layout numbers
   stay LITERAL px, because the live token scale does NOT equal the rem fallbacks
   (--spacing-4 renders ~12px, not 1rem).

   MEDIA-QUERY ORDER (single-post.css's ladder, broad -> narrow):
   max-999 -> max-999/min-769 -> max-768 -> max-480 -> reduced-motion -> print.
   =================================================== */


/* ===================================================
   §1. THE BAND
   =================================================== */

/* WHITE + a full-bleed top hairline, NOT the tint.
   (a) .militra-single-related 96px below is var(--militra-tint,#f9f3ee); two
       consecutive cream slabs merge into one 400px block.
   (b) .product-card__container is #f3f3f3 — a grey card on cream reads as a
       printing error. On white it reads exactly as it does on the shop.

   The vertical rhythm (96 / 72 / 40 / 80) is IDENTICAL to .militra-single-related
   on purpose, so the two bands stack as one regular ladder.

   The padding is unconditional BY DESIGN: single-post.css:1242 has
   `.militra-single__article:last-child .militra-single__foot { margin-bottom:32px }`,
   which STOPS MATCHING the moment this section follows </article>. This band owns
   its own top air. It also owns its own bottom air: when a post has products but no
   related posts, this band is the last child of <main> and sits on the footer. */
.militra-post-products {
    background-color: var(--color-background, #ffffff);
    border-top: 1px solid var(--militra-hairline, #e5e7eb);
    padding: 72px 0 80px;
    margin-top: 96px;
}

/* .militra-single-related already carries margin-top:96px. Stacked under this band
   that compounds into 176px of dead white. Collapse it — this band's 80px bottom
   padding IS the gap, and the tint edge then does the separating. Only matches when
   both bands render. Specificity (0,2,0) beats .militra-single-related (0,1,0), and
   this file loads after single-post.css by declared dependency. */
.militra-post-products + .militra-single-related {
    margin-top: 0;
}

/* THE COLUMN IS SIZED TO THE GRID IT CONTAINS — it is NOT the sibling's 1200px.
   This looks like a deviation. It is the only way to keep the heading attached to
   the cards it labels.

   `.products` is repeat(3, 293px) = a RIGID 927px track block that
   justify-content:center CENTRES inside whatever column it is given. The h2 and the
   view-all pill are laid out against the column's own content edge. So in a 1200px
   column the cards get inset (1176 - 927) / 2 = ~124px while the h2 stays at 0 — the
   heading floats ~124px to the LEFT of card 1. The sibling related band does not have
   this problem because .militra-blog-grid is repeat(3, minmax(0, 1fr)), which FILLS
   its 1200px column, so its h2 lands flush with its first card. Stacked, the mismatch
   is unmissable.

   Capping the column to the grid gives h2 + cards + pill ONE left edge. The cost is
   that the two bands' headings no longer start at the same x — but each band is now
   internally coherent and both are centred on the page, which is the ordinary
   "column sized to its content" reading. The alternatives are worse:
     - fluid tracks (minmax(0,1fr)) would fill 1200px but stretch the card to ~376px,
       breaking the one hard requirement that these cards look IDENTICAL to the shop's;
     - justify-content:start leaves 249px of ragged white right of card 3 and throws
       the centred pill off-axis from the cards.

   box-sizing is declared EXPLICITLY: the calc() cancels the padding only under
   border-box, and this child theme ships no global border-box reset of its own
   (base.css does, but it is part of the DISABLED compat bridge). Do not make the
   band's geometry depend on an ambient reset from the parent. */
.militra-post-products__container {
    box-sizing: border-box;
    max-width: calc(927px + 2 * var(--spacing-4, 1rem)); /* 3 x 293 + 2 x 24 */
    margin: 0 auto;
    padding: 0 var(--spacing-4, 1rem);
}

/* Per-count caps. PHP sets --solo/--pair from the REAL rendered count, so the column
   always follows the grid actually painted. */
.militra-post-products--pair .militra-post-products__container {
    max-width: calc(610px + 2 * var(--spacing-4, 1rem)); /* 2 x 293 + 24 */
}

.militra-post-products--solo .militra-post-products__container {
    max-width: calc(293px + 2 * var(--spacing-4, 1rem));
}


/* ===================================================
   §2. HEADING
   Byte-for-byte .militra-single-related__title (single-post.css:1451-1459).
   A PLAIN h2: no eyebrow, no orange tick, no uppercase, no letter-spacing.
   The eyebrow-with-tick belongs to the archive masthead (blog-archive.css) and is
   not used anywhere on single.php. Two sibling bands with different heading
   treatments read as a mistake. `var(--font-family-heading)` carries no fallback
   here — that is a deliberate byte-for-byte copy of the sibling.
   =================================================== */

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


/* ===================================================
   §3. THE GRID — ONE PROPERTY, THREE RULES, NOTHING MORE
   product-card.css already gives <ul class="products"> a centred repeat(3, 293px)
   grid with the right gaps and every breakpoint. We override grid-template-columns
   and NOTHING else.

   WHY THE MODIFIERS EXIST: repeat(3, 293px) ALWAYS paints 3 explicit tracks, and
   justify-content:center centres the 927px TRACK BLOCK — not the cards. One product
   lands in column 1 and ends up ~317px LEFT of centre with two empty columns beside
   it. This is the exact stranded-card bug single.php:59-74 already solves for
   related posts with .militra-blog-grid--solo / --pair. PHP sets these from the REAL
   rendered count.
   =================================================== */

.militra-post-products--solo .products {
    grid-template-columns: 293px;
}

.militra-post-products--pair .products {
    grid-template-columns: repeat(2, 293px);
}


/* ===================================================
   §3b. VIEW-ALL LINK
   House vocabulary, verbatim: pill radius var(--border-radius-full, 9999px),
   the ONE hairline 1px solid var(--militra-hairline, #e5e7eb), the ONE shadow
   0 4px 12px rgba(0,0,0,0.1), the ONE hover motion translateY(-2px).
   An ANCHOR, never a <button> — the parent theme paints bare <button> elements
   orange in some versions. background-color:transparent is explicit belt-and-braces
   against that blanket paint (the compat bridge is currently DISABLED — do not
   re-enable it, do not depend on it).
   =================================================== */

.militra-post-products__foot {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.militra-post-products__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1px solid var(--militra-hairline, #e5e7eb);
    border-radius: var(--border-radius-full, 9999px);
    background-color: transparent;
    color: var(--militra-prose-head, #252a36);
    font-family: var(--font-family-body, sans-serif);
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.militra-post-products__more:hover,
.militra-post-products__more:focus-visible {
    background-color: transparent;
    border-color: var(--color-primary, #ff7544);
    color: var(--color-primary, #ff7544);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
}

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

.militra-post-products__more-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.militra-post-products__more:hover .militra-post-products__more-arrow {
    transform: translateX(3px);
}


/* ===================================================
   §4. max-999 — SHELL STEP-DOWN
   Mirrors single-post.css:1617-1625 for .militra-single-related exactly.
   =================================================== */

@media (max-width: 999px) {
    .militra-post-products {
        padding: 56px 0 64px;
        margin-top: 72px;
    }

    .militra-post-products__title {
        font-size: 27px;
        margin-bottom: 32px;
    }
}


/* ===================================================
   §5. max-999 / min-769 — THE OVERFLOW FIX
   product-card.css jumps `.products` from repeat(3,293px) STRAIGHT to 1fr 1fr at
   768px, so between 769px and 999px the grid stays a rigid 927px. The container's
   inner width at a 950px viewport is 918px -> 9px of horizontal DOCUMENT scroll,
   worsening to 190px at 769px. Two columns, band-scoped only.
   NEVER edit the global `.products` rule — it is shared with the shop.
   =================================================== */

@media (max-width: 999px) and (min-width: 769px) {
    .militra-post-products .products {
        grid-template-columns: repeat(2, 293px);
    }

    /* RE-ASSERT. Same specificity (0,2,0) as the rule directly above, so SOURCE
       ORDER decides and solo MUST come after it. Do not reorder these two.
       --pair needs no re-assertion: it already resolves to the same 2 x 293px. */
    .militra-post-products--solo .products {
        grid-template-columns: 293px;
    }

    /* THE COLUMN FOLLOWS THE GRID. The 3-up band drops to 2 x 293px here, so its
       column must drop to 610px too — otherwise the heading detaches from the cards
       again, and worse than at desktop (~170px adrift in a ~950px column).
       (0,3,0): :not() contributes its argument's specificity, so this beats the
       (0,2,0) --pair cap in §1. --solo is excluded and keeps its own 293px cap. */
    .militra-post-products:not(.militra-post-products--solo) .militra-post-products__container {
        max-width: calc(610px + 2 * var(--spacing-4, 1rem));
    }
}


/* ===================================================
   §6. max-768 — RE-ASSERT THE MODIFIERS OR THEY OVERFLOW THE PHONE
   product-card.css drops `.products` to `1fr 1fr` at <=768px and again at <=428px,
   but those rules are (0,1,0) and the §3 modifiers are (0,2,0) — so WITHOUT this
   block, --pair would keep its fixed repeat(2, 293px) = 594px on a 375px phone and
   blow the viewport wide open. This is not optional.
   =================================================== */

@media (max-width: 768px) {
    /* RELEASE THE COLUMN CAP. From here down the grid is FLUID (a capped solo track or
       1fr 1fr), so it fills whatever column it is handed and the heading stays flush
       with the cards on its own. Give the band back the sibling's full 1200px column.
       Equal specificity (0,2,0) to the --solo/--pair caps in §1 — this block is LATER
       in source order, so it wins. Do not move it above §1. */
    .militra-post-products__container,
    .militra-post-products--solo .militra-post-products__container,
    .militra-post-products--pair .militra-post-products__container {
        max-width: 1200px;
    }

    /* minmax(0, 293px), NOT 1fr. A lone 1fr track FILLS the column — ~752px at 768px,
       ~344px at 360px — stretching a card whose skin is drawn for 293px and whose
       MOBILE skin is actively compressed (product-card.css:499 drops the image strip to
       100px, the button to 28px, and hides the quantity stepper). The result is a wide,
       empty-looking slab that matches nothing else on the site. The max caps the track
       at the card's real width; the min lets it shrink below 293px on sub-293px
       viewports instead of overflowing them. product-card.css's own
       justify-content:center does the centring — that is why there is no rule for it
       here. */
    .militra-post-products--solo .products {
        grid-template-columns: minmax(0, 293px);
    }

    .militra-post-products--pair .products {
        grid-template-columns: 1fr 1fr;
    }
}


/* ===================================================
   §7. max-480
   Mirrors single-post.css:1782-1788 for .militra-single-related.
   =================================================== */

@media (max-width: 480px) {
    /* THE BAND'S OWN STEP-DOWN. Mirrors single-post.css:1777-1780, where
       .militra-single-related drops to exactly these numbers. Without it the band keeps
       §4's 56/64/72 on a phone while the band DIRECTLY BELOW IT drops to 44/48/56 —
       ~16px more top and bottom air than its neighbour, which is precisely the rhythm
       mismatch this file's header claims not to have. */
    .militra-post-products {
        padding: 44px 0 48px;
        margin-top: 56px;
    }

    .militra-post-products__container {
        padding: 0 var(--spacing-2, 0.5rem);
    }

    .militra-post-products__title {
        font-size: 24px;
    }

    .militra-post-products__more {
        width: 100%;
        justify-content: center;
    }
}


/* ===================================================
   §8. REDUCED MOTION
   Kill motion. KEEP colour and the one canonical shadow — they are information,
   not motion (single-post.css §14 doctrine). The card's own translateY hover lives
   in product-card.css and is out of scope here — do not add card rules to fix it.
   =================================================== */

@media (prefers-reduced-motion: reduce) {
    .militra-post-products__more,
    .militra-post-products__more-arrow {
        transition: none;
    }

    .militra-post-products__more:hover,
    .militra-post-products__more:focus-visible {
        transform: none;
    }

    .militra-post-products__more:hover .militra-post-products__more-arrow {
        transform: none;
    }
}


/* ===================================================
   §9. PRINT
   A products ad has no place on a printed medical article. single-post.css already
   hides .militra-progress / .militra-toc / .militra-single-share / .militra-postnav /
   .militra-single-related / .militra-single__back. This band joins them — but the
   rule lives HERE, so single-post.css stays untouched.
   The !important mirrors single-post.css §15's own idiom (it must beat the band's
   own display rules and any inline/plugin print sheet).
   =================================================== */

@media print {
    .militra-post-products {
        display: none !important;
    }
}