/* ============================================================================
   BK Glossary — THE LOOM craft encyclopedia
   ========================================================================== */

.bk-glossary {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  padding-block: clamp(3rem, 6vw, 5.5rem) var(--bk-section-pad);
}

.bk-glossary__header {
  max-width: 44ch;
  margin-bottom: var(--bk-space-24);
}
.bk-glossary__title { margin: var(--bk-space-3) 0 var(--bk-space-5); }
.bk-glossary__intro { color: var(--bk-ink-soft); }

.bk-glossary__list { display: flex; flex-direction: column; }

.bk-term-entry {
  display: grid;
  gap: var(--bk-space-6);
  padding-block: var(--bk-space-16);
  border-top: 1px solid var(--bk-hairline);
  align-items: start;
}
.bk-term-entry:last-child { border-bottom: 1px solid var(--bk-hairline); }

.bk-term-entry__media { width: 100%; }
.bk-term-entry__media img { display: block; width: 100%; height: auto; border-radius: var(--bk-radius-soft); }
.bk-term-entry__ph {
  display: block;
  aspect-ratio: 4 / 3;
  background: radial-gradient(120% 120% at 60% 30%, var(--bk-bg-stone), var(--bk-olive-muted));
  border-radius: var(--bk-radius-soft);
}

.bk-term-entry__name {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  flex-wrap: wrap;
  margin: 0 0 var(--bk-space-4);
}
.bk-term-entry__name .bk-deva { font-size: 0.62em; color: var(--bk-ink-soft); font-weight: 500; }
.bk-term-entry__note { color: var(--bk-ink-soft); margin: var(--bk-space-3) 0 0; }

/* ---- Desktop -------------------------------------------------------------- */
@media screen and (min-width: 750px) {
  .bk-term-entry { grid-template-columns: 2fr 3fr; gap: var(--bk-space-16); }
}

/* ---- Reveal (scoped to the glossary) -------------------------------------- */
.bk-reveal-ready .bk-glossary [data-bk-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--bk-dur-slow) var(--bk-ease), transform var(--bk-dur-slow) var(--bk-ease);
}
.bk-glossary [data-bk-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bk-reveal-ready .bk-glossary [data-bk-reveal] { opacity: 1; transform: none; transition: none; }
}