/* ============================================================
   MAGAZINE READER — stile "jasonbradley.co"
   Immagine a tutto schermo + striscia di miniature in basso.
   File separato: va caricato DOPO stylesheet.css.
   ============================================================ */

.reader {
  --reader-bg: #f6f5f4;
  --reader-gutter: 15px;
  --thumb-h: 56px;
  --thumb-gap: 4px;
  --fade: 0.45s;

  position: fixed;
  inset: 0;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 10010;               /* sopra navbar, filtri e navbar mobile */
  background: var(--reader-bg);
  display: none;
  overflow: hidden;
  font-family: Lato, sans-serif;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.024em;
  text-transform: uppercase;
  color: #000;
}
.reader.is-open { display: block; }

/* blocca lo scroll della pagina sotto */
html.reader-open,
html.reader-open body {
  overflow: hidden !important;
  scroll-snap-type: none !important;
}

/* ---------- IMMAGINE A TUTTO SCHERMO ---------- */
.reader-stage {
  position: absolute;
  inset: 0;
  z-index: 0;                   /* tiene le metà cliccabili SOTTO testi e miniature */
}
.reader-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* modalità FILL: a tutto sfondo */
  object-position: center;
  opacity: 0;
  transition: opacity var(--fade) ease;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.reader-img.is-front { opacity: 1; }

/* copertina e retro (verticali) non vengono mai tagliate */
.reader-img.is-portrait,
.reader.is-fit .reader-img {
  object-fit: contain;
  padding: 60px var(--reader-gutter) calc(var(--thumb-h) + 60px);
}

/* metà sinistra / destra cliccabili */
.reader-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: none;
  border: 0;
  padding: 0;
  z-index: 2;
}
.reader-hit--prev { left: 0; }
.reader-hit--next { right: 0; }

/* ---------- TESTI SOPRA L'IMMAGINE ---------- */
/* bianco + difference = leggibile su qualsiasi pagina */
.reader-top,
.reader-meta,
.reader-counter,
.reader-credits {
  color: #fff;
  mix-blend-mode: difference;
}

.reader-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  padding: var(--reader-gutter);
  pointer-events: none;         /* niente z-index: serve al "difference" */
}
.reader-title {
  font-size: 12px;
  font-weight: 400;
  margin: 0;
  max-width: 50%;
}
.reader-actions {
  display: flex;
  gap: 15px;
  pointer-events: auto;
}
.reader-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: inherit;
  cursor: pointer;
  transition: opacity 0.3s;
}
.reader-btn:hover { opacity: 0.3; }

/* crediti: pannello che compare con INFO */
.reader-credits {
  position: absolute;
  top: calc(var(--reader-gutter) + 22px);
  left: var(--reader-gutter);
  max-width: min(420px, 60%);
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.reader.show-info .reader-credits { opacity: 1; }

/* ---------- BARRA IN BASSO ---------- */
.reader-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 15px;
  padding: var(--reader-gutter);
  pointer-events: none;         /* niente z-index: serve al "difference" */
}
.reader-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reader-counter {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* striscia miniature */
.reader-strip {
  display: flex;
  align-items: flex-end;
  gap: var(--thumb-gap);
  max-width: 60vw;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  pointer-events: auto;
  padding-top: 6px;             /* spazio per il "salto" della miniatura attiva */
}
.reader-strip::-webkit-scrollbar { display: none; }

.reader-thumb {
  flex: 0 0 auto;
  height: var(--thumb-h);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.reader-thumb img {
  display: block;
  height: 100%;
  width: auto;
  pointer-events: none;
}
.reader-thumb:hover,
.reader-thumb:focus-visible { opacity: 1; outline: none; }
.reader-thumb.is-active {
  opacity: 1;
  transform: translateY(-6px);
}

/* ---------- CURSORE PERSONALIZZATO (solo mouse) ---------- */
.reader-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
  white-space: nowrap;
  color: #fff;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .reader-hit { cursor: none; }
  .reader.cursor-on .reader-cursor { display: block; }
}

/* ---------- MOBILE / TABLET ---------- */
@media (max-width: 1024px) {
  .reader { --thumb-h: 40px; }

  .reader-title { max-width: 70%; }

  .reader-bottom {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "meta  counter"
      "strip strip";
    row-gap: 10px;
  }
  .reader-meta    { grid-area: meta; }
  .reader-counter { grid-area: counter; }
  .reader-strip   { grid-area: strip; max-width: 100%; }

  .reader-img.is-portrait,
  .reader.is-fit .reader-img {
    padding: 50px var(--reader-gutter) calc(var(--thumb-h) + 90px);
  }
  .reader-credits { max-width: calc(100% - 30px); }
}