/* Media: steg-for-steg bilde/video, 9:16-visning, forsidekort-video, studio-editor.
   Lastet etter main.css. */

/* ── Forsidekort: live video beskåret til 1:1 (object-fit cover + fokuspunkt) ── */
.card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* behold proporsjoner, fyll firkanten */
  display: block;
}

/* ── 9:16-visning i modal (bilde/video vises ubeskåret) ── */
.media-9-16 {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 72vh;
  max-width: min(42vh, 100%);
  margin: 0 auto;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}
.media-9-16 > video,
.media-9-16 > img,
.media-9-16 > iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border: 0;
}
.media-tekst {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
}
.media-galleri {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 8px;
}
/* Bilder vises i sitt opplastede format — full bredde, naturlig høyde, ingen beskjæring */
.media-bilde { margin: 0; border-radius: 14px; overflow: hidden; }
.media-bilde > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.media-bilde-tekst { font-size: 13px; color: var(--text-muted, #777); padding: 6px 2px 0; }

/* ── Steg-for-steg ── */
.steg-liste { list-style: none; padding: 0; margin: 0; counter-reset: steg; }
.steg-element {
  counter-increment: steg;
  position: relative;
  padding: 8px 0 16px 38px;
  border-bottom: 1px solid var(--border, #eee);
}
.steg-element::before {
  content: counter(steg);
  position: absolute; left: 0; top: 8px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--olive, #6b7a3a); color: #fff;
  border-radius: 50%; font-size: 14px; font-weight: 600;
}
.steg-tekst { line-height: 1.55; white-space: pre-wrap; }
.steg-media { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }

/* ── Studio: steg-editor ── */
.studio-steg-seksjon .studio-steg-undertittel {
  font-size: 13px; color: var(--text-muted, #777); margin-bottom: 6px;
}
.studio-steg-forside { margin-bottom: 18px; }
.studio-steg-tom, .studio-steg-laast, .media-sone-laast {
  font-size: 13px; color: var(--text-muted, #888); font-style: italic; padding: 6px 0;
}
.studio-steg-rad {
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 12px; padding: 12px; margin-bottom: 12px; background: #fafafa;
}
.studio-steg-hode { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.studio-steg-nr { font-weight: 600; color: var(--olive, #6b7a3a); }
.studio-steg-knapper button {
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  width: 30px; height: 30px; margin-left: 4px; cursor: pointer;
}
.studio-steg-knapper button:disabled { opacity: .4; cursor: default; }

/* ── Media-sone (opplasting) ── */
.media-sone { margin-top: 8px; }
.media-sone-opplast { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.media-ekstern-rad { display: flex; gap: 6px; flex: 1 1 260px; }
.media-ekstern-rad .studio-ing-input { flex: 1; }
.studio-fil-knapp {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--olive, #6b7a3a); color: #fff; padding: 8px 14px;
  border-radius: 8px; cursor: pointer; font-size: 14px; white-space: nowrap;
}

/* ── Media-mini (opplastet element i editor) ── */
.media-mini-rad { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.media-mini { width: 120px; font-size: 12px; }
.media-mini-thumb {
  position: relative; width: 120px; height: 120px;
  border-radius: 10px; overflow: hidden; background: #000;
}
.media-mini-thumb img, .media-mini-thumb video { width: 100%; height: 100%; object-fit: cover; }
.media-mini-type {
  position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,.6);
  color: #fff; border-radius: 6px; padding: 1px 5px; font-size: 11px;
}
.media-mini-ctrl { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.media-mini-fokus { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted,#777); }
.media-mini-fokus input { width: 100%; }
.media-mini-poster {
  display: inline-block; font-size: 11px; color: var(--olive, #6b7a3a);
  cursor: pointer; text-decoration: underline;
}

/* ── Brukerregler / samtykke ── */
.vilkar-intro { color: var(--text-muted, #666); max-width: 640px; line-height: 1.5; }
.vilkar-tekst {
  white-space: pre-wrap; font-family: inherit; font-size: 14px; line-height: 1.6;
  background: #fafafa; border: 1px solid var(--border, #e6e6e6); border-radius: 12px;
  padding: 18px; max-width: 720px; max-height: 52vh; overflow-y: auto;
}
.vilkar-knapper { margin-top: 16px; }

/* ── Rapporter (takedown) ── */
.rapporter-knapp {
  background: none; border: none; color: var(--text-muted, #999);
  font-size: 12px; cursor: pointer; text-decoration: underline; padding: 4px;
}
.rapporter-knapp:hover { color: #c0392b; }
.rapporter-takk { font-size: 12px; color: var(--olive, #6b7a3a); }

/* ── Deling ── */
.del-wrap { position: relative; display: inline-block; }
.del-meny {
  position: absolute; right: 0; bottom: calc(100% + 6px);
  background: #fff; border: 1px solid var(--border, #e0e0e0); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; z-index: 60;
  display: flex; flex-direction: column; min-width: 180px;
}
.del-meny button {
  text-align: left; background: none; border: none; padding: 9px 12px;
  border-radius: 8px; cursor: pointer; font-size: 14px; color: inherit;
}
.del-meny button:hover { background: var(--bg-subtle, #f3f3f0); }

/* ── Offentlig delings-visning (uinnlogget) ── */
.public-cta {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
  background: var(--olive, #6b7a3a); color: #fff;
  padding: 10px 16px; display: flex; gap: 12px; align-items: center;
  justify-content: center; flex-wrap: wrap; font-size: 14px;
}
.public-cta .hero-cta { margin: 0; white-space: nowrap; }

/* ── Sticky handlinger i oppskriftsmodal (handleliste + del) ── */
.modal-body { padding-bottom: 92px; }   /* plass så innhold ikke gjemmes bak baren */
.modal-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.modal-sticky-inner {
  max-width: 680px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
}
.modal-sticky-inner > *, .sticky-venstre > * { pointer-events: auto; }
.sticky-venstre { position: relative; }
.modal-sticky-inner .sticky-handle,
.modal-sticky-inner .del-wrap > button {
  background: var(--olive, #6b7a3a); color: #fff; border: none;
  padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); cursor: pointer; white-space: nowrap;
}
.porsjon-sjekk-boble {
  position: absolute; bottom: calc(100% + 10px); left: 0;
  width: 260px; background: #fff; border-radius: 14px; padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2); border: 1px solid var(--border, #eadfce);
}
.porsjon-sjekk-boble::after {
  content: ''; position: absolute; top: 100%; left: 28px;
  border: 8px solid transparent; border-top-color: #fff;
}
.porsjon-sjekk-tekst { font-size: 13px; line-height: 1.45; margin-bottom: 10px; color: var(--text, #333); }
.porsjon-sjekk-knapper { display: flex; gap: 8px; }
.porsjon-sjekk-knapper button {
  flex: 1; padding: 8px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; border: none;
}
.psj-ja { background: var(--olive, #6b7a3a); color: #fff; }
.psj-juster { background: var(--bg-subtle, #f0ede6); color: var(--text, #333); }

/* Desktop/nettbrett: hold knappene innenfor oppskriftskortet (680px), med padding inn fra kanten */
@media (min-width: 768px) {
  .modal-sticky-inner { padding: 0 22px; }
}