/**
 * KVISVIK TØMMERHOTELL — hotell-galleri.css
 * Utseendet til Galleriet: 3D-scenen på første sal, tekstlista uten 3D, lenka inn fra annekset og zoom-visningen i full skjerm.
 * Alt som angår Galleriet bor her, så hotell.css ikke trenger å endres.
 * Plassering : /home/kvisvik/public_html/hotell.kvisvik.no/hotell-galleri.css
 * Versjon    : 1.0.0
 * Dato       : 01.11.2026 kl. 22:20
 * 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 (01.11.2026 kl. 22:20): første versjon.
 *
 * SLIK VIRKER DET (for læring):
 *  - Scenen følger samme mønster som annekset: lerretet er skjult til hotell.js har sjekket at WebGL virker og lagt
 *    klassen .har-3d på scenen. Uten 3D vises tekstlista (.galleri-liste) med bildene som vanlige lenker.
 *  - Zoom-visningen (.galleri-visning) er et vanlig HTML-lag som dekker hele vinduet. Den bruker 100dvh, så den ikke
 *    havner bak adresselinja på mobil, og tar hensyn til hakk og hjemlinje (env(safe-area-inset-*)).
 *  - Fargene hentes fra :root i hotell.css (--krem, --messing, --natt …). Faller de bort, brukes reserveverdiene.
 */

/* ═══ Scenen ═══ */
#galleri-lerret { display: none; }
.scene-galleri.har-3d {
  position: relative;
  padding: 0;
  height: 100vh; height: 100svh;
  min-height: 540px; max-height: 1000px;
  overflow: hidden;
  background: #120a05;
}
.scene-galleri.har-3d .galleri-liste { display: none; }
.scene-galleri.har-3d #galleri-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-galleri.har-3d #galleri-lerret:active { cursor: grabbing; }
.scene-galleri.har-3d #galleri-lerret:focus-visible { outline: 2px solid var(--messing, #d6ab55); outline-offset: -4px; }

/* ═══ Tekstlista (uten 3D) ═══ */
.galleri-liste { 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; }
.galleri-liste h2 { margin: 0 0 .6rem; font-family: var(--skrift-tittel, Georgia, serif); color: var(--krem, #f4e4c2); }
.galleri-liste h3 { margin: 1.4rem 0 .4rem; font-family: var(--skrift-tittel, Georgia, serif); color: var(--krem, #f4e4c2); font-size: 1.1rem; }
.galleri-liste figure { margin: 1rem 0 1.4rem; }
.galleri-liste figure a { display: block; border-radius: 6px; overflow: hidden; line-height: 0; }
.galleri-liste figure a:focus-visible { outline: 2px solid var(--messing, #d6ab55); outline-offset: 3px; }
.galleri-liste img { max-width: 100%; height: auto; border-radius: 6px; }
.galleri-liste figcaption { margin-top: .5rem; line-height: 1.45; }
.galleri-liste .galleri-tips { color: var(--dempet, #b9a383); font-size: .92rem; margin: .3rem 0 0; }

/* ═══ Lenka inn fra annekset ═══ */
.galleri-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;
}
.galleri-inngang:hover { background: rgba(59, 38, 21, .95); border-color: var(--messing-lys, #f0cf86); }
.galleri-inngang:focus-visible { outline: 2px solid var(--messing-lys, #f0cf86); outline-offset: 3px; }
/* I 3D-annekset sitter lenka nederst på midten, rett over hinten. Uten 3D er den en vanlig lenke i lista. */
.galleri-inngang-rad { margin: 1rem 0 0; text-align: center; }
.scene-anneks.har-3d .galleri-inngang-rad {
  position: absolute; z-index: 3; left: 50%; bottom: 66px; transform: translateX(-50%);
  margin: 0; white-space: nowrap;
}
@media (max-width: 700px) {
  .scene-anneks.har-3d .galleri-inngang-rad { bottom: 60px; }
  .galleri-inngang { font-size: .88rem; }
}

/* ═══ Zoom-visningen (OpenSeadragon i full skjerm) ═══ */
html.galleri-visning-aapen, html.galleri-visning-aapen body { overflow: hidden; }
.galleri-visning {
  position: fixed; inset: 0; z-index: 1000;
  background: #0b0705;
  color: var(--krem, #f4e4c2);
  font-family: var(--skrift, system-ui, sans-serif);
  height: 100vh; height: 100dvh;
}
.galleri-visning[hidden] { display: none; }
.galleri-visning-flate { position: absolute; inset: 0; background: #0b0705; touch-action: none; }
.galleri-visning-flate:focus-visible { outline: none; }
.galleri-visning-osd { width: 100%; height: 100%; }

.galleri-visning-topp {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 28px calc(14px + env(safe-area-inset-left, 0px));
  background: linear-gradient(to bottom, rgba(11, 7, 5, .88), rgba(11, 7, 5, 0));
  pointer-events: none;
}
.galleri-visning-topp > * { pointer-events: auto; }
.galleri-visning-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.galleri-visning-tittel { font-family: var(--skrift-tittel, Georgia, serif); font-size: clamp(1.05rem, 2.4vw, 1.45rem); font-weight: 700; line-height: 1.2; }
.galleri-visning-meta { font-size: .9rem; color: var(--dempet, #b9a383); }
.galleri-visning-meta[hidden] { display: none; }

.galleri-visning-knapper { display: flex; gap: 8px; flex-shrink: 0; }
.galleri-visning-knapp {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(20, 12, 6, .78); border: 1px solid rgba(214, 171, 85, .55);
  color: var(--krem, #f4e4c2); font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer;
  backdrop-filter: blur(4px);
}
.galleri-visning-knapp:hover { background: rgba(59, 38, 21, .95); border-color: var(--messing-lys, #f0cf86); }
.galleri-visning-knapp:focus-visible { outline: 2px solid var(--messing-lys, #f0cf86); outline-offset: 2px; }
.galleri-visning-knapp[hidden] { display: none; }
.galleri-visning-knapp.pa { background: rgba(214, 171, 85, .3); }
.galleri-visning-lukk { font-size: 1.7rem; }

.galleri-visning-omtale {
  position: absolute; z-index: 2; left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  max-width: min(34rem, calc(100% - 200px)); max-height: 28vh; overflow: auto;
  margin: 0; padding: .6em .9em; border-radius: 10px;
  background: rgba(14, 8, 5, .72); border: 1px solid rgba(214, 171, 85, .3);
  font-size: .95rem; line-height: 1.45;
}
.galleri-visning-omtale[hidden] { display: none; }
.galleri-visning-hint {
  position: absolute; z-index: 2; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  margin: 0; padding: .45em 1em; border-radius: 999px; max-width: calc(100% - 28px); text-align: center;
  background: rgba(14, 8, 5, .7); border: 1px solid rgba(214, 171, 85, .35);
  font-size: .85rem; color: var(--krem, #f4e4c2);
  pointer-events: none; transition: opacity .8s ease;
}
.galleri-visning-hint.borte { opacity: 0; }
.galleri-visning-laster {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin: 0; color: var(--dempet, #b9a383); font-size: 1rem; pointer-events: none;
}
.galleri-visning-laster[hidden] { display: none; }

/* Reserveløsning: OpenSeadragon kom ikke fram, så bildet vises vanlig */
.galleri-visning-feil {
  position: absolute; z-index: 3; inset: 72px 14px 14px; overflow: auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  background: #0b0705;
}
.galleri-visning-feil[hidden] { display: none; }
.galleri-visning-feil img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 6px; }
.galleri-visning-feillenke { color: var(--messing-lys, #f0cf86); font-weight: 600; }

/* Små skjermer: omtalen får full bredde, og knappene blir litt mindre */
@media (max-width: 700px) {
  .galleri-visning-knapp { width: 40px; height: 40px; font-size: 1.2rem; }
  .galleri-visning-knapper { gap: 6px; }
  .galleri-visning-omtale { max-width: calc(100% - 28px); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); max-height: 22vh; }
}
@media (prefers-reduced-motion: reduce) {
  .galleri-visning-hint { transition: none; }
}