/*
 * Ett system (template-parts/plattform/system.php): båndet med budskapet til
 * Heyroes over skjemaet nederst på sidene. Flate farger, ingen skygger. Mørk
 * modus kommer fra tvillingen system.mork.css (scripts/mork/lag_mork.py).
 *
 * Alt står midt på, som toppen av de andre seksjonene: slagordet, teksten,
 * kartet over systemet og lenken. Under 980 px går kartet nedover i stedet
 * for bortover, med heltene i to eller fire kolonner og Felix nederst.
 */

.sy {
	padding-block: clamp(64px, 8vw, 120px);
	background: #f7f5ff;
	color: #1d1d26;
}

.sy-bredde {
	display: grid;
	justify-items: center;
	gap: clamp(36px, 4.5vw, 56px);
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 40px);
}

.sy-hode { display: grid; justify-items: center; gap: 16px; max-width: 40rem; text-align: center; }
.sy-hode p { margin: 0; font-size: 1.075rem; line-height: 1.6; color: #4a4a58; }

.sy-hode .sy-merke {
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6712fb;
}

.sy-tittel {
	margin: 0 0 8px;
	font-family: var(--pf-tittel, 'Nunito', system-ui, sans-serif);
	font-size: clamp(2.6rem, 1.4rem + 3.8vw, 4.5rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.02em;
	color: #0a0f1f;
	text-wrap: balance;
}
.sy-tittel span { display: block; }
.sy-uthevet { padding-bottom: .08em; color: #6712fb; }

.sy-hode .sy-ingress { font-size: 1.25rem; font-weight: 700; line-height: 1.45; color: #1d1d26; }

.sy-lenke {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-weight: 800;
	color: #6712fb;
	text-decoration: none;
}
.sy-lenke svg { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.sy-lenke:hover svg { transform: translateX(3px); }
.sy-lenke:focus-visible { outline: 2px solid #6712fb; outline-offset: 4px; border-radius: 4px; }

/* Kartet over systemet. Kolonnene følger bredden i samme forhold, og tråden fra
   Felix i system.php er tegnet etter dem: endres forholdet, må tallene der
   endres også. */
.sy-kart {
	display: grid;
	grid-template-columns:
		minmax(0, 200fr) minmax(0, 120fr) minmax(0, 320fr) minmax(0, 120fr)
		minmax(0, 200fr) minmax(0, 120fr) minmax(0, 200fr);
	grid-template-rows: auto auto 80px;
	grid-template-areas:
		"steg1 . steg2 . steg3 . steg4"
		"iris ut kilder inn vera pil du"
		"felix felix felix felix felix felix felix";
	align-items: center;
	row-gap: 24px;
	width: 100%;
}

.sy-steg {
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-align: center;
	text-transform: uppercase;
	color: #6712fb;
}
.sy-steg--1 { grid-area: steg1; }
.sy-steg--2 { grid-area: steg2; }
.sy-steg--3 { grid-area: steg3; }
.sy-steg--4 { grid-area: steg4; }

.sy-traad {
	grid-column: 1 / -1;
	grid-row: 2 / 4;
	align-self: start;
	width: 100%;
	fill: none;
	stroke: #6712fb;
	stroke-opacity: .28;
	stroke-width: 2;
	stroke-dasharray: 3 5;
}
.sy-traad path { vector-effect: non-scaling-stroke; }

.sy-kilder {
	position: relative;
	grid-area: kilder;
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sy-kilder li {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 50px;
	padding: 0 16px 0 7px;
	border: 1px solid #e7e2f5;
	border-radius: 16px;
	background: #fff;
	font-size: .875rem;
	line-height: 1.25;
	color: #6e6e7c;
}
.sy-kilder b { display: block; font-size: 1.0625rem; font-weight: 800; color: #0a0f1f; }
.sy-kilder em { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: #f1ecff; color: #6712fb; font-size: .75rem; font-style: normal; font-weight: 800; }
.sy-kilder .er-snart .sy-avatar img { opacity: .75; }

.sy-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--flate, #f1ecff);
}
.sy-avatar img { width: 82%; height: 82%; object-fit: contain; }
.sy-avatar--stor { width: 76px; height: 76px; margin-bottom: 8px; }

.sy-linjer { fill: none; stroke: #6712fb; stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 3 5; }
.sy-linjer path { vector-effect: non-scaling-stroke; }
.sy-linjer--bred { justify-self: center; width: calc(100% - 16px); }
.sy-linjer--smal { display: none; }
.sy-ut { grid-area: ut; }
.sy-inn { grid-area: inn; }

.sy-node {
	position: relative;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 2px;
	min-height: 200px;
	padding: 20px 16px;
	border: 1px solid #e7e2f5;
	border-radius: 20px;
	background: #fff;
	font-size: .875rem;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
	color: #6e6e7c;
}
.sy-node b { font-size: 1.1875rem; font-weight: 800; color: #0a0f1f; }
.sy-iris { grid-area: iris; }
.sy-vera { grid-area: vera; }
.sy-du { grid-area: du; border-color: #6712fb; }
.sy-hake {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: #6712fb;
	color: #fff;
}

.sy-felix {
	position: relative;
	grid-area: felix;
	justify-self: center;
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 520px;
	height: 80px;
	padding: 0 28px 0 9px;
	border: 1px solid #e7e2f5;
	border-radius: 20px;
	background: #fff;
	font-size: .9375rem;
	line-height: 1.3;
	color: #6e6e7c;
}
.sy-felix b { display: block; font-size: 1.1875rem; font-weight: 800; color: #0a0f1f; }
.sy-felix .sy-avatar--stor { width: 62px; height: 62px; margin: 0; }

.sy-pil { grid-area: pil; justify-self: center; width: 64px; height: 12px; fill: none; stroke: #6712fb; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
	.sy-linjer { animation: sy-flyt 1s linear infinite; }
}
@keyframes sy-flyt { to { stroke-dashoffset: -8; } }

@media (max-width: 979px) {
	.sy-kart {
		grid-template-columns: minmax(0, 760px);
		grid-template-rows: none;
		grid-template-areas: "steg1" "iris" "ut" "steg2" "kilder" "inn" "steg3" "vera" "pil" "steg4" "du" "felix";
		justify-content: center;
		justify-items: center;
		row-gap: 10px;
	}
	.sy-traad, .sy-linjer--bred { display: none; }
	.sy-linjer--smal { display: block; width: min(100%, 340px); height: 40px; }
	.sy-avatar { width: 34px; height: 34px; }
	.sy-avatar--stor, .sy-hake { width: 64px; height: 64px; margin-bottom: 6px; }
	.sy-node { min-width: 200px; min-height: 0; padding: 18px 14px; font-size: .8125rem; }
	.sy-node b, .sy-felix b { font-size: 1.0625rem; }
	.sy-kilder { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
	.sy-kilder li { gap: 10px; height: auto; min-height: 44px; padding: 6px 10px 6px 6px; font-size: .8125rem; }
	.sy-kilder b { font-size: .9375rem; }
	.sy-kilder em { padding: 1px 6px; font-size: .6875rem; }
	.sy-pil { width: 44px; height: 8px; stroke-width: 3; transform: rotate(90deg); margin-block: 18px; }
	.sy-felix { gap: 12px; min-width: 0; height: auto; margin-top: 14px; padding: 10px 18px 10px 8px; font-size: .8125rem; }
	.sy-felix .sy-avatar--stor { width: 56px; height: 56px; }
}

@media (max-width: 799px) {
	.sy-kilder { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
	.sy-node, .sy-felix { width: 100%; max-width: 440px; }
	.sy-node {
		grid-template-columns: auto 1fr;
		justify-items: start;
		column-gap: 12px;
		padding: 8px 18px 8px 8px;
		text-align: left;
	}
	.sy-node .sy-avatar--stor, .sy-hake { grid-row: span 2; width: 56px; height: 56px; margin: 0; }
	.sy-node b { align-self: end; }
	.sy-node > span:last-child { align-self: start; }
}