/**
 * E-Paper-Reader – Styles
 *
 * @package gemeinde-neustadt
 */

/* ── Modal-Container ────────────────────────────────────────────────────── */

.epaper-reader {
  position:        fixed;
  inset:           0;
  z-index:         3100;
  display:         flex;
  flex-direction:  column;
  background:      #1e1e1e;
  color:           #fff;
}

.epaper-reader[hidden] { display: none; }

body.epaper-open { overflow: hidden; }

/* ── Obere Leiste ─────────────────────────────────────────────────────────── */

.epaper__bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-3);
  padding:         0 var(--space-4);
  height:          52px;
  background:      var(--color-primary-dark);
  flex-shrink:     0;
}

.epaper__title {
  font-size:     var(--font-size-sm);
  font-weight:   600;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  min-width:     0;
  flex:          1;
}

/* Mittlere Seitennavigation */
.epaper__nav-center {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-shrink: 0;
}

.epaper__page-info {
  font-size:  var(--font-size-xs, .75rem);
  color:      rgba(255,255,255,.7);
  min-width:  7em;
  text-align: center;
}

/* Rechte Aktions-Buttons */
.epaper__actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
  flex-shrink: 0;
}

/* Gemeinsamer Button-Stil */
.epaper__btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border:          none;
  border-radius:   var(--radius-md);
  background:      rgba(255,255,255,.1);
  color:           #fff;
  cursor:          pointer;
  text-decoration: none;
  transition:      background var(--transition-fast);
  flex-shrink:     0;
}

.epaper__btn:hover,
.epaper__btn:focus-visible {
  background: rgba(255,255,255,.25);
  outline:    2px solid rgba(255,255,255,.45);
  outline-offset: 2px;
}

.epaper__btn:disabled {
  opacity: .35;
  cursor:  default;
  pointer-events: none;
}

.epaper__btn svg {
  fill:   currentColor;
  display: block;
}

/* ── Stage: Inhaltsbereich ───────────────────────────────────────────────── */

.epaper__stage {
  flex:     1;
  display:  flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ── Ladeindikator ────────────────────────────────────────────────────────── */

.epaper__loading {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-4);
  z-index:         10;
  background:      rgba(30,30,30,.85);
}

.epaper__loading[hidden] { display: none; }

.epaper__spinner {
  display:       block;
  width:         44px;
  height:        44px;
  border:        4px solid rgba(255,255,255,.15);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation:     epaper-spin .75s linear infinite;
}

@keyframes epaper-spin { to { transform: rotate(360deg); } }

/* ── Viewport & Spreads ───────────────────────────────────────────────────── */

.epaper__viewport {
  flex:     1;
  position: relative;
  overflow: hidden;
  display:  flex;
}

.epaper__spread {
  position: absolute;
  inset:    0;
  display:  flex;
  align-items:     stretch;   /* Kinder strecken sich auf volle Höhe */
  justify-content: center;
  gap:      0;
  padding:  10px 12px;        /* Kompaktes Padding → maximale Seitenfläche */
  transition: transform 280ms ease-in-out;
}

/* Slide-Animationsklassen */
.epaper__spread--enter-right { transform: translateX(100%); }
.epaper__spread--enter-left  { transform: translateX(-100%); }
.epaper__spread--active      { transform: translateX(0); }
.epaper__spread--leave-left  { transform: translateX(-100%); }
.epaper__spread--leave-right { transform: translateX(100%); }

@media (prefers-reduced-motion: reduce) {
  .epaper__spread { transition: none; }
}

/* ── Einzelne Seite ────────────────────────────────────────────────────────── */

.epaper__page {
  /* Höhe wird durch align-items:stretch des Spreads bestimmt          */
  /* → gibt dem Bild eine definite Höhe für height:100%                */
  flex:      0 1 auto;
  min-width: 0;
  min-height: 0;
  max-width:  calc(50% - 2px);  /* Zwei-Seiten-Limit auf Desktop */
  display:     flex;
  align-items: center;
  justify-content: center;
  background:  #f5f0e8;     /* Cremeton – E-Paper-Feeling */
  box-shadow:
    0 6px 32px rgba(0,0,0,.55),
    0 2px  8px rgba(0,0,0,.25);
  border-radius: 1px;
  overflow:    hidden;
}

/* Auf Mobilgeräten nimmt eine Seite die volle Breite ein */
@media (max-width: 899px) {
  .epaper__page {
    max-width: calc(100vw - 24px);
  }
}

/* Desktop: zwei Seiten nebeneinander → Buchbund-Naht */
@media (min-width: 900px) {
  .epaper__page + .epaper__page {
    box-shadow:
      -5px 0 12px rgba(0,0,0,.30),
       0   6px 32px rgba(0,0,0,.55);
    border-radius: 0 1px 1px 0;
  }

  .epaper__page:first-child:not(:only-child) {
    border-radius: 1px 0 0 1px;
    box-shadow:
       5px 0 12px rgba(0,0,0,.30),
       0   6px 32px rgba(0,0,0,.55);
  }
}

.epaper__page-img {
  display:   block;
  /* Höhe füllt den Page-Container (der durch stretch die volle Viewport-Höhe hat) */
  height:    100%;
  width:     auto;       /* Breite ergibt sich aus dem Seitenverhältnis */
  max-width: 100%;       /* Kein horizontaler Überlauf */
  /* Keine user-Selektion / kein Drag für sauberes Blättern */
  user-select:       none;
  -webkit-user-drag: none;
}

/* ── Fehler-Anzeige ────────────────────────────────────────────────────────── */

.epaper__error {
  color:      rgba(255,255,255,.75);
  font-size:  var(--font-size-sm);
  text-align: center;
  padding:    var(--space-8);
  max-width:  360px;
  margin:     auto;
}

/* ── Thumbnail-Leiste (unten) ────────────────────────────────────────────── */

.epaper__thumbs {
  display:    flex;
  gap:        4px;
  padding:    6px 10px;
  background: #111;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}

.epaper__thumb {
  flex-shrink: 0;
  padding:     0;
  border:      2px solid transparent;
  border-radius: 2px;
  background:  transparent;
  cursor:      pointer;
  transition:  border-color var(--transition-fast), opacity var(--transition-fast);
  opacity:     .6;
}

.epaper__thumb:hover  { opacity: 1; }
.epaper__thumb:focus-visible { outline: 2px solid var(--color-accent); }

.epaper__thumb.is-active {
  border-color: var(--color-accent);
  opacity:      1;
}

.epaper__thumb img {
  display:      block;
  height:       56px;
  width:        auto;
  pointer-events: none;
}