/* --- The stage ---------------------------------------------- */
.brochure {
  --bpage-max: 620px;   /* column width; the flip layout ignores it */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 34px);
}

/* --- Which pages are in the document ------------------------- */
.brochure__book .bpage:not(:first-child) { display: none; }
.brochure__book.is-column .bpage:not(:first-child) { display: block; }

/* --- Fallback: a plain stacked column ------------------------ */
.brochure__book:not(.is-flip) .bpage {
  position: static;
  width: 100%;
  max-width: var(--bpage-max);
  margin-inline: auto;
  box-shadow: var(--shadow-2);
}
.brochure__book:not(.is-flip) .bpage + .bpage { margin-top: clamp(16px, 2.4vw, 28px); }
.brochure__book:not(.is-flip) .bpage img { width: 100%; height: auto; }

.brochure__book:not(.is-flip) ~ .brochure__bar { display: none; }

/* --- StPageFlip base ----------------------------------------- */
.stf__parent {
  position: relative;
  display: block;
  box-sizing: border-box;
  transform: translateZ(0);
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.stf__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.stf__block {
  position: absolute;
  width: 100%; height: 100%;
  box-sizing: border-box;
  perspective: 2000px;
}
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

/* --- Flip layout --------------------------------------------- */

.brochure__book { width: 100%; }

@media (min-width: 810px) {
  .brochure__book.is-flip {
    max-width: clamp(560px, calc((100svh - 260px) / 0.7076), 1200px) !important;
  }
}

.brochure__book.is-flip {
  transform: translate3d(var(--book-shift, 0px), 0, 0);
  transition: transform 620ms var(--ease-out);
}

.brochure__book.is-flip .bpage {
  background: #fff;
  box-shadow: 0 0 12px -2px rgba(11, 13, 16, .28);
  overflow: hidden;
}
.brochure__book.is-flip .bpage img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Control bar --------------------------------------------- */
.brochure__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
}
.brochure__bar .btn { height: 44px; padding: 0 20px; }
.brochure__bar .btn[disabled] { opacity: .35; cursor: default; }
.brochure__bar .btn[disabled]:hover { background: transparent; }

.brochure__count {
  min-width: 11ch;
  margin: 0;
  text-align: center;
  color: var(--ink-500);
}

/* --- Download ------------------------------------------------ */
.brochure__get { display: flex; justify-content: center; }

/* --- Fullscreen ---------------------------------------------- */

.brochure:fullscreen {
  background: #fff;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
}
.brochure:fullscreen .brochure__get { display: none; }

@media (max-width: 640px) {
  .brochure__bar { gap: var(--s-2) var(--s-3); }
  .brochure__bar .btn { padding: 0 15px; font-size: 15px; }
  .brochure__count { min-width: 100%; order: 3; }
}

/* --- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .stf__outerShadow,
  .stf__innerShadow,
  .stf__hardShadow,
  .stf__hardInnerShadow { display: none !important; }
  .brochure__book.is-flip .bpage { box-shadow: none; }
}