/*
 * style.css — observatorio-cero/filter
 * Loaded automatically via block.json when the block is present.
 * Covers: filter container + filter-pill children.
 * Consolidates: assets/css/filter-pill.css
 */

/**
 * Filter Pill — observatorio-cero-theme
 *
 * Shared styles for the observatorio-cero/filter-pill block used by
 * the actualidad and member archive filtering controls.
 */

/* ═══════════════════════════════════════════
 * Filter containers
 * ═══════════════════════════════════════════ */

.oc-actualidad-filters,
.oc-member-filters {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	justify-content: flex-end;
}

@media (max-width: 781px) {
	.oc-actualidad-filters,
	.oc-member-filters {
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: var(--wp--preset--spacing--20);
	}
}

/* ═══════════════════════════════════════════
 * Pill base
 * ═══════════════════════════════════════════ */

.wp-block-observatorio-cero-filter-pill.oc-filter-pill {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	gap: var(--wp--preset--spacing--20);
	padding: 0.375rem 0.875rem;
	border-radius: var(--wp--custom--border-radius--full);
	border: var(--wp--custom--ui--border-width--medium) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface-variant);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: var(--wp--custom--typography--font-weight--label-md);
	line-height: var(--wp--custom--typography--line-height--label-md);
	letter-spacing: var(--wp--custom--typography--letter-spacing--label-md);
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--soft);
	transition:
		background-color var(--wp--custom--ui--interaction--medium),
		color var(--wp--custom--ui--interaction--medium),
		border-color var(--wp--custom--ui--interaction--medium),
		box-shadow var(--wp--custom--ui--interaction--medium);
}

.wp-block-observatorio-cero-filter-pill.oc-filter-pill:hover {
	background-color: var(--wp--preset--color--surface-container-high);
}

.wp-block-observatorio-cero-filter-pill.oc-filter-pill:focus-visible {
	outline: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset);
}

/* ═══════════════════════════════════════════
 * Active state
 * ═══════════════════════════════════════════ */

.wp-block-observatorio-cero-filter-pill.oc-filter-pill.is-active {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border-color: var(--wp--preset--color--primary);
}

.wp-block-observatorio-cero-filter-pill.oc-filter-pill.is-active:hover {
	background-color: var(--wp--preset--color--primary);
}

/* ═══════════════════════════════════════════
 * Count badge
 * ═══════════════════════════════════════════ */

.oc-filter-pill__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25em;
	padding: 0.1em 0.4em;
	border-radius: var(--wp--custom--border-radius--full);
	background-color: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: var(--wp--custom--typography--font-weight--label-md);
	line-height: 1;
}

.wp-block-observatorio-cero-filter-pill.oc-filter-pill.is-active .oc-filter-pill__count {
	background-color: var(--wp--preset--color--on-primary);
	color: var(--wp--preset--color--primary);
}

/* ═══════════════════════════════════════════
 * Reduced motion
 * ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.wp-block-observatorio-cero-filter-pill.oc-filter-pill {
		transition: none !important;
	}
}