/*
 * Layer: templates. The library shell (kit pages/library.html) on home, archive and search:
 * category chips, entry rows (date · title + excerpt · category tag), the pager and the empty
 * state. The head and toolbar are components/index.css.
 */
@layer templates {

	/* Chips (kit .filters + .nd-chip): links from utils' term-chips, aria-current on the open one. */
	.nd-chips__list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		align-items: center;
		margin: 0 0 24px;
		padding: 0;
		list-style: none;
	}

	.nd-chip,
	.is-style-pager :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 0 16px;
		border: 1px solid var(--wp--preset--color--glass-border);
		border-radius: var(--wp--preset--border-radius--pill);
		background-color: var(--wp--custom--glass--chip);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 500;
		line-height: 1;
		text-decoration: none;
		transition:
			background-color var(--wp--custom--duration--fast),
			border-color var(--wp--custom--duration--fast),
			color var(--wp--custom--duration--fast);
	}

	a.nd-chip:hover,
	.is-style-pager a:hover {
		border-color: var(--wp--preset--color--brand-deep);
		background-color: var(--wp--preset--color--paper);
		color: var(--wp--preset--color--ink);
	}

	.nd-chip[aria-current="page"],
	.is-style-pager .page-numbers.current {
		border-color: var(--wp--preset--color--brand);
		background-color: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--paper);
	}

	:is(.nd-chip, .is-style-pager a):focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--wp--custom--focus-ring);
	}

	/* Entries (kit .nd-entry). */
	.wp-block-post-template.is-style-entries {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wp-block-post-template.is-style-entries > .wp-block-post {
		position: relative;
		display: grid;
		grid-template-columns: 110px minmax(0, 1fr) auto;
		gap: 28px;
		align-items: start;
		margin-block: 0;
		padding: 28px 0;
		border-top: 1px solid var(--wp--preset--color--line);
		color: var(--wp--preset--color--ink);
	}

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

	.is-style-entries .wp-block-post > *,
	.is-style-entries .nd-entry__body > * {
		margin-block: 0;
	}

	/* Kit .nd-mono with padding-top 10px. */
	.is-style-entries .nd-entry__date {
		padding-top: 10px;
		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;
	}

	.is-style-entries .nd-entry__title {
		margin-bottom: 8px;
		color: inherit;
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--row-title);
		font-weight: 500;
		line-height: var(--wp--custom--line-height--entry-title);
		transition: color var(--wp--custom--duration--fast);
	}

	/* The title link covers the row (L44: inline, not core's inline-block). */
	.is-style-entries .nd-entry__title a {
		display: inline;
		color: inherit;
		text-decoration: none;
	}

	.is-style-entries .nd-entry__title a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.is-style-entries .wp-block-post:hover .nd-entry__title {
		color: var(--wp--preset--color--brand-deep);
	}

	.is-style-entries .wp-block-post:has(.nd-entry__title a:focus-visible) {
		box-shadow: var(--wp--custom--focus-ring);
	}

	.is-style-entries .nd-entry__title a:focus-visible {
		outline: 2px solid transparent;
		box-shadow: none;
	}

	.is-style-entries .nd-entry__excerpt p {
		display: -webkit-box;
		overflow: hidden;
		margin: 0;
		color: var(--wp--preset--color--ink-soft);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* Tags sit above the row link so the category stays clickable; the Members lock follows. */
	.is-style-entries .nd-entry__tags,
	.is-style-entries .nd-entry__tags .wp-block-post-terms {
		position: relative;
		z-index: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		justify-content: flex-end;
	}

	.is-style-entries .nd-entry__tags > * {
		margin: 0;
	}

	/* Pager (kit .nd-pager): chips; the disabled end is a span (inc/query-loops.php). */
	.wp-block-query-pagination.is-style-pager {
		gap: 6px;
		margin-top: 40px;
	}

	.is-style-pager .wp-block-query-pagination-numbers {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		align-items: center;
	}

	.is-style-pager :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
		justify-content: center;
		min-width: 40px;
		margin: 0;
		padding: 0 12px;
	}

	.is-style-pager .page-numbers.dots {
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--ink-muted);
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--eyebrow);
	}

	.is-style-pager .is-disabled {
		color: var(--wp--preset--color--ink-muted);
		opacity: 0.5;
	}

	.is-style-pager :is(.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow) {
		margin: 0;
	}

	/* Empty state (patterns/library-empty.php). */
	.nd-empty {
		max-width: 640px;
		padding: 40px 0 0;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.nd-empty > * {
		margin-block: 0;
	}

	.nd-empty__title {
		margin-bottom: 12px;
		font-size: var(--wp--preset--font-size--display-s);
	}

	.nd-empty__text {
		margin-bottom: 24px;
		color: var(--wp--preset--color--ink-soft);
	}

	@media (max-width: 1100px) {

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

		.is-style-entries .nd-entry__date {
			padding-top: 0;
		}

		.is-style-entries .nd-entry__tags,
		.is-style-entries .nd-entry__tags .wp-block-post-terms {
			justify-content: flex-start;
		}

		.nd-chips__list {
			margin-bottom: 16px;
		}
	}
}