/* =============================================================================
 * BLOG INDEX — the reference's editorial list.            (rewritten 2026-08-29)
 *
 * WHAT THIS FILE USED TO BE, AND WHY IT IS NOT THAT ANY MORE
 * ----------------------------------------------------------
 * A4 / hub#4277 built a responsive CARD GRID here — `auto-fill` +
 * `minmax(20rem, 1fr)`, 6 posts a page, a stretched flex-column card with a
 * bordered footer. It was good work and it was never the reference's design.
 * Measured on vania-novikau.me/blog/ at 1440 the reference is ONE COLUMN of
 * large editorial rows, 10 a page: a big image on the left with a white text
 * card overlapping its right edge. The two pages did not read as the same site
 * (5521px of document against 1717px).
 *
 * Rewritten rather than added to, so one file still owns the blog list and
 * there are no rules left over from a layout that is gone.
 *
 * SCOPE IS UNCHANGED. Every selector still starts at `.vnm-blog-cards`, a class
 * on ONE query loop in `templates/home.html`, so this cannot reach the shop,
 * the archives or any other query. Deleting the file or the class remains the
 * negative test.
 *
 * THE REFERENCE'S NUMBERS, measured — not chosen (1440 viewport, 1280 content):
 *
 *     row            1280 wide, height driven by the TEXT card
 *     image block     665 (51.953%), radius 5, overflow hidden
 *     img             object-fit: cover, height 100%
 *     text card       665 wide, margin 36px 0 36px -50px, padding 36px 50px,
 *                     radius 5, white, z-index 1,
 *                     shadow 0 0 5px rgba(0,0,0,.1), 0 5px 20px rgba(0,0,0,.1)
 *     category pill   absolute top 36 left 36; rgba(255,255,255,.9) on #000,
 *                     radius 150px, 13px/500, padding 3.9px 13px, line-height 18
 *     title           25.92px / 600 / 1.4, colour rgb(2,2,2), margin 0 0 20px
 *     excerpt         18px / 1.8, rgb(68,68,68), margin 0 0 20px
 *     date            12px, rgb(68,68,68)
 *     row gap         70px
 *
 * ★ THE TEXT CARD DRIVES THE ROW HEIGHT AND THE IMAGE STRETCHES TO IT — this is
 * the one thing worth stating, because it is not what the markup suggests. The
 * image blocks measure 665x476, 665x510, 665x390, 665x341 across the ten rows:
 * four different aspect ratios, so there is no fixed ratio and no set height.
 * In every case the text card's outer height (content + its 36px margins) is
 * EXACTLY the image height. So the grid row is sized by the text, the image
 * block takes `height: 100%`, and `object-fit: cover` crops whatever the photo
 * is. Give the image an aspect-ratio instead and the two columns disagree by
 * tens of pixels on most rows.
 *
 * ★ THE 50px OVERLAP IS A NEGATIVE MARGIN, NOT A NEGATIVE OFFSET. The text card
 * is `margin-left: -50px` inside a stretched grid track, which makes the BOX
 * 50px wider rather than moving it: track 615 + 50 = the measured 665. That is
 * also what makes the no-image case land correctly with no extra rule — see
 * below.
 * ========================================================================== */

.vnm-blog-cards {
	--vnm-blog-media: 51.953%;   /* 665 / 1280 */
	--vnm-blog-overlap: 50px;
	--vnm-blog-inset: 36px;
	--vnm-blog-pad: 50px;
	--vnm-blog-gap: 70px;
	--vnm-blog-radius: 5px;
}

/* ---------------------------------------------------------------------------
 * 1. The list. One column, 70px apart.
 *
 * `.wp-block-post-template` is core's <ul>; the row is the <article> inside
 * each <li>, so the stacking lives here and the grid lives on the article.
 * ------------------------------------------------------------------------ */
.vnm-blog-cards .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: var(--vnm-blog-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vnm-blog-cards .wp-block-post-template > li {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 2. The row.
 *
 * Two tracks: the image at its measured 51.953%, the text taking the rest. The
 * default `align-items: stretch` is load-bearing — it is what lets the image
 * block fill a height it does not set.
 * ------------------------------------------------------------------------ */
.vnm-blog-cards .vnm-blog-card {
	display: grid;
	grid-template-columns: var(--vnm-blog-media) 1fr;
}

/* Core's flow layout puts `margin-block-start` on every child of a group.
   ⚠ This rule originally zeroed `margin-block-end` TOO, and at (0,3,0) it beat
   the `margin: 0 0 20px` set on the title and excerpt two sections below
   (0,2,0) — so the 20px gaps silently never applied. Core only ever adds
   margin-block-START, so that is all this needs to answer. */
.vnm-blog-cards .vnm-blog-card > *,
.vnm-blog-cards .vnm-blog-card__body > * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * 3. The image column.
 * ------------------------------------------------------------------------ */
.vnm-blog-cards .vnm-blog-card__media {
	position: relative;
	border-radius: var(--vnm-blog-radius);
	overflow: hidden;
}

/* The chain from the block wrapper down to the <img> all has to carry the
   height, or `height: 100%` on the image resolves against an auto parent and
   collapses to the intrinsic size. */
.vnm-blog-cards .vnm-blog-card__media .wp-block-post-featured-image,
.vnm-blog-cards .vnm-blog-card__media .wp-block-post-featured-image a {
	display: block;
	height: 100%;
	margin: 0;
}

.vnm-blog-cards .vnm-blog-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--vnm-blog-radius);
	/* The reference sits at `transform: matrix(1.1,0,0,1.1,0,0)` AT REST — read
	   with no pointer over the card, so it is the resting state and not a hover
	   transition caught mid-flight. Its <img> box measures 732x523 inside a
	   665x476 block for exactly this reason. Combined with the block's
	   `overflow: hidden` it crops ~10% off the photo. */
	transform: scale(1.1);
}

/* ---- the category pill, over the image ---------------------------------- */
.vnm-blog-cards .vnm-blog-card__terms {
	position: absolute;
	top: var(--vnm-blog-inset);
	left: var(--vnm-blog-inset);
	z-index: 2;
	margin: 0;
	line-height: 0;   /* the wrapper must not add height around the pill */
}

.vnm-blog-cards .vnm-blog-card__terms a {
	display: inline-block;
	background: rgba(255, 255, 255, .9);
	color: #000;
	border-radius: 150px;
	/* 18 (line-height) + 7.8 (padding) = 25.8, but the reference measures 27.78.
	   The missing 2px is a 1px border it draws on all four sides. Reproduced as
	   `transparent` because only the BOX is measurable here — the reference's
	   border-colour is not visible against its own background, so painting a
	   guessed colour would be inventing a line the reference does not show. */
	border: 1px solid transparent;
	padding: 3.9px 13px;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	text-decoration: none;
}

/* `post-terms` separates multiple terms with a comma that would sit outside the
   pill and read as punctuation floating on the photo. */
.vnm-blog-cards .vnm-blog-card__terms .wp-block-post-terms__separator {
	display: inline-block;
	width: 6px;
	color: transparent;
}

/* ---------------------------------------------------------------------------
 * 4. The text card, overlapping the image.
 * ------------------------------------------------------------------------ */
.vnm-blog-cards .vnm-blog-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	margin: var(--vnm-blog-inset) 0 var(--vnm-blog-inset) calc(-1 * var(--vnm-blog-overlap));
	padding: var(--vnm-blog-inset) var(--vnm-blog-pad);
	background: #fff;
	border-radius: var(--vnm-blog-radius);
	box-shadow: 0 0 5px rgba(0, 0, 0, .1), 0 5px 20px rgba(0, 0, 0, .1);
}

.vnm-blog-cards .vnm-blog-card__title {
	margin: 0 0 20px;
	font-size: 25.92px;
	font-weight: 600;
	line-height: 1.4;
}

.vnm-blog-cards .vnm-blog-card__title a {
	color: rgb(2, 2, 2);
	text-decoration: none;
}

/* ★ THE DATE SITS AT THE BOTTOM OF THE CARD, and the excerpt is what puts it
   there. The reference's info box is `display:flex; flex-direction:column;
   justify-content:space-between`, but space-between is a NO-OP on it: its text
   block measures 231.6px against ~65px of actual text, so the box is already
   full and there is no free space to distribute.
   Copying `space-between` here would NOT reproduce it — with a short excerpt
   there IS free space, and three children would get an equal gap after the
   TITLE as well, which the reference plainly does not have. Letting the excerpt
   absorb the slack instead keeps the title and excerpt tight at the top and
   pins the date to the bottom, which is what the reference renders. */
.vnm-blog-cards .wp-block-post-excerpt {
	flex: 1 1 auto;
	margin: 0 0 20px;
}

.vnm-blog-cards .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	color: rgb(68, 68, 68);
}

.vnm-blog-cards .vnm-blog-card__date {
	margin: 0;
	font-size: 12px;
	color: rgb(68, 68, 68);
	/* measured on the reference's `.pix-blog-article-footer` */
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 5. Posts with no featured image.
 *
 * The image column is dropped and the text card runs the full width.
 *
 * ★ DELIBERATE DEVIATION FROM THE REFERENCE — owner's call, 2026-08-31.
 * The reference KEEPS the -50px margin on these rows even with no image to
 * overlap, so its card hangs 50px into the gutter: measured x30..1360 against
 * its own 80..1360 container. The overlap only means something when there is an
 * image to overlap, so here the margin is dropped and the card lines up with
 * the list item like every other block on the page. This is the one place this
 * file does NOT reproduce the reference, and it is intentional.
 *
 * `:has()` asks the real question — "did the featured image actually render an
 * <img>" — which an empty-check cannot, because the media group still contains
 * the terms block. Where `:has()` is unsupported the row keeps two columns and
 * the text simply sits in the right-hand one; degraded, not broken.
 * ------------------------------------------------------------------------ */
.vnm-blog-cards .vnm-blog-card:not(:has(.wp-block-post-featured-image img)) {
	grid-template-columns: 1fr;
}

.vnm-blog-cards .vnm-blog-card:not(:has(.wp-block-post-featured-image img)) .vnm-blog-card__media {
	display: none;
}

/* No image, no margins at all: the card IS the row.
 *
 * All three margins exist only to float the white card inside the image row —
 * -50px to overlap it, 36px top and bottom to inset it. With no image there is
 * nothing to float against, so the card takes the full width of the <li> and
 * its own height. (The 70px between rows comes from the list's `gap`, not from
 * these margins, so dropping them changes the spacing between cards not at
 * all — only the dead band inside each one.) */
.vnm-blog-cards .vnm-blog-card:not(:has(.wp-block-post-featured-image img)) .vnm-blog-card__body {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 6. Pagination.
 * ------------------------------------------------------------------------ */
.vnm-blog-cards .wp-block-query-pagination {
	margin-top: var(--vnm-blog-gap);
}

/* ---------------------------------------------------------------------------
 * 7. Narrow screens — the overlap stops making sense once the row stacks.
 *
 * Below the point where the text card would be narrower than its own 100px of
 * horizontal padding, the two columns become two stacked blocks: image on top,
 * text under it, pulled up by the same overlap so the design still reads as one
 * object rather than two separate boxes.
 * ------------------------------------------------------------------------ */
@media (max-width: 899px) {
	.vnm-blog-cards .vnm-blog-card {
		grid-template-columns: 1fr;
	}

	.vnm-blog-cards .vnm-blog-card__body {
		width: auto;
		margin: calc(-1 * var(--vnm-blog-overlap)) var(--vnm-blog-inset) 0;
		padding: var(--vnm-blog-inset);
	}

	.vnm-blog-cards {
		--vnm-blog-gap: 40px;
	}
}