/**
 * KVISVIK TØMMERHOTELL — hotell-fjellhall.css
 * Utseendet til Fjellhallen: 3D-scenen under annekset, teksten uten 3D og lenka ned fra atelieret.
 * Alt som angår Fjellhallen bor her, så hotell.css ikke trenger å endres.
 * Plassering : /home/kvisvik/public_html/hotell.kvisvik.no/hotell-fjellhall.css
 * Versjon    : 1.1.0
 * Dato       : 02.11.2026 kl. 20:08 · v1.1.0 02.11.2026 kl. 22:42
 * Utviklet av: Tormod Kvisvik
 * Firma      : Kvisvik Nettutvikling · org.nr 981309820
 * Web        : https://kvisvik.no
 * E-post     : kundeservice@kvisvik.no
 * Kvisvik Tømmerhotell er et produkt av Kvisvik Nettutvikling.
 * Et webhotell du kan gå inn i: hvert nettsted har sitt eget rom.
 * https://hotell.kvisvik.no
 *
 * v1.1.0 (02.11.2026 kl. 22:42): stil for verkene i tekstversjonen (overskrift per vegg, bilde som lenke, bildetekst). Samme utseende som
 * i Galleriet. Scenen og lenka er uendret.
 *
 * v1.0.0 (02.11.2026 kl. 20:08): første versjon.
 *
 * SLIK VIRKER DET (for læring):
 *  - Scenen følger samme mønster som Galleriet og annekset: lerretet er skjult til hotell.js har sjekket at WebGL virker og lagt
 *    klassen .har-3d på scenen. Uten 3D vises den vanlige teksten (.fjellhall-tekst).
 *  - Lenka «Ned til Fjellhallen» står i annekset. Med 3D sitter den nederst på midten, over lenka til Galleriet (hvis den finnes), slik at
 *    de som ikke bruker mus eller finger også kommer ned. Uten 3D er den en vanlig lenke i lista.
 *  - Fargene hentes fra :root i hotell.css (--krem, --messing, --natt …). Faller de bort, brukes reserveverdiene.
 */

/* ═══ Scenen ═══ */
#fjellhall-lerret { display: none; }
.scene-fjellhall.har-3d {
  position: relative;
  padding: 0;
  height: 100vh; height: 100svh;
  min-height: 540px; max-height: 1000px;
  overflow: hidden;
  background: #120a05;
}
.scene-fjellhall.har-3d .fjellhall-tekst { display: none; }
.scene-fjellhall.har-3d #fjellhall-lerret {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab;
  touch-action: pan-y;          /* loddrett sveip ruller siden, vannrett snur deg */
}
.scene-fjellhall.har-3d #fjellhall-lerret:active { cursor: grabbing; }
.scene-fjellhall.har-3d #fjellhall-lerret:focus-visible { outline: 2px solid var(--messing, #d6ab55); outline-offset: -4px; }

/* Navnet øverst havner ofte rett over lysåpningen i hvelvet, så det får en mørk bakgrunn og blir lesbart */
.scene-fjellhall.har-3d .sted { padding: .2em .9em; border-radius: 999px; background: rgba(14, 8, 5, .62); }

/* ═══ Teksten (uten 3D) ═══ */
.fjellhall-tekst { max-width: 760px; margin: 20px auto 0; padding: 22px 26px; background: rgba(59, 38, 21, .6); border: 1px solid rgba(214, 171, 85, .35); border-radius: 14px; }
.fjellhall-tekst h2 { margin: 0 0 .6rem; font-family: var(--skrift-tittel, Georgia, serif); color: var(--krem, #f4e4c2); }
.fjellhall-tekst h3 { margin: 1.4rem 0 .4rem; font-family: var(--skrift-tittel, Georgia, serif); color: var(--krem, #f4e4c2); font-size: 1.1rem; }
.fjellhall-tekst figure { margin: 1rem 0 1.4rem; }
.fjellhall-tekst figure a { display: block; border-radius: 6px; overflow: hidden; line-height: 0; }
.fjellhall-tekst figure a:focus-visible { outline: 2px solid var(--messing, #d6ab55); outline-offset: 3px; }
.fjellhall-tekst img { max-width: 100%; height: auto; border-radius: 6px; }
.fjellhall-tekst figcaption { margin-top: .5rem; line-height: 1.45; }

/* ═══ Lenka ned fra annekset ═══ */
.fjellhall-inngang {
  display: inline-block;
  padding: .5em 1.1em; border-radius: 999px;
  background: rgba(14, 8, 5, .78); border: 1px solid rgba(214, 171, 85, .6);
  color: var(--krem, #f4e4c2); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.fjellhall-inngang:hover { background: rgba(59, 38, 21, .95); border-color: var(--messing-lys, #f0cf86); }
.fjellhall-inngang:focus-visible { outline: 2px solid var(--messing-lys, #f0cf86); outline-offset: 3px; }
.fjellhall-inngang-rad { margin: 1rem 0 0; text-align: center; }
.scene-anneks.har-3d .fjellhall-inngang-rad {
  position: absolute; z-index: 3; left: 50%; bottom: 112px; transform: translateX(-50%);
  margin: 0; white-space: nowrap;
}
@media (max-width: 700px) {
  .scene-anneks.har-3d .fjellhall-inngang-rad { bottom: 104px; }
  .fjellhall-inngang { font-size: .88rem; }
}