/* ─── News feed (/news) ────────────────────────────────── */

/* Post feed index. Two-tone page intro + the registry rendered as a vertical
   thumbnail-card grid; each card's top rule / hover accent is the brand red
   (driven via currentColor). Closes with the shared brand CTA band.
   Markup: includes/news-content.php */


/* ─── Page shell ─────────────────────────────────────────── */

.news-index										{	margin: 0 calc(-1 * var(--shell-pad)) 0; }


/* ─── Hero (page intro) ──────────────────────────────────── */

.news-index-hero								{	position: relative;
													padding: clamp(3.5rem, 9vw, 7rem) var(--shell-pad) clamp(2.5rem, 6vw, 4.5rem);
													background: transparent;

	.news-index-hero-copy						{	max-width: var(--layout-wide); margin-inline: auto; }

	.news-index-hero-lede						{	margin: 1.25em 0 0; max-width: 52ch; }
}


/* ─── Feed (thumbnail card grid) ─────────────────────────── */

.news-index-feed								{	padding: clamp(2.5rem, 5vw, 4rem) var(--shell-pad);
													background: var(--color-ink-1);
}

.news-index-empty								{	max-width: var(--layout-wide); margin-inline: auto;
													font-family: var(--font-mono); font-size: 13px;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--color-paper-low);
}

.news-index-list								{	display: grid;
													grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 30vw, 340px), 1fr));
													gap: clamp(2em, 4vw, 3.5em);
													max-width: var(--layout-wide); margin: 0 auto; padding: 0;
													list-style: none;

	> li										{	min-width: 0; }

	a											{	display: flex; flex-direction: column; gap: 0.8em; height: 100%;
													padding-top: 1.5em;
													border-top: 3px solid currentColor;
													color: var(--color-brand);
													text-decoration: none;

		.news-index-item-thumb					{	width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
													border-radius: var(--radius-sm); background: var(--color-ink-2);

			img									{	width: 100%; height: 100%;
													object-fit: cover; display: block;
													transition: transform var(--dur-base) var(--ease-out);
			}
		}

		.news-index-item-meta					{	display: flex; flex-wrap: wrap; gap: 1em;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;

			time								{	color: var(--color-paper-low); }
			.news-index-item-cat				{	color: currentColor; }
		}

		.news-index-item-title					{	margin: 0;
													font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 600;
													line-height: 1.1; letter-spacing: -0.015em; color: var(--color-paper);
													transition: color var(--dur-base) var(--ease-out);
		}

		.news-index-item-excerpt				{	margin: 0; max-width: 46ch;
													font-size: var(--fs-4); line-height: 1.5; color: var(--color-paper-mute);
		}

		.news-index-item-arrow					{	margin-top: auto;
													font-family: var(--font-display); font-size: 1.4em;
													color: var(--color-paper-low);
													transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
		}

		&:hover, &:focus-visible				{	outline: none;

			.news-index-item-title				{	color: currentColor; }
			.news-index-item-arrow				{	color: currentColor; transform: translateX(0.4em); }
			.news-index-item-thumb img			{	transform: scale(1.03); }
		}
	}

	@media (max-width: 560px)					{	grid-template-columns: 1fr; gap: clamp(2em, 8vw, 2.5em); }
}