/* ============================================================================
   SADER — s-library  ("The Scholars' Catalogue")
   The full publications catalogue: a refined editorial filter rail + a
   COVER-FORWARD gallery of book covers (the cover is the hero; metadata sits
   beneath as a serif caption with a growing ink rule — the same showcase
   language as the homepage s-publications shelf, laid out as a full grid).
   Light (white) world; monochrome tokens only. Distinct from the homepage
   s-publications (plural) and the detail page s-publication (singular).
   Linked on every page, so every selector is strictly scoped under .s-library.
   Logical properties only — RTL flips for free.
   ============================================================================ */

.s-library { background-color: var(--bg); position: relative; overflow: hidden; }

/* ---- Layout: sticky rail + main column ---------------------------------- */
.s-library__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}
@media (min-width: 1000px) {
  .s-library__layout {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(var(--space-8), 5vw, var(--space-11));
    align-items: start;
  }
  .s-library__rail {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-6));
    max-block-size: calc(100svh - var(--header-h) - var(--space-8));
    overflow-y: auto;
    padding-inline-end: var(--space-2);
    scrollbar-width: thin;
  }
}

/* ---- Filter rail (refined editorial list) ------------------------------- */
.s-library__group { border: 0; margin: 0; padding: 0; }
.s-library__group + .s-library__group { margin-block-start: var(--space-8); }
.s-library__group legend {
  display: block;
  padding: 0;
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--line);
  inline-size: 100%;
  color: var(--text);
}

/* Default facet = a full-width toggle row with a count and an active ink bar. */
.s-library__facets { display: flex; flex-direction: column; }
.s-library__facet {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  inline-size: 100%;
  padding-block: var(--space-3);
  padding-inline-start: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-align: start;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--line);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.s-library__facet::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 28% 28%;
  inline-size: 2px;
  background-color: var(--accent);
  transform: scaleY(0);
  transition: transform var(--dur-fast) var(--ease);
}
.s-library__facet:hover { color: var(--text); }
.s-library__facet[aria-pressed="true"] { color: var(--text); font-weight: var(--fw-medium); }
.s-library__facet[aria-pressed="true"]::before { transform: scaleY(1); }
.s-library__facet[disabled] { opacity: 0.32; cursor: not-allowed; }
.s-library__facet-label { min-inline-size: 0; }
.s-library__facet-n {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}
.s-library__facet[aria-pressed="true"] .s-library__facet-n { color: var(--text-muted); }

/* The year group is a wrapping field of compact chips, not stacked rows. */
.s-library__group--year .s-library__facets { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
.s-library__group--year .s-library__facet {
  inline-size: auto;
  gap: var(--space-2);
  padding-block: calc(var(--space-2) + 1px);
  padding-inline: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
}
.s-library__group--year .s-library__facet::before { content: none; }
.s-library__group--year .s-library__facet:hover { border-color: var(--line-strong); color: var(--text); }
.s-library__group--year .s-library__facet[aria-pressed="true"] {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.s-library__group--year .s-library__facet[aria-pressed="true"] .s-library__facet-n { color: var(--on-accent); opacity: 0.78; }

.s-library__rail-foot { margin-block-start: var(--space-6); }

/* ---- Toolbar: search · sort · count (editorial, underline-led) ---------- */
/* Mirror the gallery (.s-press) toolbar: the search box is a full-width row of
   its own, with sort (start) and count (end) on a second row — so the search
   "place" reads the same in both the List and Gallery views. */
.s-library__toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "search search"
    "sort   count";
  gap: var(--space-4) var(--space-6);
  align-items: center;
  margin-block-end: clamp(var(--space-7), 4vw, var(--space-9));
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--line);
}
.s-library__search { grid-area: search; }
.s-library__sort   { grid-area: sort; justify-self: start; }
.s-library__count  { grid-area: count; justify-self: end; }
.s-library__search { position: relative; }
.s-library__search::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 18px; block-size: 18px;
  transform: translateY(-50%);
  background-color: var(--text);
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21' stroke-linecap='round'/%3E%3C/svg%3E");
          mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events: none;
}
.s-library__search-input {
  inline-size: 100%;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--line-strong);
  border-radius: 0;
  padding-block: var(--space-3);
  padding-inline: calc(var(--space-6) + var(--space-1)) var(--space-7);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease);
}
.s-library__search-input::placeholder { color: var(--text-faint); }
.s-library__search-input:focus-visible { outline: none; border-block-end-color: var(--accent); }
.s-library__search-clear {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  transform: translateY(-50%);
  inline-size: 26px; block-size: 26px;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1;
  color: var(--text-muted);
  background: none; border: 0; cursor: pointer;
  border-radius: var(--radius-pill);
}
.s-library__search-clear:hover { color: var(--text); }

.s-library__sort {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 0;
  border-block-end: 1.5px solid var(--line-strong);
  border-radius: 0;
  padding-block: var(--space-3);
  padding-inline-end: var(--space-5);
  cursor: pointer;
}
.s-library__sort:focus-visible { outline: none; border-block-end-color: var(--accent); }
.s-library__count {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  text-align: end;
}
.s-library__count .numeral {
  font-family: var(--font-display);
  font-size: 1.7em;
  font-weight: var(--fw-light);
  color: var(--text);
  padding-inline-end: 0.18em;
}

/* ---- The cover-forward gallery ----------------------------------------- */
.s-library__ledger {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  /* minmax(0, 1fr) — NOT 1fr (= minmax(auto,1fr)). The covers' aspect-ratio
     would otherwise inflate each track's auto-minimum unequally, making cards
     grow incrementally across a row. minmax(0,…) keeps all columns equal. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-7), 3.5vw, var(--space-9)) clamp(var(--space-5), 2.4vw, var(--space-7));
}
@media (min-width: 620px)  { .s-library__ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .s-library__ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.s-library__slip { list-style: none; }
.s-library__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  block-size: 100%;
  color: var(--text);
}

/* Cover = the hero. A framed, soft-shadowed book that lifts + zooms on hover. */
.s-library__cover {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 7 / 10;
}
.s-library__cover-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--surface-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 14px 30px rgba(0, 0, 0, 0.13);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.s-library__cover-inner img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center;
  transition: transform var(--dur-slow) var(--ease);
}
/* A faint "spine" gradient on the binding edge gives every cover real depth. */
.s-library__spine {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 12px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}
/* Top sheen — a subtle gloss that sweeps across on hover. */
.s-library__cover-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 60%);
  background-size: 220% 220%;
  background-position: 120% 0;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity var(--dur-base) var(--ease), background-position var(--dur-slower) var(--ease);
}
.s-library__cover-inner--blank img { display: none; }
.s-library__cover-inner--blank::before {
  content: "SADER";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}

/* Call-number floats as a quiet shelfmark just under the binding. */
.s-library__callno {
  display: block;
  margin-block-start: var(--space-3);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.s-library__entry { display: flex; flex-direction: column; gap: var(--space-2); }
.s-library__lang { color: var(--text-muted); }
.s-library__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur-fast) var(--ease);
}
.s-library__cat {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.s-library__rule {
  margin-block-start: var(--space-1);
  inline-size: 26px;
  block-size: 2px;
  background-color: var(--accent);
  transition: inline-size var(--dur-base) var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .s-library__card:hover .s-library__cover-inner,
  .s-library__card:focus-within .s-library__cover-inner {
    transform: translateY(-8px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12), 0 30px 56px rgba(0, 0, 0, 0.22);
  }
  .s-library__card:hover .s-library__cover-inner img,
  .s-library__card:focus-within .s-library__cover-inner img { transform: scale(1.05); }
  .s-library__card:hover .s-library__cover-inner::after,
  .s-library__card:focus-within .s-library__cover-inner::after { opacity: 1; background-position: -40% 0; }
  .s-library__card:hover .s-library__rule,
  .s-library__card:focus-within .s-library__rule { inline-size: 64px; }
}
.s-library__card:hover .s-library__title,
.s-library__card:focus-within .s-library__title { color: var(--accent-deep); }

/* ---- RTL ----------------------------------------------------------------
   The spine strip moves to the binding (right) edge on its own — it is placed
   with inset-inline-start — but the gradients inside it are physical and keep
   pointing left-to-right, which drops the shadow on the wrong edge and rakes
   the sheen the wrong way. Mirror both (angle a → 360 - a, and swap the sweep
   endpoints) so the cover reads with the same depth as the English one. */
[dir="rtl"] .s-library__spine {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0));
}
[dir="rtl"] .s-library__cover-inner::after {
  background: linear-gradient(240deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 60%);
  background-size: 220% 220%;
  background-position: -20% 0;
}
@media (prefers-reduced-motion: no-preference) {
  [dir="rtl"] .s-library__card:hover .s-library__cover-inner::after,
  [dir="rtl"] .s-library__card:focus-within .s-library__cover-inner::after { background-position: 140% 0; }
}

/* ---- Load more ---------------------------------------------------------- */
.s-library__more { margin-block-start: clamp(var(--space-8), 5vw, var(--space-10)); display: flex; justify-content: center; }
.s-library__more .numeral { font-size: 1em; letter-spacing: 0; }

/* ---- Empty / error ------------------------------------------------------ */
.s-library__empty { grid-column: 1 / -1; }
.s-library__empty-inner {
  text-align: center;
  padding-block: clamp(var(--space-9), 9vw, var(--space-12));
  padding-inline: var(--space-6);
  border: 1px solid var(--line);
  background-color: var(--bg-alt);
}
.s-library__empty-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--text);
  margin-block-end: var(--space-3);
}
.s-library__empty-inner p { color: var(--text-muted); }
.s-library__noscript { color: var(--text-muted); margin-block-start: var(--space-6); }

/* ---- Skeleton (no shimmer under reduced motion) ------------------------- */
.s-library__slip--skel { display: flex; flex-direction: column; gap: var(--space-4); }
.s-library__sk-cover { inline-size: 100%; aspect-ratio: 7 / 10; background-color: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 14px 30px rgba(0,0,0,0.08); }
.s-library__sk-lines { display: flex; flex-direction: column; gap: var(--space-3); }
.s-library__sk-lines span { block-size: 12px; background-color: var(--surface); border-radius: var(--radius-xs); }
.s-library__sk-lines span:nth-child(1) { inline-size: 50%; }
.s-library__sk-lines span:nth-child(2) { inline-size: 85%; }
@media (prefers-reduced-motion: no-preference) {
  .s-library__sk-cover, .s-library__sk-lines span { animation: s-library-pulse 1.4s ease-in-out infinite; }
}
@keyframes s-library-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }