/* ==========================================================================
   booklet.css: the conference booklet inside the magazine reader
   --------------------------------------------------------------------------
   The reader (css/main.css section "magazine", js/magazine.js) is unchanged;
   this file only adds what the booklet needs: A4 pages shown as images, a
   larger book once it is open, and a fullscreen view that can scroll.
   ========================================================================== */

/* Two A4 pages side by side (each page image is 1600 x 2264). */
.sf-book-a4 .sf-spread { aspect-ratio: 3200 / 2264; }

/* Open book: as large as the screen allows, never taller than the window. */
.sf-book.sf-book-a4 { max-width: min(1060px, max(560px, calc((100vh - 230px) * 1.4134))); }

.sf-book-a4 .sf-pg.sf-pg-img { padding: 0; background: #F3EEE3; }
.sf-pg-img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
/* Blank paper on the back of a page in the one-page (phone) view. */
.sf-book-a4 .sf-pg.sf-pg-blank { padding: 0; background: #FDFAF3; }

/* Fold shading over the page images, so the spine still reads as a fold. */
.sf-book-a4 .sf-face-f::after,
.sf-book-a4 .sf-face-b::after { z-index: 12; width: 9%; }

/* Download button sits in the glass controls next to fullscreen / share. */
a.sf-ctrl-btn, a.sf-ctrl-btn:focus { color: var(--sf-charcoal); text-decoration: none; }
a.sf-ctrl-btn:hover { color: var(--sf-gold); }

/* Fullscreen: a desk-coloured backdrop and room to scroll to the controls. */
.sf-mag-hero:fullscreen { overflow-y: auto; background: #F4EEE2; padding-top: 24px; }
.sf-mag-hero:fullscreen .sf-book.sf-book-a4 { max-width: min(calc(100% - 128px), calc((100vh - 150px) * 1.4134)); }

@media (max-width: 1279.98px) {
  .sf-book.sf-book-a4 { max-width: min(calc(100% - 128px), max(560px, calc((100vh - 230px) * 1.4134))); }
}
@media (max-width: 767.98px) {
  .sf-book.sf-book-a4 { max-width: 100%; }
  .sf-book-a4 .sf-spread { aspect-ratio: 1600 / 2264; }
  .sf-mag-hero:fullscreen .sf-book.sf-book-a4 { max-width: min(100%, calc((100vh - 150px) * 0.7067)); }
}