/**
 * FEC Volantino — stili front-end del volantino sfogliabile.
 *
 * Prima del JS (o se il JS non parte) le pagine restano impilate verticalmente
 * e perfettamente leggibili (progressive enhancement). Quando il flipbook è
 * pronto, .fec-vol__book--ready nasconde il fallback e mostra il libro.
 */

.fec-vol {
  --fec-vol-accent: #d8232a;
  --fec-vol-ink: #1b1f24;
  --fec-vol-surface: #ffffff;
  --fec-vol-stage: #eef1f5;
  --fec-vol-radius: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  text-align: center;
}

.fec-vol__title {
  font-size: 1.6rem;
  margin: 0 0 16px;
  color: var(--fec-vol-ink);
}

/* --- Toolbar --- */
.fec-vol__toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.fec-vol__group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--fec-vol-ink);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.fec-vol__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  /* Niente doppio-tap-zoom del browser sui pulsanti: due tap ravvicinati su
     +/- ingrandivano la pagina invece del volantino. */
  touch-action: manipulation;
}

.fec-vol__btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.fec-vol__btn:active {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(0.94);
}

.fec-vol__btn:focus-visible {
  outline: 3px solid var(--fec-vol-accent);
  outline-offset: 2px;
}

.fec-vol__btn[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.fec-vol__btn--reset svg {
  display: block;
}

/* Pulsante schermo intero: mostra icona "entra" o "esci" in base allo stato. */
.fec-vol__ic {
  display: block;
}
.fec-vol__ic--exit {
  display: none;
}
.fec-vol--fs .fec-vol__ic--enter {
  display: none;
}
.fec-vol--fs .fec-vol__ic--exit {
  display: block;
}

.fec-vol__counter {
  min-width: 68px;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}

/* --- Stage / book --- */
.fec-vol__stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 16px;
  background: var(--fec-vol-stage);
  border-radius: var(--fec-vol-radius);
  overflow: hidden;
  box-sizing: border-box;
  /* A scala 1: scroll verticale nativo, swipe orizzontale allo sfoglio. */
  touch-action: pan-y;
}

.fec-vol__book {
  margin: 0 auto;
  max-width: 100%;
  will-change: transform;
}

/* Mentre è ingrandito lo stage cattura tutti i gesti (pan/pinch). */
.fec-vol--zoomed .fec-vol__stage {
  touch-action: none;
  cursor: grab;
}

.fec-vol--zoomed .fec-vol__stage:active {
  cursor: grabbing;
}

/* Fallback (pre-JS): pagine impilate, immagini responsive. */
.fec-vol__book:not(.fec-vol__book--ready) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.fec-vol__book:not(.fec-vol__book--ready) .fec-vol__page {
  width: 100%;
  max-width: 820px;
}

.fec-vol__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Quando il flipbook è attivo, StPageFlip gestisce il dimensionamento:
   le immagini devono riempire la pagina senza deformarsi. */
.fec-vol__book--ready .fec-vol__page {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.fec-vol__book--ready .fec-vol__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.fec-vol__hint {
  margin-top: 14px;
  font-size: 0.85rem;
  color: #6b7280;
}

.fec-vol__empty {
  padding: 40px 16px;
  color: #666;
}

/* Ombra del flipbook gestita dalla libreria; qui solo rifinitura dello stage. */
.fec-vol__book--ready {
  touch-action: pan-y;
}

/* --- Schermo intero --- */
/* Fallback CSS (iOS Safari non espone la Fullscreen API sugli elementi). */
.fec-vol--fs {
  position: fixed;
  inset: 0;
  z-index: 9999;
  max-width: none;
  margin: 0;
  padding: 10px;
  background: #0f1216;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fec-vol--fs .fec-vol__title {
  display: none;
}

.fec-vol--fs .fec-vol__toolbar {
  margin-bottom: 10px;
}

.fec-vol--fs .fec-vol__stage {
  flex: 1 1 auto;
  background: #0f1216;
}

.fec-vol--fs .fec-vol__hint {
  display: none;
}

/* Quando è attiva la Fullscreen API nativa, il contenitore riempie già lo
   schermo: replichiamo lo stesso layout scuro. */
.fec-vol:fullscreen {
  background: #0f1216;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fec-vol:fullscreen .fec-vol__title,
.fec-vol:fullscreen .fec-vol__hint {
  display: none;
}
.fec-vol:fullscreen .fec-vol__stage {
  flex: 1 1 auto;
  background: #0f1216;
}

@media (max-width: 640px) {
  .fec-vol {
    padding: 8px;
  }
  .fec-vol__title {
    font-size: 1.3rem;
  }
  .fec-vol__stage {
    padding: 8px;
  }
}

/* Rispetta la preferenza di movimento ridotto. */
@media (prefers-reduced-motion: reduce) {
  .fec-vol__btn,
  .fec-vol__book {
    transition: none !important;
  }
}