/*
 * job.css - job listing pages and cards.
 *
 * Loaded only on job singles, the job archive and job taxonomy archives.
 * Builds on the tokens in base.css and the components in components.css;
 * badges, cards, buttons and notices are reused, not redefined.
 */

/* -------------------------------------------------------------------------
 * 1. Badges row
 * ---------------------------------------------------------------------- */

.ifja-job-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ifja-space-2);
	margin: 0 0 var(--ifja-space-3);
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
 * 2. Single job header
 * ---------------------------------------------------------------------- */

.ifja-job-header {
	margin-bottom: var(--ifja-space-6);
	padding-bottom: var(--ifja-space-5);
	border-bottom: 1px solid var(--ifja-border);
}

.ifja-job-header__title {
	margin: 0;
	font-size: var(--ifja-text-xl);
	line-height: var(--ifja-leading-tight);
}

.ifja-job-header__organization {
	margin-top: var(--ifja-space-2);
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-base);
	font-weight: 500;
}

@media (min-width: 768px) {
	.ifja-job-header__title {
		font-size: var(--ifja-text-2xl);
	}
}

.ifja-job-facts--header {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: var(--ifja-space-3);
	margin-bottom: var(--ifja-space-3);
	padding: 0.5rem;
	border: 1px solid var(--ifja-border);
	border-radius: var(--ifja-radius-lg);
	background-color: #f8fafc;
}

@media (min-width: 640px) {
	.ifja-job-facts--header {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 0.75rem;
		padding: 0.75rem 1rem;
	}
}

.ifja-job-facts--header .ifja-job-facts__row {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.5rem 0.625rem;
	background-color: #ffffff;
	border: 1px solid var(--ifja-border);
	border-radius: var(--ifja-radius-md, 6px);
	gap: 2px;
	min-width: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.ifja-job-facts--header dt {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ifja-text-muted, #64748b);
	margin: 0;
	line-height: 1.2;
}

.ifja-job-facts--header dd {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ifja-text, #0f172a);
	margin: 0;
	line-height: 1.3;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ifja-job-facts--header dd a {
	color: inherit;
	text-decoration: none;
}

.ifja-job-facts--header dd a:hover {
	color: var(--ifja-primary, #0f3e6d);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 3. Fact lists
 * ---------------------------------------------------------------------- */

.ifja-job-facts {
	display: grid;
	gap: var(--ifja-space-3);
	margin: 0;
}

.ifja-job-facts__row {
	display: grid;
	gap: 2px;
}

.ifja-job-facts dt {
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-sm);
	font-weight: 500;
}

.ifja-job-facts dd {
	margin: 0;
	color: var(--ifja-text);
	overflow-wrap: anywhere;
}

@media (min-width: 640px) {
	.ifja-job-facts__row {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: var(--ifja-space-4);
		align-items: baseline;
	}
}

/* -------------------------------------------------------------------------
 * 4. Sections
 * ---------------------------------------------------------------------- */

.ifja-job-section {
	margin-bottom: var(--ifja-space-6);
}

.ifja-job-section__title {
	margin: 0 0 var(--ifja-space-3);
	padding-bottom: var(--ifja-space-2);
	border-bottom: 1px solid var(--ifja-border);
	font-size: var(--ifja-text-lg);
}

.ifja-job-text {
	margin: 0;
	color: var(--ifja-text);
}

.ifja-job-vacancies {
	display: flex;
	align-items: baseline;
	gap: var(--ifja-space-2);
	margin: 0 0 var(--ifja-space-3);
}

.ifja-job-vacancies__count {
	color: var(--ifja-text);
	font-size: var(--ifja-text-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ifja-job-vacancies__label {
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-sm);
}

/* -------------------------------------------------------------------------
 * 5. Expired state
 * ---------------------------------------------------------------------- */

.ifja-job-expired {
	margin-bottom: var(--ifja-space-6);
}

.ifja-job-expired__title {
	margin: 0;
	color: var(--ifja-error-strong);
	font-weight: 600;
}

.ifja-job-expired__text {
	margin: var(--ifja-space-2) 0 0;
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-sm);
}

/* -------------------------------------------------------------------------
 * 6. Important links
 * ---------------------------------------------------------------------- */

.ifja-job-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ifja-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ifja-job-links__note {
	margin: 0 0 var(--ifja-space-3);
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-sm);
}

.ifja-job-links a {
	width: 100%;
}

@media (min-width: 480px) {
	.ifja-job-links a {
		width: auto;
	}
}

/* -------------------------------------------------------------------------
 * 7. Source and disclaimer
 * ---------------------------------------------------------------------- */

.ifja-job-footer {
	margin-top: var(--ifja-space-7);
	padding-top: var(--ifja-space-5);
	border-top: 1px solid var(--ifja-border);
}

.ifja-job-source__title,
.ifja-job-disclaimer__title {
	margin: 0 0 var(--ifja-space-2);
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ifja-job-source__text {
	margin: 0;
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-sm);
}

.ifja-job-disclaimer {
	margin-top: var(--ifja-space-5);
	padding: var(--ifja-space-4);
	border: 1px solid var(--ifja-border);
	border-radius: var(--ifja-radius-lg);
	background-color: var(--ifja-surface);
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-xs);
	line-height: 1.6;
}

.ifja-job-disclaimer p + p {
	margin-top: var(--ifja-space-2);
}

.ifja-job-disclaimer strong {
	color: var(--ifja-text);
}

/* -------------------------------------------------------------------------
 * 8. Job cards
 * ---------------------------------------------------------------------- */

.ifja-job-card .ifja-job-badges {
	margin-bottom: var(--ifja-space-2);
}

.ifja-job-card__title {
	margin: 0;
	font-size: var(--ifja-text-lg);
	line-height: var(--ifja-leading-snug);
}

.ifja-job-card__title a {
	color: var(--ifja-text);
	text-decoration: none;
}

.ifja-job-card__title a:hover,
.ifja-job-card__title a:focus {
	color: var(--ifja-accent);
	text-decoration: none;
}

.ifja-job-card__organization {
	margin-top: var(--ifja-space-1);
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-sm);
	font-weight: 500;
}

.ifja-job-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ifja-space-1) var(--ifja-space-3);
	margin: var(--ifja-space-2) 0 0;
	padding: 0;
	list-style: none;
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-sm);
}

.ifja-job-card__meta li + li {
	position: relative;
	padding-left: var(--ifja-space-3);
}

.ifja-job-card__meta li + li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 3px;
	height: 3px;
	margin-top: -1px;
	border-radius: 50%;
	background-color: var(--ifja-border);
}

.ifja-job-card__deadline {
	margin-top: var(--ifja-space-3);
	padding-top: var(--ifja-space-3);
	border-top: 1px solid var(--ifja-border);
	color: var(--ifja-text);
	font-size: var(--ifja-text-sm);
	font-weight: 500;
}

.ifja-job-card__deadline--closed {
	color: var(--ifja-text-muted);
	font-weight: 400;
}

.ifja-job-card.ifja-job--expired {
	background-color: var(--ifja-surface);
}

.ifja-job-card.ifja-job--expired .ifja-job-card__title a {
	color: var(--ifja-text-muted);
}