/* ---------- Det heltene gjør hver uke (plattform/oppgaver.php) ----------
   To rader med oppgaver som glir hver sin vei. Sporet har oppgavene to
   ganger og flyttes en halv bredde, så raden går rundt uten skjøt. Kantene
   tones ut med en maske. Flate farger. */

.og { padding-block: clamp(72px, 8vw, 120px); background: #faf8ff; overflow: clip; }
.og .pf-hode { margin-bottom: clamp(32px, 4vw, 52px); }

.og-rader { display: grid; gap: 14px; }
.og-rad {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.og-spor { display: flex; width: max-content; }
.og-spor ul { display: flex; gap: 14px; padding-right: 14px; }

.og-kort {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 340px;
	padding: 14px 18px 14px 14px;
	border: 1px solid #ebe5fb;
	border-radius: 22px;
	background: #fff;
}
.og-hvem {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--flate, #f1ebff);
	overflow: hidden;
}
.og-hvem img { width: 84%; height: auto; }
.og-hvem.er-foto img { width: 100%; height: 100%; object-fit: cover; }
.og-tekst { display: grid; gap: 3px; min-width: 0; }
.og-tekst b { color: var(--pf-blekk); font-size: 16px; font-weight: 800; line-height: 1.25; }
.og-tekst small { color: var(--pf-gra); font-size: 13.5px; line-height: 1.4; }

@media (prefers-reduced-motion: no-preference) {
	.og-spor { animation: og-gli var(--varighet, 50s) linear infinite; }
	.og-rad--motsatt .og-spor { animation-direction: reverse; }
	.og-rad:hover .og-spor { animation-play-state: paused; }
}

/* Med redusert bevegelse kan raden scrolles, og kopien skjules */
@media (prefers-reduced-motion: reduce) {
	.og-rad { overflow-x: auto; }
	.og-spor ul[aria-hidden] { display: none; }
}

@keyframes og-gli {
	to { transform: translateX(-50%); }
}

@media (max-width: 640px) {
	.og-kort { width: 280px; }
}