/* ───────────────────────────────────────────────────────────────
   featured-list.css — Featured and archive article rows
   ───────────────────────────────────────────────────────────────
   Each row has an image on one side and the title/excerpt/meta on
   the other. Even rows flip via `:nth-child(even)`.

   The markup is in `templates/home.html` and `templates/archive.html`.

   Common edits:
     • image vs text proportions → `.blik-article-row-image` flex-basis
     • image aspect ratio        → `.blik-article-row-image` aspect-ratio
     • row vertical spacing      → `.blik-article-row` padding
     • title font / size         → `.blik-article-body .wp-block-post-title`
     • eyebrow (cat / tag) color → `.blik-article-eyebrow .blik-cat-term a`
                                    and `.blik-tag-term a`
   ─────────────────────────────────────────────────────────────── */

.blik-article-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: clamp(32px, 6vw, 96px);
	max-width: var(--blik-max);
	margin: 0 auto;
	/* 50px inner top/bottom, matching the hero panel. */
	padding: 50px var(--blik-gutter);
	box-sizing: border-box;
}

.blik-article-row.is-layout-flex {
	align-items: flex-start;
}

.wp-block-query:has(.blik-article-row) > .wp-block-group {
	box-sizing: border-box;
	max-width: var(--blik-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--blik-gutter);
	padding-right: var(--blik-gutter);
}

/* Alternating layout: even rows flip image to the right side. */
.wp-block-query .wp-block-post:nth-child(even) .blik-article-row {
	flex-direction: row-reverse;
}

/* Alternating row background: odd rows use the page paper colour, even
   rows use the same gray as the hero panel. The bg is on the post LI so
   it spans the full viewport — the .blik-article-row inside stays at
   --blik-max with gutter padding, so content position is unchanged. */
.wp-block-query .wp-block-post {
	background: var(--blik-color-paper);
}

.wp-block-query .wp-block-post:nth-child(even) {
	background: var(--blik-color-panel);
}

.blik-article-row-image {
	align-self: flex-start;
	flex: 0 0 44%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin: 0;
}

.blik-article-row-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.blik-article-row-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--blik-transition-slow);
}

.blik-article-row-image:hover img {
	transform: scale(1.03);
}

.blik-article-body {
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1;
	min-width: 0;
	margin-top: 0;
	margin-block-start: 0;
	padding-top: 0;
}

.blik-article-body > :first-child {
	margin-top: 0;
	margin-block-start: 0;
}

/* ─── EYEBROW: category + tag ─── */
.blik-article-body .blik-article-eyebrow {
	/* Negative top lifts the text by the font's top bearing so the CAP height
	   of the category/tag lines up with the image's top pixel edge (the line
	   box otherwise leaves a few px of ascent above the capitals). */
	margin: -0.35em 0 var(--blik-spacing-md);
	padding: 0;
	min-height: 0;
	align-items: flex-start;
	line-height: 1;
}

.blik-article-body .blik-article-eyebrow.is-layout-flex {
	align-items: flex-start;
}

.blik-article-body .blik-cat-term,
.blik-article-body .blik-tag-term,
.blik-article-body .blik-cat-term a,
.blik-article-body .blik-tag-term a {
	display: inline-flex;
	align-items: flex-start;
	line-height: 1;
}

/* Cat/tag term link colors live in theme.json's root `styles.css` so the
   same rule applies on homepage, archive, single header and lees-ook
   card. Only the visual space between cat and tag stays here. */
.blik-article-eyebrow .blik-tag-term::before {
	content: ' ';
}

/* ─── TITLE ─── */
.blik-article-body .wp-block-post-title {
	margin-top: 0;
}

/* ─── META: date | reading time ───
   Shared rule, also used by the "Lees ook" card in single.css. */
.blik-article-body .blik-article-meta {
	margin-top: var(--blik-spacing-md);
}

.blik-article-body .blik-article-meta .wp-block-post-date,
.blik-article-body .blik-article-meta .wp-block-post-date a,
.blik-article-body .blik-article-meta .blik-reading-time,
.blik-lees-ook-meta {
	font-family: var(--wp--preset--font-family--tt-commons-pro-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
	.blik-article-row,
	.wp-block-query .wp-block-post:nth-child(even) .blik-article-row {
		flex-direction: column;
		gap: var(--blik-spacing-xl);
		padding-top: var(--blik-spacing-2xl);
		padding-bottom: var(--blik-spacing-2xl);
	}

	.blik-article-row-image {
		order: 1;
		flex: none;
		width: 100%;
	}

	.blik-article-body {
		order: 2;
		width: 100%;
	}

	.blik-featured-row {
		flex-direction: column;
		gap: var(--blik-spacing-xl);
	}

	.blik-featured-thumb {
		width: 100%;
	}
}