/* 学课文 · 句子金字塔：左对齐方框，每层多一个单词 */
.story-pyramid-caption {
  margin: 0 0 0.25rem;
  font-size: clamp(0.78rem, 1.15vw, 0.9rem);
  color: #6b6150;
  font-weight: 600;
  text-align: left;
  line-height: 1.4;
  font-family: "Noto Sans SC", sans-serif;
}
.view-body--story .story-col--text > .story-pyramid-caption {
  font-size: clamp(0.78rem, 1.15vw, 0.9rem);
  line-height: 1.4;
}
.story-pyramid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.32rem;
  width: 100%;
  margin: 0.05rem 0 0.1rem;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: space-evenly;
}
.story-pyramid-layer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  width: var(--py-w, 70%);
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  align-self: flex-start;
  font-family: "Source Serif 4", Georgia, "Noto Serif SC", serif;
  font-size: clamp(0.92rem, 1.65vw, 1.22rem);
  line-height: 1.28;
  padding: 0.28rem 0.6rem 0.28rem 0.38rem;
  border-radius: 8px;
  background: #fff;
  border: 2px solid #1a1a1a;
  color: var(--ink, #1a1a1a);
  cursor: pointer;
  min-height: 2.05rem;
  text-align: left;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.story-pyramid-layer:hover,
.story-pyramid-layer:focus-visible {
  background: #fff8e0;
  outline: none;
}
.story-pyramid-layer .py-idx {
  flex: 0 0 1.45rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--ng-gold, #F5C400);
  color: #1a1a1a;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans SC", sans-serif;
}
.story-pyramid-layer .py-text { flex: 1; min-width: 0; text-align: left; }
.story-pyramid-layer .py-old { color: var(--ink-soft, #4a4a4a); font-weight: 600; }
.story-pyramid-layer .py-new { color: #1e3a5f; font-weight: 800; }
.story-pyramid-layer .py-hear {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: #2E6A9B;
  font-weight: 800;
  font-family: "Noto Sans SC", sans-serif;
}
.story-pyramid-layer.is-on {
  background: #fff3c4;
  border-color: #c9a008;
  box-shadow: 0 0 0 2px rgba(245, 196, 0, 0.35), 0 4px 12px rgba(0,0,0,.08);
}
.story-pyramid-layer.is-on .py-idx { background: #1a1a1a; color: var(--ng-gold, #F5C400); }

.view-body--story .story-sentence--xl.story-sentence--pyramid {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.85rem;
  margin: 0;
  padding: 0.4rem 0.55rem 0.45rem;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.view-body--story .story-sentence--pyramid .story-col--art {
  flex: 0 1 42%;
  max-width: 44%;
  align-self: stretch;
}
.view-body--story .story-sentence--pyramid .hero-art {
  min-height: 0;
  margin: 0;
  height: 100%;
}
.view-body--story .story-sentence--pyramid .story-col--art .art-img {
  max-height: 100%;
  min-height: 0;
}
.view-body--story .story-sentence--pyramid .story-col--text {
  flex: 1 1 58%;
  width: auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  justify-content: stretch;
  align-items: stretch;
  text-align: left;
}

@media (pointer: coarse) and (max-width: 1024px), (max-width: 820px), (max-width: 720px) {
  .view-body--story .story-sentence--xl.story-sentence--pyramid {
    flex-direction: column;
    height: auto;
    flex: 0 0 auto;
  }
  .view-body--story .story-sentence--pyramid .story-col--art {
    flex: 0 0 auto;
    max-width: min(18rem, 100%);
  }
  .view-body--story .story-sentence--pyramid .story-col--art .art-img {
    max-height: min(9.5rem, 28vh);
    min-height: 0;
  }
  .view-body--story .story-sentence--pyramid .story-col--text {
    max-height: none;
    overflow: visible;
    width: 100%;
    flex: 0 0 auto;
  }
  .story-pyramid {
    flex: 0 0 auto;
    min-height: auto;
    justify-content: flex-start;
  }
  .story-pyramid-layer {
    min-height: 44px;
    font-size: clamp(0.9rem, 3.3vw, 1.12rem);
    padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  }
}