/* 文章原文 + 三个学习区块 · 标题列宽对齐 */
:root {
  --section-card-title-width: 12em;
  --section-card-badge-col: 4.25rem;
}

.article-panel__toggle,
.sentence-parse__link {
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr) var(--section-card-badge-col) 2rem;
  align-items: center;
  column-gap: 0.85rem;
}

.article-panel__mark,
.sentence-parse__mark {
  grid-column: 1;
  grid-row: 1;
}

.article-panel__copy,
.sentence-parse__text {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.article-panel__badge {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.article-panel__go,
.sentence-parse__go {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
}

@media (min-width: 821px) {
  .article-panel__toggle-text,
  .sentence-parse__title {
    display: block;
    width: var(--section-card-title-width);
    max-width: 100%;
    white-space: nowrap;
  }

  .article-panel__toggle-text::after,
  .sentence-parse__title::after {
    width: var(--section-card-title-width);
    max-width: 100%;
  }
}

@media (max-width: 820px) {
  .article-panel__toggle,
  .sentence-parse__link {
    display: grid !important;
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.55rem !important;
    column-gap: 0.5rem !important;
    padding: 0.68rem 0.72rem !important;
    align-items: center !important;
  }

  .article-panel__mark,
  .sentence-parse__mark {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  .course-mascot {
    width: 1.7rem !important;
    height: 1.7rem !important;
  }

  .article-panel__copy,
  .sentence-parse__text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    gap: 0.08rem !important;
  }

  .article-panel__toggle-text,
  .sentence-parse__title {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(0.72rem, 3.15vw, 0.8125rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
  }

  .article-panel__toggle-text::after,
  .sentence-parse__title::after {
    width: 1.5rem !important;
    max-width: 1.5rem !important;
    height: 2px !important;
    margin-top: 0.16rem !important;
  }

  .article-panel__toggle-hint,
  .sentence-parse__desc {
    font-size: 0.64rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .article-panel__badge {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    margin-right: 1.65rem !important;
    padding: 0.14rem 0.36rem !important;
    font-size: 0.56rem !important;
    white-space: nowrap !important;
  }

  .article-panel__go,
  .sentence-parse__go {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 1.55rem !important;
    height: 1.55rem !important;
    flex-shrink: 0 !important;
  }

  .article-panel__go svg,
  .sentence-parse__go svg {
    width: 0.8rem !important;
    height: 0.8rem !important;
  }

  .block--parse + .block--parse {
    margin-top: 0.38rem !important;
  }
}