/*
 * Layer: components. Post template "rows" (kit .nd-row): numbered list rows, the title link
 * covering the row. Meta = category + date today; M9's type tag and Members lock join the meta
 * group (kit .nd-tag / .nd-tag--lock in components.css) without a layout change.
 */
@layer components {

	.wp-block-post-template.is-style-rows {
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: nd-row;
	}

	.wp-block-post-template.is-style-rows > .wp-block-post {
		position: relative;
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr) auto;
		gap: 20px;
		align-items: baseline;
		margin-block: 0;
		padding: 24px 0;
		border-top: 1px solid var(--wp--preset--color--line);
		color: var(--wp--preset--color--ink);
		counter-increment: nd-row;
		transition: color var(--wp--custom--duration--fast);
	}

	.wp-block-post-template.is-style-rows > .wp-block-post:last-child {
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.wp-block-post-template.is-style-rows > .wp-block-post:hover {
		color: var(--wp--preset--color--brand-deep);
	}

	/* Row number (kit .nd-mono). */
	.wp-block-post-template.is-style-rows > .wp-block-post::before {
		content: counter(nd-row, decimal-leading-zero);
		color: var(--wp--preset--color--ink-muted);
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--eyebrow);
		font-weight: 500;
		line-height: 1;
	}

	.wp-block-post-template.is-style-rows .wp-block-post-title {
		margin: 0;
		color: inherit;
		font-size: var(--wp--preset--font-size--row-title);
		line-height: var(--wp--custom--line-height--row-title);
	}

	/* Core makes the link inline-block, whose baseline is its last line; rows align on the first. */
	.wp-block-post-template.is-style-rows .wp-block-post-title a {
		display: inline;
		color: inherit;
		text-decoration: none;
	}

	.wp-block-post-template.is-style-rows .wp-block-post-title a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	/*
	 * Meta (kit .nd-row__meta); sits above the row link so the category stays clickable, while
	 * the date lets clicks through to the row link instead of being a dead zone.
	 */
	.wp-block-post-template.is-style-rows .nd-row__meta {
		position: relative;
		z-index: 1;
		pointer-events: none;
		gap: 8px;
		margin: 0;
		color: var(--wp--preset--color--ink-muted);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--eyebrow);
		line-height: 1;
		white-space: nowrap;
	}

	.wp-block-post-template.is-style-rows .nd-row__meta a {
		pointer-events: auto;
	}

	.wp-block-post-template.is-style-rows .nd-row__meta > * {
		margin: 0;
		color: inherit;
		font-size: inherit;
	}

	.wp-block-post-template.is-style-rows .nd-row__meta > * + *::before {
		content: "·";
		margin-right: 8px;
	}

	.wp-block-post-template.is-style-rows .nd-row__meta a {
		color: inherit;
		text-decoration: none;
	}

	.wp-block-post-template.is-style-rows .nd-row__meta a:hover {
		color: var(--wp--preset--color--brand-deep);
	}

	/* Phones: the meta drops under the title so long titles keep their width. */
	@media (max-width: 600px) {

		.wp-block-post-template.is-style-rows > .wp-block-post {
			grid-template-columns: 32px minmax(0, 1fr);
			row-gap: 10px;
		}

		.wp-block-post-template.is-style-rows .nd-row__meta {
			grid-column: 2;
		}
	}
}