/*
 * Artikkelit ja referenssit: the topic filter (chips) of the posts block (attribute filter = "tags").
 * Loaded by blocks/posts/render.php only when the filter is on (and in the editor).
 *
 * Vestelli's look: navy outline pills, the active topic filled navy (like the cards' keyword badge). Wide screens:
 * wrapping rows; phones (<= 768px): one row that scrolls sideways, edge to edge, with a fade at the edge that has more.
 * Spacing from the shared tokens (--ab-*, blocks.css); the fallbacks are the desktop values.
 */

.ab-filter {
	margin: 0 0 var(--ab-head-gap, 48px);
}

@media (min-width: 769px) and (max-width: 1024px) {
	.ab-filter {
		margin-bottom: var(--ab-head-gap, 32px);
	}
}

.ab-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-filter__item {
	margin: 0;
	padding: 0;
}

.ab-filter__item::before,
.ab-filter__item::marker {
	content: none;
}

.ab-filter__chip {
	/* (the hidden count text stays inside the chip, so inside the scrolling phone strip) */
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	/* a 44px tap target at every width (tablets too) */
	min-height: var(--ab-tap, 44px);
	padding: 6px 16px;
	border: 1px solid var(--ab-navy, #1b2a57);
	border-radius: 999px;
	background: #fff;
	color: var(--ab-navy, #1b2a57);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ab-filter__count {
	font-weight: 400;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}

.ab-filter__chip:hover {
	border-color: var(--wp--preset--color--accent, #01a6e6);
	background: rgba(1, 166, 230, 0.08);
	color: var(--ab-navy, #1b2a57);
	text-decoration: none;
}

.ab-filter__chip[aria-current] {
	border-color: var(--ab-navy, #1b2a57);
	background: var(--ab-navy, #1b2a57);
	color: #fff;
}

.ab-filter__chip[aria-current]:hover {
	border-color: var(--ab-navy, #1b2a57);
	background: var(--ab-navy, #1b2a57);
	color: #fff;
}

.ab-filter__chip:focus {
	outline: none;
}

.ab-filter__chip:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 2px;
}

/* on a dark section the outline pills turn white */
.is-dark .ab-filter__chip {
	border-color: rgba(255, 255, 255, 0.7);
	background: transparent;
	color: #fff;
}

.is-dark .ab-filter__chip:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.is-dark .ab-filter__chip[aria-current],
.is-dark .ab-filter__chip[aria-current]:hover {
	border-color: #fff;
	background: #fff;
	color: var(--ab-navy, #1b2a57);
}

/* the results while the next topic loads (JavaScript) */
.ab-posts__results {
	transition: opacity 0.15s ease;
}

.ab-posts__results[aria-busy="true"] {
	opacity: 0.5;
	pointer-events: none;
}

.ab-posts__results:focus {
	outline: none;
}

.ab-posts__empty {
	margin: 0;
	text-align: center;
}

.ab-posts__empty a {
	color: inherit;
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.ab-filter__chip,
	.ab-posts__results {
		transition: none;
	}
}

/* phones: the chips wrap like on wide screens (the Avalon standard's keyword chips), a little smaller and closer
   together; round 4: the one sideways-scrolling row cut a chip at the screen's edge ("Större biok|") and read as
   a broken layout. Every topic is in sight; a long topic name wraps inside its chip instead of widening the page. */
@media (max-width: 768px) {
	.ab-filter {
		margin-bottom: var(--ab-head-gap, 24px);
	}

	.ab-filter__list {
		gap: 8px 6px;
	}

	.ab-filter__item {
		max-width: 100%;
	}

	.ab-filter__chip {
		gap: 6px;
		max-width: 100%;
		padding: 6px 12px;
		font-size: 14px;
		white-space: normal;
	}
}