/* Ensure data-wp-bind--hidden works even when elements have display:flex set below. */
.wp-block-wp-career-board-job-listings [hidden] {
	display: none !important;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.wcb-listings-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--wcb-space-xl);
	gap: var(--wcb-space-lg);
	flex-wrap: wrap;
}

.wcb-results-count {
	font-size: var(--wcb-text-sm);
	color: var( --wcb-muted, var(--wp--preset--color--wcb-muted) );
	margin: 0;
}

/* ── Layout toggle ───────────────────────────────────────────────────────── */
.wcb-layout-toggle {
	display: flex;
	gap: 2px;
	background: var( --wcb-surface, var(--wp--preset--color--wcb-surface) );
	border-radius: var(--wcb-radius-sm);
	padding: 2px;
}

.wcb-layout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wcb-space-3xl);
	height: 30px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: var(--wcb-space-xs);
	color: var(--wcb-text-secondary);
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

.wcb-layout-btn svg {
	display: block !important;
	visibility: visible !important;
	width: var(--wcb-space-lg);
	height: var(--wcb-space-lg);
	flex-shrink: 0;
}

.wcb-layout-btn:hover {
	background: var(--wcb-border);
	color: var(--wcb-contrast);
}

.wcb-layout-btn.wcb-active {
	background: var( --wcb-base, var(--wp--preset--color--wcb-base) );
	color: var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
	box-shadow: var(--wcb-shadow-sm);
}

/* ── Jobs container ──────────────────────────────────────────────────────── */
.wcb-jobs-container {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-md);
}

.wcb-jobs-container.wcb-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min(100%, 300px), 1fr ) );
	gap: var(--wcb-space-lg);
}

/* ── Job Card ────────────────────────────────────────────────────────────── */
.wcb-job-card {
	display: flex;
	align-items: flex-start;
	gap: var(--wcb-space-lg);
	background: var( --wcb-base, var(--wp--preset--color--wcb-base) );
	border: 1px solid var( --wcb-border, var(--wp--preset--color--wcb-border) );
	border-radius: var(--wcb-radius-xl);
	padding: var(--wcb-space-xl) var(--wcb-space-2xl);
	transition: border-color 0.15s, box-shadow 0.15s;
	position: relative;
}

.wcb-job-card:hover {
	border-color: var(--wcb-border);
	box-shadow: var(--wcb-shadow-md);
}

.wcb-job-card.wcb-featured {
	border-color: var( --wcb-featured, #fbbf24 );
	border-inline-start: 3px solid var( --wcb-featured, var(--wp--preset--color--wcb-featured) );
}

/* Full-card click target via pseudo-element — keeps the DOM link visible to AT */
.wcb-card-title-link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--wcb-radius-xl);
}

/* Grid: stack vertically */
.wcb-jobs-container.wcb-grid .wcb-job-card {
	flex-direction: column;
}

/* ── Card avatar ─────────────────────────────────────────────────────────── */
.wcb-card-avatar {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--wcb-radius-lg);
	background: var( --wcb-avatar-bg, var(--wp--preset--color--wcb-avatar-bg) );
	color: var(--wp--preset--color--wcb-base);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-bold);
	letter-spacing: 0.02em;
}

/* ── Card body ───────────────────────────────────────────────────────────── */
.wcb-card-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-sm);
}

.wcb-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wcb-space-md);
}

.wcb-card-title-wrap {
	flex: 1;
	min-width: 0;
}

.wcb-card-title {
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-bold);
	line-height: 1.3;
	margin: 0 0 0.2rem;
	color: var( --wcb-contrast, var(--wp--preset--color--wcb-contrast) );
}

.wcb-card-title a {
	color: inherit;
	text-decoration: none;
	position: relative;
	z-index: 2;
}

.wcb-card-title a:hover {
	color: var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
	text-decoration: underline;
}

.wcb-card-company {
	font-size: var(--wcb-text-base);
	color: var(--wcb-text-secondary);
	font-weight: var(--wcb-font-medium);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: wrap;
}

/* ── Verified badge ──────────────────────────────────────────────────────── */
.wcb-verified-sm {
	display: none;
	font-size: var(--wcb-text-xs);
	color: var(--wcb-success);
	font-weight: var(--wcb-font-semibold);
	background: var(--wcb-success-bg);
	padding: 0.05rem 0.4rem;
	border-radius: var(--wcb-space-xs);
}

.wcb-verified-sm.wcb-shown {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.wcb-verified-sm[data-trust="trusted"] {
	background: var(--wcb-info-bg);
	color: var(--wcb-info);
}

.wcb-verified-sm[data-trust="premium"] {
	background: var(--wcb-warning-bg);
	color: var(--wcb-warning);
}

/* ── Bookmark button ─────────────────────────────────────────────────────── */

/*
 * Scoped to block root + !important on reset properties: Reign's nested button
 * rules (e.g. `.entry-content .wc-block-components-button`) have specificity
 * higher than (0,2,0), so !important is required to win without coupling to
 * theme internals.
 */
.wp-block-wp-career-board-job-listings .wcb-bookmark-btn {
	flex-shrink: 0;
	width: var(--wcb-space-3xl);
	height: var(--wcb-space-3xl);
	display: flex;
	align-items: center;
	justify-content: center;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #cbd5e1;
	cursor: pointer;
	border-radius: var(--wcb-radius-sm);
	transition: color 0.12s, background 0.12s;
	padding: 0 !important;
	position: relative;
	z-index: 2;
}

.wp-block-wp-career-board-job-listings .wcb-bookmark-btn:hover {
	color: var(--wp--preset--color--wcb-featured);
	background: var(--wcb-warning-bg) !important;
}

.wp-block-wp-career-board-job-listings .wcb-bookmark-btn.wcb-bookmarked {
	color: var(--wp--preset--color--wcb-featured);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.wcb-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}

/* Hidden by default; shown when data-wp-class adds .wcb-shown */
.wcb-cbadge {
	display: none;
	align-items: center;
	gap: 0.2rem;
	padding: 0.15rem 0.55rem;
	border-radius: var(--wcb-radius-full);
	font-size: var(--wcb-text-xs);
	font-weight: var(--wcb-font-medium);
	line-height: 1.4;
	white-space: nowrap;
}

.wcb-cbadge.wcb-shown {
	display: inline-flex;
}

.wcb-cbadge--featured { background: var(--wcb-warning-bg); color: var(--wcb-warning); }
.wcb-cbadge--board    { background: #eff6ff; color: #2563eb; }
.wcb-cbadge--remote   { background: var(--wcb-success-bg); color: var(--wcb-success); }
.wcb-cbadge--type     { background: var(--wcb-surface); color: var(--wcb-text-secondary); }
.wcb-cbadge--exp      { background: var(--wcb-surface); color: var(--wcb-text-secondary); }
.wcb-cbadge--location { background: var(--wcb-surface); color: var(--wcb-text-secondary); }

/* ── Card footer ─────────────────────────────────────────────────────────── */
.wcb-card-footer {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-md);
	flex-wrap: wrap;
	margin-top: 0.15rem;
}

/* Hidden by default; shown when .wcb-shown is added */
.wcb-card-salary {
	display: none;
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-bold);
	color: var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
}

.wcb-card-salary.wcb-shown {
	display: inline-flex;
	align-items: center;
}

.wcb-card-date {
	font-size: var(--wcb-text-sm);
	color: var(--wcb-text-tertiary);
	margin-inline-start: auto;
}

.wcb-cbtn {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem var(--wcb-space-lg);
	border-radius: var(--wcb-radius-sm);
	font-size: var(--wcb-text-sm);
	font-weight: var(--wcb-font-semibold);
	text-decoration: none;
	transition: background 0.12s, color 0.12s;
	white-space: nowrap;
}

.wcb-cbtn--apply {
	background: var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
	color: var(--wp--preset--color--wcb-base);
	position: relative;
	z-index: 2;
}

.wcb-cbtn--apply:hover {
	background: var( --wcb-primary-dark, var(--wp--preset--color--wcb-primary-dark) );
	color: var(--wp--preset--color--wcb-base);
	text-decoration: none;
}

/* ── Grid footer overrides ───────────────────────────────────────────────── */
.wcb-jobs-container.wcb-grid .wcb-card-date {
	margin-inline-start: 0;
}

.wcb-jobs-container.wcb-grid .wcb-card-footer {
	justify-content: space-between;
}

/* ── Load more ───────────────────────────────────────────────────────────── */
.wcb-load-more-wrap {
	display: none;
	justify-content: center;
	margin-top: var(--wcb-space-2xl);
}

.wcb-load-more-wrap.wcb-shown {
	display: flex;
}

.wcb-load-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem var(--wcb-space-3xl);
	border: 1.5px solid var( --wcb-border, var(--wp--preset--color--wcb-border) );
	border-radius: var(--wcb-radius-md);
	background: var( --wcb-base, var(--wp--preset--color--wcb-base) );
	font-size: var(--wcb-text-md);
	font-weight: var(--wcb-font-semibold);
	font-family: inherit;
	color: var(--wcb-text-secondary);
	cursor: pointer;
	transition: border-color 0.12s, color 0.12s;
}

.wcb-load-more-btn:hover:not( :disabled ),
.wcb-load-more-btn:focus:not( :disabled ) {
	background: var( --wcb-base, var(--wp--preset--color--wcb-base) );
	border: 1.5px solid var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
	color: var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
}

.wcb-load-more-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.wcb-loading-label {
	display: none;
}

.wcb-loading-label.wcb-shown {
	display: inline;
}

/* ── Utilities ───────────────────────────────────────────────────────────── */
.wcb-hidden { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 640px ) {
	.wcb-job-card {
		padding: var(--wcb-space-lg);
		gap: var(--wcb-space-md);
	}

	.wcb-card-avatar {
		width: 44px;
		height: 44px;
		font-size: var(--wcb-text-base);
		border-radius: var(--wcb-radius-md);
	}

	.wcb-card-title {
		font-size: var(--wcb-text-md);
	}

	.wcb-jobs-container.wcb-grid {
		grid-template-columns: 1fr;
	}

	.wcb-card-date {
		display: none;
	}
}

/* ── Listings header ─────────────────────────────────────────────────── */

.wcb-listings-header {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-md);
	margin-block-end: var(--wcb-space-2xl);
}

/* Search + sort row */
.wcb-search-sort-row {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-md);
}

.wcb-search-wrap {
	position: relative;
	flex: 1;
}

.wcb-search-icon {
	position: absolute;
	inset-inline-start: var(--wcb-space-md);
	top: 50%;
	transform: translateY( -50% );
	z-index: 1;
	color: var(--wp--preset--color--wcb-muted);
	pointer-events: none;
	display: flex;
	align-items: center;
}

.wp-block-wcb-job-listings .wcb-listings-search {
	width: 100%;
	padding: var(--wcb-space-sm) var(--wcb-space-md) var(--wcb-space-sm) var(--wcb-space-2xl);
	padding-inline-start: var(--wcb-space-2xl);
	border: 1px solid var( --wcb-border, var(--wp--preset--color--wcb-border) );
	border-radius: var(--wcb-radius-sm);
	font-size: var(--wcb-text-base);
	line-height: 1.5;
	color: var( --wcb-contrast, var(--wp--preset--color--wcb-contrast) );
	background: var( --wcb-base, var(--wp--preset--color--wcb-base) );
	font-family: inherit;
}

.wcb-listings-search:focus {
	outline: 2px solid var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
	outline-offset: 2px;
	border-color: transparent;
}

.wcb-sort-select {
	padding: var(--wcb-space-sm) var(--wcb-space-md);
	border: 1px solid var( --wcb-border, var(--wp--preset--color--wcb-border) );
	border-radius: var(--wcb-radius-sm);
	font-size: var(--wcb-text-base);
	color: var( --wcb-contrast, var(--wp--preset--color--wcb-contrast) );
	background: var( --wcb-base, var(--wp--preset--color--wcb-base) );
	cursor: pointer;
	font-family: inherit;
}

.wcb-sort-select:focus-visible {
	outline: 2px solid var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
	outline-offset: 2px;
	border-color: transparent;
}

/* Chip bar */
.wcb-chip-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
}

.wcb-chip {
	display: inline-flex;
	align-items: center;
	height: var(--wcb-space-3xl);
	padding-inline: 0.875rem;
	border: 1px solid var( --wcb-border, var(--wp--preset--color--wcb-border) );
	border-radius: var(--wcb-radius-full);
	font-size: var(--wcb-text-sm);
	font-weight: var(--wcb-font-medium);
	color: var( --wcb-contrast, var(--wp--preset--color--wcb-contrast) );
	background: var( --wcb-base, var(--wp--preset--color--wcb-base) );
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
	white-space: nowrap;
}

.wcb-chip:hover {
	border-color: var(--wcb-primary);
	background: var(--wcb-info-bg);
	color: var(--wcb-primary);
}

.wcb-chip.wcb-chip-active:hover {
	background: var(--wcb-primary-dark);
	border-color: var(--wcb-primary-dark);
	color: var(--wcb-base);
}

.wcb-chip.wcb-chip-active {
	border-color: var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
	background: var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
	color: var(--wcb-base);
}

.wcb-chip:focus-visible {
	outline: 2px solid var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
	outline-offset: 2px;
}

.wcb-chip-divider {
	display: inline-block;
	width: 1px;
	height: var(--wcb-space-xl);
	background: var(--wcb-border);
	margin-inline: 0.25rem;
}

/* Active filter pills */
.wcb-active-filters {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
}

.wcb-active-filters.wcb-shown {
	display: flex;
}

.wcb-active-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	height: 1.625rem;
	padding-inline: 0.625rem;
	background: var(--wcb-info-bg);
	border: 1px solid #bfdbfe;
	border-radius: var(--wcb-radius-full);
	font-size: var(--wcb-text-xs);
	color: var(--wcb-info);
}

.wcb-active-chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wcb-space-lg);
	height: var(--wcb-space-lg);
	padding: 0;
	border: none;
	border-radius: var(--wcb-radius-full);
	background: transparent;
	color: var(--wcb-primary);
	font-size: var(--wcb-text-base);
	line-height: 1;
	cursor: pointer;
}

.wcb-active-chip-remove:hover {
	background: #bfdbfe;
}

.wcb-active-chip-remove:focus-visible {
	outline: 2px solid var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
	outline-offset: 2px;
	background: #bfdbfe;
}

.wcb-clear-all {
	font-size: var(--wcb-text-xs);
	color: var(--wp--preset--color--wcb-muted);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
}

.wcb-clear-all:hover {
	color: var(--wcb-contrast);
	background: none;
	border: none;
}

.wcb-clear-all:focus-visible {
	outline: 2px solid var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
	outline-offset: 2px;
}

/* ── Job card excerpt ─────────────────────────────────────────────────── */

.wcb-card-excerpt {
	display: none;
	margin: 0;
	font-size: var(--wcb-text-base);
	line-height: var(--wcb-leading-relaxed);
	color: var( --wcb-muted, var(--wp--preset--color--wcb-muted) );
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wcb-card-excerpt.wcb-shown {
	display: -webkit-box;
}

.wcb-toolbar-start {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-md);
}

/* ── Alert me button ───────────────────────────────────────────────────── */
.wcb-alert-me-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	font-size: var(--wcb-text-sm);
	font-weight: var(--wcb-font-medium);
	color: var(--wp--preset--color--wcb-muted);
	background: var(--wcb-base);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-sm);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background-color 0.15s;
	white-space: nowrap;
}

.wcb-alert-me-btn:hover {
	border-color: var(--wcb-primary);
	color: var(--wcb-primary);
	background: var(--wcb-info-bg);
}

.wcb-alert-me-btn.wcb-alert-saved {
	border-color: var(--wcb-success);
	color: var(--wcb-success);
	background: #f0fdf4;
	cursor: default;
}

.wcb-alert-me-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ── Screen reader only ───────────────────────────────────────────────────── */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

/* ── Notice + error ───────────────────────────────────────────────────────── */
.wcb-notice-error {
	color: var(--wcb-danger);
	background: var(--wcb-danger-bg);
	border: 1px solid #fecaca;
	border-radius: var(--wcb-radius-md);
	padding: var(--wcb-space-md) var(--wcb-space-lg);
	font-size: var(--wcb-text-base);
	margin: 0;
}

/* ── Notice + Success ──────────────────────────────────────────────────────────────── */
.wcb-notice-success {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: var(--wcb-radius-md);
	padding: var(--wcb-space-md) var(--wcb-space-lg);
	font-size: var(--wcb-text-base);
	margin: 0;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.wcb-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wcb-space-md);
	padding: var(--wcb-space-4xl) var(--wcb-space-lg);
	text-align: center;
	color: var(--wcb-text-tertiary);
}

.wcb-empty-state [data-lucide] {
	width: var(--wcb-icon-2xl);
	height: var(--wcb-icon-2xl);
}

.wcb-empty-state-text {
	margin: 0;
	font-size: var(--wcb-text-base);
	color: var(--wcb-text-secondary);
}

/* ── View switcher ───────────────────────────────────────────────────────── */
.wcb-view-switcher {
	display: flex;
	gap: 2px;
	background: var(--wcb-surface);
	border-radius: var(--wcb-radius-sm);
	padding: 2px;
	flex-shrink: 0;
}

.wcb-view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wcb-space-3xl);
	height: 30px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: var(--wcb-space-xs);
	color: var(--wcb-text-secondary);
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

.wcb-view-btn [data-lucide] {
	width: var(--wcb-space-lg);
	height: var(--wcb-space-lg);
}

.wcb-view-btn:hover {
	background: var(--wcb-border);
	color: var(--wcb-contrast);
}

.wcb-view-btn.wcb-view-btn--active {
	background: var(--wcb-base);
	color: var(--wcb-primary);
	box-shadow: var(--wcb-shadow-sm);
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.wcb-job-card,
	.wcb-layout-btn,
	.wcb-view-btn,
	.wcb-bookmark-btn,
	.wcb-cbtn,
	.wcb-load-more-btn,
	.wcb-chip,
	.wcb-alert-me-btn,
	.wcb-active-chip-remove {
		transition: none;
	}
}