/* =====================================================================
   KEY FOR CHANGE — LIBRARY HUB (/library/). Mike's design
   keyforchange-library.html (task #1001026). Ported faithfully as a scoped
   .k4c-lib component; loaded template-gated from base.html.twig
   (page.template == 'library'), the same pattern as success-stories
   (#1001011) / about (#1001009) / programme (#1001010) / shop (#1000993).

   Design fonts (Bricolage/Newsreader/Instrument) map to the site's brand
   fonts; the editorial serif role keeps a system serif (Georgia) so the
   standfirst/lede contrast survives without shipping a new webfont.

   The hero reuses the sitewide .kfc-band wrapper so it clears the fixed
   transparent nav and inherits the deep-purple + glow. Everything else is
   scoped under .k4c-lib with a lib- prefix so the design's very generic
   class names (.band/.hero/.index/.shelf/.books/.book/.videos/.track/.tag/
   .meta/.btn/.cover/.sub) never collide with theme / quark2 globals. The
   design's own header/nav/quick-exit and its ⑧ closing (identical to the
   sitewide footer's f-top) are dropped — the global chrome is used instead.

   ONLY the shelves with real content ship here (Videos, Books-by-Keeley).
   The Quotes / Songs / reading-list shelves are held pending real content
   from Keeley (raised to the Feedback Hub, #1001026), so their CSS is not
   included yet — it lands with those shelves when the content arrives.
   ===================================================================== */
.k4c-lib {
  --lib-ink: #241A33; --lib-ink2: #4A415A; --lib-ink3: #6F6580; --lib-ink4: #8A809A;
  --lib-paper: #FAF7F2; --lib-paper2: #F3EEE7; --lib-white: #FFFFFF;
  --lib-brand: #512D7F; --lib-deep: #2A153F; --lib-deeper: #1E0E30;
  --lib-lilac: #C9A6F2; --lib-lilac2: #EADFF4;
  --lib-line: rgba(81,45,127,0.14); --lib-line2: rgba(81,45,127,0.28);
  --lib-display: var(--k4c-font-heading);
  --lib-serif: Georgia, 'Times New Roman', serif;
  --lib-sans: var(--k4c-font-body);
  --lib-gutter: 64px; --lib-container: 1440px;
  --lib-ease: cubic-bezier(.2,.7,.2,1);
  background: var(--lib-paper);
  color: var(--lib-ink);
  font-family: var(--lib-sans);
}
.k4c-lib * { box-sizing: border-box; }
.k4c-lib a { color: inherit; text-decoration: none; }
.k4c-lib img { max-width: 100%; display: block; }
.k4c-lib [hidden] { display: none !important; }
.k4c-lib .lib-container { max-width: var(--lib-container); margin: 0 auto; padding: 0 var(--lib-gutter); }

.k4c-lib .lib-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 24px; border-radius: 999px; font-family: var(--lib-sans); font-size: 15px; font-weight: 700; white-space: nowrap; border: 0; transition: transform .18s, background .18s; }
.k4c-lib .lib-btn:hover { transform: translateY(-1px); }
.k4c-lib .lib-btn svg { width: 16px; height: 16px; }
.k4c-lib .lib-btn-brand { background: var(--lib-brand); color: #fff; }
.k4c-lib .lib-btn-brand:hover { background: var(--k4c-purple-dark); }
.k4c-lib .lib-btn-sm { min-height: 40px; padding: 8px 16px; font-size: 13px; }

.k4c-lib .lib-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--lib-brand); }
.k4c-lib .lib-tag::before { content: ""; width: 24px; height: 1.5px; background: currentColor; }
.k4c-lib .lib-ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- ① hero — reuses .kfc-band for nav clearance ---------- */
.k4c-lib .lib-hero > .lib-container { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 32px; padding-top: calc(var(--k4c-nav-height) + 12px); padding-bottom: 28px; align-items: end; }
.k4c-lib .lib-hero .lib-crumb { font-size: 13px; color: #B9A6D4; margin-bottom: 18px; display: flex; gap: 8px; align-items: center; }
.k4c-lib .lib-hero .lib-crumb span { opacity: .6; }
.k4c-lib .lib-hero h1 { margin: 0; font-family: var(--lib-display); font-size: clamp(40px, 5.2vw, 60px); line-height: 1.0; font-weight: 800; letter-spacing: -0.03em; color: #fff; text-wrap: balance; max-width: 16ch; }
.k4c-lib .lib-hero h1 .lib-accent { color: var(--lib-lilac); }
.k4c-lib .lib-hero .lib-standfirst { margin: 18px 0 0; max-width: 600px; font-family: var(--lib-serif); font-size: 20px; line-height: 1.5; color: #D9C6F0; }
.k4c-lib .lib-hero .lib-aside { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; text-align: right; }
.k4c-lib .lib-hero .lib-free { font-family: var(--lib-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; max-width: 22ch; color: #fff; }
.k4c-lib .lib-hero .lib-free em { font-style: normal; color: var(--lib-lilac); }
.k4c-lib .lib-hero .lib-aside p { margin: 0; font-size: 14px; color: #B9A6D4; max-width: 34ch; }

.k4c-lib .lib-filters { border-top: 1px solid rgba(255,255,255,0.14); }
.k4c-lib .lib-filters > .lib-container { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.k4c-lib .lib-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.k4c-lib .lib-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #D9C6F0; transition: background .18s, color .18s; }
.k4c-lib .lib-tabs a:hover { color: #fff; }
.k4c-lib .lib-tabs a b { font-weight: 600; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; }
.k4c-lib .lib-tabs a[aria-pressed="true"] { background: #fff; color: var(--lib-deep); font-weight: 600; }
.k4c-lib .lib-tabs a[aria-pressed="true"] b { background: var(--lib-lilac2); color: var(--lib-brand); }

/* ---------- ② shelf index ---------- */
.k4c-lib .lib-index { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; padding-top: 40px; }
.k4c-lib .lib-index a { border-radius: 22px; background: var(--lib-white); border: 1px solid var(--lib-line); padding: 24px 26px 22px; display: flex; flex-direction: column; gap: 14px; min-height: 176px; transition: transform .35s var(--lib-ease), box-shadow .35s var(--lib-ease); }
.k4c-lib .lib-index a:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(42,21,63,0.45); }
.k4c-lib .lib-index .lib-index-top { display: flex; align-items: center; justify-content: space-between; color: var(--lib-brand); }
.k4c-lib .lib-index .lib-index-top .lib-ico { width: 24px; height: 24px; }
.k4c-lib .lib-index .lib-index-top b { font-family: var(--lib-display); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--lib-ink); }
.k4c-lib .lib-index .lib-h { font-family: var(--lib-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.k4c-lib .lib-index p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--lib-ink3); }
.k4c-lib .lib-index .lib-go { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--lib-brand); display: inline-flex; align-items: center; gap: 6px; }
.k4c-lib .lib-index .lib-go svg { width: 14px; height: 14px; }
.k4c-lib .lib-index a.tinted { background: var(--lib-lilac2); border-color: var(--lib-lilac2); }

/* ---------- shelves (shared) ---------- */
.k4c-lib .lib-shelf { padding-top: 80px; scroll-margin-top: 24px; }
.k4c-lib .lib-shelf:not(:has(.lib-item)) { display: none; }   /* empty collections vanish */
.k4c-lib .lib-shelf[hidden] { display: none; }
.k4c-lib .lib-sh { margin-bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.k4c-lib .lib-sh h2 { margin: 12px 0 0; font-family: var(--lib-display); font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.k4c-lib .lib-sh h2 .lib-accent { color: var(--lib-brand); }
.k4c-lib .lib-sh p { margin: 10px 0 0; font-family: var(--lib-serif); font-size: 18px; color: var(--lib-ink2); max-width: 620px; }
.k4c-lib .lib-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--lib-brand); white-space: nowrap; padding-bottom: 6px; }
.k4c-lib .lib-more svg { width: 16px; height: 16px; }
.k4c-lib .lib-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--lib-ink4); }
.k4c-lib .lib-meta svg { width: 13px; height: 13px; }
.k4c-lib .lib-meta .lib-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* ---------- ③ videos ----------
   #1001405 — Mike: "video thumbs not visible enough, purple text on dark
   background looks bad." The blurred full-bleed backdrop (#1001122) is gone:
   each thumb now sits CRISP in its own 16:9 box (object-fit: cover crops the
   hqdefault letterbox bars — the burned-in frame title lives inside the
   picture where it belongs, same idiom as .bp-vid), and the text sits below /
   beside it on a WHITE card in ink, matching the index/book cards. Sources
   step hq720 → hqdefault (onerror) so the ~750px feature thumb stays sharp.
   Feature card = classic vertical video card; the two .sm stack cards go
   HORIZONTAL (thumb left) — with real 16:9 thumbs in flow, vertical small
   cards would make the stack ~1.8× the feature's height and the columns
   would never meet again. */
.k4c-lib .lib-videos { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 16px; }
.k4c-lib .lib-vcard { border-radius: 24px; overflow: hidden; background: var(--lib-white); border: 1px solid var(--lib-line); color: var(--lib-ink); display: flex; flex-direction: column; transition: transform .35s var(--lib-ease), box-shadow .35s var(--lib-ease); }
.k4c-lib .lib-vcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(42,21,63,0.45); }
.k4c-lib .lib-vthumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(160deg, #3B2A55, var(--lib-deeper)); }
.k4c-lib .lib-vthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--lib-ease); }
.k4c-lib .lib-vcard:hover .lib-vthumb img { transform: scale(1.04); }
.k4c-lib .lib-vcard .lib-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.16); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.35); display: grid; place-items: center; transition: background .3s; }
.k4c-lib .lib-vcard .lib-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.k4c-lib .lib-vcard:hover .lib-play { background: var(--lib-brand); }
.k4c-lib .lib-vbody { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 22px 28px 26px; }
.k4c-lib .lib-vcard .lib-meta { margin-bottom: 12px; }
.k4c-lib .lib-vcard h3 { margin: 0; font-family: var(--lib-display); font-size: 32px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.k4c-lib .lib-vcard p { margin: 12px 0 0; font-family: var(--lib-serif); font-size: 17px; line-height: 1.45; color: var(--lib-ink3); }
.k4c-lib .lib-vcard .lib-read { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--lib-brand); }
.k4c-lib .lib-vcard .lib-read svg { width: 14px; height: 14px; }
.k4c-lib .lib-vcard.sm { display: grid; grid-template-columns: 190px minmax(0,1fr); }
.k4c-lib .lib-vcard.sm .lib-vthumb { aspect-ratio: auto; height: 100%; }
.k4c-lib .lib-vcard.sm .lib-vbody { padding: 18px 22px 20px; }
.k4c-lib .lib-vcard.sm .lib-play { width: 40px; height: 40px; }
.k4c-lib .lib-vcard.sm .lib-play svg { width: 15px; height: 15px; }
.k4c-lib .lib-vcard.sm h3 { font-size: 20px; }
.k4c-lib .lib-vcard.sm p { font-size: 14px; }
.k4c-lib .lib-vstack { display: flex; flex-direction: column; gap: 16px; }
.k4c-lib .lib-vstack .lib-vcard.sm { flex: 1; }
.k4c-lib .lib-empath { border-radius: 22px; background: var(--lib-lilac2); padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.k4c-lib .lib-empath .lib-h { font-family: var(--lib-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.k4c-lib .lib-empath p { margin: 4px 0 0; font-size: 14px; color: var(--lib-ink2); max-width: 40ch; }

/* ---------- ④ books ---------- */
.k4c-lib .lib-sub { font-family: var(--lib-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 20px; display: flex; align-items: center; gap: 14px; }
.k4c-lib .lib-sub::after { content: ""; flex: 1; height: 1px; background: var(--lib-line); }
.k4c-lib .lib-books { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.k4c-lib .lib-book { border-radius: 22px; background: var(--lib-white); border: 1px solid var(--lib-line); padding: 20px; display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 18px; align-items: start; transition: transform .35s var(--lib-ease), box-shadow .35s var(--lib-ease); }
.k4c-lib .lib-book:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(42,21,63,0.45); }
.k4c-lib .lib-cover { width: 96px; aspect-ratio: 2/3; border-radius: 6px 10px 10px 6px; background: linear-gradient(160deg, var(--lib-brand), var(--lib-deep)); color: #fff; position: relative; overflow: hidden; box-shadow: inset 6px 0 10px -8px rgba(0,0,0,.6), 0 10px 20px -14px rgba(42,21,63,.7); display: flex; align-items: flex-end; padding: 10px 10px 12px 14px; }
.k4c-lib .lib-cover::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.25); }
.k4c-lib .lib-cover span { font-family: var(--lib-display); font-size: 12px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.k4c-lib .lib-cover.l { background: linear-gradient(160deg, #E0CFF6, var(--lib-lilac)); color: var(--lib-deep); }
.k4c-lib .lib-cover.p { background: linear-gradient(160deg, #3B2A55, var(--lib-deeper)); }
/* Real product-shot covers (#1001406): 96px grid column, 2:3 box, contain on a
   white mat (shots are square canvases — never crop the product art). Hairline
   border keeps white-background shots visible on the white card. */
.k4c-lib .lib-cover-img { width: 96px; height: 144px; border-radius: 6px 10px 10px 6px; background: #fff; border: 1px solid var(--lib-line); object-fit: contain; box-shadow: 0 10px 20px -14px rgba(42,21,63,.7); display: block; }
.k4c-lib .lib-book .lib-h { font-family: var(--lib-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 4px 0 6px; }
.k4c-lib .lib-book p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--lib-ink3); }
.k4c-lib .lib-book .lib-row { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.k4c-lib .lib-book .lib-price { font-family: var(--lib-display); font-size: 16px; font-weight: 700; }
.k4c-lib .lib-book .lib-price s { color: var(--lib-ink4); font-weight: 500; font-size: 13px; margin-right: 6px; }
.k4c-lib .lib-book .lib-get { font-size: 13px; font-weight: 600; color: var(--lib-brand); display: inline-flex; align-items: center; gap: 5px; }
.k4c-lib .lib-book .lib-get svg { width: 13px; height: 13px; }

/* ---------- ⑦ self-check CTA ---------- */
.k4c-lib .lib-selfcheck { margin-top: 80px; margin-bottom: 8px; border-radius: 26px; background: var(--lib-lilac2); padding: 44px 48px; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 40px; align-items: center; }
.k4c-lib .lib-selfcheck h2 { margin: 12px 0 0; font-family: var(--lib-display); font-size: 36px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.k4c-lib .lib-selfcheck p { margin: 12px 0 0; font-family: var(--lib-serif); font-size: 18px; color: var(--lib-ink2); max-width: 48ch; }
.k4c-lib .lib-selfcheck ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.k4c-lib .lib-selfcheck li a { background: var(--lib-white); border-radius: 14px; padding: 14px 18px; font-size: 15px; color: var(--lib-ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: transform .18s, box-shadow .18s; }
.k4c-lib .lib-selfcheck li a:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -16px rgba(42,21,63,0.5); }
.k4c-lib .lib-selfcheck li svg { width: 16px; height: 16px; color: var(--lib-brand); flex-shrink: 0; }
.k4c-lib .lib-selfcheck .lib-sc-cta { margin-top: 22px; }

@media (max-width: 1100px) {
  .k4c-lib { --lib-gutter: 32px; }
  .k4c-lib .lib-hero > .lib-container { grid-template-columns: 1fr; }
  .k4c-lib .lib-hero h1 { max-width: none; }
  .k4c-lib .lib-hero .lib-aside { align-items: flex-start; text-align: left; }
  .k4c-lib .lib-tabs { overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
  .k4c-lib .lib-index { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .k4c-lib .lib-videos { grid-template-columns: 1fr; }
  .k4c-lib .lib-books { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .k4c-lib .lib-selfcheck { grid-template-columns: 1fr; }
  .k4c-lib .lib-sh { flex-direction: column; align-items: flex-start; }
  .k4c-lib .lib-sh h2 { font-size: 34px; }
}
@media (max-width: 640px) {
  .k4c-lib { --lib-gutter: 20px; }
  .k4c-lib .lib-index, .k4c-lib .lib-books { grid-template-columns: 1fr; }
  .k4c-lib .lib-selfcheck { padding: 28px 24px; }
  .k4c-lib .lib-btn { width: 100%; }
  .k4c-lib .lib-vbody { padding: 18px 20px 20px; }
  .k4c-lib .lib-vcard h3 { font-size: 26px; }
  /* phones: the horizontal .sm cards go back to vertical so the thumb gets
     the full card width instead of a 190px side column */
  .k4c-lib .lib-vcard.sm { display: flex; flex-direction: column; }
  .k4c-lib .lib-vcard.sm .lib-vthumb { aspect-ratio: 16/9; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .k4c-lib .lib-btn, .k4c-lib .lib-index a, .k4c-lib .lib-book, .k4c-lib .lib-selfcheck li a, .k4c-lib .lib-vcard, .k4c-lib .lib-vthumb img { transition: none; }
  .k4c-lib .lib-btn:hover, .k4c-lib .lib-index a:hover, .k4c-lib .lib-book:hover, .k4c-lib .lib-selfcheck li a:hover, .k4c-lib .lib-vcard:hover { transform: none; }
  .k4c-lib .lib-vcard:hover .lib-vthumb img { transform: none; }
}

/* ---------- hero height consistency (#1001097) --------------------------------
   Floor the library hero to the shared height target (minus its ~65px .lib-filters
   strip) so it reads level with the programme/about heroes on desktop. */
@media (min-width: 1101px) {
  .k4c-lib .lib-hero > .lib-container { min-height: calc(var(--kfc-hero-min) - 65px); }
}

/* ---------- #1001404 play-chip padding — SUPERSEDED by #1001405 ----------
   The 104px top padding kept bottom-anchored text clear of the absolutely
   positioned chip. #1001405 moved the chip INSIDE the .lib-vthumb box (and
   the text into .lib-vbody), so a text/chip collision is structurally
   impossible — no reservation needed on any viewport. */

/* ---------- #1001609 shorter hero on laptop/desktop ----------------------------
   Keeley: "a wide border on the laptop version — can this be reduced to get to
   the content quicker". The 700px shared hero floor (#1001097) left a tall
   empty purple band above the shelf. The Library is a browse page, so it drops
   the floor and sizes to its content (~430px at 1440), surfacing the shelf
   index above the fold on a 13" laptop. */
@media (min-width: 1101px) {
  .k4c-lib .lib-hero > .lib-container { min-height: 0; padding-top: calc(var(--k4c-nav-height) + 40px); padding-bottom: 32px; }
}