/* ==========================================================================
   FS Annonssida — en stilling ur ReachMee
   ==========================================================================
   Layouten för templates/single-fs-stilling.php. Knappen, meta-listan och
   annonstexten kommer ur modulens frontend.css (delade klasser); här ligger
   bara sidans egna delar. Måtten är designtokens ur child-temat.
   ========================================================================== */

.fs-annonse {
	padding: var(--fs-space-8) 0 var(--fs-section-y);
}

.fs-annonse__inner {
	max-width: 880px;
}

.fs-annonse__sti {
	margin-bottom: var(--fs-space-6);
}

/* ---- Huvud: titel + meta till vänster, knappen till höger ---- */

.fs-annonse__hode {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fs-space-6);
	margin-bottom: var(--fs-space-8);
}

.fs-annonse__tittel {
	font-family: var(--fs-font-heading);
	font-size: var(--fs-text-2xl);
	font-weight: var(--fs-weight-semi);
	line-height: var(--fs-lh-heading);
	letter-spacing: var(--fs-ls-tight);
	color: var(--fs-heading);
	margin: 0 0 var(--fs-space-4);
}

.fs-annonse__meta {
	margin: 0;
}

.fs-annonse__sok {
	margin-top: var(--fs-space-1);
	flex-shrink: 0;
}

.fs-annonse__varsel {
	max-width: 32ch;
	margin: 0;
}

/* ---- Bild ---- */

.fs-annonse__bilde {
	margin: 0 0 var(--fs-space-8);
}

.fs-annonse__bilde img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--fs-radius);
}

/* ---- Text ---- */

.fs-annonse__tekst {
	max-width: 68ch;
	margin-bottom: var(--fs-space-10);
}

/* ---- Kontaktpersoner ---- */

.fs-annonse__kontakt {
	border-top: 1px solid var(--fs-line);
	padding-top: var(--fs-space-8);
	margin-bottom: var(--fs-space-10);
}

.fs-annonse__kontakt-tittel {
	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-annonse__personer {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--fs-space-6) var(--fs-space-8);
}

.fs-annonse__person {
	display: flex;
	gap: var(--fs-space-4);
	align-items: flex-start;
}

.fs-annonse__initialer {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--fs-radius-circle);
	background: var(--fs-navy);
	color: var(--fs-text-on-navy);
	font-family: var(--fs-font-heading);
	font-size: var(--fs-text-base);
	font-weight: var(--fs-weight-semi);
	letter-spacing: var(--fs-ls-ui);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.fs-annonse__person-tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--fs-text-sm);
	color: var(--fs-muted);
}

.fs-annonse__navn {
	font-size: var(--fs-text-base);
	color: var(--fs-heading);
}

.fs-annonse__kontaktlenke {
	color: var(--fs-accent-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.fs-annonse__kontaktlenke:hover,
.fs-annonse__kontaktlenke:focus-visible {
	border-bottom-color: currentColor;
}

/* ---- Bunn: knappen + frist ---- */

.fs-annonse__bunn {
	display: flex;
	align-items: center;
	gap: var(--fs-space-6);
	flex-wrap: wrap;
	margin-bottom: var(--fs-space-8);
}

.fs-annonse__bunn .fs-stillinger__knapp {
	margin-top: 0;
}

.fs-annonse__frist {
	margin: 0;
	font-size: var(--fs-text-sm);
	color: var(--fs-muted);
}

.fs-annonse__tilbake {
	margin: 0;
	font-size: var(--fs-text-xs);
	font-weight: var(--fs-weight-semi);
	letter-spacing: var(--fs-ls-ui);
}

.fs-annonse__tilbake a {
	color: var(--fs-accent-ink);
	text-decoration: none;
}

.fs-annonse__tilbake a:hover,
.fs-annonse__tilbake a:focus-visible {
	text-decoration: underline;
}

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

@media (max-width: 700px) {

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

	.fs-annonse__tittel {
		font-size: var(--fs-text-xl);
	}

	.fs-annonse__sok {
		margin-top: 0;
	}
}