/* ═══════════════════════════════════════════════════════════════
   Page-Flip Reader — Multi-page post reader with side arrows
   and page-turn animation.

   Each page shows its FULL content exactly as authored — no
   clipping, no scroll containers, no height constraints. Content
   is the natural height it would be in the editor.

   Only one page is visible at a time. Navigation via side arrows,
   keyboard, swipe, or dot indicator.
   ═══════════════════════════════════════════════════════════════ */

/* ── Reader wrapper — natural flow, no fixed height ── */
.page-flip-reader {
  position: relative;
  width: 100%;
  min-height: 50vh;
  perspective: 1200px;
}

/* ── Pages — only current page visible, natural height ── */
.page-flip-page {
  display: none;
  padding: 1.5rem 3.5rem;
  background: #fff;
  transform-origin: left center;
  backface-visibility: hidden;
}

/* Content width for readability — only constrain simple text blocks */
.page-flip-page > p,
.page-flip-page > h1,
.page-flip-page > h2,
.page-flip-page > h3,
.page-flip-page > h4,
.page-flip-page > h5,
.page-flip-page > h6,
.page-flip-page > ul,
.page-flip-page > ol,
.page-flip-page > blockquote {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* All other blocks (media-text, tables, galleries, etc.) get full width */
.page-flip-page img { max-width: 100%; height: auto; }
.page-flip-page .wp-block-table { width: 100%; }
.page-flip-page figure { max-width: 100%; }

/* Media & Text block: preserve the 50/50 grid layout from the editor */
.page-flip-page .wp-block-media-text {
  display: grid !important;
  grid-template-columns: 50% 1fr !important;
  width: 100%;
  max-width: 100%;
}
.page-flip-page .wp-block-media-text.is-stacked-on-mobile {
  /* Keep grid on desktop, stack only on mobile via media query below */
}
.page-flip-page .wp-block-media-text__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-flip-page .wp-block-media-text__content {
  padding: 0 8%;
  align-self: center;
}

/* ── Current page: visible, natural flow ── */
.page-flip-page.pf-active {
  display: block;
}

/* ── Flip animation: applied briefly during transition ── */
.page-flip-page.pf-flip-out-fwd {
  display: block;
  animation: pfFlipOut 0.5s ease-in forwards;
}
.page-flip-page.pf-flip-in-fwd {
  display: block;
  animation: pfFlipIn 0.5s ease-out forwards;
}
.page-flip-page.pf-flip-out-back {
  display: block;
  animation: pfFlipOutBack 0.5s ease-in forwards;
}
.page-flip-page.pf-flip-in-back {
  display: block;
  animation: pfFlipInBack 0.5s ease-out forwards;
}

@keyframes pfFlipOut {
  0%   { transform: rotateY(0deg); opacity: 1; }
  100% { transform: rotateY(-90deg); opacity: 0; }
}
@keyframes pfFlipIn {
  0%   { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0deg); opacity: 1; }
}
@keyframes pfFlipOutBack {
  0%   { transform: rotateY(0deg); opacity: 1; }
  100% { transform: rotateY(90deg); opacity: 0; }
}
@keyframes pfFlipInBack {
  0%   { transform: rotateY(-90deg); opacity: 0; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

/* ── Side Navigation Arrows — fixed to viewport ── */
.page-flip-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9990;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  opacity: 0.4;
  transition: opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.page-flip-nav:hover {
  opacity: 1;
}
.page-flip-nav:disabled {
  opacity: 0.1;
  cursor: default;
}
.page-flip-nav-prev { left: 8px; }
.page-flip-nav-next { right: 8px; }

.page-flip-nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: bold;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ── Page Indicator — fixed to bottom ── */
.page-flip-indicator {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9990;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 100px;
  color: #fff;
  font-size: 0.8rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.page-flip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: none;
}
.page-flip-dot.active {
  background: #fff;
  transform: scale(1.3);
}
.page-flip-dot:hover:not(.active) {
  background: rgba(255, 255, 255, 0.6);
}

.page-flip-page-label {
  font-size: 0.75rem;
  white-space: nowrap;
  margin: 0 4px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .page-flip-page { padding: 1rem 1rem; }
  .page-flip-nav { width: 36px; height: 60px; }
  .page-flip-nav-prev { left: 2px; }
  .page-flip-nav-next { right: 2px; }
  .page-flip-nav-icon { width: 32px; height: 32px; font-size: 1.1rem; }
  .page-flip-indicator { padding: 6px 12px; gap: 6px; }
  .page-flip-dot { width: 8px; height: 8px; }
  /* Stack media-text blocks on mobile */
  .page-flip-page .wp-block-media-text {
    grid-template-columns: 100% !important;
  }
}

/* ── Print: show all pages ── */
@media print {
  .page-flip-page { display: block !important; page-break-after: always; }
  .page-flip-nav, .page-flip-indicator { display: none !important; }
}