/* ==========================================================================
   Evolver flipbook — styles
   Aztec Media, 2026-08-18. Adapted from the portable flipbook-kit and
   re-themed onto Evolver's own palette (css/global.css).

   Everything themeable is a custom property on .flipbook. Nothing else in
   this file should need touching to restyle the book.
   ========================================================================== */

/* The component owns its own box model. Relying on the host site's reset is
   how the stage ends up 16px wider than its parent (width:100% + padding under
   content-box), which pushes the book off the side of a phone screen. */
.flipbook,
.flipbook *,
.flipbook *::before,
.flipbook *::after {
  box-sizing: border-box;
}

.flipbook {
  --fb-stage: #242424;         /* dark surround the book sits on */
  --fb-accent: #36a2bf;        /* spinner, button hover, glow    */
  --fb-control: #242424;       /* toolbar buttons                */
  --fb-paper: #ffffff;         /* page background, toolbar text  */
  --fb-rule: #e6e7e9;          /* hairlines                      */
  --fb-text-xs: 0.8125rem;
  --fb-text-sm: 0.9375rem;

  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: inherit;
}

/* The old FlippingBook iframes were pinned to a fixed pixel height by
   pages.css / global.css. The book computes its own height from the page
   aspect ratio, so neutralise those rules where it is dropped in. */
#magazine #copy #ebook.flipbook,
.home__ebook.flipbook {
  height: auto;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */
.flipbook__stage {
  position: relative;
  width: 100%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(54, 162, 191, 0.14), transparent 62%),
    var(--fb-stage);
  overflow: hidden;
  padding: 1rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* StPageFlip sizes itself from this box, so the stage has to be the right
     shape before the book measures. Narrow screens show ONE page (portrait
     mode), which is 1.38x taller than it is wide; wide screens show a
     two-page spread. Getting this wrong doesn't just look off — the book
     overflows the viewport sideways. */
  aspect-ratio: 0.72 / 1;
  min-height: 18rem;
}

@media only screen and (min-width: 950px) {
  .flipbook__stage {
    padding: 1.75rem 1.5rem;
    aspect-ratio: 1.55 / 1;
    max-height: 82vh;
  }
}

.flipbook__book {
  width: 100%;
  height: 100%;
  /* Flex items refuse to shrink below their content by default, which is
     what lets the book push past the edge of a phone screen. */
  min-width: 0;
  max-width: 1180px;
  visibility: hidden;
  transition: transform 0.4s ease;
}

.flipbook.is-ready .flipbook__book {
  visibility: visible;
}

/* The lone-cover offset is set as an inline translateX by centreSpread() in
   flipbook.js, measured from the real page rects. It is deliberately not a
   percentage here: percentages resolve against the block width, which
   StPageFlip sets itself and which differs per placement. The transition
   above is what makes that shift glide rather than snap. */

@media (prefers-reduced-motion: reduce) {
  .flipbook__book { transition: none; }
}

.flipbook__page {
  background: var(--fb-paper);
  overflow: hidden;
}

.flipbook__page__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--fb-paper);
  user-select: none;
  -webkit-user-drag: none;
}

/* --------------------------------------------------------------------------
   Loader
   -------------------------------------------------------------------------- */
.flipbook__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fb-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flipbook__loader--failed {
  gap: 0.75rem;
  padding: 0 1.5rem;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

.flipbook__fallback-link {
  color: var(--fb-paper);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.flipbook__fallback-link:hover,
.flipbook__fallback-link:focus-visible { color: var(--fb-accent); }

.flipbook__spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--fb-accent);
  border-radius: 50%;
  animation: flipbook-spin 0.9s linear infinite;
}

@keyframes flipbook-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.flipbook__toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.flipbook__btn {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border-radius: 50%;
  background: var(--fb-control);
  color: var(--fb-paper);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}

.flipbook__btn svg { width: 1.125rem; height: 1.125rem; display: block; }

.flipbook__btn:hover,
.flipbook__btn:focus-visible {
  background: var(--fb-accent);
  transform: translateY(-1px);
}

.flipbook__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.flipbook__btn--download {
  background: transparent;
  color: var(--fb-control);
  border: 1px solid var(--fb-control);
}

.flipbook__btn--download:hover { background: var(--fb-control); color: var(--fb-paper); }

.flipbook__count {
  font-size: var(--fb-text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--fb-control);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.35rem;
}

.flipbook__count__sep { opacity: 0.4; }

.flipbook__jump {
  width: 3.25rem;
  font: inherit;
  font-size: var(--fb-text-xs);
  text-align: center;
  padding: 0.3rem 0.2rem;
  border: 1px solid var(--fb-rule);
  border-radius: 0.2rem;
  background: #fff;
  color: var(--fb-control);
}

.flipbook__toolbar__sep {
  width: 1px;
  height: 1.4rem;
  background: rgba(36, 36, 36, 0.18);
  margin: 0 0.25rem;
}

/* --------------------------------------------------------------------------
   Thumbnail contents strip
   -------------------------------------------------------------------------- */
.flipbook__thumbs {
  display: none;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.75rem;
  background: var(--fb-rule);
  scrollbar-width: thin;
}

.flipbook__thumbs.is-open { display: flex; }

.flipbook__thumb {
  flex: 0 0 auto;
  border: 2px solid transparent;
  background: #fff;
  padding: 0;
  cursor: pointer;
  display: block;
  line-height: 0;
  position: relative;
}

.flipbook__thumb img { display: block; width: 68px; height: auto; }

.flipbook__thumb span {
  position: absolute;
  inset: auto 0 0 0;
  font-size: 0.625rem;
  line-height: 1.4;
  background: rgba(36, 36, 36, 0.75);
  color: #fff;
  text-align: center;
}

.flipbook__thumb:hover { border-color: var(--fb-accent); }
.flipbook__thumb.is-current { border-color: var(--fb-accent); }

/* --------------------------------------------------------------------------
   Zoom overlay — the readable view. The book runs on the small renders; this
   is the only place the large ones are fetched, one page at a time.
   -------------------------------------------------------------------------- */
.flipbook__zoom {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 20, 20, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 3.5rem 1rem 1rem;
}

.flipbook__zoom[hidden] { display: none; }

.flipbook__zoom__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  background: #fff;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.5);
}

@media only screen and (min-width: 950px) {
  /* Above the fold on a laptop the page is legible at full render width;
     let it overflow and scroll rather than shrinking it back to unreadable. */
  .flipbook__zoom__img { max-width: none; width: min(1650px, 96vw); }
}

.flipbook__zoom.is-loading .flipbook__zoom__img { opacity: 0.25; }

.flipbook__zoom__bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(20, 20, 20, 0.9);
  color: #fff;
}

.flipbook__zoom__bar button {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.flipbook__zoom__bar button:hover { background: var(--fb-accent); }
.flipbook__zoom__bar button svg { width: 1.125rem; height: 1.125rem; }

.flipbook__zoom__label {
  font-size: var(--fb-text-xs);
  letter-spacing: 0.16em;
}

/* --------------------------------------------------------------------------
   Fullscreen. Flattened out of native CSS nesting so older browsers keep it;
   :is() parses forgivingly, so a browser that doesn't know :fullscreen
   ignores that half rather than dropping the whole rule.
   -------------------------------------------------------------------------- */
.flipbook:fullscreen,
.flipbook.is-fullscreen {
  background: var(--fb-stage);
  padding: 1rem;
  gap: 0.75rem;
}

:is(.flipbook:fullscreen, .flipbook.is-fullscreen) .flipbook__stage {
  flex: 1;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
}

:is(.flipbook:fullscreen, .flipbook.is-fullscreen) .flipbook__toolbar {
  background: rgba(0, 0, 0, 0.4);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  align-self: center;
}

:is(.flipbook:fullscreen, .flipbook.is-fullscreen) .flipbook__count { color: var(--fb-paper); }

:is(.flipbook:fullscreen, .flipbook.is-fullscreen) .flipbook__btn--download {
  color: var(--fb-paper);
  border-color: rgba(255, 255, 255, 0.4);
}

:is(.flipbook:fullscreen, .flipbook.is-fullscreen) .flipbook__btn--download:hover {
  background: var(--fb-paper);
  color: var(--fb-stage);
}

:is(.flipbook:fullscreen, .flipbook.is-fullscreen) .flipbook__toolbar__sep {
  background: rgba(255, 255, 255, 0.25);
}

/* One icon at a time. These have to out-specify `.flipbook__btn svg`, which
   sets display:block — without the extra class on the svg both the expand and
   collapse glyphs render inside the same round button. */
.flipbook__btn svg.flipbook__icon-collapse { display: none; }

:is(.flipbook:fullscreen, .flipbook.is-fullscreen) .flipbook__btn svg.flipbook__icon-expand { display: none; }
:is(.flipbook:fullscreen, .flipbook.is-fullscreen) .flipbook__btn svg.flipbook__icon-collapse { display: block; }

/* Labels that exist for screen readers only. */
.flipbook__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Host-page placements
   -------------------------------------------------------------------------- */

/* Homepage. The old iframe was pinned to 18rem/38rem by global.css via
   .home__ebook; the book sizes itself instead, so it gets its own wrapper
   class. Capping the stage near the old height keeps everything below it —
   the Instagram feed, the welcome copy — sitting where the client expects. */
.home__flipbook { margin-top: 1rem; }

@media only screen and (min-width: 950px) {
  .home__flipbook { margin-top: 2rem; }
  .home__flipbook .flipbook__stage { max-height: 40rem; }
}