/* ============================================================================
   Library page — catalogue of translated books.
   Values read from Figma frame "02" (144:211285), 1200px container.
   ========================================================================== */

/* Banner→intro 60px, intro→cards 60px, cards→footer-CTA 60px. */
.page--library .library { padding-block: 60px; }
.page--library .section__header { margin-bottom: 60px; }

/* Intro ("The Folios Library" + blurb) is left-aligned and full width. */
.section__header--start {
  text-align: start;
  max-width: none;
  margin-inline: 0;
}
/* Figma: 24/33px, REGULAR weight (not the bold home section title). */
.page--library .section__title {
  font-size: var(--font-size-2xl);
  line-height: 33px;
  font-weight: var(--font-weight-normal);
}
.section__header--start .section__subtitle {
  margin-inline: 0;
  max-width: none;
}

/* ---------------------------------------------------------------------------
   Library / My Library toggle — Figma frame 23. Signed-in users only.
   Frame geometry: pill 328×70 (border-box), 1px #E6E6E6, radius 100px, centred.
   The active segment is a 149×40 #E7A200 pill with white 18/25 bold text; the
   inactive segment is the same box with no fill and #333 text. 15 + 149 + 149 +
   15 = 328 confirms the padding is 15px and BOTH segments are 149 wide.
   Vertically it sits at the top of the section: banner ends at y258, toggle top
   is y318 = the section's existing 60px padding, and it clears the title by 30px.
   --------------------------------------------------------------------------- */
.library-toggle {
  box-sizing: border-box;
  width: 328px;
  height: 70px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  padding-inline: 15px;
  background: var(--color-white);
  border: 1px solid #E6E6E6;       /* Figma: #E6E6E6 (not the #E5E5E5 border token) */
  border-radius: 100px;
}
.library-toggle__option {
  flex: 1 1 0;                     /* (328 − 2 border − 30 padding) / 2 = 148px ≈ Figma's 149 */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  font-size: var(--font-size-lg);  /* 18px */
  line-height: 25px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
  text-decoration: none;
}
.library-toggle__option.is-active {
  background: var(--color-orange);
  color: var(--color-white);
}
/* base.css underlines every a:hover, and on touch that hover sticks after a tap. */
.library-toggle__option:hover,
.library-toggle__option:focus,
.library-toggle__option:active { text-decoration: none; }
.library-toggle__option:not(.is-active):hover { color: var(--color-orange); }

/* My Library empty state (shown only when the MyLibrary flag is on). */
.my-library__empty {
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: var(--color-muted);
}

/* Book cards — Figma: 585px wide, #F0F0F0, radius 20, 30px gap, 20px padding. */
.book-grid {
  display: grid;
  /* minmax(0, 1fr), NOT 1fr. A bare `1fr` floors the track at min-content, and the
     nowrap language list makes a card's min-content the width of the WHOLE list —
     so a book with many languages blew its column out to 844px (and dragged the
     row's height with it) until some later reflow snapped it back. minmax(0, …)
     lets the track shrink below that, which is what makes the ellipsis possible. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  /* stretch (not start) so both cards in a row share the tallest card's height —
     this is what makes an expanded card also grow the card beside it. */
  align-items: stretch;
}
.book-card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.book-card__body { display: flex; flex-direction: column; min-width: 0; }

/* Figma: title 24/33 w400; meta + fields 18/25; all #333. */
.book-card__title {
  font-size: var(--font-size-2xl);
  line-height: 33px;
  font-weight: var(--font-weight-normal);
  color: var(--color-body-strong);
  margin-bottom: 15px;
}
.book-card__meta {
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: var(--color-body-strong);
  margin-bottom: 15px;
}
.book-card__field { margin-bottom: 15px; }
.book-card__label {
  /* Figma: label + value are one weight-400 node — the label is NOT bold. */
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: var(--color-body-strong);
}
.book-card__value {
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: var(--color-body-strong);
}
/* Available-languages row. Figma shows the list clamped to ONE line, the ellipsis
   fused to the last word it fits, then a bold "view all" on the same line:
       Spanish, French, Japanese, Hindi, Arabic, German… view all
   The "…" is text-overflow, so it appears ONLY when the list actually overflows.
   library.js reveals the button on the same condition, and adds .is-expanded on
   click — which unclamps the text and lets the card grow to fit. */
.book-card__langs {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.book-card__langs-text {
  min-width: 0;             /* lets the flex item shrink so the ellipsis can render */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-card__langs.is-expanded .book-card__langs-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.book-card__viewall {
  flex: 0 0 auto;           /* never shrink — the list truncates instead */
  /* Button reset: this is a button (it toggles, it doesn't navigate) but must
     read exactly like the bold inline text in the design. */
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);   /* Figma: "view all" is bold */
  line-height: 25px;
  color: var(--color-body-strong);
}
/* "View All" keeps its colour on hover — the underline is the affordance. */
.book-card__viewall:hover { text-decoration: underline; }

/* Orange CTA pinned to the bottom-left of the card body. Figma: 18px pill. */
.book-card__cta {
  margin-top: auto;
  align-self: flex-start;
  font-size: 18px;
  font-weight: var(--font-weight-normal);
  padding: 12px 28px;
}

.book-card__cover { flex-shrink: 0; }
.book-card__cover img {
  display: block;
  width: 113px;
  height: auto;
  border-radius: 3px;
}

@media (max-width: 768px) {
  /* minmax(0, …) here too — a bare `1fr` floors the single column at the card's
     min-content, which the nowrap language list makes wider than the screen. */
  .book-grid { grid-template-columns: minmax(0, 1fr); }
}