/**
 * KVISVIK TØMMERHOTELL — hotell-fjelltrapp.css
 * Utseendet til Fjelltrappa: fullskjerm-scenen i 3D, knappene nederst og infolinja øverst.
 * Plassering : /home/kvisvik/public_html/hotell.kvisvik.no/hotell-fjelltrapp.css
 * Versjon    : 1.0.0
 * Dato       : 30.10.2026 kl. 17:48
 * 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.0.0 (30.10.2026 kl. 17:48): ny fil (Test 2a).
 *
 * LÆRING: samme oppskrift som Sjøbaren (hotell-sjofloy.css): lerretet og knappene er skjult til hotell.js
 * har satt .har-3d på scenen. Da tar 3D-scenen hele skjermen, og den vanlige teksten (.fjelltrapp-liste)
 * skjules. Uten WebGL, eller uten JavaScript, står teksten igjen.
 */

#fjelltrapp-lerret { display: none; }
.fjelltrapp-knapper { display: none; }
.scene-fjelltrapp.har-3d {
  position: relative;
  padding: 0;
  height: 100vh; height: 100svh;
  min-height: 540px; max-height: 1000px;
  overflow: hidden;
  background: #0c0805;
}
.scene-fjelltrapp.har-3d .fjelltrapp-liste { display: none; }
.har-3d #fjelltrapp-lerret {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab;
  touch-action: none;
  outline: none;
}
.har-3d #fjelltrapp-lerret:active { cursor: grabbing; }
.fjelltrapp-info { color: var(--krem); opacity: .85; font-variant-numeric: tabular-nums; font-size: .95rem; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); min-width: 9em; text-align: right; }
#fjelltrapp-hint { white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 32px); bottom: 88px; }

.har-3d .fjelltrapp-knapper {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(12, 8, 5, 0), rgba(12, 8, 5, .88));
}
.fjelltrapp-knapper button {
  font: inherit; font-weight: 600; color: var(--krem);
  background: #5a3a22; border: 1px solid rgba(214, 171, 85, .55); border-radius: 12px;
  padding: 14px 20px; min-width: 96px; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.fjelltrapp-knapper button:hover { background: #6b4528; }
.fjelltrapp-knapper button:active, .fjelltrapp-knapper button.holder { background: #8a5a30; }
.fjelltrapp-knapper button:focus-visible { outline: 2px solid var(--messing-lys); outline-offset: 2px; }

.fjelltrapp-liste { max-width: 720px; margin: 20px auto 0; padding: 22px 26px; background: rgba(59, 38, 21, .6); border: 1px solid rgba(214, 171, 85, .35); border-radius: 14px; }
.fjelltrapp-liste h2 { margin: 0 0 .6rem; font-family: var(--skrift-tittel); color: var(--krem); }
.fjelltrapp-liste ul { margin: 0 0 1rem; padding-left: 1.2rem; }

@media (max-width: 640px) {
  #fjelltrapp-hint { display: none; }
  .fjelltrapp-knapper { gap: 8px; }
  .fjelltrapp-knapper button { flex: 1 1 0; min-width: 0; padding: 16px 6px; font-size: .9rem; }
  .fjelltrapp-info { min-width: 0; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fjelltrapp-knapper button { transition: none; }
}