/* ============================================================
   THE SUBJECT LIBRARY (owner mockup 2026-09-30: "Biology Library", "I want
   this 1:1 because it looks beautiful"). Loaded by subject_resources.html
   on every hub.

   Header: "<Subject> Library" with "Library" in the student's blue, then
   one line. Body: labelled sections -- a short blue bar, the section name
   in spaced capitals and one line about it in a left column -- each with a
   row of cards: outline icon, title, description, facts line, a round arrow
   button bottom right and a faint line drawing in the top-right corner.
   Notes leads Core study at a wider card; a section with one card draws it
   across the row.

   Every word is the one ink (no grey text, owner 2026-09-26); blue is for
   "Library", the section labels and bars, the icons and the arrows.

   SIZES FOLLOW THE SCREEN. The mockup is 1600px wide; each size below is
   its mockup value as a share of that width (so 64px at 1600 is 4vw),
   clamped so a 1280 laptop stays comfortable and a 2560 monitor does not
   run away. Phones set their own values at the end.
   ============================================================ */

.sr-page--lib {
  --lib-col: clamp(60rem, 84.5vw, 92rem);
  --lib-h1: clamp(2.5rem, 4vw, 4.75rem);
  --lib-lede: clamp(18px, 1.625vw, 30px);
  --lib-label: clamp(13px, 1.06vw, 19px);
  --lib-label-desc: clamp(15px, 1.125vw, 21px);
  --lib-label-w: clamp(170px, 12.5vw, 240px);
  --lib-title: clamp(21px, 1.75vw, 32px);
  --lib-desc: clamp(15px, 1.125vw, 21px);
  --lib-meta: clamp(14px, 1vw, 19px);
  --lib-icon: clamp(32px, 2.4vw, 44px);
  --lib-go: clamp(36px, 2.6vw, 48px);
  --lib-pad: clamp(20px, 1.75vw, 32px);
  --lib-gap: clamp(14px, 1.25vw, 24px);
  --lib-sec-gap: clamp(16px, 1.1vw, 22px);
  --lib-ink: var(--nb-ink, #f0efec);
  --lib-blue: var(--nb-blue, #789ff2);
  --lib-line: var(--nb-border, rgba(255, 255, 255, 0.12));
  --lib-paper: var(--nb-paper, #0f1013);
  --lib-card: color-mix(in srgb, var(--lib-blue) 4%, var(--lib-paper));
  --lib-art: color-mix(in srgb, var(--lib-ink) 13%, transparent);
  --lib-icon-ink: color-mix(in srgb, var(--lib-blue) 62%, var(--lib-ink));
}

.sr-page--lib .sr-inner {
  max-width: var(--lib-col);
}

/* ── Header ── */
.sr-page--lib .sr-header {
  max-width: none;
  margin-bottom: clamp(20px, 1.9vw, 36px);
}

/* (0,4,0): beats the typography bridge's headline size and the legacy
   clamp on .sr-title, both of which read smaller. */
.sr-page--lib .sr-header .sr-title--lib {
  margin: 0 0 clamp(4px, 0.5vw, 10px);
  font-size: var(--lib-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

/* One ink, no blue-slate: ties the hub skin's (0,3,1) and loads after it. */
html .sr-page.sr-page--lib .sr-header .sr-subtitle {
  max-width: none;
  font-size: var(--lib-lede);
  line-height: 1.4;
  color: var(--lib-ink);
}

/* ── Sections ── */
.sr-lib {
  display: grid;
}

.lib-sec {
  display: grid;
  grid-template-columns: var(--lib-label-w) minmax(0, 1fr);
  column-gap: clamp(20px, 2.4vw, 48px);
  padding-block: var(--lib-sec-gap);
  border-bottom: 1px solid var(--lib-line);
}

.lib-sec:first-child {
  padding-top: 0;
}

.lib-sec:last-child {
  border-bottom: 0;
}

.lib-label {
  padding-top: clamp(18px, 1.5vw, 28px);
}

.lib-label-title {
  margin: 0;
  padding-top: clamp(14px, 1.1vw, 20px);
  background: linear-gradient(var(--lib-blue), var(--lib-blue)) left top / clamp(28px, 2.5vw, 44px) 3px no-repeat;
  font-size: var(--lib-label);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lib-blue);
}

.lib-label-desc {
  margin: clamp(10px, 1vw, 18px) 0 0;
  font-size: var(--lib-label-desc);
  line-height: 1.4;
  color: var(--lib-ink);
}

/* ── The card grid of one section ── */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lib-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lib-grid--n1 { grid-template-columns: minmax(0, 1fr); }
.lib-grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lib-grid--lead.lib-grid--n3 { grid-template-columns: 1.45fr 1fr 0.95fr; }
.lib-grid--lead.lib-grid--n2 { grid-template-columns: 1.45fr 1fr; }

.lib-item {
  display: flex;
  min-width: 0;
}

/* ── One card ── */
.lib-card {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  min-height: clamp(180px, 13.6vw, 250px);
  padding: var(--lib-pad) var(--lib-pad) calc(var(--lib-pad) * 0.72);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--lib-line);
  border-radius: var(--nb-r-md, 8px);
  background: var(--lib-card);
  color: var(--lib-ink);
  text-decoration: none;
  transition-property: border-color, background-color;
  transition-duration: var(--hover-dur, 0.18s);
  transition-timing-function: var(--hover-ease, ease);
}

.lib-card:hover,
.lib-card:focus-visible {
  border-color: color-mix(in srgb, var(--lib-blue) 48%, transparent);
  background: color-mix(in srgb, var(--lib-blue) 7%, var(--lib-paper));
}

.lib-card:focus-visible {
  outline: 2px solid var(--lib-blue);
  outline-offset: 3px;
}

/* the faint drawing sits behind the words, in the top-right corner */
.lib-art {
  position: absolute;
  z-index: -1;
  top: clamp(12px, 1.2vw, 22px);
  right: clamp(-28px, -1.2vw, -12px);
  width: 44%;
  max-width: 260px;
  height: auto;
  overflow: visible;
  color: var(--lib-art);
  pointer-events: none;
}

.lib-art .lib-art-on {
  fill: color-mix(in srgb, var(--lib-blue) 26%, transparent);
}

.lib-icon {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: var(--lib-icon);
  height: var(--lib-icon);
  color: var(--lib-icon-ink);
}

.lib-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lib-body {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: clamp(12px, 1.2vw, 22px);
}

.lib-title {
  font-size: var(--lib-title);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--lib-ink);
}

.lib-desc {
  max-width: 22ch;
  margin-top: clamp(6px, 0.6vw, 12px);
  font-size: var(--lib-desc);
  line-height: 1.35;
  color: var(--lib-ink);
}

/* the facts line: dots between items, and a wrapped line never starts
   with a dot (each item carries its dot; the clip hides the line-start one) */
.lib-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: clamp(14px, 1.5vw, 26px);
  font-size: var(--lib-meta);
  line-height: 1.35;
  color: var(--lib-ink);
}

.lib-meta-icon {
  flex: 0 0 auto;
  width: 1.4em;
  height: 1.4em;
  color: var(--lib-icon-ink);
}

.lib-meta-clip {
  min-width: 0;
  overflow: hidden;
}

.lib-meta-in {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1.6em;
}

.lib-meta-item::before {
  content: "\00B7";
  display: inline-block;
  width: 1.6em;
  font-weight: 700;
  text-align: center;
  color: var(--lib-blue);
}

/* the round arrow button, bottom right */
.lib-go {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lib-go);
  height: var(--lib-go);
  border: 1.5px solid color-mix(in srgb, var(--lib-blue) 55%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--lib-blue) 10%, transparent);
  color: color-mix(in srgb, var(--lib-blue) 70%, var(--lib-ink));
  transition-property: background-color, border-color;
  transition-duration: var(--hover-dur, 0.18s);
}

.lib-go svg {
  width: 46%;
  height: 46%;
  transition: transform 0.22s var(--ease-expo, ease);
}

.lib-card:hover .lib-go,
.lib-card:focus-visible .lib-go {
  border-color: var(--lib-blue);
  background: color-mix(in srgb, var(--lib-blue) 20%, transparent);
}

.lib-card:hover .lib-go svg,
.lib-card:focus-visible .lib-go svg {
  transform: translateX(2px);
}

/* ── A section with one card (Exam with only Past Papers): the icon takes a
   column of its own and the card runs the width of the row ── */
.lib-card--wide {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  column-gap: clamp(24px, 3vw, 56px);
  align-items: start;
  min-height: 0;
  padding-block: calc(var(--lib-pad) * 0.72);
}

.lib-card--wide .lib-icon {
  grid-column: 1;
  grid-row: 1;
  margin-top: 4px;
}

.lib-card--wide .lib-body {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}

.lib-card--wide .lib-title {
  font-size: calc(var(--lib-title) * 1.18);
}

.lib-card--wide .lib-desc {
  max-width: 44ch;
}

.lib-card--wide .lib-meta {
  padding-top: clamp(8px, 0.75vw, 14px);
}

.lib-card--wide .lib-go {
  grid-column: 3;
  grid-row: 1;
}

.lib-card--wide .lib-art {
  top: clamp(6px, 0.6vw, 12px);
  right: clamp(60px, 5vw, 96px);
  width: min(30%, 320px);
  max-width: none;
}

/* ── Not there yet (owner 2026-10-02: Videos and Mock Exams say Coming soon
   on every library, "faded nicely"). The card keeps its place and drawing but
   is a div with data-ui-disabled and no hover: it sinks toward the page (half its
   wash, a softer edge), its icon, words and drawing rest at half strength
   (a disabled cue drawn by opacity, DESIGN.md's named exception), and only
   the board rows' blue Coming soon pill keeps full strength. ── */
.lib-card[data-ui-disabled="true"],
.lib-card[data-ui-disabled="true"]:hover {
  cursor: default;
  border-color: color-mix(in srgb, var(--lib-line) 60%, transparent);
  background: color-mix(in srgb, var(--lib-card) 45%, transparent);
}

.lib-card[data-ui-disabled="true"] :is(.lib-icon, .lib-title, .lib-desc) {
  opacity: 0.5;
}

.lib-card[data-ui-disabled="true"] .lib-art {
  opacity: 0.6;
}

.lib-card[data-ui-disabled="true"] .lib-go,
.lib-card[data-ui-disabled="true"]:hover .lib-go {
  border-color: color-mix(in srgb, var(--lib-blue) 55%, transparent);
  background: color-mix(in srgb, var(--lib-blue) 10%, transparent);
  opacity: 0.3;
}

.lib-card[data-ui-disabled="true"]:hover .lib-go svg {
  transform: none;
}

/* The Coming soon tag wears the Extended tier flag's look (owner 2026-10-02:
   "make it similar to the extended tag"; notebook-notes.css .nb-tier): white
   capitals, tracked, on the flag's saturated blue, its rounded left end edged
   in a brighter blue by night and a deeper one by day. The flag's colours
   (--nb-tier-*) live in notebook-blocks.css, which a hub does not load, so
   the same values are set here. */
.sr-page--lib {
  --lib-soon-ink: var(--nb-feedback-ink, #fff);
  --lib-soon-fill: #2457d6;
  --lib-soon-edge: #7eb0ff;
}

html.theme-light .sr-page--lib {
  --lib-soon-ink: var(--nb-on-blue, #fff);
  --lib-soon-fill: #1f5fe0;
  --lib-soon-edge: #0b3fb4;
}

.lib-soon {
  display: inline-block;
  padding: 0.22em 0.8em 0.22em 0.7em;
  border: 0;
  border-left: 3px solid var(--lib-soon-edge);
  border-radius: var(--nb-r-pill, 999px);
  background: var(--lib-soon-fill);
  color: var(--lib-soon-ink);
  font: var(--nb-type-label, 600 14px/1.2 "IBM Plex Sans", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── The tip and the tutor line under the library ── */
.sr-page--lib .sr-tips,
.sr-page--lib .sr-tutor {
  margin-top: var(--lib-sec-gap);
}

/* On a module hub the papers follow the family sections. */
.sr-page--modules .sr-lib {
  margin-top: clamp(20px, 1.6vw, 36px);
}

/* ── Narrower screens: the section label sits above its cards ── */
/* The subject's code between its name and "Library", in the title's own
   size, weight and ink (owner 2026-10-01: "make the pill just text, like
   BIOLOGY XBI11 Library", "make it the same size as font"); a module's
   library shows its unit code, "Pure 1 WMA11/01 Library". The code never
   splits across two lines. */
.sr-page .sr-header .sr-code {
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  color: var(--nb-ink);
}

@media (max-width: 1100px) {
  .lib-sec {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .lib-label {
    padding-top: 8px;
  }

  .lib-label-desc {
    max-width: 52ch;
  }
}

/* ── Tablets: two cards a line; a lead card or an odd last card spans it ── */
@media (max-width: 900px) {
  .lib-grid--n3,
  .lib-grid--lead.lib-grid--n3,
  .lib-grid--lead.lib-grid--n2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lib-grid--lead > .lib-item:first-child,
  .lib-grid--n3:not(.lib-grid--lead) > .lib-item:last-child {
    grid-column: 1 / -1;
  }
}

/* ── Phones: one card a line, the drawing kept small ── */
@media (max-width: 600px) {
  .sr-page--lib {
    --lib-h1: 2.25rem;
    --lib-lede: 17px;
    --lib-title: 21px;
    --lib-desc: 15px;
    --lib-meta: 14px;
    --lib-pad: 18px;
    --lib-go: 38px;
  }

  .lib-grid,
  .lib-grid--n2,
  .lib-grid--n3,
  .lib-grid--lead.lib-grid--n3,
  .lib-grid--lead.lib-grid--n2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .lib-card {
    min-height: 0;
  }

  .lib-art {
    width: 38%;
  }

  .lib-card--wide {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
  }

  .lib-card--wide .lib-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .lib-card--wide .lib-body {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 12px;
  }

  .lib-card--wide .lib-go {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lib-card,
  .lib-go,
  .lib-go svg {
    transition: none;
  }

  .lib-card:hover .lib-go svg,
  .lib-card:focus-visible .lib-go svg {
    transform: none;
  }
}