/* ───────────────────────────────────────────────────────────
   markedsforing.css — kun for markedsforing.html.
   Delt designsystem ligger i sider.css, forside.css og underside.css.
   Siden viser fire eksempelvideoer (9:16) og selger produktvideoer.
   ─────────────────────────────────────────────────────────── */

/* ═══ Sidehero: samme skall som de andre undersidene (hvit, fra
   underside.css). Bare bredden på tittel og ingress er egen. ═══ */
.mk-hero .ph-title { max-width: 16ch; }
.mk-hero .ph-lead { max-width: 54ch; }
.mk-hero .ph-cta { margin-top: 30px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.mk-hero .ph-link { margin-top: 0; }
.mk-hero .ph-note { font-size: 14px; color: var(--blekk-2); }

/* ═══ Eksemplene ═══ */
.mk-eks { background: #fff; padding: 8px 0 72px; }
.mk-wrap { max-width: 1290px; margin: 0 auto; padding: 0 28px; }
.mk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.mk-kort {
  position: relative;
  display: grid;
  gap: 12px;
}
.mk-ramme {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ark-2);
  border: 1px solid var(--strek);
  box-shadow: var(--skygge-lg);
}
.mk-ramme video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Klikk på videoen: spiller med lyd, klikk igjen stopper. Knappen
   dekker hele rammen; play-ikonet vises til videoen spiller med lyd. */
.mk-spill {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mk-spill:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; border-radius: 22px; }
.mk-spill-ikon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(12,13,14,.62);
  color: #fff;
  box-shadow: 0 12px 30px rgba(12,13,14,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .2s var(--letthet), opacity .2s, background-color .2s;
}
.mk-spill-ikon svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.mk-spill:hover .mk-spill-ikon { transform: scale(1.06); background: rgba(12,13,14,.8); }
/* Mens den spiller eller står på pause er midtknappen borte, og
   klikkene går til kontrollene nederst. Ferdig: «spill på nytt». */
.mk-kort.er-aktiv .mk-spill, .mk-kort.er-pause .mk-spill { pointer-events: none; }
.mk-kort.er-aktiv .mk-spill-ikon, .mk-kort.er-pause .mk-spill-ikon { opacity: 0; transform: scale(.8); }
.mk-ikon-igjen { display: none; }
.mk-kort.er-ferdig .mk-ikon-spill { display: none; }
.mk-kort.er-ferdig .mk-ikon-igjen { display: block; }
.mk-spill-ikon .mk-ikon-igjen { margin-left: 0; }

/* Kontrollene nederst: pause til venstre, fremdrift ved siden av.
   Vises bare mens videoen spiller eller står på pause. */
.mk-kontroll {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.mk-kort.er-aktiv .mk-kontroll, .mk-kort.er-pause .mk-kontroll { opacity: 1; pointer-events: auto; }
.mk-pause {
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(12,13,14,.72);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mk-pause:hover { background: rgba(12,13,14,.9); }
.mk-pause:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.mk-pause svg { width: 16px; height: 16px; fill: currentColor; }
.mk-ikon-fortsett { display: none; margin-left: 2px; }
.mk-kort.er-pause .mk-ikon-pause { display: none; }
.mk-kort.er-pause .mk-ikon-fortsett { display: block; }
.mk-fremdrift {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(12,13,14,.3);
}
.mk-fremdrift-fyll { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--lime); }

.mk-tekst { display: grid; gap: 3px; padding: 0 4px; }
.mk-navn { font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.mk-navn small { font-weight: 500; font-size: 14px; color: var(--blekk-2); margin-left: 6px; }
.mk-hva { font-size: 14.5px; line-height: 1.5; color: var(--blekk-2); }
/* Merket «Eksempel»: ingen skal tro dette er kundearbeid. */
.mk-merke {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,.92);
  color: var(--blekk-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ═══ Hva som er med ═══ */
.mk-med { background: var(--ark-2); padding: 72px 0; }
.mk-liste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.mk-liste li {
  padding: 24px 24px 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--strek);
}
.mk-liste strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.mk-liste p { font-size: 14.5px; line-height: 1.55; color: var(--blekk-2); }

/* ═══ Slik foregår det: tre steg, som på tjenester ═══ */
.mk-steg { background: #fff; padding: 72px 0 96px; }
.mk-steg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 40px;
}
.mk-steg-kort {
  border-radius: 18px;
  padding: 36px 34px 34px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  background: #f1f1ef;
  color: var(--blekk);
}
.mk-steg-kort.is-lime { background: var(--lime); }
.mk-steg-kort.is-dark { background: #0d0d0d; color: #fff; }
.mk-steg-n {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 54px; line-height: 1; letter-spacing: -.03em;
  margin-bottom: auto; opacity: .55;
}
.mk-steg-kort.is-dark .mk-steg-n { opacity: .62; }
.mk-steg-kort h3 { font-size: 21px; font-weight: 600; letter-spacing: -.025em; margin: 26px 0 10px; color: inherit; }
/* underside.css farger all p og li uten klasse med --blekk-2, som er
   ment for hvit bunn. På det mørke kortet og i prisboksen ga det
   2,8:1. Selektorene under veier mer enn den regelen. */
body.kd-side .mk-steg-kort p { font-size: 14.5px; line-height: 1.58; color: rgba(10,10,10,.72); }
body.kd-side .mk-steg-kort.is-dark p { color: rgba(255,255,255,.78); }

/* ═══ Pris: ett avsnitt, ingen tabell. Prisen settes per jobb. ═══ */
.mk-pris { background: #fff; padding: 0 0 96px; }
.mk-pris-boks {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px;
  align-items: center;
  padding: 44px 48px;
  border-radius: 22px;
  background: var(--blekk);
  color: #fff;
}
.mk-pris-h { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.18; }
.mk-pris-p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.74); max-width: 48ch; }
.mk-pris-liste { list-style: none; display: grid; gap: 12px; }
/* Tre klasser: må slå «body.kd-side main li:not([class])» i underside.css. */
body.kd-side .mk-pris-boks .mk-pris-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.88); }
.mk-pris-liste li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--lime); }

/* ═══ Tre typer annonser: video, kortfilm, bilde. Store kort i samme
   farger som stegene, rett etter heroen. ═══ */
.mk-tre { background: #fff; padding: 0 0 80px; }
.mk-tre-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 40px;
}
.mk-tre-kort {
  border-radius: 22px;
  padding: 36px 34px 32px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  background: #f1f1ef;
  color: var(--blekk);
}
.mk-tre-kort.is-lime { background: var(--lime); }
.mk-tre-kort.is-dark { background: #0d0d0d; color: #fff; }
.mk-tre-lab { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .62; }
.mk-tre-kort h3 { font-size: clamp(1.5rem, 2.1vw, 1.95rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; margin: 16px 0 14px; color: inherit; text-wrap: balance; }
body.kd-side .mk-tre-kort p { font-size: 15.5px; line-height: 1.6; color: rgba(10,10,10,.74); }
body.kd-side .mk-tre-kort.is-dark p { color: rgba(255,255,255,.78); }
.mk-tre-liste { list-style: none; margin-top: auto; padding-top: 28px; display: grid; gap: 9px; }
body.kd-side .mk-tre-kort .mk-tre-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: rgba(10,10,10,.82); }
body.kd-side .mk-tre-kort.is-dark .mk-tre-liste li { color: rgba(255,255,255,.86); }
.mk-tre-liste li::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--blekk); opacity: .55; }
.mk-tre-kort.is-dark .mk-tre-liste li::before { background: var(--lime); opacity: 1; }
body.kd-side .mk-tre-fot { margin-top: 22px; font-size: 14px; color: var(--blekk-2); }
@media (max-width: 1000px) {
  .mk-tre-grid { grid-template-columns: 1fr; gap: 16px; }
  .mk-tre-kort { min-height: 0; padding: 30px 26px 28px; }
}

/* ═══ Slutt: send oss produktet. Egen seksjon, ikke zebrabåndet. ═══ */
.mk-slutt { background: #fff; padding: 0 0 96px; }
.mk-slutt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px;
  align-items: center;
  padding: 56px 56px;
  border-radius: 22px;
  background: #07090f;
  color: #fff;
  overflow: hidden;
}
/* underside.css setter .pf-eyebrow til --blekk-3, som er 4,05:1 på den
   mørke flaten. Tre klasser i kjeden, så denne vinner. */
body.kd-side .mk-slutt-tekst .pf-eyebrow { color: rgba(255,255,255,.72); }
.mk-slutt-h {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-top: 18px;
}
.mk-slutt-lime { color: var(--lime); }
body.kd-side .mk-slutt-p { margin-top: 18px; font-size: 16.5px; line-height: 1.62; color: rgba(255,255,255,.76); max-width: 50ch; }
.mk-slutt-knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
body.kd-side .mk-slutt-fot { margin-top: 18px; font-size: 13.5px; color: rgba(255,255,255,.5); }

/* Viften: fire stillbilder, litt rotert, som kort på et bord. */
.mk-slutt-vifte {
  position: relative;
  height: 420px;
}
.mk-slutt-vifte img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  transform-origin: 50% 120%;
}
.mk-slutt-vifte img:nth-child(1) { transform: translate(-50%, -50%) rotate(-18deg) translateX(-60px); }
.mk-slutt-vifte img:nth-child(2) { transform: translate(-50%, -50%) rotate(-6deg) translateX(-20px); }
.mk-slutt-vifte img:nth-child(3) { transform: translate(-50%, -50%) rotate(6deg) translateX(20px); }
.mk-slutt-vifte img:nth-child(4) { transform: translate(-50%, -50%) rotate(18deg) translateX(60px); }

@media (max-width: 1000px) {
  .mk-slutt-grid { grid-template-columns: 1fr; padding: 40px 28px; gap: 28px; }
  .mk-slutt-vifte { height: 300px; }
  .mk-slutt-vifte img { width: 140px; }
}
@media (max-width: 560px) {
  .mk-slutt { padding-bottom: 64px; }
  .mk-slutt-vifte { height: 240px; }
  .mk-slutt-vifte img { width: 110px; }
}

@media (max-width: 1000px) {
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-liste, .mk-steg-grid { grid-template-columns: 1fr; }
  .mk-pris-boks { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; }
}
@media (max-width: 560px) {
  .mk-wrap { padding: 0 18px; }
  .mk-grid { grid-template-columns: 1fr; gap: 28px; }
  .mk-ramme { max-width: 360px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-lyd { transition: none; }
}