/*
 * Catalog blog — pathbar, read time and pager.
 *
 * Marker class: .nou-catalog-blog
 * Depends on:   assets/css/catalog.css       (shell, chip, title, secthead)
 *               assets/css/catalog-home.css  (the card and the grid)
 *
 * DELIBERATELY SMALL. The post cards in design-lab/wf-c-blog.html are the same
 * cards as the product grid with three slots reassigned, so the grid, the
 * frame, the 16:10 media, the chip, the name, the caret and the date line are
 * all already styled by catalog-home.css. Duplicating them here would be two
 * copies to keep in sync.
 *
 * Only two things are genuinely new on this page:
 *   1. the read time — same slot as the price, quieter colour
 *   2. the pager
 *
 * The pathbar is NOT here: four templates use it, so it lives in
 * assets/css/catalog-page.css, declared as a dependency of this file.
 */

/* ================================================================== *
 * READ TIME
 *
 * Sits in the price slot, so it inherits the mono family, the 14px size, the
 * `white-space: nowrap` and the flex alignment from
 * `.nou-catalog-card__price`. Only the colour changes: a price decides a
 * purchase and belongs at the top colour step, a read time is metadata and
 * does not.
 * ================================================================== */

.nou-catalog-card__read {
	font-size: 12px;
	color: var(--wp--custom--neutral--600);
}

/* ================================================================== *
 * DATES LINE UP ACROSS THE ROW
 *
 * Post titles run to one line or two, so a card with a short title floats its
 * date higher than the card beside it. The product grid never showed this
 * because product names are all one line; on a blog index it happens in every
 * row. design-lab/index.html names this as the blog page's one risk, and
 * design-lab/css/wf-c-blog.css carries the fix — it was missed when this file
 * was first written.
 *
 * The grid item already stretches to the row height (`align-items` defaults to
 * `stretch`), so the body only has to claim the leftover space and push the
 * date to the bottom of it.
 *
 * CLAMPING THE TITLE TO TWO LINES WAS CONSIDERED AND REJECTED, and the reason
 * is worth keeping: `-webkit-line-clamp` needs `overflow: hidden` on the <a>
 * itself, and the whole-card click target is
 * `.nou-catalog-card__name a::after { position: absolute; inset: 0 }` — a
 * descendant in that <a>'s box tree. `overflow: hidden` clips it, so the card
 * silently stops being clickable outside the text, with nothing to report the
 * breakage.
 * ================================================================== */

.nou-catalog-post .nou-catalog-card__body {
	flex: 1;
}

.nou-catalog-post .nou-catalog-card__meta {
	margin-top: auto;
}

/* ================================================================== *
 * PAGER
 * ================================================================== */

:root .nou-catalog-pager {
	margin-top: clamp(32px, 4vw, 52px);
	padding-top: clamp(20px, 2.4vw, 30px);
	border-top: 1px solid var(--wp--custom--line--soft);
}

.nou-catalog-pager ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * One shared box for every state so the row cannot jog when the current page
 * changes: link, current and the ellipsis are all the same size.
 */
.nou-catalog-pager a,
.nou-catalog-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wp--custom--neutral--900);
	text-decoration: none;
	transition: border-color 180ms var(--wp--custom--easing--base),
		background-color 180ms var(--wp--custom--easing--base),
		color 180ms var(--wp--custom--easing--base);
}

.nou-catalog-pager a:hover {
	border-color: var(--wp--custom--accent--strong);
	background: color-mix(in srgb, var(--wp--custom--accent--strong) 12%, transparent);
}

/* Current page: filled, and it is not a link, so it cannot be clicked. */
.nou-catalog-pager .current {
	border-color: var(--wp--custom--neutral--900);
	background: var(--wp--custom--neutral--900);
	color: var(--wp--custom--surface--page);
}

/*
 * The ellipsis is not a control: no border, no box, so it reads as a gap in the
 * sequence rather than a disabled button.
 */
.nou-catalog-pager .dots {
	border-color: transparent;
	background: transparent;
	color: var(--wp--custom--neutral--600);
}

/* ================================================================== *
 * REDUCED MOTION
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.nou-catalog-pathbar a,
	.nou-catalog-pager a,
	.nou-catalog-pager span {
		transition: none;
	}
}