/**
 * Hayder Voice — Archive Styles
 */

@layer components {

	/* ============================================================
	 * ARCHIVE HERO
	 * ============================================================ */

	.archive-hero {
		position: relative;
		padding: calc(var(--header-height) + 4rem) var(--container-pad) 4rem;
		overflow: hidden;
		background: var(--c-abyss);
		border-bottom: 1px solid var(--c-border);
	}

	.archive-hero__grain {
		position: absolute;
		inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
		pointer-events: none;
	}

	.archive-hero > .container-md {
		position: relative;
		z-index: 1;
	}

	.archive-hero__eyebrow { color: var(--c-amber-dim); }

	.archive-hero__title {
		font-size: clamp(2.5rem, 6vw, 5rem);
		font-weight: 300;
		line-height: var(--lh-snug);
		color: var(--c-heading);
		letter-spacing: -0.025em;
		margin-bottom: 1rem;
	}

	.archive-hero__desc {
		font-family: var(--font-sans);
		font-size: var(--text-base);
		color: var(--c-muted);
		max-width: 60ch;
		line-height: var(--lh-relaxed);
		margin-bottom: 1.5rem;
	}

	.archive-hero__desc p { margin-bottom: 0; }

	.archive-hero__count {
		display: inline-flex;
		align-items: center;
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		font-weight: 500;
		letter-spacing: var(--ls-wider);
		text-transform: uppercase;
		color: var(--c-amber);
		padding: 0.3em 0.8em;
		background: var(--c-amber-surface);
		border: 1px solid var(--c-amber-border);
		border-radius: var(--radius-full);
	}

	/* ============================================================
	 * ARCHIVE GRID
	 * ============================================================ */

	.archive-grid {
		padding: clamp(3rem, 6vw, 5rem) var(--container-pad);
		max-width: var(--container-lg);
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(1.5rem, 2.5vw, 2.5rem);
		align-items: start;
	}

	/* CSS masonry — progressive enhancement */
	@supports (grid-template-rows: masonry) {
		.archive-grid {
			grid-template-rows: masonry;
		}
	}

	/* First item spans 2 columns on large screens */
	.archive-grid__item:first-child {
		grid-column: span 2;
	}

	/* ============================================================
	 * ARCHIVE PAGINATION
	 * ============================================================ */

	.archive-pagination {
		padding: 2rem var(--container-pad) 4rem;
	}

	/* ============================================================
	 * TALES ARCHIVE HERO
	 * ============================================================ */

	.tales-archive-hero {
		background: linear-gradient(
			135deg,
			var(--c-abyss) 0%,
			color-mix(in oklch, var(--c-amber) 5%, var(--c-abyss)) 100%
		);
	}

	.tales-archive-grid {
		padding: clamp(3rem, 6vw, 5rem) var(--container-pad);
	}

	/* ============================================================
	 * AUTHOR ARCHIVE HERO
	 * ============================================================ */

	.author-archive-hero .container-md {
		position: relative;
		z-index: 1;
	}

	.author-archive-hero__inner {
		display: flex;
		align-items: flex-start;
		gap: 2rem;
	}

	.author-archive-hero__photo { flex-shrink: 0; }

	.author-archive-hero__avatar {
		width: 96px;
		height: 96px;
		border-radius: var(--radius-full);
		object-fit: cover;
		border: 2px solid var(--c-border);
	}

	.author-archive-hero__info { flex: 1; }

	.author-archive-hero__name {
		font-size: clamp(2rem, 4vw, 3.5rem);
		font-weight: 300;
		color: var(--c-heading);
		margin-bottom: 0.75rem;
	}

	.author-archive-hero__bio {
		font-family: var(--font-sans);
		font-size: var(--text-base);
		color: var(--c-muted);
		max-width: 60ch;
		line-height: var(--lh-relaxed);
		margin: 0;
	}

} /* @layer components */