/**
 * Pattern: Featured Projects — Query Loop  (P12)
 *   patterns/project-loop.php           — full gg_project archive (perPage high)
 *   patterns/project-loop-featured.php  — featured-3 (perPage:3, first 3 by menu_order)
 *
 * SELF-CONTAINED partial. DISTINCT namespace (.kd-projectloop*) — mirrors P3's
 * media-split layout but is a DYNAMIC core Query Loop over the gg_project CPT,
 * so it does NOT reuse P3's .kd-mediasplit* rules (do not add .kd-mediasplit here).
 * Both pattern files share this ONE partial (glob-enqueued; no shared-file edit).
 *
 * Design source (file g3BMymX7x188yz0AGwEMkL, Portfolio frame 14:105 @ 1440):
 *   4 projects, ALTERNATING image-right / image-left / image-right / image-left.
 *   • Title   23:851  Public Sans Medium 500, 30px / line-height 38px, tracking
 *                     0.15px, maroon #900000. (≈ global h2, but 38px leading not 46.)
 *   • Excerpt 23:850  Inter Regular 400, 17px / line-height 28px, black.
 *   • Image   23:852  598×353 (≈1.694:1), SHARP-SQUARE (radius 0), NO shadow.
 *   Geometry: two 598px columns inside the 1216 content column (112px gutters);
 *             598 + 598 + 20 = 1216  → column GAP = 20px (measured off the node —
 *             this is tighter than P3's 64px; the Portfolio splits use wider
 *             columns + a narrower gutter). Columns vertically centred.
 *   Inter-project vertical rhythm ≈64px (row pitch 410–431 − 353 image ≈ 57–78,
 *   avg 64) → --kd-space-xl. NOT the 100px section rhythm (that sits around the
 *   whole loop, applied by the .entry-content owl selector).
 *
 * Responsive (mobile mock 2020:356, 375): each project STACKS image-first, image
 * full-width in 20px gutters, alternation collapses to one column. Title auto-drops
 * to 24px via the global <768 h2 rule (tokens.css); excerpt stays 17/28.
 *
 * Every value references a --kd-*/--wp--preset--* token; node one-offs (38px title
 * leading, 28px excerpt leading, 598/353 ratio, 20px column gap) are commented.
 * Prefix: .kd-projectloop*.
 */

/* ── Outer section ─────────────────────────────────────────────────────────── */

.kd-projectloop {
	width: 100%;
}

/* ── Post-template list — vertical stack of projects ────────────────────────
   Own the list layout explicitly (don't inherit core layout-flow owl margins,
   which would double up with the flex gap). 64px between projects (node ≈57–78,
   avg 64). */
.kd-projectloop .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: var(--kd-space-xl); /* 64px — between projects (node row pitch ≈57–78) */
	margin: 0;
	padding: 0;
	list-style: none;
}

.kd-projectloop .wp-block-post {
	margin: 0; /* neutralise core layout-flow owl margin (flex gap owns spacing) */
}

/* ── Per-project two-column row ─────────────────────────────────────────────
   50/50 columns, 20px gap, vertically centred. The media column is DOM-FIRST
   (so mobile always stacks image-first); on desktop the DEFAULT is row-reverse
   → image-RIGHT, matching project 1 of the node (image at x730, text at x112). */
.kd-projectloop .kd-projectloop__row {
	display: flex;
	flex-direction: row-reverse; /* image-RIGHT — odd projects (1, 3), node 14:105 */
	align-items: center;
	gap: 1.25rem; /* 20px — node 14:105 column gap (598+598+20=1216); no shared token */
	margin-block: 0;
}

/* Alternating flip: even projects (2, 4) render image-LEFT (image at x112 in the
   node) — normal row order puts the DOM-first media column on the left. */
.kd-projectloop .wp-block-post:nth-child(even) .kd-projectloop__row {
	flex-direction: row;
}

/* Equalise the two columns. !important overrides ONLY WP's injected inline column
   width + block-gap margin (the sanctioned "neutralise WP's own inline output"
   case, same as P3), not another stylesheet's rule. */
.kd-projectloop .kd-projectloop__row > .wp-block-column {
	flex: 1 1 0;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}

/* ── Media column ──────────────────────────────────────────────────────────── */

.kd-projectloop__media-col {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Featured image — square (radius 0), no shadow, locked to the node's 598/353
   ratio regardless of the uploaded file's dimensions (object-fit cover). */
.kd-projectloop__image {
	margin: 0;
	width: 100%;
}

.kd-projectloop__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 598 / 353; /* node 23:852 — 598×353 ≈ 1.694:1 */
	object-fit: cover;
	border-radius: var(--kd-radius-0); /* SQUARE — never rounded/circle (Gracie rule) */
}

/* ── Text column ───────────────────────────────────────────────────────────── */

.kd-projectloop__text-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.kd-projectloop__text-col > * {
	margin-block: 0;
}

/* Title (<h2> Post Title) inherits the theme.json h2 (Public Sans Medium 30px,
   #900000). Local overrides: the tighter 38px leading (global h2 is 46px), the
   0.15px tracking, and the rhythm down to the excerpt. Line-height is scoped to
   ≥768 so the global <768 h2 rule (24px / lh 1.333) owns mobile untouched. */
.kd-projectloop__title {
	letter-spacing: 0.15px; /* node 23:851 tracking */
	margin-bottom: var(--kd-space-md); /* 24px title → excerpt (node ≈27px) */
}

@media (min-width: 768px) {
	.kd-projectloop__title {
		line-height: 38px; /* node 23:851 — tighter than the global h2 46px */
	}
}

/* Excerpt — Inter Regular 17/28 black. 17px via the footer-link/lead preset
   (--kd-size-footer-link); 28px leading is a node one-off. */
.kd-projectloop__excerpt,
.kd-projectloop__excerpt p,
.kd-projectloop__excerpt .wp-block-post-excerpt__excerpt {
	font-size: var(--kd-size-footer-link); /* 17px */
	line-height: 28px; /* node 23:850 — 28/17, no lh token */
	color: var(--kd-color-body); /* black */
	margin-block: 0;
}

/* Suppress the "Read more" link (moreText is also empty in the block). */
.kd-projectloop .wp-block-post-excerpt__more-text {
	display: none;
}

/* ── Mobile (<768) — single-column stack, IMAGE-FIRST ───────────────────────
   Both alternation states collapse to a column in natural DOM order (media col
   first = image on top). Force column even on the row-reverse (even) items so
   they don't become column-reverse. */
@media (max-width: 767.98px) {
	.kd-projectloop .kd-projectloop__row,
	.kd-projectloop .wp-block-post:nth-child(even) .kd-projectloop__row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--kd-space-md); /* 24px image → text (mock 2020:365 ≈20px) */
	}

	/* Full-width stack. align-self:stretch overrides WP's per-column
	   is-vertically-aligned-center (align-self:center) — in column direction that
	   would centre on the cross axis and shrink the image column to 0 width.
	   flex:0 0 auto restores natural (content) height per stacked block. */
	.kd-projectloop .kd-projectloop__row > .wp-block-column {
		flex: 0 0 auto;
		align-self: stretch;
	}

	.kd-projectloop__text-col {
		align-items: flex-start; /* left-aligned, matches desktop */
	}
}