/* MAC Scaffolding — /company-profile brochure
   ============================================================
   Page-scoped. Loaded by company-profile.html only, never from
   chrome/head.html: mac.css is already at its whole-site budget
   (performance.md, one file ≤ 12 KB) and eight pages should not
   pay for one page's flipbook.

   Two layouts over one set of markup. The twelve .bpage elements
   are the readable stacked column by default; brochure.js adds
   .is-flip to the stage only once loadFromHTML() has returned, so
   a blocked, failed or half-initialised script degrades to the
   column rather than to a blank rectangle.
   ============================================================ */

/* --- 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 -------------------------
   Only the cover, until something says otherwise.

   Not a nicety — measured. brochure.js is deferred, so for a moment
   during parse the twelve pages are a real stacked column, and the
   browser resolves loading="lazy" against that layout before the
   script runs. Three pages fall inside Chrome's lazy margin and their
   fetches are already in flight by the time StPageFlip hides them:
   182 KB on a DPR 1 phone and about 360 KB at DPR 2, against CAP-12's
   200 KB after-the-first ceiling, for artwork nobody asked to see.
   Laying out only the cover costs those fetches nothing.

   The column is restored by whichever of the two things that need it
   happens: .is-column, which brochure.js sets on every bail-out path,
   or the <noscript> rule in the page for a reader with no script at
   all. What is not covered is brochure.js failing to load while this
   stylesheet succeeds — that reader gets the cover and the PDF
   download, which is a thin page but not a broken one. */
.brochure__book .bpage:not(:first-child) { display: none; }
.brochure__book.is-column .bpage:not(:first-child) { display: block; }

/* --- Fallback: a plain stacked column ------------------------
   Geometry only; the rules above own display. Also the state a
   half-initialised book lands in — HTMLPage stamps .stf__item on each
   page as it is adopted, so brochure.js strips that and the inline
   geometry in its catch before setting .is-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; }

/* Controls steer a book that is not there yet, so they stay out of
   the document until the flip is live. */
.brochure__book:not(.is-flip) ~ .brochure__bar { display: none; }

/* --- StPageFlip base ----------------------------------------
   Inlined from the library's src/Style/stPageFlip.css so the page
   costs one stylesheet rather than two. Upstream spells the
   wrapper rule .sft__wrapper while the script emits .stf__wrapper,
   so that rule reaches nothing; it is corrected here. The canvas
   rule is dropped — that is for image mode, and this is HTML mode.
   ------------------------------------------------------------ */
.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 --------------------------------------------- */
/* The stage centres its children, so the book has to claim the row
   in both layouts or it would shrink to fit. */
.brochure__book { width: 100%; }

/* A two-up A4 spread across the full 1088px of the wrap stands 770px
   tall, so on a laptop the whole spread never fits and the controls sit
   below the fold — for a thing whose entire point is turning pages, that
   is the wrong shape.

   Capped by width, not height. The library gives the book its height by
   setting padding-bottom on .stf__wrapper as a percentage of the width
   (UI.setOrientationStyle), so a max-height leaves that ratio box at full
   size, overflowing the parent and covering the controls. Constraining
   the width instead shrinks the whole assembly — .stf__block reads the
   narrower container, each page halves it, and the ratio box follows.

   0.7076 is the landscape padding-bottom the library computes from the
   A4 settings, height / (width * 2). Dividing the height we can afford by
   it gives the width that produces it. 260px is what the page spends
   above and below the book: the 1p hero, the band's top padding, and the
   control row with its gap.

   !important because the library writes max-width inline in the UI
   constructor, and an inline declaration outranks any stylesheet rule
   that is not important. This is that override, not a specificity patch.

   Landscape only. In portrait the page is already about half as wide and
   scrolling one page is normal, so a cap there would shrink the artwork
   for nothing. */
@media (min-width: 810px) {
  .brochure__book.is-flip {
    max-width: clamp(560px, calc((100svh - 260px) / 0.7076), 1200px) !important;
  }
}
/* Closed book, centred; open book, centred.

   The library always reserves both halves of the spread, so a lone
   cover is drawn in the right half and a lone back cover in the left —
   each sitting half a page off centre. brochure.js measures the page
   and writes --book-shift to pull the closed book back to the middle,
   then releases it to 0 as the book opens, which is the slide across
   that a real flipbook makes. Overrides .stf__parent's translateZ(0)
   and keeps the compositing hint by staying on translate3d.

   No reduced-motion rule needed: mac.css collapses every transition
   duration to .01ms under it, so the book arrives centred without
   travelling. */
.brochure__book.is-flip {
  transform: translate3d(var(--book-shift, 0px), 0, 0);
  transition: transform 620ms var(--ease-out);
}

/* The library sets each page's width and height inline in px, so the
   artwork is told to fill it exactly. object-fit guards the one-pixel
   rounding difference between the A4 ratio and the computed box. */
.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; }

/* Fixed width so the counter does not shunt the buttons sideways as
   it steps from "1" to "10 – 11". ch on the mono face is stable. */
.brochure__count {
  min-width: 11ch;
  margin: 0;
  text-align: center;
  color: var(--ink-500);
}

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

/* --- Fullscreen ---------------------------------------------- */
/* :fullscreen paints the element's own background black by default,
   so the stage takes the page's white and centres the book in it. */
.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 ------------------------------------------
   motion.md: reduced motion resolves to the finished state, never
   to nothing. The page still turns and the counter still steps —
   what goes is the thousand-millisecond fold, its shadows and the
   corner that lifts under the pointer. brochure.js drops
   flippingTime, drawShadow and showPageCorners to match; these
   rules cover the shadow nodes already in the DOM. */
@media (prefers-reduced-motion: reduce) {
  .stf__outerShadow,
  .stf__innerShadow,
  .stf__hardShadow,
  .stf__hardInnerShadow { display: none !important; }
  .brochure__book.is-flip .bpage { box-shadow: none; }
}