/* Work library — three case study cards styled as books, one open at a time.
   Colours: design.md > Work library — book cards (AA-corrected accents).
   Geometry: Figma 493:74874 — expanded cover 494:75047, collapsed spine 493:74915.

   Exactly one card is always open, so the row's width is constant in every state:
   538 + 139 + 139 + (2 x 16) = 848. Nothing around the row reflows while it animates. */

.library {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

/* Title and row sit side by side, both starting at the page margin and top-aligned: Figma puts
   the title's box at x=80 and the row immediately after it at x=453, ending at 1301. */
.library__inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

/* 373px is the title's box in Figma, not the width of the words. It may shrink back to the text
   itself so the row can hold its full size as far down as the stacking breakpoint. */
.library__title {
  margin: 0;
  flex: 0 1 373px;
  min-width: max-content;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: var(--leading-normal);
  /* The same warm ink the hero book is printed in, not the UI text colour. */
  color: var(--color-book-ink);
}

/* The row is the query container. Every dimension inside a card is a multiple of --lu, one
   848th of the row's width, so the whole row scales as a single object the way the hero book
   does with --u — rather than reflowing its type and spacing independently. */
.library__books {
  flex: 0 0 848px;
  width: 100%;
  max-width: 848px;
  container-type: inline-size;
  display: flex;
  align-items: stretch;
  /* 16 / 848 */
  gap: 1.8868%;
}

.library-book {
  --lu: calc(100cqw / 848);
  position: relative;
  overflow: hidden;
  height: calc(718 * var(--lu));
  background: var(--book-bg);
  border-radius: calc(9 * var(--lu));
  /* 139 / 848 */
  flex: 0 0 16.3915%;
  transition: flex-basis 0.3s ease-in-out, border-radius 0.3s ease-in-out;
}

/* 538 / 848. The open card's spine-side corners stay tight while its outer ones round off, the
   way the folded edge of an open book does. */
.library-book.is-open {
  flex-basis: 63.4434%;
  border-radius: calc(3 * var(--lu)) calc(15 * var(--lu)) calc(15 * var(--lu)) calc(3 * var(--lu));
}

.library-book--on-demand {
  --book-bg: var(--color-lib-ondemand-bg);
  --book-accent: var(--color-lib-ondemand-accent);
  --book-cta-hover: var(--color-lib-ondemand-cta-hover);
  --book-cta-press: var(--color-lib-ondemand-cta-press);
  --book-mat: var(--color-lib-ondemand-mat);
}

.library-book--ai-powered {
  --book-bg: var(--color-lib-ai-bg);
  --book-accent: var(--color-lib-ai-accent);
  --book-cta-hover: var(--color-lib-ai-cta-hover);
  --book-cta-press: var(--color-lib-ai-cta-press);
  --book-mat: var(--color-lib-ai-mat);
}

.library-book--reusable-lists {
  --book-bg: var(--color-lib-lists-bg);
  --book-accent: var(--color-lib-lists-accent);
  --book-cta-hover: var(--color-lib-lists-cta-hover);
  --book-cta-press: var(--color-lib-lists-cta-press);
  --book-mat: var(--color-lib-lists-mat);
}

/* Dark mode — previously undocumented, so all three cards stayed on their light-mode --book-bg
   in both themes and sat at full brightness against the otherwise near-black homepage. Each now
   switches to that case study's own dark band shade (the same tokens the case study page's stats
   band and the About page testimonial cards already use) — design.md: Work library — book cards
   → Dark mode. Only --book-bg changes: --book-accent (text) and the three .library-book__cta
   states were already checked against a background this dark or darker, so they're untouched.

   .library-book { background: var(--book-bg); } is the only rule reading this token, and
   .library-book__spine is background: transparent — so overriding --book-bg once per variant
   here covers both the collapsed spine and the expanded book state with nothing extra needed. */
[data-theme="dark"] .library-book--on-demand { --book-bg: var(--color-lib-ondemand-band-dark); } /* #36352A, 9.93:1 */
[data-theme="dark"] .library-book--ai-powered { --book-bg: var(--color-lib-ai-band-dark); } /* #372A24, 8.99:1 */
[data-theme="dark"] .library-book--reusable-lists { --book-bg: var(--color-lib-lists-band-dark); } /* #1F242F, 7.72:1 */

/* ── Collapsed spine ─────────────────────────────────────────────────────── */

/* Fills the whole card so a click anywhere on a closed book opens it. Its contents are held
   at the spine's 139px width so they stay put while the card's width animates, instead of
   re-wrapping on every frame. The delay means it fades back in only once a collapse has
   finished; expanding clears the delay so it leaves immediately. */
.library-book__spine {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(139 * var(--lu));
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out 0.3s, visibility 0s linear 0s;
}

/* visibility rather than opacity alone: a cover faded to nothing is still focusable and still
   read out, so an open book would otherwise keep an invisible button in the tab order and
   announce its title twice. It flips only once the fade has finished, and back immediately. */
.library-book.is-open .library-book__spine {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out 0s, visibility 0s linear 0.3s;
}

.library-book__spine-title {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(139 * var(--lu));
  height: calc(326 * var(--lu));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Laid out 326px long, then turned counter-clockwise, so it reads bottom-to-top and long
   titles wrap onto a second column towards the spine's outer edge. */
.library-book__spine-title > span {
  flex: none;
  width: calc(326 * var(--lu));
  transform: rotate(-90deg);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(32 * var(--lu));
  line-height: var(--leading-normal);
  color: var(--book-accent);
}

.library-book__spine-footer {
  position: absolute;
  left: calc(8 * var(--lu));
  top: calc(688 * var(--lu));
  width: calc(123 * var(--lu));
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(12 * var(--lu));
  line-height: var(--leading-normal);
  color: var(--book-accent);
}

/* ── Open cover ──────────────────────────────────────────────────────────── */

/* Held at the open card's full 538px width even while the card is narrower than that, so the
   headline never re-wraps mid-animation — the card's overflow clip does the reveal. Fades in
   only after the width transition has finished, and leaves immediately on the way out. */
.library-book__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(538 * var(--lu));
  height: calc(718 * var(--lu));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.library-book.is-open .library-book__panel {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.3s;
}

.library-book__eyebrows {
  position: absolute;
  top: calc(48 * var(--lu));
  left: calc(36 * var(--lu));
  width: calc(466 * var(--lu));
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(12 * var(--lu));
  line-height: var(--leading-normal);
  color: var(--book-accent);
}

/* Figma draws these as zero-height vectors with a 1px stroke, which is why they sample as a
   half-strength blend there — they are solid accent, not a tint. */
.library-book__rule {
  position: absolute;
  left: calc(36 * var(--lu));
  width: calc(466 * var(--lu));
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--book-accent);
}

.library-book__rule--top { top: calc(78 * var(--lu)); }

/* Fixed, not pushed down by the headline: a two-line and a four-line headline both end here. */
.library-book__rule--bottom { top: calc(344 * var(--lu)); }

.library-book__label {
  position: absolute;
  top: calc(92 * var(--lu));
  left: calc(36 * var(--lu));
  width: calc(466 * var(--lu));
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(16 * var(--lu));
  line-height: var(--leading-normal);
  color: var(--book-accent);
}

.library-book__headline {
  position: absolute;
  top: calc(127 * var(--lu));
  left: calc(36 * var(--lu));
  width: calc(466 * var(--lu));
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(32 * var(--lu));
  line-height: var(--leading-normal);
  color: var(--book-accent);
}

/* Anchored from the bottom so the last line always lands on the same baseline just above the
   lower rule, whether a card carries one metric line or two: On-Demand's single line and
   Reusable Lists' second line both sit at y=309. A card with no metric simply omits it.
   718 - (309 + 21) = 388. */
.library-book__metrics {
  position: absolute;
  bottom: calc(388 * var(--lu));
  left: calc(36 * var(--lu));
  width: calc(466 * var(--lu));
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Figma stacks the two lines 25px apart, which on a 21px line box is a 4px gap. */
  gap: calc(4 * var(--lu));
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(16 * var(--lu));
  line-height: var(--leading-normal);
  color: var(--book-accent);
}

/* The preview sits flush to the mat's right and bottom edges with an 8px reveal down the left,
   so the mat reads as a board the screenshot is resting on rather than a frame around it. The
   top reveal is whatever the image's own height leaves over, which is why the three previews
   can differ in height without needing separate rules. */
.library-book__mat {
  position: absolute;
  top: calc(358 * var(--lu));
  left: calc(36 * var(--lu));
  width: calc(466 * var(--lu));
  height: calc(268 * var(--lu));
  padding-left: calc(8 * var(--lu));
  background: var(--book-mat);
  border-radius: calc(5 * var(--lu));
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.library-book__mat img {
  display: block;
  width: calc(458 * var(--lu));
  height: auto;
}

.library-book__cta {
  position: absolute;
  top: calc(650 * var(--lu));
  left: calc(36 * var(--lu));
  width: calc(140 * var(--lu));
  height: calc(32 * var(--lu));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(12 * var(--lu));
  line-height: var(--leading-normal);
  /* Dark label on every book in every state — design.md. */
  color: var(--color-lib-cta-label);
  background: var(--book-accent);
  transition: background-color 0.15s ease-in-out;
}

.library-book__cta:hover { background: var(--book-cta-hover); }
.library-book__cta:active { background: var(--book-cta-press); }

.library-book__cta:focus-visible,
.library-book__spine:focus-visible {
  outline: 2px solid var(--book-accent);
  outline-offset: 3px;
}

/* ── Narrow desktop ──────────────────────────────────────────────────────── */

/* Below this the title and the row stop fitting side by side, so the title moves above and the
   row keeps the full column width. The row itself keeps scaling by --lu. */
@media (max-width: 1199px) {
  .library__inner {
    flex-direction: column;
    gap: 0;
  }

  .library__books {
    flex: 0 0 auto;
    margin-top: var(--space-lg);
  }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

/* Not in Figma — the frames are desktop only. Below 768px the spine metaphor stops working:
   scaled down this far the rotated titles and the 466px preview are unreadable. The cards
   become a plain stacked accordion instead, at real type sizes rather than scaled ones, and
   open and close without the width animation, which has nothing to animate once each card is
   full width. */
@media (max-width: 767px) {
  .library__books {
    display: block;
    container-type: normal;
    max-width: none;
  }

  /* Unscales every calc() above in one move. */
  .library-book {
    --lu: 1px;
    height: auto;
    border-radius: var(--radius-sm);
  }

  .library-book + .library-book {
    margin-top: var(--space-md);
  }

  .library-book.is-open {
    border-radius: var(--radius-sm);
  }

  /* The bar carries the title on its own. Laid out as a row with the footer beside it, the two
     need roughly twice the width the column has at 390px. */
  .library-book__spine {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    padding: var(--space-md);
  }

  /* Here the bar is the visible control even while the card is open, so it stays in the tab
     order rather than being hidden the way the desktop cover is. */
  .library-book.is-open .library-book__spine {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding-bottom: var(--space-sm);
  }

  .library-book__spine-title {
    position: static;
    width: auto;
    height: auto;
    display: block;
  }

  .library-book__spine-title > span {
    display: block;
    width: auto;
    transform: none;
    font-size: var(--text-h3);
  }

  /* Both repeat something already on screen once the card is a bar rather than a spine: the
     title is in the bar above, and MICROSOFT PURVIEW is the first eyebrow. */
  .library-book__spine-footer,
  .library-book__label {
    display: none;
  }

  .library-book__panel {
    position: static;
    width: auto;
    height: auto;
    display: none;
    flex-direction: column;
    gap: var(--space-md);
    padding: 0 var(--space-md) var(--space-md);
  }

  .library-book.is-open .library-book__panel {
    display: flex;
  }

  /* Clears the absolute placement above, including the metrics' bottom anchor, so everything
     falls back into document order. */
  .library-book__panel > * {
    position: static;
    width: auto;
    min-width: 0;
  }

  /* The cover's 32px headline is sized for a 466px column; here it has 230px at 390px wide. */
  .library-book__headline {
    font-size: var(--text-h3);
    overflow-wrap: break-word;
  }

  /* The two labels together need more room than the column has, so let them stack. */
  .library-book__eyebrows {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .library-book__mat {
    height: auto;
    padding: var(--space-sm) 0 0 var(--space-sm);
  }

  .library-book__mat img {
    width: 100%;
  }

  .library-book__cta {
    align-self: flex-start;
    width: auto;
    height: 32px;
    padding: 0 var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-book,
  .library-book__spine,
  .library-book__panel,
  .library-book__cta {
    transition: none;
  }
}