/* ==========================================================================
   FS Ledige stillinger — statisk bas
   ==========================================================================
   AF Gruppen-formen: antal, filterrad, kort med text till vänster och bild
   till höger. Kortet är en länk; hover ger mist-botten som mockupens .job.
   Knappen .fs-stillinger__knapp och meta-listan delas med annonssidan
   (assets/css/stilling.css köar den här filen).
   ========================================================================== */

.fs-stillinger {
	--fss-topplinje: var(--fs-navy);
	--fss-linje: var(--fs-line);
	--fss-hover: var(--fs-mist);
	--fss-luft: var(--fs-space-6);
}

/* ---- Antal och filter ---- */

.fs-stillinger__antall {
	font-family: var(--fs-font-heading);
	font-size: var(--fs-text-lg);
	font-weight: var(--fs-weight-semi);
	letter-spacing: var(--fs-ls-tight);
	color: var(--fs-heading);
	margin: 0 0 var(--fs-space-5);
}

.fs-stillinger__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-4) var(--fs-space-6);
	margin: 0 0 var(--fs-space-6);
}

.fs-stillinger__filter[hidden] {
	display: none;
}

.fs-stillinger__filterfelt {
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-1);
	min-width: 180px;
}

.fs-stillinger__filteretikett {
	font-size: var(--fs-text-2xs);
	font-weight: var(--fs-weight-medium);
	letter-spacing: var(--fs-ls-label);
	text-transform: uppercase;
	color: var(--fs-muted);
}

/* CoTheme sätter padding och hover-botten på formulärelement — tas tillbaka. */
.fs-stillinger__select {
	font: inherit;
	font-size: var(--fs-text-sm);
	color: var(--fs-heading);
	background: var(--fs-paper);
	border: 1px solid var(--fs-line-strong);
	border-radius: var(--fs-radius);
	padding: var(--fs-space-2) var(--fs-space-3);
}

.fs-stillinger__select:focus-visible {
	outline: 2px solid var(--fs-focus);
	outline-offset: 2px;
}

/* ---- Listan ---- */

.fs-stillinger__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--fss-topplinje);
}

.fs-stillinger__post {
	border-bottom: 1px solid var(--fss-linje);
}

.fs-stillinger__post[hidden] {
	display: none;
}

/* ---- Kortet ---- */

.fs-stilling {
	display: grid;
	grid-template-columns: 1fr 200px;
	gap: var(--fs-space-8);
	align-items: center;
	padding: var(--fss-luft) var(--fs-space-2);
	text-decoration: none;
	color: inherit;
	transition: background var(--fs-dur) var(--fs-ease);
}

.fs-stilling--uten-bilde {
	grid-template-columns: 1fr;
}

.fs-stilling:hover,
.fs-stilling:focus-visible {
	background: var(--fss-hover);
}

.fs-stilling:focus-visible {
	outline: 2px solid var(--fs-focus);
	outline-offset: -2px;
}

.fs-stilling__innhold {
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-3);
	min-width: 0;
}

.fs-stilling__tittel {
	font-family: var(--fs-font-heading);
	font-size: var(--fs-text-xl);
	font-weight: var(--fs-weight-semi);
	letter-spacing: var(--fs-ls-tight);
	line-height: var(--fs-lh-heading);
	color: var(--fs-heading);
}

.fs-stilling__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-2) var(--fs-space-5);
	font-size: var(--fs-text-sm);
	color: var(--fs-muted);
}

.fs-stilling__meta-post {
	display: inline-flex;
	align-items: center;
	gap: var(--fs-space-2);
	white-space: nowrap;
}

.fs-stilling__ikon {
	flex-shrink: 0;
	color: var(--fs-accent-ink);
}

.fs-stilling__bilde {
	display: block;
	width: 200px;
	height: 132px;
	object-fit: cover;
	border-radius: var(--fs-radius);
}

/* ---- Annonstext (delad med annonssidan) ----
   wp_kses_post() är ett XSS-filter, inte ett layoutfilter — det tillåter
   tabeller och filtrerad inline style. En bred tabell från ReachMee ska
   rulla inuti behållaren, inte trycka ut sidan i sidled. */

.fs-stilling__tekst {
	font-size: var(--fs-text-base);
	line-height: var(--fs-lh-body);
	color: var(--fs-text);
	overflow-x: auto;
}

.fs-stilling__tekst table,
.fs-stilling__tekst img {
	max-width: 100%;
}

.fs-stilling__tekst > *:first-child {
	margin-top: 0;
}

.fs-stilling__tekst > *:last-child {
	margin-bottom: 0;
}

.fs-stilling__tekst a {
	color: var(--fs-accent-ink);
}

/* ---- Navyknappen: søk, åpen søknad, profil, abonner ---- */

.fs-stillinger__knapp {
	display: inline-block;
	margin-top: var(--fs-space-6);
	padding: var(--fs-space-3) var(--fs-space-6);
	background: var(--fs-navy);
	color: var(--fs-text-on-navy);
	font-size: var(--fs-text-xs);
	font-weight: var(--fs-weight-semi);
	letter-spacing: var(--fs-ls-ui);
	text-decoration: none;
	border-radius: var(--fs-radius);
	transition: background var(--fs-dur) var(--fs-ease);
}

.fs-stillinger__knapp:hover,
.fs-stillinger__knapp:focus-visible {
	background: var(--fs-navy-deep);
	color: var(--fs-text-on-navy);
}

.fs-stillinger__knapp:focus-visible {
	outline: 2px solid var(--fs-focus);
	outline-offset: 2px;
}

/* ---- Inget matchar ---- */

.fs-stillinger__ingen {
	margin: var(--fs-space-6) 0 0;
	font-size: var(--fs-text-base);
	color: var(--fs-muted);
}

.fs-stillinger__ingen[hidden] {
	display: none;
}

/* ---- Redaktörsvarning ---- */

.fs-stillinger__varsel {
	border-left: 3px solid var(--fs-accent);
	background: var(--fs-mist);
	padding: var(--fs-space-3) var(--fs-space-4);
	margin: 0 0 var(--fs-space-6);
	font-size: var(--fs-text-sm);
	color: var(--fs-muted);
}

/* ---- Tomt läge ---- */

.fs-stillinger__tom {
	border-top: 2px solid var(--fss-topplinje);
	padding: var(--fs-space-10) 0 0;
	max-width: 60ch;
}

.fs-stillinger__tom-tittel {
	font-family: var(--fs-font-heading);
	font-size: var(--fs-text-xl);
	font-weight: var(--fs-weight-semi);
	letter-spacing: var(--fs-ls-tight);
	color: var(--fs-heading);
	margin: 0 0 var(--fs-space-3);
}

.fs-stillinger__tom-tekst {
	font-size: var(--fs-text-base);
	line-height: var(--fs-lh-body);
	color: var(--fs-muted);
	margin: 0;
}

/* ---- Profil och prenumeration ---- */

.fs-stillinger__konto {
	margin-top: var(--fs-space-10);
	padding: var(--fs-space-8);
	background: var(--fs-mist);
	border-radius: var(--fs-radius);
}

.fs-stillinger__konto-tekst {
	margin: 0 0 var(--fs-space-2);
	font-size: var(--fs-text-base);
	color: var(--fs-text);
}

.fs-stillinger__konto-knapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-4);
}

.fs-stillinger__konto-knapper .fs-stillinger__knapp {
	margin-top: var(--fs-space-4);
}

/* ---- Mobil ---- */

@media (max-width: 700px) {

	.fs-stilling {
		grid-template-columns: 1fr 88px;
		gap: var(--fs-space-4);
		align-items: start;
	}

	.fs-stilling--uten-bilde {
		grid-template-columns: 1fr;
	}

	.fs-stilling__tittel {
		font-size: var(--fs-text-lg);
	}

	.fs-stilling__meta-post {
		white-space: normal;
	}

	.fs-stilling__bilde {
		width: 88px;
		height: 88px;
	}

	.fs-stillinger__filter {
		flex-direction: column;
	}

	.fs-stillinger__konto {
		padding: var(--fs-space-6);
	}
}