/* ══════════════════════════════════════
   Japanese Glossary Block
   ══════════════════════════════════════ */

/* ── Inline furigana ── */
ruby.gb-ruby {
  display          : ruby;
  ruby-align       : center;
}
ruby.gb-ruby rt {
  font-size        : 0.5em;
  color            : #888;
  letter-spacing   : 0.05em;
  font-family      : "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  line-height      : 1.2;
}
.entry-content p,
.post-content p,
article p {
  line-height      : 2.8 !important;
  padding-top      : 0.4em;
}

/* ── Glossary container ── */
.gb-glossary {
  margin-top       : 48px;
  border-top       : 2px solid #e07b39;
  padding-top      : 24px;
  font-family      : "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", sans-serif;
}

.gb-glossary__header {
  display          : flex;
  align-items      : center;
  gap              : 10px;
  margin-bottom    : 20px;
}

.gb-glossary__icon {
  display          : flex;
  align-items      : center;
  justify-content  : center;
  width            : 36px;
  height           : 36px;
  background       : #e07b39;
  color            : #fff;
  font-size        : 1em;
  font-weight      : 700;
  border-radius    : 8px;
  flex-shrink      : 0;
}

.gb-glossary__title {
  font-size        : 1.1em;
  font-weight      : 700;
  color            : #333;
  margin           : 0;
  padding          : 0;
  border           : none;
}

/* ── Loading state ── */
.gb-glossary__loading {
  display          : flex;
  align-items      : center;
  gap              : 8px;
  color            : #999;
  font-size        : 0.9em;
  padding          : 12px 0;
}

.gb-glossary__spinner {
  display          : inline-block;
  width            : 16px;
  height           : 16px;
  border           : 2px solid #ddd;
  border-top-color : #e07b39;
  border-radius    : 50%;
  animation        : gb-spin 0.7s linear infinite;
  flex-shrink      : 0;
}

@keyframes gb-spin {
  to { transform: rotate(360deg); }
}

/* ── Word list ── */
.gb-glossary__list {
  list-style       : none;
  margin           : 0;
  padding          : 0;
  display          : grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap              : 14px;
}

/* ── Each word card ── */
.gb-glossary__item {
  background       : #fafafa;
  border           : 1px solid #eee;
  border-left      : 3px solid #e07b39;
  border-radius    : 8px;
  padding          : 14px 16px;
  transition       : box-shadow 0.15s;
}
.gb-glossary__item:hover {
  box-shadow       : 0 2px 10px rgba(0,0,0,0.08);
}

.gb-glossary__item-header {
  display          : flex;
  align-items      : baseline;
  gap              : 8px;
  margin-bottom    : 8px;
}

.gb-glossary__kanji {
  font-size        : 1.4em;
  font-weight      : 700;
  color            : #222;
  line-height      : 1;
}

.gb-glossary__reading {
  font-size        : 0.85em;
  color            : #888;
}

.gb-glossary__senses {
  list-style       : none;
  margin           : 0;
  padding          : 0;
}

.gb-glossary__sense {
  margin-bottom    : 5px;
  font-size        : 0.88em;
  line-height      : 1.5;
  color            : #444;
}

.gb-glossary__pos {
  display          : inline-block;
  font-size        : 0.75em;
  background       : rgba(224,123,57,0.12);
  color            : #c0622a;
  border-radius    : 4px;
  padding          : 1px 6px;
  margin-right     : 5px;
  vertical-align   : middle;
}

.gb-glossary__link {
  display          : inline-block;
  margin-top       : 8px;
  font-size        : 0.75em;
  color            : #e07b39;
  text-decoration  : none;
  opacity          : 0.8;
}
.gb-glossary__link:hover {
  opacity          : 1;
  text-decoration  : underline;
}

/* ── Error state on a card ── */
.gb-glossary__item--error .gb-glossary__kanji {
  color            : #999;
}
.gb-glossary__error-msg {
  font-size        : 0.8em;
  color            : #bbb;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .gb-glossary__list {
    grid-template-columns: 1fr;
  }
  .gb-glossary__kanji {
    font-size      : 1.2em;
  }
}