/**
 * Block: wp-career-board-pro/resume-archive
 *
 * Premium-feel pattern: light card borders, hover-lift via shadow ramp +
 * translateY, teal-toned trust badges (open-to-work, verified) using the
 * --wcb-teal-* token pair. 100% token-driven.
 */

/* ── Members-only access gate (directory / single resume) ──────────────── */
.wcb-resume-access-gate {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 420px;
	margin: 48px auto;
	padding: 32px 24px;
	text-align: center;
	background: var( --wcb-base, #ffffff );
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-lg, 12px );
}

/* ── Resume Archive block ────────────────────────────────────────────── */
.wcb-resume-archive {
	max-width: 1200px;
	margin: 0 auto;
	font-family: inherit;
}

/* ── Page heading ────────────────────────────────────────────────────── */
.wp-block-wcb-resume-archive .wcb-page-heading {
	margin: 0 0 var( --wcb-space-2xl );
}

/* ── Listings header ─────────────────────────────────────────────────── */
.wp-block-wcb-resume-archive .wcb-listings-header {
	display: flex;
	flex-direction: column;
	gap: var( --wcb-space-md );
	margin-block-start: var( --wcb-space-2xl );
	margin-block-end: var( --wcb-space-2xl );
}

.wp-block-wcb-resume-archive .wcb-search-sort-row {
	display: flex;
	align-items: center;
	gap: var( --wcb-space-md );
}

.wp-block-wcb-resume-archive .wcb-search-wrap {
	position: relative;
	flex: 1;
}

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

.wp-block-wcb-resume-archive .wcb-listings-search {
	width: 100%;
	padding: var( --wcb-space-md ) var( --wcb-space-lg ) var( --wcb-space-md ) var( --wcb-space-3xl );
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-md );
	font-size: var( --wcb-text-base );
	line-height: var( --wcb-leading-tight );
	color: var( --wcb-contrast, #0f172a );
	background: var( --wcb-base, #ffffff );
	font-family: inherit;
	transition: border-color var( --wcb-transition-fast ), box-shadow var( --wcb-transition-fast );
}

.wp-block-wcb-resume-archive .wcb-listings-search:hover {
	border-color: var( --wcb-text-tertiary );
}

.wp-block-wcb-resume-archive .wcb-listings-search:focus {
	border-color: var( --wcb-primary, #2563eb );
	box-shadow: var( --wcb-shadow-focus );
}

.wp-block-wcb-resume-archive .wcb-listings-search:focus-visible {
	outline: 2px solid var( --wcb-primary, #2563eb );
	outline-offset: 2px;
	border-color: var( --wcb-primary, #2563eb );
	box-shadow: var( --wcb-shadow-focus );
}

.wp-block-wcb-resume-archive .wcb-sort-select {
	padding: var( --wcb-space-md ) var( --wcb-space-lg );
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-md );
	font-size: var( --wcb-text-base );
	color: var( --wcb-contrast, #0f172a );
	background: var( --wcb-base, #ffffff );
	cursor: pointer;
	font-family: inherit;
	transition: border-color var( --wcb-transition-fast ), box-shadow var( --wcb-transition-fast );
}

.wp-block-wcb-resume-archive .wcb-sort-select:hover {
	border-color: var( --wcb-text-tertiary );
}

.wp-block-wcb-resume-archive .wcb-sort-select:focus-visible {
	outline: 2px solid var( --wcb-primary, #2563eb );
	outline-offset: 2px;
	border-color: var( --wcb-primary, #2563eb );
	box-shadow: var( --wcb-shadow-focus );
}

/* ── Chip bar ────────────────────────────────────────────────────────── */
.wp-block-wcb-resume-archive .wcb-chip-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wcb-space-xs );
}

.wp-block-wcb-resume-archive .wcb-chip {
	display: inline-flex;
	align-items: center;
	height: var( --wcb-space-3xl );
	padding-inline: var( --wcb-space-md );
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-full );
	font-size: var( --wcb-text-sm );
	font-weight: var( --wcb-font-medium );
	line-height: 1;
	color: var( --wcb-contrast, #0f172a );
	background: var( --wcb-base, #ffffff );
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	transition: border-color var( --wcb-transition-snappy ), color var( --wcb-transition-snappy ), background var( --wcb-transition-snappy );
}

.wp-block-wcb-resume-archive .wcb-chip:hover {
	border-color: var( --wcb-primary, #2563eb );
	color: var( --wcb-primary, #2563eb );
}

.wp-block-wcb-resume-archive .wcb-chip.wcb-chip-active {
	border-color: var( --wcb-primary, #2563eb );
	background: var( --wcb-primary, #2563eb );
	color: var(--wcb-on-primary, #ffffff);
}

.wp-block-wcb-resume-archive .wcb-chip.wcb-chip-active:hover {
	background: var( --wcb-primary, #2563eb );
	border-color: var( --wcb-primary, #2563eb );
	color: var(--wcb-on-primary, #ffffff);
	opacity: 0.9;
}

.wp-block-wcb-resume-archive .wcb-chip:focus-visible {
	outline: 2px solid var( --wcb-primary, #2563eb );
	outline-offset: 2px;
	box-shadow: var( --wcb-shadow-focus );
	border-color: var( --wcb-primary, #2563eb );
}

.wp-block-wcb-resume-archive .wcb-chip-divider {
	display: inline-block;
	width: 1px;
	height: var( --wcb-space-xl );
	background: var( --wcb-border, #e2e8f0 );
	margin-inline: var( --wcb-space-xs );
}

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

.wp-block-wcb-resume-archive .wcb-results-count {
	font-size: var( --wcb-text-sm );
	color: var( --wcb-text-secondary );
	margin: 0;
}

/* `.wcb-hidden` is the canonical Interactivity API hide utility,
 * defined globally in `wp-career-board/assets/css/frontend-components.css`.
 * No per-block override needed. */

/* ── Empty state ─────────────────────────────────────────────────────── */
.wcb-ra-empty {
	color: var( --wcb-text-secondary );
	font-size: var( --wcb-text-md );
	padding: var( --wcb-space-3xl ) 0;
	text-align: center;
}

/* Single-author mode (BuddyPress profile resume tab, embeds passing
 * authorId) renders no filter sidebar. The shared `.wcb-archive-layout`
 * shell in wcb-ui.css is a 2-col grid (sidebar | results); with no sidebar
 * the lone results column falls into the narrow sidebar track and the
 * whole archive collapses. Force a single full-width column in that mode. */
.wcb-resume-archive .wcb-archive-layout--single {
	grid-template-columns: minmax(0, 1fr);
}

/* ── Card grid ───────────────────────────────────────────────────────── */
.wcb-ra-grid {
	display: grid;
	/* Force 3 explicit columns at desktop so Find Candidates renders the same
	 * 3-up grid as Companies regardless of the parent chain padding deltas
	 * Astra applies to `.wcb-page-article` (the wrapper our `page-wcb-
	 * fullwidth.php` template puts the block in). Falls back to 2-col / 1-col
	 * at the narrower breakpoints handled by the @media block lower in this
	 * file. */
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wcb-space-xl );
	margin-bottom: var( --wcb-space-3xl );
}

/* ── List view ───────────────────────────────────────────────────────────
 * Parity with /jobs and /companies archives' list view. One row per card,
 * avatar | body | skills | footer. The view-switcher toggle in the toolbar
 * sets state.isList which adds `.wcb-list` to the grid container. */
.wcb-ra-grid.wcb-list {
	grid-template-columns: minmax(0, 1fr);
	gap: var( --wcb-space-md );
}

.wcb-ra-grid.wcb-list .wcb-ra-card {
	grid-template-columns: auto minmax(0, 1.4fr) auto auto;
	grid-template-areas: "avatar body skills footer";
	align-items: center;
	column-gap: var( --wcb-space-2xl );
	row-gap: 0;
	/* Brings list-card height to parity with Find Jobs (~180px) so a
	 * resume row doesn't read as half-rendered next to a job row.
	 * Block padding stops the name + title from crashing into the
	 * avatar and skills column. */
	min-height: 7.5rem; /* ≈ 120px */
	padding-block: var( --wcb-space-lg );
	padding-inline: var( --wcb-space-xl );
}

.wcb-ra-grid.wcb-list .wcb-ra-card-location {
	/* Inline-flex location chip back inside the body row in list view so the
	 * card stays single-line. */
	display: none;
}

.wcb-ra-grid.wcb-list .wcb-ra-card-skills {
	/* Cap visible skill chips in list view so they don't push the footer off
	 * the row on narrow desktop widths. CSS-only solution - excess chips wrap
	 * to a second invisible line that overflow-clips. */
	max-width: 320px;
	overflow: hidden;
	max-height: var( --wcb-space-3xl );
}

.wcb-ra-grid.wcb-list .wcb-ra-card-footer {
	flex-shrink: 0;
	flex-direction: column;
	align-items: flex-end;
	padding-top: 0;
	border-top: none;
	border-inline-start: 1px solid var( --wcb-surface, #f1f5f9 );
	padding-inline-start: var( --wcb-space-xl );
	padding-inline-end: var( --wcb-space-4xl );
	margin-top: 0;
	gap: var( --wcb-space-xs );
}

/* Top-right anchor matches Find Jobs's list-card bookmark placement so
 * the icon is in the same spot on every archive's card. (0,4,1) beats
 * the shared (0,3,1) rule in wcb-ui.css. */
[class*="wp-block-wcb-"] .wcb-ra-grid.wcb-list > .wcb-ra-card > .wcb-bookmark-btn {
	top: var( --wcb-space-md );
	transform: none;
}

@media (max-width: 900px) {
	.wcb-ra-grid.wcb-list .wcb-ra-card {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"avatar body"
			"skills skills"
			"footer footer";
		row-gap: var( --wcb-space-md );
	}

	.wcb-ra-grid.wcb-list .wcb-ra-card-footer {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-inline-start: 0;
		padding-inline: 0;
		padding-top: var( --wcb-space-md );
		border-top: 1px solid var( --wcb-surface, #f1f5f9 );
	}
}

/* ── Resume card — light hairline, hover-lift ──────────────────────────
 * Grid layout: avatar in col 1 + name/title in col 2 share the header row.
 * Location, skills, and footer each get their own full-width row below so
 * meta content starts at the left edge of the card instead of indenting
 * under col 2. Without explicit `grid-area` assignments for location +
 * skills, auto-placement pushed them BELOW the footer — visible bug on
 * `/find-candidates/` where View Resume sat between the name and the
 * meta rows. */
.wcb-ra-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"avatar body"
		"location location"
		"skills skills"
		"footer footer";
	column-gap: var( --wcb-space-lg );
	row-gap: var( --wcb-space-md );
	padding: var( --wcb-space-xl );
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-xl );
	background: var( --wcb-base, #ffffff );
	transition: box-shadow var( --wcb-transition-fast ), border-color var( --wcb-transition-fast );
	position: relative;
	min-width: 0;
}

.wcb-ra-card > .wcb-ra-card-avatar   { grid-area: avatar; }
.wcb-ra-card > .wcb-ra-card-body     { grid-area: body; }
.wcb-ra-card > .wcb-ra-card-location { grid-area: location; }
.wcb-ra-card > .wcb-ra-card-skills   { grid-area: skills; }
.wcb-ra-card > .wcb-ra-card-footer   { grid-area: footer; }

/* Hover treatment aligned with Companies' `.wcb-ca-card:hover` — shadow only,
 * no Y-shift. Dropped the earlier `transform: translateY(-1px)` + rest-state
 * `box-shadow` because they made Find Candidates cards visibly heavier than
 * Companies cards (audit finding). */
.wcb-ra-card:hover {
	border-color: var( --wcb-text-tertiary );
	box-shadow: var( --wcb-shadow-md );
}

/* Full-card click target via pseudo-element. */
.wcb-ra-card-name-link {
	color: inherit;
	text-decoration: none;
	position: relative;
	z-index: 1;
}

.wcb-ra-card-name-link:hover {
	text-decoration: underline;
}

.wcb-ra-card-name-link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var( --wcb-radius-xl );
}

.wcb-ra-card-avatar img {
	width: var( --wcb-avatar-lg );
	height: var( --wcb-avatar-lg );
	border-radius: var( --wcb-radius-full );
	object-fit: cover;
	display: block;
}

.wcb-ra-card-body {
	flex: 1;
	min-width: 0;
}

/* Name + jobtitle + meta chip styles aligned with `.wcb-ca-name` /
 * `.wcb-ca-tagline` / `.wcb-ca-chip` (Companies) so Find Candidates and
 * Companies render with identical card typography rather than each
 * archive carrying its own slightly-different scale. */
.wcb-ra-card-name {
	font-weight: var( --wcb-font-bold );
	font-size: var( --wcb-text-base );
	color: var( --wcb-contrast, #0f172a );
	margin: 0;
	line-height: 1.3;
}

.wcb-ra-card-jobtitle {
	font-size: var( --wcb-text-sm );
	color: var( --wcb-text-secondary );
	margin: 0;
	line-height: var( --wcb-leading-normal );
}

.wcb-ra-card-location,
.wcb-ra-skill-tag {
	display: inline-flex;
	align-items: center;
	padding: var( --wcb-space-xs ) var( --wcb-space-sm );
	background: var( --wcb-surface, var(--wcb-surface) );
	border-radius: var( --wcb-radius-full );
	font-size: var( --wcb-text-xs );
	color: var( --wcb-text-secondary );
	font-weight: var( --wcb-font-medium );
	white-space: nowrap;
	gap: var( --wcb-space-xs );
}

.wcb-ra-card-location {
	margin: 0;
}

.wcb-ra-card-skills {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wcb-space-xs );
}

/* ── Trust badges (open-to-work + verified) — teal token pair ────────── */
.wcb-ra-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wcb-space-xs );
	margin-bottom: var( --wcb-space-xs );
}

.wcb-ra-badge,
.wcb-ra-badge--otw,
.wcb-ra-badge--verified {
	display: inline-flex;
	align-items: center;
	gap: var( --wcb-space-xs );
	font-size: var( --wcb-text-xs );
	font-weight: var( --wcb-font-semibold );
	padding: var( --wcb-space-xs ) var( --wcb-space-sm );
	border-radius: var( --wcb-radius-full );
	background: var( --wcb-teal-bg );
	color: var( --wcb-teal-fg );
	line-height: 1;
}

.wcb-ra-card-footer {
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: 2;
}

/* ── Pagination ──────────────────────────────────────────────────────── */
.wcb-ra-pagination {
	margin-top: var( --wcb-space-3xl );
	display: flex;
	justify-content: center;
}

.wcb-ra-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wcb-space-xs );
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcb-ra-pagination .page-numbers li a,
.wcb-ra-pagination .page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var( --wcb-space-sm );
	border: 1px solid var( --wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-md );
	font-size: var( --wcb-text-base );
	color: var( --wcb-text-secondary );
	text-decoration: none;
	transition: background var( --wcb-transition-fast ), border-color var( --wcb-transition-fast );
}

.wcb-ra-pagination .page-numbers li a:hover {
	background: var( --wcb-bg-subtle );
	border-color: var( --wcb-text-tertiary );
}

.wcb-ra-pagination .page-numbers li span.current {
	background: var( --wcb-primary, #2563eb );
	border-color: var( --wcb-primary, #2563eb );
	color: var(--wcb-on-primary, #ffffff);
}

/* ── Shared button tokens ────────────────────────────────────────────── */
.wcb-cbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var( --wcb-space-sm ) var( --wcb-space-xl );
	border-radius: var( --wcb-radius-md );
	font-size: var( --wcb-text-base );
	font-weight: var( --wcb-font-semibold );
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	font-family: inherit;
	box-sizing: border-box;
	transition: background var( --wcb-transition-fast ), color var( --wcb-transition-fast ), border-color var( --wcb-transition-fast ), box-shadow var( --wcb-transition-fast ), transform var( --wcb-transition-fast );
}

.wcb-cbtn--sm {
	padding: var( --wcb-space-xs ) var( --wcb-space-md );
	font-size: var( --wcb-text-sm );
}

.wcb-cbtn--ghost {
	background: transparent;
	border-color: var( --wcb-border, #e2e8f0 );
	color: var( --wcb-text-secondary );
}

.wcb-cbtn--ghost:hover {
	background: var( --wcb-bg-subtle );
	border-color: var( --wcb-primary, #2563eb );
	color: var( --wcb-primary, #2563eb );
}

/* ── Responsive ladder ──────────────────────────────────────────────────
 * 3-col default at desktop, 2-col at tablet, 1-col at mobile. Matches the
 * same ladder used by `blocks/job-listings/style.css` (Free) and
 * `blocks/company-archive/style.css` (Free), so the three archives reflow
 * in lockstep. The filter panel stacks above results at <900px via
 * `.wcb-archive-layout` in wcb-ui.css. */
@media ( max-width: 1023px ) {
	.wp-block-wcb-resume-archive .wcb-ra-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media ( max-width: 900px ) {
	.wp-block-wcb-resume-archive .wcb-ra-grid {
		gap: var( --wcb-space-lg );
	}
}

@media ( max-width: 640px ) {
	.wp-block-wcb-resume-archive .wcb-listings-header {
		margin-block-start: var( --wcb-space-lg );
	}

	/* Keep `.wcb-search-sort-row` in row-direction with `flex-wrap: wrap`
	 * (inherited from the canonical rule) so the search wrap and sort
	 * select wrap onto separate rows naturally instead of stretching
	 * vertically. The earlier `flex-direction: column` override forced
	 * the wrap to honour its `flex-basis: 240px` on the main axis (now
	 * vertical), giving it a 240px height - and the absolutely-positioned
	 * `top: 50%` magnifier icon floated alone halfway down that empty
	 * column. Find Jobs already uses the canonical row-flow on mobile;
	 * Find Candidates now matches. */

	.wp-block-wcb-resume-archive .wcb-chip-bar {
		flex-wrap: wrap;
	}

	.wp-block-wcb-resume-archive .wcb-ra-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}