/* Pienaro Eiendom: the hero. H4 «Ekte film» (05.11.2026, after H1, H2 and H3 were rejected; Sverre: «prøv å lag noe
   veldig kult som gjør at man vil se resten av nettsiden. f, eks at videoene går etter hverandre og har et par sekunder
   hver med litt variasjon underveis»). A reel of real footage over the whole screen (production/kilde/film/lag.py): hands
   and tools close up, the herringbone room, a glide over an oak floor. It plays by itself; the hero is one screen high and the
   page goes straight on down when you scroll (Sverre 05.11.2026: «skal ikke bildene og videoen bli en mindre frame, men skal
   bare kunne gå rett nedover»). js/hero.js.
   The words lie at the foot of the picture, on the floor, light on a soft shade: to the left on a landscape screen,
   across the width on an upright one. Without JavaScript or with reduced motion the finished room stands still. */

.hero { position: relative; background: var(--kalk); }
.hero-scene {
  position: relative; height: 100svh; min-height: min(560px, 100svh); overflow: hidden;
  container-type: size;
  background: var(--kalk);
}
/* the frame holds the film, the words and the pause button */
.hero-ramme { position: absolute; inset: 0; }

/* ---------- the film ---------- */
.hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--blekk); }
.hero-media picture, .hero-media img, .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.hero-ferdig img { object-position: 46% 55%; }
/* with the motion: the reel's first frame stands from the first paint, the video fades in over it once it plays */
.hero-plakat, .hero-video { display: none; }
html.hero-film .hero-ferdig { display: none; }   /* lazy, so a browser with the motion never fetches it */
html.hero-film .hero-plakat, html.hero-film .hero-video { display: block; }
.hero-video { opacity: 0; transition: opacity 0.5s var(--mykt); }
.hero-media.spiller .hero-video { opacity: 1; }

/* the veils: lime white under the menu (its words are ink), and the shade under the words at the foot */
.hero-media::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: calc(var(--meny-h) + 1.75rem);
  background: linear-gradient(to bottom, var(--meny-slor), transparent); pointer-events: none;
}
.hero-media::before {
  content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--film-slor) 0%, var(--film-slor-2) 30%, transparent 56%);
}

/* ---------- the words ---------- */
.hero-tekst {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 var(--marg) clamp(1.25rem, 4.5cqh, 2.6rem);
  color: var(--tekst-lys);
}
.hero-tittel {
  font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.7rem); font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel);
  line-height: 1.04; max-width: 15ch; text-wrap: balance; color: var(--tekst-lys);
}
.hero-ingress {
  margin-top: clamp(0.7rem, 1.8cqh, 1.1rem); max-width: 42ch;
  font-size: var(--str-ingress); line-height: 1.5; color: var(--tekst-lys-dempet);
}
.hero-knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1rem, 2.6cqh, 1.6rem); }
/* on the film the main button is lime white with navy words, the other one an outline */
.hero .knapp { --fokus: var(--tekst-lys); background: var(--kalk); color: var(--marine); border-color: var(--kalk); }
.hero .knapp:hover { background: var(--hvit); border-color: var(--hvit); color: var(--marine); }
.hero .knapp-omriss { background: var(--film-knapp); color: var(--tekst-lys); border-color: var(--film-kant); }
.hero .knapp-omriss:hover { background: var(--kalk); color: var(--marine); border-color: var(--kalk); }

/* ---------- the pause button (WCAG 2.2.2: a film that plays by itself can be stopped) ---------- */
.hero-pause {
  position: absolute; z-index: 3; right: var(--marg); bottom: clamp(1.25rem, 4.5cqh, 2.6rem);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--film-knapp); color: var(--tekst-lys); border: 1px solid var(--film-kant); cursor: pointer;
  --fokus: var(--tekst-lys);
  transition: background 0.25s var(--mykt), color 0.25s var(--mykt);
}
.hero-pause:hover { background: var(--kalk); color: var(--marine); }
.hero-pause svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.hero-pause .spill { display: none; }
.hero-pause[aria-pressed="true"] .spill { display: block; }
.hero-pause[aria-pressed="true"] .pause { display: none; }
.hero-pause[hidden] { display: none; }

/* ---------- landscape: the words at the foot on the left, the shade also from the left ---------- */
@media (min-aspect-ratio: 1/1) and (min-width: 768px) {
  .hero-media::before {
    background:
      linear-gradient(to top, var(--film-slor) 0%, var(--film-slor-2) 32%, transparent 58%),
      linear-gradient(90deg, var(--film-slor-2) 0%, transparent 46%);
  }
  .hero-tekst { right: auto; width: min(46%, 40rem); }
}

/* ---------- upright: the words at the foot across the width ---------- */
@media (max-aspect-ratio: 999/1000), (max-width: 767px) {
  .hero-tittel { max-width: 14ch; }
  /* the pause button sits at the end of the button row */
  .hero-knapper { padding-right: calc(44px + 0.75rem); }
}
/* on a phone the film keeps most of the screen: the title and the two buttons; the services follow under the hero */
@media (max-width: 479px) {
  .hero-knapper { gap: 0.5rem; flex-wrap: nowrap; padding-right: calc(44px + 0.6rem); }
  .hero-knapper .knapp { padding-left: 0.8rem; padding-right: 0.8rem; white-space: nowrap; }
  .hero-ingress { font-size: 1.0625rem; line-height: 1.45; }
}
@media (max-width: 359px) {
  .hero-knapper { flex-wrap: wrap; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 760px) {
  .hero-ingress { display: none; }
}