/* functions/pdf_poster.php (style block 1) */
:root{
  --outline:#ffffff22;
  --bg: transparent;
}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.viewer{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8px;
  box-sizing:border-box;
}

.poster{
  width:100%;
  max-width:100%;
  border: 1px solid var(--outline);
  border-radius: 14px;
  overflow:hidden;
  background: var(--card);
}

.poster img{
  width:100%;
  height:auto;      /* <-- DET VIGTIGE */
  max-width:100%;
  display:block;
}

.mount{
  flex:1 1 auto;
  width:100%;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--outline);
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.25);
  opacity:0;
  transition:opacity .25s ease;
}

.mount.show{ opacity:1; }

/* Medier */
.media{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:cover;
  display:block;
}

/* PDF */
.mount iframe{
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}

/* Prikker */
.dots{
  margin-top:6px;
  display:flex;
  gap:6px;
}
.dot{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid var(--outline);
  opacity:.8;
}
.dot.active{
  background:#fff;
  opacity:1;
}

/* Mobil: begræns bredde så den ikke “flyder” */
@media (max-width: 600px){
  .mount{
    max-width:90vw;
  }
}

/* -------------------------------------------------
   Klik + swipe container
   ------------------------------------------------- */

/* Wrapper til at kunne have et overlay ovenpå mediet */
.poster-stage{
  position: relative;
  width: 100%;
  height: 100%;
}

/* Sørg for at linket er en “position-container” */
.poster-link{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  border-radius: 14px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Mediet fylder hele feltet */
.poster-link .media{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}

/* VIGTIGT:
   iOS/Safari + iframe/pdf kan stjæle touch.
   Vi bruger kun preview, så slå pointer-events fra på previewet. */
.poster-link iframe.media,
.poster-link img.media{
  pointer-events: none;
}

/* Swipe overlay der ligger OVER previewet */
.poster-link .swipe-layer{
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;

  /* Tillad vertikal scroll på siden, men vi tager horisontal swipe */
  touch-action: pan-y;

  /* Sørg for at overlayet faktisk modtager input */
  pointer-events: auto;
}