/* Phase 07B: mobile-first ePaper layout. Desktop three-column reader is unchanged.
   Override legacy responsive grid rules only below the tablet breakpoint. */
@media (max-width: 800px) {
  .mrep-classic-layout,
  .mrep-demo-01 .mrep-classic-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }
  .mrep-classic-center,
  .mrep-demo-01 .mrep-classic-center {
    order: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .mrep-classic-left,
  .mrep-demo-01 .mrep-classic-left {
    order: 2;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
  }
  .mrep-classic-right,
  .mrep-demo-01 .mrep-classic-right {
    order: 3;
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .mrep-classic-thumbs,
  .mrep-demo-01 .mrep-classic-thumbs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    box-sizing: border-box;
    padding: 10px;
  }
  .mrep-classic-thumb,
  .mrep-demo-01 .mrep-classic-thumb {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
  .mrep-classic-thumb img,
  .mrep-demo-01 .mrep-classic-thumb img {
    width: 100%;
    height: 116px;
    aspect-ratio: auto;
    object-fit: contain;
  }
  .mrep-reader,
  .mrep-demo-01 .mrep-reader { min-width: 0; }
  .mrep-reader-stage,
  .mrep-demo-01 .mrep-reader-stage {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}
@media (max-width: 580px) {
  .mrep-demo-01 { padding-left: 0 !important; padding-right: 0 !important; }
  .mrep-demo-01 .mrep-classic-layout { gap: 9px; }
  .mrep-demo-01 .mrep-reader { padding: 6px 0; }
  .mrep-demo-01 .mrep-classic-center { padding: 3px; }
  .mrep-reader-stage,
  .mrep-demo-01 .mrep-reader-stage {
    min-height: 0;
    height: min(72svh, 720px);
  }
  .mrep-classic-thumb,
  .mrep-demo-01 .mrep-classic-thumb {
    flex-basis: 88px;
    width: 88px;
    min-width: 88px;
  }
  .mrep-classic-thumb img,
  .mrep-demo-01 .mrep-classic-thumb img { height: 106px; }
  .mrep-demo-01 .mrep-classic-thumb span { font-size: 11px; }
}

/* 07C: allow the document to scroll vertically from the newspaper surface.
   Zoomed pages retain drag-to-pan; desktop and fullscreen keep prior behavior. */
@media (pointer: coarse) and (max-width: 800px) {
  .mrep-reader-stage:not(:fullscreen),
  .mrep-demo-01 .mrep-reader-stage:not(:fullscreen) {touch-action:pan-y;}
  .mrep-reader-stage.is-zoomed:not(:fullscreen),
  .mrep-demo-01 .mrep-reader-stage.is-zoomed:not(:fullscreen) {touch-action:none;}
}