/* ============================================================
   karusell.css — forsidekarusellen (hero). Egen fil (fragmentert CSS).
   Bygger på sitens tokens (base.css). Overgangstid settes av partialen
   via --karusell-overgang (eierens valg).
   ============================================================ */

.karusell {
  position: relative;
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
  height: clamp(420px, 46vw, 620px);
}

.karusell__spor { position: relative; height: 100%; }

.karusell__lysbilde {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.karusell__lysbilde.aktiv { visibility: visible; }

.karusell__lysbilde img,
.karusell__lysbilde video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.karusell__overlegg { position: absolute; inset: 0; }

/* Ton over (fade) */
.karusell--ton .karusell__lysbilde {
  opacity: 0;
  transition: opacity var(--karusell-overgang, 600ms) ease, visibility 0s linear var(--karusell-overgang, 600ms);
}
.karusell--ton .karusell__lysbilde.aktiv {
  opacity: 1;
  transition: opacity var(--karusell-overgang, 600ms) ease;
}

/* Gli sidelengs */
.karusell--gli .karusell__lysbilde {
  transform: translateX(100%);
  transition: transform var(--karusell-overgang, 600ms) ease, visibility 0s linear var(--karusell-overgang, 600ms);
}
.karusell--gli .karusell__lysbilde.aktiv {
  transform: translateX(0);
  transition: transform var(--karusell-overgang, 600ms) ease;
  visibility: visible;
}
.karusell--gli .karusell__lysbilde.gaar-ut {
  transform: translateX(-100%);
  visibility: visible;
  transition: transform var(--karusell-overgang, 600ms) ease;
}
.karusell--gli .karusell__lysbilde.gaar-ut.retning-hoyre { transform: translateX(100%); }
.karusell--gli .karusell__lysbilde.aktiv.kom-fra-venstre { animation: karusell-fra-venstre var(--karusell-overgang, 600ms) ease; }
@keyframes karusell-fra-venstre {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* Skyv oppover */
.karusell--skyv .karusell__lysbilde {
  transform: translateY(100%);
  transition: transform var(--karusell-overgang, 600ms) ease, visibility 0s linear var(--karusell-overgang, 600ms);
}
.karusell--skyv .karusell__lysbilde.aktiv {
  transform: translateY(0);
  transition: transform var(--karusell-overgang, 600ms) ease;
  visibility: visible;
}
.karusell--skyv .karusell__lysbilde.gaar-ut {
  transform: translateY(-100%);
  visibility: visible;
  transition: transform var(--karusell-overgang, 600ms) ease;
}
.karusell--skyv .karusell__lysbilde.gaar-ut.retning-hoyre { transform: translateY(100%); }
.karusell--skyv .karusell__lysbilde.aktiv.kom-fra-venstre { animation: karusell-fra-toppen var(--karusell-overgang, 600ms) ease; }
@keyframes karusell-fra-toppen {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Zoom inn: kryssfading + lett skalering på det innkommende bildet */
.karusell--zoom .karusell__lysbilde {
  opacity: 0;
  transition: opacity var(--karusell-overgang, 600ms) ease, visibility 0s linear var(--karusell-overgang, 600ms);
}
.karusell--zoom .karusell__lysbilde.aktiv {
  opacity: 1;
  transition: opacity var(--karusell-overgang, 600ms) ease;
}
.karusell--zoom .karusell__lysbilde img,
.karusell--zoom .karusell__lysbilde video { transform: scale(1.08); transition: transform var(--karusell-overgang, 600ms) ease; }
.karusell--zoom .karusell__lysbilde.aktiv img,
.karusell--zoom .karusell__lysbilde.aktiv video { transform: scale(1); }

/* Ken Burns: kryssfading + rolig, kontinuerlig zoom mens bildet vises */
.karusell--kenburns .karusell__lysbilde {
  opacity: 0;
  transition: opacity var(--karusell-overgang, 600ms) ease, visibility 0s linear var(--karusell-overgang, 600ms);
}
.karusell--kenburns .karusell__lysbilde.aktiv {
  opacity: 1;
  transition: opacity var(--karusell-overgang, 600ms) ease;
}
.karusell--kenburns .karusell__lysbilde.aktiv img {
  animation: karusell-kenburns 14s ease-out forwards;
}
@keyframes karusell-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.14); }
}

/* Redusert bevegelse: alle overganger blir umiddelbare */
@media (prefers-reduced-motion: reduce) {
  .karusell .karusell__lysbilde,
  .karusell .karusell__lysbilde img,
  .karusell .karusell__lysbilde video { transition: none !important; animation: none !important; }
}

/* Tekstblokken — VERTIKAL rytme speiler den faste heroen nøyaktig
   (hero__inner: padding-top clamp(40,5.5vw,72), badge mb 22, p mt 22, cta mt 36) */
.karusell__innhold {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding-top: clamp(40px, 5.5vw, 72px);
  padding-bottom: 56px; /* plass til styringsraden */
}
.karusell__innhold--midt { align-items: center; text-align: center; }
.karusell__innhold--hoyre { align-items: flex-end; text-align: right; }

/* Badgen er en tro kopi av hero__badge (home.css) — samme sted, samme uttrykk */
.karusell__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  padding: .5em 1em;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  margin-bottom: 22px; /* identisk med heroen — typografien under er nå også identisk */
}
.karusell__badge .open-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-500); /* overstyres per lysbilde (BadgePrikkFarge) */
  display: inline-block;
}
.karusell__knapp { margin-top: 36px; }

/* Uthevede *ord* i overskriften — samme uttrykk som .hero h1 .accent;
   egen aksentfarge per lysbilde rendres inline og vinner over denne */
.karusell__innhold h2 .accent { color: var(--red-600); }

/* Knapperad + nøkkeltall — tro kopier av hero__cta/hero__stats (home.css) */
.karusell__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.karusell__cta .btn--egen:hover { filter: brightness(.92); transform: translateY(-2px); }
.karusell__innhold--midt .karusell__cta { justify-content: center; }
.karusell__innhold--hoyre .karusell__cta { justify-content: flex-end; }
.karusell__stats { display: flex; flex-wrap: wrap; gap: 38px; margin-top: 52px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.14); }
.karusell__stat b { font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; display: block; line-height: 1; }
.karusell__stat span { font-size: .9rem; color: #aab2be; }

/* Typografien er IDENTISK med den faste heroen (home.css: .hero h1/.hero p) —
   Bjørns fasit: «standard forside — der er det perfekt» */
.karusell__innhold h2 {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 6vw, 4.3rem);
  font-weight: 800;
  line-height: 1.04;
  margin: 0;
  max-width: 720px;
  text-shadow: 0 2px 18px rgba(10, 12, 16, .45);
}
.karusell__innhold p {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  max-width: 560px;
  margin: 22px 0 0; /* samme avstand under overskriften som .hero p (home.css) */
  color: #c9cfd8;
  text-shadow: 0 1px 12px rgba(10, 12, 16, .5);
}
.karusell__knapp {
  border: 0;
  border-radius: var(--r-pill);
  padding: .85em 1.7em;
  font-weight: 700;
  font-size: 1rem;
}
.karusell__knapp:hover { filter: brightness(.92); }

/* Styring: piler, prikker, pause */
.karusell__pil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 12, 16, .45);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.karusell__pil:hover { background: rgba(10, 12, 16, .7); }
.karusell__pil svg { width: 22px; height: 22px; }
.karusell__pil--forrige { left: 18px; }
.karusell__pil--neste { right: 18px; }

.karusell__bunnrad {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.karusell__prikker { display: flex; gap: 9px; }
.karusell__prikk {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
}
.karusell__prikk.aktiv { background: #fff; }
.karusell__prikk:focus-visible, .karusell__pil:focus-visible, .karusell__pause:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.karusell__pause {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 12, 16, .45);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.karusell__pause:hover { background: rgba(10, 12, 16, .7); }
.karusell__pause svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
  .karusell { height: clamp(380px, 92vw, 480px); }
  .karusell__pil { width: 38px; height: 38px; }
  .karusell__pil--forrige { left: 8px; }
  .karusell__pil--neste { right: 8px; }
}