/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Reader breaks out of the centered column and is sized from viewport height
 * for the two-page spread (width = spread-height * 1.5). The 1024px query
 * accounts for the wizard layout's 220px sidebar. */
.comic-reader,
.comic-reader-bar {
  width: min(92vw, calc((100vh - 9rem) * 1.5));
  width: min(92vw, calc((100svh - 9rem) * 1.5));
  margin-left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 1024px) {
  .comic-reader,
  .comic-reader-bar {
    width: min(calc(100vw - 220px - 3rem), calc((100vh - 9rem) * 1.5));
    width: min(calc(100vw - 220px - 3rem), calc((100svh - 9rem) * 1.5));
  }
}

/* Phones in landscape have so little vh that the height-driven formula above
 * (however much chrome it reserves) still starves the reader — a tall
 * portrait comic page needs a lot of scroll room regardless. Rotating is a
 * deliberate "make it bigger" gesture, so just fill the width and let the
 * page scroll vertically to see the rest. */
@media (orientation: landscape) and (max-width: 1023px) {
  .comic-reader,
  .comic-reader-bar {
    width: 94vw;
  }
}

.comic-flipbook {
  margin: 0 auto;
}

/* StPageFlip injects its own stylesheet setting `.stf__parent { touch-action:
 * pan-y }` on this same element, which blocks native pinch-to-zoom on iOS.
 * Pair the selector with .stf__parent so ours wins on specificity regardless
 * of injection order. `manipulation` (not the pan-y/pinch-zoom longhand
 * combo — Safari doesn't reliably honor that combination) permits pinch and
 * vertical scroll; there's no horizontal overflow on this element for
 * StPageFlip's own drag-to-flip gesture to conflict with. */
.comic-flipbook.stf__parent {
  touch-action: manipulation;
}

.comic-flip-page {
  background: #fff;
  overflow: hidden;
}

.comic-flip-page > div {
  width: 100%;
  height: 100%;
}

.comic-flip-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}