/**
 * 3MW Careers - Frontend Styles
 *
 * Styles for career listings, cards, and single pages.
 * Uses design system variables - NO hardcoded values.
 *
 * @package TMW\Careers
 * @since 1.0.0
 */

/*
|--------------------------------------------------------------------------
| Career Card Styles
|--------------------------------------------------------------------------
*/

.career-card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.career-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.career-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.career-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-normal);
}

.career-card:hover .career-card__media img {
	transform: scale(1.05);
}

.career-card__content {
	padding: var(--space-md);
}

.career-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

.career-card__title {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	margin: 0 0 var(--space-sm);
}

.career-card__title a {
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.career-card__title a:hover {
	color: var(--color-primary);
}

.career-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
	font-size: var(--font-size-small);
}

.career-card__meta .meta-item {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

.career-card__excerpt {
	font-size: var(--font-size-body);
	line-height: var(--line-height-relaxed);
	margin-bottom: var(--space-md);
}

.career-card__cta {
	margin-top: auto;
}

/**
 * Career card badge overrides
 *
 * Hide auto-generated pill badges above the title.
 * Employment type and location are shown as plain grey text
 * below the title via after_title_content instead.
 */
.card--careers .card-badge-wrapper {
	display: none;
}

/**
 * Career card meta row - inline layout with bullet separator.
 * Displays employment type, department, and location on a single line.
 * Text style matches the single career page info-item pattern.
 */
.card-meta-row {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	flex-wrap: wrap;
	line-height: var(--line-height-normal);
}

.career-sidebar .badge[data-badge-variant="primary"] {
	background: transparent;
	padding: 0;
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lead);
}

/**
 * Career card meta item - plain text style with icon.
 * Matches the info-value styling from the single career sidebar.
 */
.card-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--font-size-body);
	color: var(--color-text-primary);
	line-height: var(--line-height-normal);
}

/**
 * Icons inside meta items.
 * Matches the info-item .icon color from sidebar.css.
 */
.card-meta-item .icon {
	color: var(--color-accent);
	flex-shrink: 0;
}

/**
 * Bullet separator between meta items.
 */
.card-meta-separator {
	color: var(--color-gray-400);
	line-height: 1;
}

/**
 * Career card meta overrides for search results and other contexts.
 * Scoped to .card--careers for higher specificity when careers cards
 * appear alongside other card types (e.g., search results page).
 */
.card--careers .card-meta-row {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	flex-wrap: wrap;
	margin-bottom: var(--space-sm);
}

.card--careers .card-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--font-size-small);
}

.card--careers .card-meta-item .icon {
	color: var(--color-primary);
	flex-shrink: 0;
}

.card--careers .card-meta-separator {
	color: var(--color-gray-400);
}

/*
|--------------------------------------------------------------------------
| Badge Styles
|--------------------------------------------------------------------------
*/

.badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2xs) var(--space-xs);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.badge-expired {
	background: var(--color-error-light);
	color: var(--color-error-dark);
}

/*
|--------------------------------------------------------------------------
| Post Meta Employment Row (Single Page)
|--------------------------------------------------------------------------
*/

.post-meta-custom--careers,
.post-meta__employment-row {
	display: none;
}

/*
|--------------------------------------------------------------------------
| Single Career Page
|--------------------------------------------------------------------------
*/

.single-careers .career-details {
	margin-bottom: var(--space-lg);
}

.single-careers .career-detail-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.single-careers .career-detail-item:last-child {
	border-bottom: none;
}

.single-careers .career-detail-label {
	flex-shrink: 0;
	width: 120px;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-small);
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.single-careers .career-detail-value {
	color: var(--color-text-primary);
}

/* Apply button section */
.career-apply-section {
	text-align: center;
	padding: var(--space-xl) 0;
}

.career-apply-button {
	font-size: var(--font-size-lead);
}

/*
|--------------------------------------------------------------------------
| Heading Step-Down (Single Career Page)
|--------------------------------------------------------------------------
| Maintains visual hierarchy while allowing semantic heading structure.
| Career content often uses H1 for major sections (imported from ATS),
| so we step all headings down one level visually.
*/

@media (width >= 991px) {
	.single-careers .entry-content h1,
	.single-careers .wp-block-post-content h1 {
		font-size: var(--font-size-h2);
	}

	.single-careers .entry-content h2,
	.single-careers .wp-block-post-content h2 {
		font-size: var(--font-size-h3);
	}

	.single-careers .entry-content h3,
	.single-careers .wp-block-post-content h3 {
		font-size: var(--font-size-h4);
	}

	.single-careers .entry-content h4,
	.single-careers .wp-block-post-content h4 {
		font-size: var(--font-size-h5);
	}

	.single-careers .entry-content h5,
	.single-careers .wp-block-post-content h5 {
		font-size: var(--font-size-h6);
	}
}

/*
|--------------------------------------------------------------------------
| Responsive Adjustments
|--------------------------------------------------------------------------
*/

@media (width <= 781px) {
	/* Reorder columns on mobile: show sidebar (Position Details) above job content */
	.single-careers .wp-block-columns > .wp-block-column:last-child {
		order: -1;
	}
}

@media (width <= 768px) {
	.career-card__content {
		padding: var(--space-sm);
	}

	.career-card__title {
		font-size: var(--font-size-h5);
	}

	.single-careers .career-detail-item {
		flex-direction: column;
		gap: var(--space-2xs);
	}

	.single-careers .career-detail-label {
		width: auto;
	}
}