/**
 * Needs Grid — Browsable grid of posted needs.
 *
 * BEM naming with `listora-needs` prefix.
 * Uses CSS custom properties from shared.css.
 *
 * @package WBListoraPro
 */

/* --- Wrapper --- */

.listora-needs {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-6, 1.5rem);
}

/* --- Search Bar --- */

.listora-needs__search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-2, 0.5rem);
	align-items: center;
	margin-block-end: var(--listora-space-4, 1rem);
}

.listora-needs__search-input.listora-input {
	flex: 1 1 240px;
	min-width: 0;
}

.listora-needs__search-submit {
	flex: 0 0 auto;
}

.listora-needs__search-clear {
	color: var(--listora-text-muted);
	font-size: var(--listora-font-size-sm, 0.875rem);
	text-decoration: underline;
}

.listora-needs__search-clear:hover,
.listora-needs__search-clear:focus-visible {
	color: var(--listora-text);
}

.listora-needs__count {
	margin: 0 0 var(--listora-space-4, 1rem);
	color: var(--listora-text-muted);
	font-size: var(--listora-font-size-sm, 0.875rem);
}

.listora-needs__empty-actions {
	margin-block-start: var(--listora-space-4, 1rem);
}

/* --- Filter Bar --- */

.listora-needs__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--listora-space-4, 1rem);
	padding: var(--listora-space-4, 1rem);
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
	border-radius: var(--listora-radius-lg, 14px);
}

.listora-needs__filter-group {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-1, 0.25rem);
}

.listora-needs__filter-label {
	font-size: var(--listora-text-sm, 0.8rem);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-needs__select {
	padding: 0.45rem 0.75rem;
	font-size: var(--listora-text-sm, 0.8rem);
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-md, 10px);
	background: var(--listora-bg-elevated);
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
	min-width: 160px;
}

.listora-needs__urgency-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-1, 0.25rem);
}

.listora-needs__pill {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	/* Mobile UX audit 2026-05-25: 37px raised to 40px tap-target floor.
	 * Padding bumped from 0.35rem to 0.55rem block to grow the pill to
	 * meet the floor without shifting visual weight. */
	padding: 0.55rem 0.85rem;
	min-height: var(--listora-tap-target, 40px);
	font-size: var(--listora-text-sm, 0.8rem);
	font-weight: var(--listora-weight-medium, 500);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-radius-full, 9999px);
	transition: background var(--listora-transition-base, 0.2s ease),
		color var(--listora-transition-base, 0.2s ease),
		border-color var(--listora-transition-base, 0.2s ease);
}

.listora-needs__pill:hover {
	background: var(--listora-bg-muted, var(--listora-admin-bg-paper));
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
}

.listora-needs__pill--active {
	background: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
}

.listora-needs__pill--active:hover {
	background: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

/* --- Grid --- */

.listora-needs__grid {
	display: grid;
	grid-template-columns: repeat(var(--listora-needs-columns, 3), minmax(0, 1fr));
	gap: var(--listora-grid-gap, 1.5rem);
}

/* --- Card --- */

.listora-needs__card {
	display: flex;
	flex-direction: column;
	gap: var(--listora-card-gap, 0.5rem);
	padding: var(--listora-card-padding, 1rem);
	background: var(--listora-bg-elevated);
	/* Match .listora-card surface treatment (atomic border, xl radius, md
	   shadow, -2px hover lift) for portfolio-wide visual consistency. */
	border: 1px solid var(--listora-border-default);
	border-radius: var(--listora-radius-xl, 16px);
	box-shadow: var(--listora-shadow-md);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.listora-needs__card:hover {
	box-shadow: var(--listora-shadow-xl);
	border-color: var(--listora-border-strong);
	transform: translateY(-2px);
}

/* Card Header */

.listora-needs__card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--listora-space-2, 0.5rem);
}

.listora-needs__title {
	margin: 0;
	font-size: var(--listora-card-title-size, 1.1rem);
	font-family: var(--listora-card-title-font, inherit);
	font-weight: var(--listora-weight-semibold, 600);
	line-height: 1.3;
}

.listora-needs__title a {
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
	text-decoration: none;
}

.listora-needs__title a:hover {
	color: var(--listora-primary, var(--listora-wp-admin-link));
}

.listora-needs__type {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.55rem;
	font-size: var(--listora-text-xs, 0.7rem);
	font-weight: var(--listora-weight-medium, 500);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	background: var(--listora-surface-2, var(--listora-admin-bg-paper));
	border-radius: var(--listora-radius-full, 9999px);
	white-space: nowrap;
}

/* Meta Info */

.listora-needs__meta {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-1, 0.25rem);
}

.listora-needs__meta-item {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--listora-card-meta-size, 0.85rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-needs__meta-item svg {
	flex-shrink: 0;
	color: var(--listora-fg-faint, var(--listora-fg-faint));
}

/* Footer */

.listora-needs__footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--listora-space-2, 0.5rem);
	margin-block-start: auto;
	padding-block-start: var(--listora-space-2, 0.5rem);
	border-top: 1px solid var(--listora-border, var(--listora-border-default));
	font-size: var(--listora-text-sm, 0.8rem);
}

/* Urgency Badge */

.listora-needs__urgency {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.55rem;
	font-size: var(--listora-text-xs, 0.7rem);
	font-weight: var(--listora-weight-semibold, 600);
	border-radius: var(--listora-radius-full, 9999px);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.listora-needs__urgency--urgent {
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	background: var(--listora-danger, var(--listora-danger));
}

.listora-needs__urgency--normal {
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	background: var(--listora-primary, var(--listora-wp-admin-link));
}

.listora-needs__urgency--flexible {
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	background: var(--listora-success, var(--listora-success));
}

/* Response count + author */

.listora-needs__responses {
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-needs__author {
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	margin-inline-start: auto;
}

/* --- Empty State --- */

.listora-needs__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--listora-space-12, 3rem) var(--listora-space-4, 1rem);
	color: var(--listora-fg-faint, var(--listora-fg-faint));
}

.listora-needs__empty svg {
	margin-block-end: var(--listora-space-4, 1rem);
	opacity: 0.4;
}

.listora-needs__empty h3 {
	margin: 0 0 0.5rem;
	font-size: var(--listora-text-lg, 1.15rem);
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
}

.listora-needs__empty p {
	margin: 0;
	font-size: var(--listora-card-meta-size);
}

/* --- Pagination --- */

.listora-needs__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--listora-space-1, 0.25rem);
	padding-block-start: var(--listora-space-4, 1rem);
}

.listora-needs__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	font-size: var(--listora-text-sm, 0.8rem);
	font-weight: var(--listora-weight-medium, 500);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	text-decoration: none;
	border-radius: var(--listora-radius-md, 10px);
	transition: background var(--listora-transition-base, 0.2s ease),
		color var(--listora-transition-base, 0.2s ease);
}

.listora-needs__pagination .page-numbers:hover {
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
}

.listora-needs__pagination .page-numbers.current {
	background: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	font-weight: var(--listora-weight-semibold, 600);
}

.listora-needs__pagination .page-numbers.dots {
	color: var(--listora-fg-faint, var(--listora-fg-faint));
}

/* --- Responsive --- */

@media (max-width: 1024px) {
	.listora-needs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.listora-needs__filters {
		flex-direction: column;
		align-items: stretch;
	}

	.listora-needs__pill {
		padding: 0.45rem 0.85rem;
	}
}

@media (max-width: 640px) {
	.listora-needs__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.listora-needs__footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.listora-needs__author {
		margin-inline-start: 0;
	}
}

/* THEME-INDEPENDENCE — needs filter pills (theme-skin guard). */
.listora-needs__pill.listora-needs__pill {
	background: transparent;
	color: var(--listora-fg-default, #1a1a1a);
	border: 1px solid var(--listora-border-subtle, rgba(0, 0, 0, 0.12));
	border-radius: 9999px;
	box-shadow: none;
}
.listora-needs__pill.listora-needs__pill--active,
.listora-needs__pill.listora-needs__pill:hover {
	background: var(--listora-primary);
	color: var(--listora-primary-fg, #fff);
	border-color: var(--listora-primary);
}