/* ------------------------------------------------------------------
   magasin.css — valgmagasinet som bladremagasin, på sin egen side.

   Siden bruger ikke sitets top og bund: det gav en lille bog midt i
   meget ramme. Her er der en slank bjælke med «Tilbage» øverst, en
   bjælke med pile og tæller nederst, og bogen fylder alt imellem.

   Farver og skrifter er stadig sitets: navy #061f2c, grøn #2a995b /
   #3eb666, Rufina til titlen, Overpass til knapper og tal.

   Bogen er ét element med fast sideforhold. Scenen er en størrelses-
   container, så bogen kan regnes ud fra scenens HØJDE (cqh): den er så
   bred som den kan blive uden at blive højere end scenen, og aldrig
   bredere end scenen. På brede skærme et opslag (2480/1754), under
   760px én side (1240/1754).

   Bladet der vender (.mag-blad) er et løst element med for- og bagside,
   som JS lægger over den side, der skal vendes, og drejer 180 grader om
   ryggen. Uden JS findes læseren ikke: så viser .mag-alle alle sider
   under hinanden.
------------------------------------------------------------------ */

html, body { height: 100%; margin: 0; }
body.magasin {
  background: #061f2c; color: #fff;
  font-family: 'Overpass', sans-serif; font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }

/* ---- rammen: top, scene, bund ---- */
.mag-js .mag-app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  box-sizing: border-box;
}
.mag-js .mag-laeser { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.mag-top {
  display: flex; align-items: center; gap: 18px; flex: 0 0 auto;
  padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,0.10);
}
.mag-tilbage {
  color: #fff; text-decoration: none; white-space: nowrap; font-size: 15px;
  padding: 8px 12px 6px 8px; border-radius: 4px; border: 1px solid transparent;
}
.mag-tilbage:hover { border-color: rgba(255,255,255,0.25); color: #3eb666; }
.mag-titel {
  flex: 1 1 auto; margin: 0; text-align: center;
  font-family: 'Rufina', serif; font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff;
}
.mag-titel span {
  display: block; font-family: 'Overpass', sans-serif; font-weight: 400; font-size: 13px;
  color: #9fb0b8; letter-spacing: 0.2px; margin-top: 2px;
}
.mag-top-knapper { display: flex; gap: 8px; flex: 0 0 auto; }

/* ---- scenen ---- */
.mag-scene {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 18px 10px; box-sizing: border-box;
  perspective: 2600px;
}
.mag-scene-indre {
  flex: 1 1 auto; min-width: 0; height: 100%;
  container-type: size;
  display: flex; align-items: center; justify-content: center;
}
.mag-pil {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, opacity .15s;
}
.mag-pil svg { width: 26px; height: 26px; }
.mag-pil:hover { background: #2a995b; border-color: #2a995b; }
.mag-pil[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }

/* Bogen: så bred som scenen, dog aldrig højere end scenen. */
.mag-bog {
  position: relative; flex: 0 0 auto;
  aspect-ratio: 2480 / 1754;
  width: 100%;
  width: min(100%, calc(100cqh * 2480 / 1754));
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
/* Forsiden og bagsiden står alene; bogen rykkes en kvart bredde, så den
   ene side står midt på scenen i stedet for ude i den ene kant. */
.mag-bog.mag-kun-hoejre { transform: translateX(-25%); }
.mag-bog.mag-kun-venstre { transform: translateX(25%); }

.mag-side {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: #fff; overflow: hidden; cursor: pointer;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.mag-venstre { left: 0; border-radius: 4px 0 0 4px; }
.mag-hoejre  { right: 0; border-radius: 0 4px 4px 0; }
.mag-side.mag-tom { background: transparent; box-shadow: none; cursor: default; pointer-events: none; }
.mag-side img, .mag-flade img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; pointer-events: none;
}
/* ryggen: en svag skygge ind mod midten, som på et rigtigt opslag */
.mag-venstre::after, .mag-hoejre::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none;
}
.mag-venstre::after { right: 0; background: linear-gradient(to left, rgba(0,0,0,0.16), rgba(0,0,0,0)); }
.mag-hoejre::after  { left: 0;  background: linear-gradient(to right, rgba(0,0,0,0.16), rgba(0,0,0,0)); }
.mag-side.mag-tom::after { display: none; }

/* bladet, der vender */
.mag-blad {
  position: absolute; top: 0; bottom: 0; width: 50%; display: none;
  transform-style: preserve-3d; will-change: transform;
  z-index: 3;
}
.mag-blad.mag-aktiv { display: block; }
.mag-blad.mag-fra-hoejre { right: 0; transform-origin: left center; }
.mag-blad.mag-fra-venstre { left: 0; transform-origin: right center; }
.mag-flade {
  position: absolute; inset: 0; background: #fff; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.mag-bagside { transform: rotateY(180deg); }
/* mørkning hen over bladet, mens det står på højkant */
.mag-flade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(0,0,0,0); transition: background .35s;
}
.mag-blad.mag-drejer .mag-flade::after { background: rgba(0,0,0,0.18); }
.mag-blad.mag-drejer { transition: transform .75s cubic-bezier(.45,.05,.35,1); }
.mag-blad.mag-fra-hoejre.mag-drejer { transform: rotateY(-180deg); }
.mag-blad.mag-fra-venstre.mag-drejer { transform: rotateY(180deg); }

/* én side ad gangen (mobil): bogen er én A4 */
.mag-bog.mag-enkelt { aspect-ratio: 1240 / 1754; width: min(100%, calc(100cqh * 1240 / 1754)); }
.mag-bog.mag-enkelt .mag-side { width: 100%; left: 0; right: 0; border-radius: 3px; }
.mag-bog.mag-enkelt .mag-side::after { display: none; }
.mag-bog.mag-enkelt .mag-venstre { display: none; }
.mag-bog.mag-enkelt.mag-kun-hoejre, .mag-bog.mag-enkelt.mag-kun-venstre { transform: none; }
.mag-bog.mag-enkelt .mag-blad { display: none !important; }
.mag-bog.mag-enkelt .mag-hoejre { transition: opacity .22s, transform .22s; }
.mag-bog.mag-enkelt .mag-hoejre.mag-ud-venstre { opacity: 0; transform: translateX(-28px); }
.mag-bog.mag-enkelt .mag-hoejre.mag-ud-hoejre  { opacity: 0; transform: translateX(28px); }

/* ---- bjælken under bogen ---- */
.mag-bjaelke {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 18px 12px;
}
.mag-mellemrum { flex: 0 0 18px; }
.mag-taeller { color: #d7dde0; min-width: 9em; text-align: center; letter-spacing: 0.3px; padding-top: 2px; }
.mag-knap {
  font-family: 'Overpass', sans-serif; font-size: 15px; line-height: 1;
  color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 4px; padding: 10px 14px 8px; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.mag-knap:hover { background: #2a995b; border-color: #2a995b; color: #fff; }
.mag-knap[aria-pressed="true"] { background: #2a995b; border-color: #2a995b; }
.mag-knap[disabled] { opacity: 0.25; cursor: default; }
.mag-mb { color: rgba(255,255,255,0.6); }
.mag-knap:hover .mag-mb { color: #fff; }

/* ---- miniaturerne, en stribe under bjælken, når de er slået til ---- */
.mag-thumbs[hidden] { display: none; }
.mag-thumbs {
  flex: 0 0 auto;
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 18px 14px;
  scroll-behavior: smooth; scrollbar-color: #2a995b #0c2c3c;
}
.mag-thumb {
  position: relative; flex: 0 0 auto; width: 84px; padding: 0; border: 2px solid transparent;
  background: none; cursor: pointer; border-radius: 3px; overflow: hidden;
  opacity: 0.72; transition: opacity .15s, border-color .15s;
}
.mag-thumb img { display: block; width: 100%; height: auto; }
.mag-thumb span {
  position: absolute; left: 4px; bottom: 4px; font-size: 12px;
  color: #fff; background: rgba(6,31,44,0.85); padding: 3px 6px 1px; border-radius: 3px; line-height: 1.2;
}
.mag-thumb:hover { opacity: 1; }
.mag-thumb.mag-nu { opacity: 1; border-color: #3eb666; }

/* ---- uden JavaScript: alle sider under hinanden ---- */
.mag-alle-intro { max-width: 820px; margin: 24px auto 0; padding: 0 15px; color: #d7dde0; }
.mag-alle-intro a { color: #3eb666; }
.mag-alle { list-style: none; margin: 18px auto 0; padding: 0 15px 40px; max-width: 820px; }
.mag-alle li { margin: 0 0 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.mag-alle img { display: block; width: 100%; height: auto; }
.mag-js .mag-alle, .mag-js .mag-alle-intro { display: none; }
body:not(.mag-js) .mag-laeser { display: none; }
body:not(.mag-js) .mag-top { flex-wrap: wrap; justify-content: center; }

/* ---- forstørret side ---- */
.mag-zoom {
  position: fixed; inset: 0; z-index: 1000; background: rgba(6,31,44,0.96);
  display: flex; flex-direction: column; align-items: center;
}
.mag-zoom[hidden] { display: none; }
.mag-zoom-rulle { flex: 1 1 auto; width: 100%; overflow-y: auto; padding: 60px 16px 40px; box-sizing: border-box; }
.mag-zoom-rulle img { display: block; width: min(1240px, 100%); height: auto; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.mag-zoom-luk, .mag-zoom-pil {
  position: fixed; top: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3); background: rgba(6,31,44,0.85); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.mag-zoom-luk { right: 16px; }
.mag-zoom-pil { top: 50%; transform: translateY(-50%); }
.mag-zoom-tilbage { left: 12px; } .mag-zoom-frem { right: 12px; }
.mag-zoom-luk:hover, .mag-zoom-pil:hover { background: #2a995b; border-color: #2a995b; }
.mag-zoom-pil[disabled] { opacity: 0.25; cursor: default; }
.mag-zoom-taeller { position: fixed; top: 22px; left: 16px; font-size: 15px; color: #d7dde0; }
body.mag-laast { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mag-bog, .mag-blad.mag-drejer, .mag-bog.mag-enkelt .mag-hoejre, .mag-flade::after { transition: none; }
}

@media (max-width: 900px) {
  .mag-pil { display: none; }
  .mag-scene { padding: 12px 12px 6px; }
  .mag-titel span { display: none; }
  .mag-mb { display: none; }
}
@media (max-width: 759px) {
  .mag-top { padding: 8px 10px; gap: 8px; }
  .mag-tilbage { font-size: 14px; padding: 8px 8px 6px 4px; }
  .mag-titel { font-size: 17px; }
  .mag-top-knapper .mag-knap { padding: 8px 10px 6px; font-size: 14px; }
  .mag-bjaelke { padding: 6px 10px 10px; }
  .mag-taeller { min-width: 7.5em; }
  .mag-knap { padding: 9px 11px 7px; font-size: 14px; }
  .mag-thumb { width: 64px; }
  /* pile og tæller på én linje, knapperne på den næste */
  .mag-mellemrum { flex-basis: 100%; height: 0; }
}
@media (max-width: 480px) {
  .mag-titel { display: none; }
  .mag-top { justify-content: space-between; }
}