/* PDF flipbook for the resource pages that carry one — the two Young Labels
   flipbooks and the two Young Socks ones. Loaded per page via the master
   template's extra_head block. Uses the site design tokens defined on :root in
   styles.css. */

.flipbook {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.flipbook__stage {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px clamp(8px, 3vw, 40px);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(45, 181, 218, .12), transparent 60%),
    linear-gradient(180deg, #eaf4fa, #dfeef6);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* The on-page viewer holds a single closed cover, so there is no centre
   gutter to draw here — the reader inside .flipbook-modal gets its gutter
   from StPageFlip's own page shadows. */
.flipbook__book {
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* StPageFlip's image mode never puts an <img> in a page — it draws every page
   into one of its own canvases. So the reader's sharpness is settled by that
   canvas draw, not by CSS here; flipbook.js raises the canvas smoothing quality
   for it. What is left to style is the paper itself and the cover's own <img>. */
.flipbook .page,
.flipbook-modal .page {
  background: var(--white);
}

.flipbook-modal .stf__canvas {
  /* The canvas is one bitmap stretched over the whole spread; keep the viewer
     from dragging it out as an image. */
  -webkit-user-drag: none;
  user-select: none;
}

/* ── Closed cover ─────────────────────────────────────────────────────────
   The first page of the PDF, angled so it reads as a book sitting on the
   stage. Clicking anywhere on it opens the reader. */
.flipbook__cover {
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 26px 52px rgba(13, 49, 72, .32);
  transform: perspective(1500px) rotateY(-10deg);
  transition: transform .35s ease, box-shadow .35s ease;
}

.flipbook__cover:hover,
.flipbook__cover:focus-visible {
  transform: perspective(1500px) rotateY(0deg) translateY(-5px);
  box-shadow: 0 36px 64px rgba(13, 49, 72, .4);
}

/* The spine — a soft dark edge down the bound side, over the cover art. */
.flipbook__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(90deg, rgba(4, 18, 28, .5), rgba(4, 18, 28, 0) 22%);
  pointer-events: none;
}

.flipbook__cover-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--white);
  -webkit-user-drag: none;
  user-select: none;
}

.flipbook__cover-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(6, 19, 29, .84);
  color: var(--white);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

.flipbook__cover:hover .flipbook__cover-hint,
.flipbook__cover:focus-visible .flipbook__cover-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* Loading state */
.flipbook__loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--cobalt);
  font-weight: 500;
}

.flipbook__loader p {
  margin: 0;
  color: var(--muted);
}

.flipbook__spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(0, 114, 188, .18);
  border-top-color: var(--cobalt);
  animation: flipbook-spin .8s linear infinite;
}

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

.flipbook.is-ready .flipbook__loader {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.flipbook.is-error .flipbook__spinner {
  display: none;
}

/* is-ready hides the loader panel, and the error state sets both classes — the
   book is done loading, it just has nothing to show. Keep the panel up so the
   message and its "open the PDF" link stay readable. */
.flipbook.is-error .flipbook__loader {
  opacity: 1;
  visibility: visible;
}

/* Button shape shared with the reader modal, which re-tints it for the dark
   surround. The on-page viewer shows only a closed cover, so it has no controls
   row of its own — only the modal does. */
.flipbook__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--cobalt);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.flipbook__btn:hover {
  background: var(--cobalt);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 114, 188, .28);
}

.flipbook__btn:disabled {
  opacity: .4;
  cursor: default;
  transform: none;
  box-shadow: none;
  background: var(--white);
  color: var(--grey);
}

.flipbook__btn--ghost {
  background: transparent;
}

/* Fullscreen now belongs to the reader modal — the on-page viewer only ever
   shows a closed cover, so it has no fullscreen state of its own. */

@media (max-width: 640px) {
  .flipbook__stage {
    min-height: 320px;
    padding: 18px 8px;
  }
}

/* ===================================================================
   Company Profile — split info / viewer layout
   =================================================================== */

.book-page {
  padding-top: 80px;
  padding-bottom: 80px;
}

.book-page__crumbs {
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: .72rem;
  text-transform: capitalize;
}

.book-page__crumbs span {
  display: flex;
  gap: 9px;
}

.book-page__crumbs i {
  font-style: normal;
  color: var(--line);
}

.book-page__crumbs a:hover {
  color: var(--cobalt);
}

/* The copy column takes five twelfths and the book seven — the book is the
   reason for the page, so it gets the larger half. (There is no Bootstrap grid
   in this project, so col-md-5 / col-md-7 is these fr ratios.) */
.book-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  align-items: center;
}

.book-split__info {
  position: sticky;
  top: 150px;
  padding-top: 12px;
}

.book-split__info .eyebrow {
  margin-bottom: 20px;
}

/* Sized for the narrow aside — the ≤1100px breakpoint scales it back up once
   the column goes full width. */
.book-split__title {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 2.4vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--dark);
}

.book-split__lead {
  margin: 0 0 28px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 1.05rem;
}

.book-split__meta {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.book-split__meta li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--ink);
}

.book-split__meta svg {
  flex: 0 0 22px;
  color: var(--cobalt);
  margin-top: 2px;
}

.book-split__meta span {
  display: grid;
  gap: 2px;
}

.book-split__meta small {
  color: var(--grey);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.book-split__meta strong {
  font-weight: 550;
  color: var(--dark);
}

.book-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.book-split__actions .button {
  flex: 1 1 auto;
  min-width: 180px;
}

.book-split__scroll {
  justify-content: center;
  gap: 8px;
}

.book-split__viewer {
  min-height: 580px;
}

/* The stage now holds a single cover rather than a spread, so it sizes to
   the book instead of a fixed viewport-bounded height. The min-height only
   keeps the absolutely-positioned loader from collapsing while the cover
   renders. */
.book-split__viewer .flipbook__stage {
  min-height: 440px;
  padding-block: clamp(26px, 4vw, 46px);
  padding-inline: clamp(8px, 1.4vw, 22px);
}

@media (max-width: 1100px) {
  .book-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .book-split__info {
    position: static;
    padding-top: 0;
  }

  .book-split__title {
    max-width: 720px;
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    letter-spacing: -.04em;
    line-height: 1.05;
  }
}

@media (max-width: 640px) {
  .book-page {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .book-split__actions {
    flex-direction: column;
  }

  .book-split__actions .button {
    width: 100%;
    flex: none;
  }
}

/* ===================================================================
   Reader — full-screen modal opened from the cover
   ===================================================================
   Built by flipbook.js and appended to <body>, so every flipbook page gets
   the same reader without repeating the markup in four templates. Dark
   surround, and the spread given as much of the viewport as it can use: a
   portrait spread in a landscape window is always short of height, so nothing
   gets to sit in a row above or below it. The paging arrows flank it inside the
   stage and the page count and sound toggle float over the top strip. */

body.flipbook-locked {
  overflow: hidden;
}

.flipbook-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px clamp(8px, 1.6vw, 26px);
  background: rgba(6, 19, 29, .95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: flipbook-modal-in .28s ease both;
}

@keyframes flipbook-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The stage is the whole viewport minus the modal padding — nothing else in
   flow shares it, so the spread gets every pixel of height going. flex-basis 0
   keeps its height independent of the book inside it; a content-driven height
   would feed back on itself when the script measures it. */
.flipbook-modal__stage {
  position: relative;
  flex: 1 1 0%;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Takes the width left between the two arrows, and nothing more — flex-basis 0
   means its width is the leftover rather than its own content, which is what
   lets the script measure it before the book exists. */
.flipbook-modal__book {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Paging arrows: flex items beside the spread rather than a row beneath it, so
   they cost width (which a portrait spread has spare) instead of height. */
.flipbook-modal__nav {
  flex: 0 0 auto;
}

/* StPageFlip's stretch sizing takes the element it is handed to 100% of that
   element's parent width, so the width the book should occupy is set inline on
   this frame instead — an inline width on the book element itself is
   overwritten by the library. flex 0 0 auto keeps the frame at that measured
   width rather than letting the flex line shrink it. */
.flipbook-modal__book-frame {
  position: relative;
  flex: 0 0 auto;
  max-width: 100%;
}

/* The element StPageFlip is constructed on. It fills the frame, and the
   library sets its height from the spread's aspect ratio. */
.flipbook-modal__book-inner {
  position: relative;
  width: 100%;
}

.flipbook-modal__loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--white);
  font-weight: 500;
}

.flipbook-modal__loader p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
}

.flipbook-modal.is-ready .flipbook-modal__loader {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.flipbook-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--white);
  cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}

.flipbook-modal__close:hover {
  background: var(--white);
  color: var(--cobalt);
  transform: rotate(90deg);
}

/* Page count, floating over the top-left of the surround. The pill keeps it
   legible where the spread's margin gets narrow. */
.flipbook-modal__page {
  position: absolute;
  top: 26px;
  left: clamp(10px, 1.6vw, 26px);
  z-index: 2;
  min-width: 74px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  text-align: center;
  font-weight: 600;
  color: var(--white);
  letter-spacing: .01em;
}

/* Sound toggle sits in the top strip beside the close button. */
.flipbook-modal__sound {
  position: absolute;
  top: 20px;
  right: 76px;
  z-index: 2;
}

/* Same button shape as the on-page controls, re-tinted for the dark
   surround — the reader never sits on the light stage background. */
.flipbook-modal .flipbook__btn {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .1);
  color: var(--white);
}

.flipbook-modal .flipbook__btn:hover:not(:disabled) {
  background: var(--white);
  color: var(--cobalt);
}

.flipbook-modal .flipbook__btn:disabled {
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .35);
  transform: none;
  box-shadow: none;
}

@media (max-width: 640px) {
  /* A phone has no width to spare and a spread is already the smallest thing it
     can show, so the arrows come out of the layout entirely — StPageFlip's
     touch handling turns the page on a swipe instead, which is the natural
     gesture there. The stage is pushed down so the page count and sound toggle,
     which stay, no longer land on top of the spread. */
  .flipbook-modal {
    padding: 72px 8px 8px;
  }

  .flipbook-modal__nav {
    display: none;
  }

  .flipbook__cover {
    max-width: 320px;
    transform: none;
  }
}

/* ===================================================================
   Pending state — no PDF uploaded yet
   ===================================================================
   The Young Socks flipbooks ship without a bundled PDF, so their pages show
   this panel instead of a viewer that would only fail to load. It borrows the
   stage's background and height so the column keeps the same proportions once a
   PDF is uploaded and the real book takes over. */

.flipbook-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: min(74vh, 760px);
  padding: 48px clamp(20px, 4vw, 56px);
  text-align: center;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(45, 181, 218, .12), transparent 60%),
    linear-gradient(180deg, #eaf4fa, #dfeef6);
  box-shadow: var(--shadow);
}

.flipbook-pending__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--white);
  color: var(--cobalt);
  box-shadow: 0 14px 30px rgba(0, 114, 188, .16);
}

.flipbook-pending__title {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--dark);
}

.flipbook-pending__text {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  line-height: 1.75;
}

@media (max-width: 640px) {
  .flipbook-pending {
    min-height: 420px;
    padding: 40px 20px;
  }
}