/**
 * Blog archive category tabs.
 *
 * Restyles the theme's pill chips as underline tabs and hides filtered-out
 * cards. Scoped to `.arden-post-archive`, which only the blog archive template
 * uses — category archives render a different block entirely.
 */

.arden-post-archive .arden-chip-row {
	gap: 0.15rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
	border-bottom: 1px solid color-mix(in srgb, var(--arden-color-muted) 22%, transparent);
}

.arden-post-archive .arden-chip-row::-webkit-scrollbar {
	display: none;
}

.arden-post-archive .arden-filter-chip {
	position: relative;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0.72rem 0.9rem;
	gap: 0.4rem;
	color: color-mix(in srgb, var(--arden-color-text) 58%, var(--arden-color-muted));
	white-space: nowrap;
	transition: color 0.18s ease;
}

.arden-post-archive .arden-filter-chip::after {
	content: "";
	position: absolute;
	left: 0.6rem;
	right: 0.6rem;
	bottom: -1px;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--arden-color-primary);
	opacity: 0;
	transform: scaleX(0.55);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.arden-post-archive .arden-filter-chip:hover,
.arden-post-archive .arden-filter-chip:focus-visible {
	border-color: transparent;
	background: transparent;
	color: var(--arden-color-primary);
}

.arden-post-archive .arden-filter-chip:hover::after {
	opacity: 0.32;
	transform: none;
}

.arden-post-archive .arden-filter-chip.is-active {
	border-color: transparent;
	background: transparent;
	color: var(--arden-color-primary);
}

.arden-post-archive .arden-filter-chip.is-active::after {
	opacity: 1;
	transform: none;
}

.arden-post-archive .arden-filter-chip span {
	font-size: 0.76rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--arden-color-muted) 82%, transparent);
	transition: color 0.18s ease;
}

.arden-post-archive .arden-filter-chip.is-active span {
	color: color-mix(in srgb, var(--arden-color-primary) 70%, transparent);
}

.arden-post-card-grid > .wp-block-post.ne-blog-card--hidden {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.arden-post-archive .arden-filter-chip,
	.arden-post-archive .arden-filter-chip::after,
	.arden-post-archive .arden-filter-chip span {
		transition: none;
	}
}

@media (max-width: 600px) {
	.arden-post-archive .arden-chip-row {
		margin-inline: calc(var(--arden-space-md, 1rem) * -1);
		padding-inline: var(--arden-space-md, 1rem);
	}

	.arden-post-archive .arden-filter-chip {
		padding-inline: 0.7rem;
		font-size: 0.88rem;
	}
}