/* ── Directory wrapper ───────────────────────────────────────────────────── */
.wcb-company-archive {
	max-width: 1200px;
	margin: 0 auto;
	font-family: inherit;
}

.wp-block-wp-career-board-company-archive .wcb-page-heading {
	margin: 0 0 var(--wcb-space-2xl);
}

/* ── Search row ──────────────────────────────────────────────────────────
 * Full-width search input above the toolbar - matches the position of the
 * `.wcb-search-sort-row` in job-listings and the search input in
 * resume-archive so all three archives share the same vertical rhythm. */
.wcb-ca-search-row {
	margin-bottom: var(--wcb-space-2xl);
}

.wcb-ca-search-row .wcb-search-wrap {
	max-width: 720px;
}

/* ── Toolbar ───────────────────────────────────────────────────────────
 * Legacy `.wcb-ca-toolbar` markup is no longer emitted by render.php —
 * the canonical `.wcb-listings-toolbar` rules in assets/css/frontend-
 * components.css now style the Companies toolbar identically to Find
 * Jobs and Find Candidates. Kept here for any legacy CPT archive
 * templates that still emit the old class until those are migrated. */
.wcb-ca-toolbar {
	display: flex;
	align-items: center;
	gap: var(--wcb-space-md);
	margin-bottom: var(--wcb-space-xl);
	flex-wrap: wrap;
	font-family: inherit;
}

.wcb-ca-results {
	font-size: var(--wcb-text-base);
	color: var(--wcb-text-secondary);
	margin: 0;
	font-weight: var(--wcb-font-medium);
	flex: 0 0 auto;
}

/* -- Filter bar (chip rows stacked vertically) --
 * 1.2.0 — selects replaced with `.wcb-chip-bar` rows defined globally in
 * `assets/css/wcb-ui.css`. The filter bar is the column that hosts both
 * chip rows (Industry + Size) and absorbs the remaining horizontal space
 * so the layout toggle on the right keeps its edge alignment. */
.wcb-ca-filter-bar {
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-sm);
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Pushes the layout toggle (.wcb-layout-toggle / .wcb-view-switcher) to the
 * right edge of the toolbar without leaving an awkward gap between the
 * results count and the chip filters on the left. Achieved by giving the
 * filter bar `flex: 1 1 auto` so it absorbs the remaining horizontal space.
 */
.wcb-ca-toolbar > .wcb-layout-toggle,
.wcb-ca-toolbar > .wcb-view-switcher {
	margin-inline-start: auto;
}

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

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

/* (0,3,1) prefix beats Reign's `button svg` hide rules - no
 * `!important` needed. */
[class*="wp-block-wp-career-board"] .wcb-layout-btn svg,
[class*="wp-block-wp-career-board"] .wcb-view-btn svg {
	display: block;
	visibility: visible;
	width: var(--wcb-space-lg);
	height: var(--wcb-space-lg);
	flex-shrink: 0;
}

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

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

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

.wcb-ca-container.wcb-grid {
	display: grid;
	/* Force 3 explicit columns at desktop so Companies renders the same 3-up
	 * grid as Find Candidates 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). An auto-fill
	 * template here collapsed to 2-col because the sidebar filter panel
	 * eats ~240px of the row, leaving < 3 × 280px. Mirrors the same fix
	 * used in `blocks/resume-archive/style.css`. Falls back to 2-col / 1-col
	 * at the narrower breakpoints handled by the @media block below. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wcb-space-xl);
}

/* -- Company card -- */
.wcb-ca-card {
	background: var(--wcb-base);
	border: 1px solid var(--wcb-border);
	border-radius: var(--wcb-radius-xl);
	overflow: hidden;
	transition: border-color var(--wcb-transition-fast), box-shadow var(--wcb-transition-fast);
}

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

/* Grid layout: avatar inline with name + tagline (col 1 | col 2 row 1).
 * Chips + footer flow as siblings BELOW the header row and span the
 * full card width so they start from the left edge of the card instead
 * of indenting under col 2. Saves vertical space and avoids the
 * "wasted gutter" the audit flagged ("rest must start from left side
 * why leave space"). */
.wcb-ca-card-link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"avatar body"
		"chips chips"
		"footer footer";
	column-gap: var(--wcb-space-lg);
	row-gap: var(--wcb-space-md);
	height: 100%;
	text-decoration: none;
	color: inherit;
	padding: var(--wcb-space-xl);
	position: relative;
}

.wcb-ca-card-link > .wcb-ca-card-top    { grid-area: avatar; }
.wcb-ca-card-link > .wcb-ca-card-body   { grid-area: body; }
.wcb-ca-card-link > .wcb-ca-card-chips  { grid-area: chips; align-self: start; display: flex; flex-wrap: wrap; gap: var(--wcb-space-xs); }
.wcb-ca-card-link > .wcb-ca-card-footer { grid-area: footer; }

.wcb-ca-card-link:hover {
	text-decoration: none;
	color: inherit;
}

/* List view: avatar | body (with tagline + chips stacked) | footer.
 * Body column packs the title + tagline + chip row together so the
 * tagline gets full horizontal room and renders in full. min-height
 * brings parity with Find Jobs' card height. */
.wcb-ca-container.wcb-list .wcb-ca-card-link {
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"avatar body footer"
		"avatar chips footer";
	align-items: center;
	column-gap: var(--wcb-space-2xl);
	row-gap: var(--wcb-space-xs);
	min-height: 7.5rem; /* ≈ 120px */
	padding-block: var(--wcb-space-lg);
	padding-inline: var(--wcb-space-xl);
	height: auto;
}

.wcb-ca-container.wcb-list .wcb-ca-card-body {
	flex: 1;
	min-width: 0;
	gap: var(--wcb-space-xs);
	display: flex;
	flex-direction: column;
	align-self: end;
}

/* Chip row sits directly under the body in the second grid row, scoped
 * to the body column so it doesn't drift back under the avatar. */
.wcb-ca-container.wcb-list .wcb-ca-card-chips {
	grid-area: chips;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcb-space-xs);
	align-self: start;
}

/* Avatar spans both rows so it stays vertically centered against the
 * combined title + chip stack. */
.wcb-ca-container.wcb-list .wcb-ca-card-top {
	align-self: center;
}

/* List view: tagline + chips stack INSIDE the body column so the body
 * has full horizontal space and the tagline can render in full instead
 * of truncating against the chips column. Keeps all card data visible.
 * The original 4-column grid (avatar | body | chips | footer) is
 * collapsed to 3 columns (avatar | body+chips | footer) below. */
.wcb-ca-container.wcb-list .wcb-ca-tagline {
	-webkit-line-clamp: 2;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.wcb-ca-container.wcb-list .wcb-ca-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, var(--wp--preset--color--wcb-surface));
	padding-inline-start: var(--wcb-space-xl);
	/* Right-padding clears the absolute-positioned bookmark button (32px
	 * wide at 12px from card edge) so the "N open positions" text and
	 * View Profile button can't slide underneath the bookmark icon. */
	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. Earlier the
 * Companies list bookmark was vertically centered, but visual parity
 * with the Jobs list (and the bookmark icon a customer expects to find
 * "in the corner") wins. (0,4,1) beats the shared (0,3,1) wcb-ui rule. */
[class*="wp-block-wp-career-board"] .wcb-ca-container.wcb-list > .wcb-ca-card > .wcb-bookmark-btn {
	top: var(--wcb-space-md);
	transform: none;
}

/* -- Card top: avatar + trust badge -- */
.wcb-ca-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wcb-space-sm);
	flex-shrink: 0;
	position: relative;
}

/*
 * List view: collapse the top row into a narrow vertical column so the
 * avatar and badge stack neatly next to the body content. Without this
 * override .wcb-ca-card-top inherits `justify-content: space-between` from
 * the grid layout, stretches across the row, and the absolutely positioned
 * trust badge anchors against the wrong edge, colliding with the footer
 * CTA on the right side of the card.
 */
.wcb-ca-container.wcb-list .wcb-ca-card-top {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	align-self: stretch;
	gap: var(--wcb-space-xs);
}

.wcb-ca-avatar-wrap {
	position: relative;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}

/* Logo and avatar are hidden by default; shown via .wcb-shown added by IA */
.wcb-ca-logo,
.wcb-ca-avatar {
	width: 56px;
	height: 56px;
	border-radius: var(--wcb-radius-lg);
	position: absolute;
	inset: 0;
	display: none;
}

.wcb-ca-logo.wcb-shown {
	display: block;
	object-fit: cover;
	background: var(--wcb-base);
	border: 2px solid var(--wcb-base);
	box-shadow: var(--wcb-shadow-sm);
}

.wcb-ca-avatar {
	background: var(--wcb-avatar-bg, #1e293b);
	color: var(--wcb-on-primary, #ffffff);
	align-items: center;
	justify-content: center;
	font-size: var(--wcb-text-lg);
	font-weight: var(--wcb-font-bold);
	letter-spacing: 0.02em;
	border: 2px solid transparent;
	box-shadow: var(--wcb-shadow-sm);
}

.wcb-ca-avatar.wcb-shown {
	display: flex;
}

/* Trust mark moved to `.wcb-ca-trust-tick` in `assets/css/wcb-ui.css` -
 * small green checkmark inline AFTER the company name. The old
 * `.wcb-ca-trust-badge` pill (`"✓ Verified"` text) was retired because
 * it broke layout in list view and the word duplicated the icon. */

/* -- Card body -- */
.wcb-ca-card-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wcb-space-xs);
	/* Reserve room for the company name plus a two-line tagline so cards
	 * without a tagline still occupy the same body height as cards that
	 * do. Keeps the chip row anchored at the same y-position across every
	 * card in a row instead of jumping up when the tagline is missing. */
	min-height: 4.25rem;
}

.wcb-ca-name {
	font-size: var(--wcb-text-base);
	font-weight: var(--wcb-font-bold);
	color: var(--wcb-contrast);
	margin: 0;
	line-height: 1.3;
}

/* Tagline: hidden by default; shown when non-empty */
.wcb-ca-tagline {
	display: none;
	font-size: var(--wcb-text-sm);
	color: var(--wcb-text-secondary);
	margin: 0;
	line-height: var(--wcb-leading-normal);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wcb-ca-tagline.wcb-shown {
	display: -webkit-box;
}

/* -- Chips -- */
.wcb-ca-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcb-space-xs);
	margin-top: var(--wcb-space-xs); /* 0.2rem ≈ 3px → xs */
}

/* Chips: hidden by default; shown when non-empty */
.wcb-ca-chip {
	display: none;
	align-items: center;
	padding: var(--wcb-space-xs) var(--wcb-space-sm); /* 0.15rem ≈ 2px → xs */
	background: var(--wcb-surface, var(--wp--preset--color--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;
}

.wcb-ca-chip.wcb-shown {
	display: inline-flex;
}

/* -- Card footer -- */
.wcb-ca-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wcb-space-sm);
	padding-top: var(--wcb-space-md);
	border-top: 1px solid var(--wcb-surface, var(--wp--preset--color--wcb-surface));
	margin-top: auto;
}

.wcb-ca-jobs-count {
	font-size: var(--wcb-text-sm);
	color: var(--wcb-text-secondary);
	font-weight: var(--wcb-font-medium);
}

/* Company card CTA reuses the shared `.wcb-cbtn .wcb-cbtn--ghost
 * .wcb-cbtn--sm` token-driven outlined pill from `assets/css/wcb-ui.css`.
 * No per-block override here. */

/* -- Empty state -- */
.wcb-ca-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wcb-space-sm);
	padding: var(--wcb-space-4xl) var(--wcb-space-lg);
	color: var(--wcb-text-secondary);
	text-align: center;
}

/* `.wcb-load-more-*` and `.wcb-loading-label` live globally in
 * `assets/css/frontend-components.css`. */

/* -- Utilities -- */

/* -- Responsive ladder --
 * Desktop (≥1024px viewport / ≥720px content): 3-col forced.
 * Tablet  (768-1023): 2-col so cards stay legible.
 * Mobile  (<768):     1-col, filter panel stacks above (handled in
 *                     wcb-ui.css via the .wcb-archive-layout @900px rule).
 */
@media (max-width: 1023px) {
	.wcb-ca-container.wcb-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.wcb-ca-filter-bar {
		flex: 1 1 100%;
		order: 3;
	}
}

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

	/* Collapse the 3-col list-view grid into the same 2-col header
	 * + full-width chips/footer rows that the grid view uses, so the
	 * "3 open positions" stat and "View Profile" CTA stop colliding
	 * with the body text at 390px. `flex-wrap` does nothing on a grid
	 * container - replacing the template is what actually rewraps. */
	.wcb-ca-container.wcb-list .wcb-ca-card-link {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"avatar body"
			"chips chips"
			"footer footer";
		align-items: start;
		column-gap: var(--wcb-space-md);
		row-gap: var(--wcb-space-sm);
		padding-block: var(--wcb-space-lg);
		padding-inline: var(--wcb-space-lg);
	}

	.wcb-ca-container.wcb-list .wcb-ca-card-body {
		align-self: start;
	}

	.wcb-ca-container.wcb-list .wcb-ca-card-footer {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-inline-start: none;
		border-top: 1px solid var(--wcb-surface, var(--wp--preset--color--wcb-surface));
		padding-inline-start: 0;
		padding-inline-end: 0;
		padding-top: var(--wcb-space-md);
		width: 100%;
	}

	/* Mobile list view: stack avatar + badge in a tight column inside the
	 * avatar grid cell instead of stretching horizontally. */
	.wcb-ca-container.wcb-list .wcb-ca-card-top {
		flex-direction: column;
		align-self: start;
		align-items: center;
	}

}

@media (prefers-reduced-motion: reduce) {
	.wcb-ca-card,
	.wcb-load-more-btn {
		transition: none;
	}
}