/* =========================================================
 * 粒粒学题目内容结构化标签样式
 * 支持：
 * 1. llx-choice        选择题选项
 * 2. llx-inline-grid   横向小题组
 * 3. llx-blank         填空占位符：paren / line / circle
 * ========================================================= */

/* 题目内容基础容器，可按你的页面实际 class 调整 */
.question-content {
  font-size: 14px;
  line-height: 1.8;
  color: #222;
  word-break: break-word;
}

/* 自定义标签默认参与排版 */
.question-content llx-choice,
.question-content llx-choice-option,
.question-content llx-option-label,
.question-content llx-option-content,
.question-content llx-inline-grid,
.question-content llx-inline-item,
.question-content llx-blank {
  box-sizing: border-box;
}

/* =========================================================
 * 一、选择题选项 llx-choice
 * ========================================================= */

.question-content llx-choice {
  display: block;
  margin-top: 6px;
  margin-bottom: 6px;
}

/* 横向选项 */
.question-content llx-choice[data-layout="inline"] {
  display: grid;
  column-gap: 24px;
  row-gap: 6px;
  align-items: start;
}

/* 默认 4 列 */
.question-content llx-choice[data-layout="inline"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 按 data-cols 控制列数 */
.question-content llx-choice[data-layout="inline"][data-cols="1"] {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.question-content llx-choice[data-layout="inline"][data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.question-content llx-choice[data-layout="inline"][data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.question-content llx-choice[data-layout="inline"][data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.question-content llx-choice[data-layout="inline"][data-cols="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 竖向选项 */
.question-content llx-choice[data-layout="block"] {
  display: block;
}

.question-content llx-choice[data-layout="block"] llx-choice-option {
  display: flex;
  margin: 4px 0;
}

/* 单个选项 */
.question-content llx-choice-option {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.8;
}

/* 选项标识 A. B. C. D. */
.question-content llx-option-label {
  display: inline-block;
  flex: 0 0 auto;
  min-width: 1.8em;
  margin-right: 4px;
  font-weight: normal;
  white-space: nowrap;
}

/* 选项内容 */
.question-content llx-option-content {
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;
}


/* =========================================================
 * 二、横向小题组 llx-inline-grid
 * 例如：
 * <llx-inline-grid data-cols="3">
 *   <llx-inline-item>45<llx-blank data-type="circle"></llx-blank>54</llx-inline-item>
 * </llx-inline-grid>
 * ========================================================= */

.question-content llx-inline-grid {
  display: grid;
  margin-top: 6px;
  margin-bottom: 6px;
  column-gap: 28px;
  row-gap: 8px;
  align-items: start;
}

/* 默认 3 列 */
.question-content llx-inline-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.question-content llx-inline-grid[data-cols="1"] {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.question-content llx-inline-grid[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.question-content llx-inline-grid[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.question-content llx-inline-grid[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.question-content llx-inline-grid[data-cols="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 单个横向小题 */
.question-content llx-inline-item {
  display: inline-block;
  min-width: 0;
  line-height: 1.8;
  white-space: nowrap;
}


/* =========================================================
 * 三、填空占位符 llx-blank
 * 支持：
 * data-type="paren"   括号填空：显示为（　　）
 * data-type="line"    横线填空：显示为下划线
 * data-type="circle"  圆圈填符号：显示为 ○
 * ========================================================= */

.question-content llx-blank {
  display: inline-block;
  vertical-align: baseline;
  box-sizing: border-box;
  white-space: nowrap;
}

/* -------------------------
 * 3.1 括号型填空
 * <llx-blank data-type="paren" data-size="2"></llx-blank>
 * ------------------------- */

.question-content llx-blank[data-type="paren"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  vertical-align: baseline;
  min-width: 3em;
  height: 1em;
  line-height: 1;
  margin: 0 1px;
}

.question-content llx-blank[data-type="paren"]::before {
  content: "（";
}

.question-content llx-blank[data-type="paren"]::after {
  content: "）";
}

/* data-size 控制括号中间宽度 */
.question-content llx-blank[data-type="paren"][data-size="1"] {
  min-width: 2em;
}

.question-content llx-blank[data-type="paren"][data-size="2"] {
  min-width: 3em;
}

.question-content llx-blank[data-type="paren"][data-size="3"] {
  min-width: 4em;
}

.question-content llx-blank[data-type="paren"][data-size="4"] {
  min-width: 5em;
}

.question-content llx-blank[data-type="paren"][data-size="5"] {
  min-width: 6em;
}

.question-content llx-blank[data-type="paren"][data-size="6"] {
  min-width: 7em;
}


/* -------------------------
 * 3.2 横线型填空
 * <llx-blank data-type="line" data-size="4"></llx-blank>
 * ------------------------- */

.question-content llx-blank[data-type="line"] {
  display: inline-block;
  width: 4em;
  height: 1em;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px);
  margin: 0 2px;
}

/* data-size 控制横线长度 */
.question-content llx-blank[data-type="line"][data-size="1"] {
  width: 1em;
}

.question-content llx-blank[data-type="line"][data-size="2"] {
  width: 2em;
}

.question-content llx-blank[data-type="line"][data-size="3"] {
  width: 3em;
}

.question-content llx-blank[data-type="line"][data-size="4"] {
  width: 4em;
}

.question-content llx-blank[data-type="line"][data-size="5"] {
  width: 5em;
}

.question-content llx-blank[data-type="line"][data-size="6"] {
  width: 6em;
}

.question-content llx-blank[data-type="line"][data-size="8"] {
  width: 8em;
}

.question-content llx-blank[data-type="line"][data-size="10"] {
  width: 10em;
}


/* -------------------------
 * 3.3 圆圈型占位符
 * <llx-blank data-type="circle"></llx-blank>
 * ------------------------- */

.question-content llx-blank[data-type="circle"] {
  display: inline-block;
  width: 1.05em;
  text-align: center;
  vertical-align: baseline;
  margin: 0 1px;
}

.question-content llx-blank[data-type="circle"]::after {
  content: "○";
  font-size: 1.12em;
  line-height: 1;
}


/* =========================================================
 * 四、打印优化
 * ========================================================= */

@media print {
  .question-content {
    color: #000;
  }

  .question-content llx-choice[data-layout="inline"],
  .question-content llx-inline-grid {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .question-content llx-inline-item,
  .question-content llx-choice-option {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .question-content llx-blank[data-type="line"] {
    border-bottom-color: #000;
  }
}


/* =========================================================
 * 五、窄屏兼容
 * 题库列表、手机端预览时避免挤压
 * ========================================================= */

@media screen and (max-width: 640px) {
  .question-content llx-choice[data-layout="inline"][data-cols="3"],
  .question-content llx-choice[data-layout="inline"][data-cols="4"],
  .question-content llx-choice[data-layout="inline"][data-cols="5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-content llx-inline-grid[data-cols="3"],
  .question-content llx-inline-grid[data-cols="4"],
  .question-content llx-inline-grid[data-cols="5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}