/**
 * Jobbannons – mallen "Available Position – Single" (plan 024, Claude Design "Karriär" →
 * Annonssida). Innehållet är Bricks-element; här står layouten: brödsmula, två spalter med
 * sidofält som följer med, faktalistan, listorna med markörer, kontaktkortet och raden med
 * andra tjänster. Formuläret är pluginens (application.css). Rubriker utan snedstreck (DESIGN.md).
 */

/* ── Brödsmula ───────────────────────────────────────────── */
.brk-job { padding-top: 0; }
.brk-job__crumbs {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-s);
	width: 100%;
	padding-block: 1.6rem;
	border-bottom: 1px solid var(--neutral-light);
	font-size: var(--text-s);
	font-weight: 600;
}
.brk-job__trail { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; min-width: 0; }
.brk-job__trail a, .brk-job__back { color: var(--text-dark); text-decoration: none; }
.brk-job__sep { color: var(--text-dark-muted); font-weight: 400; }
.brk-job__current { color: var(--text-dark-muted); font-weight: 400; }
.brk-job__back { display: inline-flex; align-items: center; gap: .8rem; white-space: nowrap; }
.brk-job__back::before {
	content: "";
	width: 1.6rem;
	height: 1.6rem;
	background: currentColor;
	-webkit-mask: url("../../icons/brokk-back.svg") center / contain no-repeat;
	mask: url("../../icons/brokk-back.svg") center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
	.brk-job__trail a:hover, .brk-job__back:hover { color: var(--secondary-dark); }
}

/* ── Två spalter: ingress + text till vänster, sidofältet följer med ─ */
.brk-job__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(28rem, 1fr);
	grid-template-areas: "intro aside" "body aside";
	column-gap: calc(var(--grid-gap) * 2);
	width: 100%;
	padding-top: var(--space-xl);
}
.brk-job__intro { grid-area: intro; display: flex; flex-direction: column; }
.brk-job__body  { grid-area: body; display: flex; flex-direction: column; }
.brk-job__aside {
	grid-area: aside;
	align-self: start;
	position: sticky;
	top: calc(var(--offset) + var(--space-l)); /* ACSS: höjden på den fasta menyn, + luft (Anders 2026-10-07) */
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}
@media (max-width: 991px) {
	/* Mobil: ingress → fakta och Ansök → texten, så att knappen ligger högt. */
	.brk-job__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "aside" "body"; row-gap: var(--space-l); padding-top: var(--space-l); }
	.brk-job__aside { position: static; }
}

/* ── Ingress ─────────────────────────────────────────────── */
.brk-job__intro h1 { margin: 0; }
.brk-job__subtitle {
	margin: var(--space-xs) 0 0;
	font-family: var(--font-condensed);
	font-weight: 700;
	font-size: var(--text-m);
	text-transform: uppercase;
	letter-spacing: .02em;
}
.brk-job__lead { margin: var(--space-s) 0 0; }
.brk-job__image { margin-top: var(--space-l); }

/* ── Sidofältet ──────────────────────────────────────────── */
.brk-job__facts { margin: 0; } /* inga svarta streck på sajten (Anders 2026-10-09) */
.brk-job__fact {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	gap: var(--space-xs);
	align-items: baseline;
	padding-block: 1.2rem;
	border-bottom: 1px solid var(--neutral-light);
}
.brk-job__fact-label {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-dark-muted);
}
.brk-job__fact-value { margin: 0; font-size: var(--text-s); font-weight: 500; }
.brk-job__apply { width: 100%; justify-content: space-between; margin-top: var(--space-xs); }
.brk-job__apply svg { rotate: 90deg; }
.brk-job__confidential, .brk-job__closed-text { margin: 0; font-size: var(--text-xs); color: var(--text-dark-muted); }
.brk-job__closed {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-s) var(--space-m);
	background: var(--tertiary-ultra-light);
}
.brk-job__closed-text { font-size: var(--text-s); color: var(--text-dark); font-weight: 600; }
.brk-job__closed-link { align-self: flex-start; font-weight: 600; color: var(--text-dark); border-bottom: 1.5px solid var(--primary); text-decoration: none; }

.brk-job__contact { display: flex; flex-direction: column; margin-top: var(--space-s); padding-top: var(--space-s); border-top: 1px solid var(--neutral-light); }
.brk-job__person { display: flex; align-items: center; gap: 1.2rem; margin-block: var(--space-xs) var(--space-xs); }
.brk-job__initials {
	display: grid;
	place-items: center;
	flex: none;
	width: 4.4rem;
	height: 4.4rem;
	border-radius: var(--radius-circle);
	background: var(--tertiary-ultra-light);
	font-size: var(--text-xs);
	font-weight: 600;
}
.brk-job__person-text { display: flex; flex-direction: column; gap: .2rem; }
.brk-job__person-name { font-weight: 600; }
.brk-job__person-role { font-size: var(--text-xs); color: var(--text-dark-muted); }
.brk-job__contact-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 1rem;
	border-bottom: 1px solid var(--neutral-light);
	font-size: var(--text-s);
	color: var(--text-dark);
	text-decoration: none;
}
.brk-job__contact-link::after {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	background: currentColor;
	-webkit-mask: url("../../icons/brokk-external.svg") center / contain no-repeat;
	mask: url("../../icons/brokk-external.svg") center / contain no-repeat;
}

/* ── Brödtexten ──────────────────────────────────────────── */
.brk-job__section { display: flex; flex-direction: column; margin-top: var(--space-xl); }
.brk-job__h2 {
	margin: 0 0 var(--space-s);
	font-size: var(--h3);
}
.brk-job__text { color: var(--text-dark-muted); }
.brk-job__text > :last-child { margin-bottom: 0; }
.brk-job__list-heading { margin: var(--space-s) 0 0; }

.brk-job__list { margin: var(--space-xs) 0 var(--space-s); padding: 0; list-style: none; }
.brk-job__item {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	gap: 1.2rem;
	align-items: start;
	padding-block: 1.2rem;
	border-bottom: 1px solid var(--neutral-light);
}
.brk-job__item::before {
	content: "";
	width: 1.6rem;
	height: 1.6rem;
	margin-top: .15em;
	background: var(--text-dark);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.brk-job__list--square .brk-job__item::before {
	width: .8rem;
	height: .8rem;
	margin: .45em 0 0 .2rem;
	background: var(--primary);
	-webkit-mask: none;
	mask: none;
}
.brk-job__list--check .brk-job__item::before { -webkit-mask-image: url("../../icons/brokk-check.svg"); mask-image: url("../../icons/brokk-check.svg"); }
.brk-job__list--plus .brk-job__item::before { -webkit-mask-image: url("../../icons/brokk-plus.svg"); mask-image: url("../../icons/brokk-plus.svg"); }

.brk-job__reqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
.brk-job__req .brk-job__list { margin-bottom: var(--space-s); }
@media (max-width: 767px) {
	.brk-job__reqs { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ── Andra lediga tjänster ───────────────────────────────── */
.brk-job__others-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-s);
	width: 100%;
}
.brk-job__others-head .brk-job__h2 { margin: 0; border: 0; }
.brk-job__all { font-size: var(--text-s); font-weight: 600; color: var(--text-dark); text-decoration: none; white-space: nowrap; }

/* brokk-tagline har order:-1 (eyebrow först i sin behållare). Etiketterna inne i avsnitten ska stå
   där de står i trädet: listrubriken efter avsnittets text, "Required" över sin lista. */
.brk-job__section .brokk-tagline.brk-job__list-heading { order: 0; }

@media (max-width: 767px) {
	/* Titeln står i H1 direkt under – i mobil räcker "Career / Vacancies" bredvid "All positions". */
	.brk-job__trail > :nth-last-child(-n+2) { display: none; }
}

/* Annonsens rubrik i texten är h2 (förut h3 direkt under H1, plan 065) – samma storlek som förut. */
.brk-job__text h2 { font-size: var(--h3); }