/*
 * 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));
  }
}

.comic-flipbook {
  margin: 0 auto;
  touch-action: pan-y;
}

.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;
}