/* ==========================================================================
   LETTURE.eu — /lesungen/css/style-ebookpdf-separato.css
   --------------------------------------------------------------------------
   VERSIONE RIPULITA — COMMENTATA — PRONTA PER PRODUZIONE

   Scopo
   - Modulo opzionale per copertine e-book “poster” con rapporto fisso, quando necessario.
   - Lettore PDF in linea (PDF.js) con comportamento responsive.
   - Hardening: nessuna regola deve “competere” con la colonna/copertina definita
     dal CSS base (style-recensione-separato.css).

   Dipendenze
   - Presume che il CSS base definisca --larghezza-colonna.
   - La garanzia matematica copertina=colonna (caso IMG diretto) e la blindatura
     per wrapper poster sono nel CSS base. Qui non si ridefinisce la colonna.

   Principio di non-ridondanza
   - Qui NON si modifica .contenitore-proporzionato (evita override su layout).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) BASE DI ROBUSTEZZA (solo ciò che serve davvero al modulo e-book/PDF)
   -------------------------------------------------------------------------- */

/* Box model robusto (utile per i wrapper del reader). */
*,
*::before,
*::after{
  box-sizing: border-box;
}

/* Prevenzione overflow orizzontale accidentale su mobile.
   Nota: non “risolve” overflow; evita solo scroll laterale. */
html,
body{
  overflow-x: hidden;
}

/* Media fluidi (modulo e-book/PDF).
   Nota: NON impostiamo width:100% globale, per non competere con regole più
   specifiche del CSS base sulla copertina. */
img,
video,
svg,
canvas,
iframe,
embed,
object{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Testi lunghi: evita overflow su URL e stringhe tecniche. */
p,
h1, h2, h3, h4, h5, h6,
figcaption,
li,
a{
  overflow-wrap: anywhere;
  word-break: normal; /* comportamento standard; overflow-wrap gestisce le stringhe lunghe */
}


/* --------------------------------------------------------------------------
   2) COPERTINA E-BOOK (poster) — CONTENITORE A RAPPORTO FISSO
   -------------------------------------------------------------------------- */

/* Wrapper con rapporto “A4 verticale” (210×297).
   - aspect-ratio: moderno
   - fallback @supports: legacy */
.ratio-ebook{
  --ratio-w: 210;
  --ratio-h: 297;

  position: relative;
  width: 100%;

  aspect-ratio: var(--ratio-w) / var(--ratio-h);
  background: #f6f6f6;

  overflow: hidden; /* impedisce sbavature in caso di rounding */
  border: 0;
}

/* Immagine poster “senza ritaglio”:
   - object-fit: contain (nessun crop)
   - occupa l’intero wrapper */
.poster-ebook{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
  background-color: #f6f6f6;
}

/* Fallback per browser senza aspect-ratio. */
@supports not (aspect-ratio: 1 / 1){
  .ratio-ebook{
    height: 0;
    padding-top: calc(var(--ratio-h) / var(--ratio-w) * 100%);
  }
  .ratio-ebook .poster-ebook{
    position: absolute;
    inset: 0;
  }
}


/* --------------------------------------------------------------------------
   3) LETTORE PDF IN LINEA (PDF.js) — COLONNA + RESPONSIVE
   -------------------------------------------------------------------------- */

/* Wrapper del reader: aderisce alla colonna (usa la variabile del CSS base). */
.reader-wrap{
  width: 100%;
  max-width: var(--larghezza-colonna, 360px);
  margin: 0 auto 1.5rem;
}

/* Finestra del reader con rapporto A4 (viewer inline). */
.reader-aspect{
  position: relative;
  width: 100%;

  aspect-ratio: 210 / 297;
  background: #f6f6f6;

  border: 1px solid #ccc;
  border-radius: 0.5rem;

  overflow: hidden; /* evita scroll interni “doppio binario” su alcuni device */
}

/* Iframe PDF.js fullscreen dentro il wrapper. */
.reader-aspect > #pdfjs-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* --------------------------------------------------------------------------
   4) MESSAGGIO NOSCRIPT DEL LETTORE PDF
   --------------------------------------------------------------------------
   Stile redazionale centralizzato per il fallback mostrato quando JavaScript
   non è disponibile. Evita stile inline nel markup HTML.
   -------------------------------------------------------------------------- */
.reader-noscript-message{
  text-align: center;
  font-size: 0.95rem;
  margin-top: 0.75rem;
}


/* --------------------------------------------------------------------------
   5) MOBILE/TABLET — “FULL-BLEED” SOLO PER IL LETTORE
   --------------------------------------------------------------------------
   Motivazione:
   - su schermi piccoli la toolbar PDF.js beneficia di più spazio.
   - Full-bleed circoscritto a #sezione-lettore, senza impatto su copertina/colonna.
   -------------------------------------------------------------------------- */
@media (max-width: 820px){
  #sezione-lettore.reader-wrap{
    max-width: none;
    width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding-left: 0;
    padding-right: 0;
  }

  #sezione-lettore .reader-aspect{
    width: 100%;
  }

  #pdfjs-frame{
    width: 100%;
    display: block;
  }
}


/* --------------------------------------------------------------------------
   6) MOBILE 320–480 — PADDING “COERENTE” SENZA COMPETERE CON LA COPERTINA
   --------------------------------------------------------------------------
   - Il padding è applicato SOLO al reader.
   - Non si tocca .contenitore-proporzionato: la colonna e la copertina restano
     sotto il controllo del CSS base (allineamento blindato).
   -------------------------------------------------------------------------- */
@media (max-width: 480px){
  .reader-wrap{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Didascalie nel contesto e-book: più leggibili su mobile. */
  figure.contenitore-proporzionato figcaption{
    font-size: clamp(0.9rem, 2.8vw, 1rem);
    line-height: 1.45;
    margin-top: 0.5rem;
  }
}



/* ================================================================
   AZIONI FASCICOLO — pulsanti e categoria editorialmente distinti
   ================================================================ */
.categoria-riviste{
  margin:0 0 1rem;
  font-weight:700;
  letter-spacing:.02em;
}

/* ========================================================================== 
   CONTRATTO UNICO — AZIONI, RITORNI E LETTORE DEI FASCICOLI
   Scopo: uniformare le dieci radici senza alterare i contenuti editoriali.
   Nota tecnica: i collegamenti di ritorno sono impilati e centrati; i comandi
   sono esterni al box descrittivo e adottano il rendering del modello IT.
   ========================================================================== */
.collegamenti-riviste{
  display:grid;
  justify-items:center;
  gap:.45rem;
  width:100%;
  margin:1rem auto 0;
  text-align:center;
}

.azioni-riviste{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  width:100%;
  max-width:var(--larghezza-colonna, 360px);
  margin:1.25rem auto;
  text-align:center;
}

.azioni-riviste button,
.azioni-riviste a{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.75rem;
  padding:.65rem 1rem;
  border:2px solid #000;
  border-radius:.35rem;
  background:#000;
  color:#fff;
  font:inherit;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
}

.azioni-riviste button:hover,
.azioni-riviste a:hover,
.azioni-riviste button:focus-visible,
.azioni-riviste a:focus-visible{
  background:#fff;
  color:#000;
  outline:3px solid #777;
  outline-offset:2px;
}

#sezione-lettore.reader-wrap > .azioni-riviste{
  max-width:100%;
}