/* ===========================================================
   自定义模块（::: note / ::: steps / ::: row …）
   -----------------------------------------------------------
   统一语言：乳白底 + 2px 墨线 + 硬阴影 + 左上角一枚歪贴的小标签。
   这份表的修改不用动 JS —— 新模块的 DOM 结构由 src/blocks.js 拼，
   这里只负责长什么样。想调某种模块的底色/标签字，改下面那一段就行。
   =========================================================== */

.blk{
  --blk-paper: var(--milk);
  --blk-edge: var(--ink);
  --blk-tag: var(--hay);
  position:relative;
  margin:2em 0;
  padding:clamp(22px,3vw,30px) clamp(20px,3vw,30px) clamp(18px,2.4vw,24px);
  background:var(--blk-paper);
  border:var(--line) solid var(--blk-edge);
  border-radius:var(--r-sticker);
  box-shadow:5px 5px 0 color-mix(in srgb, var(--ink) 15%, var(--milk));
}

/* 左上角那枚歪着贴的小标签 */
.blk::before{
  content:"";
  position:absolute; top:-14px; left:20px;
  padding:2px 12px 3px;
  font-family:var(--font-display); font-weight:900;
  font-size:.72rem; letter-spacing:.14em;
  color:var(--ink); background:var(--blk-tag);
  border:var(--hair) solid var(--ink); border-radius:var(--r-pill);
  transform:rotate(-2.4deg);
  box-shadow:2px 2px 0 color-mix(in srgb, var(--ink) 22%, var(--milk));
}
.blk--note::before{ content:"便签"; }
.blk--tip::before{ content:"有用"; }
.blk--warn::before{ content:"当心"; }
.blk--card::before{ content:"卡片"; }
.blk--fold::before{ content:"展开"; }
.blk--steps::before{ content:"怎么弄"; }
.blk--stat::before{ content:"几个数"; }
.blk--figure::before{ content:"看图"; }
.blk--row::before{ display:none; }      /* 分栏是个透明布局框，不挂标签 */
.blk--col::before{ display:none; }

/* 模块标题 */
.blk__t{
  font-family:var(--font-display); font-weight:900;
  font-size:1.06rem; line-height:1.45; letter-spacing:.01em;
  margin-bottom:12px; padding-top:2px;
}
.blk__b > *:first-child{ margin-top:0; }
.blk__b > *:last-child{ margin-bottom:0; }
.blk__b p{ margin:0; }
.blk__b p + p{ margin-top:1em; }

/* ---------- 便签：随手一句 ---------- */
.blk--note{
  --blk-paper: color-mix(in srgb, var(--hay) 20%, var(--milk));
  --blk-tag: var(--hay);
}

/* ---------- 小贴士 ---------- */
.blk--tip{
  --blk-paper: color-mix(in srgb, var(--leaf) 20%, var(--milk));
  --blk-tag: var(--leaf);
}

/* ---------- 提醒：唯一一个暖色，压得住分量 ---------- */
.blk--warn{
  --blk-warn: #D9622B;
  --blk-paper: color-mix(in srgb, var(--blk-warn) 13%, var(--milk));
  --blk-tag: #E8894C;
  --blk-edge: color-mix(in srgb, var(--blk-warn) 70%, var(--ink));
}

/* ---------- 通用卡片 ---------- */
.blk--card{ --blk-tag: var(--mist); }

/* ---------- 折叠问答 ---------- */
.blk--fold{
  padding:0;
  background:var(--milk);
  --blk-tag: var(--mist);
}
.blk--fold > .blk__t{
  margin:0; padding:18px 52px 18px 24px;
  cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:12px;
  font-size:1.02rem;
  transition:background .22s var(--ease);
}
.blk--fold > .blk__t::-webkit-details-marker{ display:none; }
.blk--fold > .blk__t:hover{ background:color-mix(in srgb, var(--hay) 14%, var(--milk)); }
.blk--fold[open] > .blk__t{ border-bottom:var(--hair) solid color-mix(in srgb, var(--ink) 20%, var(--milk)); }
.blk--fold .blk__b{
  padding:18px clamp(20px,3vw,26px) clamp(20px,2.4vw,24px);
  border-bottom-left-radius:var(--r-sticker);
  border-bottom-right-radius:var(--r-sticker);
}
/* 小箭头：合着是「>」，展开后转成朝下 */
.blk__caret{
  position:absolute; right:22px; top:22px;
  width:11px; height:11px;
  border-right:2.5px solid var(--ink);
  border-bottom:2.5px solid var(--ink);
  transform:rotate(-45deg);
  transition:transform .28s var(--ease);
}
.blk--fold[open] .blk__caret{ transform:rotate(45deg); }

/* ---------- 步骤：大号数字贴纸 ---------- */
.blk--steps{
  --blk-paper: color-mix(in srgb, var(--hay) 9%, var(--milk));
  --blk-tag: var(--hay);
}
.blk--steps ol{ margin:0; padding:0; list-style:none; counter-reset:ynStep; }
.blk--steps li{
  position:relative;
  margin:0; padding:0 0 0 54px;
  min-height:38px;
  counter-increment:ynStep;
}
.blk--steps li + li{ margin-top:16px; padding-top:16px; border-top:1.5px dashed color-mix(in srgb, var(--ink) 18%, var(--milk)); }
.blk--steps li::before{
  content:counter(ynStep);
  position:absolute; left:0; top:-2px;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:900; font-size:1rem;
  color:var(--ink); background:var(--hay);
  border:var(--line) solid var(--ink);
  box-shadow:2px 2px 0 color-mix(in srgb, var(--ink) 20%, var(--milk));
}

/* ---------- 数据卡：li 里第一个 **加粗** 会被放大当数字 ---------- */
.blk--stat{
  --blk-paper: color-mix(in srgb, var(--mist) 24%, var(--milk));
  --blk-tag: var(--mist);
}
.blk--stat ul{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:14px;
}
.blk--stat li{
  flex:1 1 128px; margin:0; padding:16px 14px 14px;
  display:flex; flex-direction:column; gap:2px;
  text-align:center;
  background:var(--milk);
  border:var(--hair) solid var(--ink);
  border-radius:var(--r-sticker);
  font-size:.86rem; color:var(--ink-60); line-height:1.5;
}
.blk--stat li > strong{
  display:block;
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.7rem,3.4vw,2.15rem); line-height:1.1;
  color:var(--pasture); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

/* ---------- 图注 ---------- */
.blk--figure{
  padding:14px;
  text-align:center;
  --blk-tag: var(--leaf);
}
.blk--figure img{
  display:block; width:100%; height:auto;
  border:var(--hair) solid var(--ink);
  border-radius:6px;
}
.blk--figure .blk__b p + p:last-child,
.blk--figure .blk__b > p:last-child:not(:only-child){
  margin-top:12px;
  font-size:var(--step-meta); line-height:1.7;
  color:var(--ink-60); letter-spacing:.02em;
}

/* ---------- 分栏：容器本身不留底色，让两个模块并排 ---------- */
.blk--row{
  margin:2em 0;
  padding:0; border:0; border-radius:0;
  background:none; box-shadow:none;
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.blk--row1{ grid-template-columns:1fr; }
.blk--row2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.blk--row3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.blk--row4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.blk__col{
  margin:0;
  padding:clamp(16px,2.4vw,22px);
  background:var(--milk);
  border:var(--line) solid var(--ink);
  border-radius:var(--r-sticker);
  box-shadow:4px 4px 0 color-mix(in srgb, var(--ink) 13%, var(--milk));
}
.blk__col > *:first-child{ margin-top:0; }
.blk__col > *:last-child{ margin-bottom:0; }

/* ===========================================================
   位置（::: tip 标题 |右 / |左 / |居中）
   -----------------------------------------------------------
   浮动那两档：块退到一侧当窄栏，正文从另一边绕着走 ——
   这就是「左边写内容、右边留白插模块」的用法。
   浮动会让后面的段落绕行，所以末尾必须有一道 clear，
   否则最后一块浮标的高度会越过容器底部、糊到下面的元素上。
   =========================================================== */

/* 正文容器末尾清一下浮动 */
.prose::after{ content:""; display:block; clear:both; }

/* 浮动模块统一按「窄栏」处理：宽度随正文宽度伸缩，但不吃掉整行。
   选择器要写成 .prose > .blk--pos-x —— 光一个 .blk--pos-x 压不过
   article.css 里那句 .prose > * + *{ margin-top }，改了也是白改 */
.prose > .blk--pos-r,
.prose > .blk--pos-l{
  width:min(46%, 330px);
  margin-top:.5em;
  margin-bottom:1.1em;
  z-index:1;                 /* 压在环绕文字的上层，阅读时不被字压住 */
}
.prose > .blk--pos-r{ float:right; margin-right:0; margin-left:clamp(20px,3vw,32px); }
.prose > .blk--pos-l{ float:left;  margin-left:0;  margin-right:clamp(20px,3vw,32px); }

/* 窄栏里的东西别撑爆：长 URL / 代码块在 330px 里要能折行或滚动 */
.blk--pos-r .blk__b,
.blk--pos-l .blk__b{ overflow-wrap:anywhere; }
.blk--pos-r pre,
.blk--pos-l pre{ overflow-x:auto; }
.blk--pos-r img,
.blk--pos-l img{ max-width:100%; height:auto; }

/* 两个浮动块挨着出现时，别把前一个的下边缘顶开 */
.blk--pos-r + .blk--pos-r,
.blk--pos-l + .blk--pos-l{ clear:both; }

/* 居中的那档：不浮动，只是收窄一截并居中 */
.blk--pos-c{
  width:min(78%, 30rem);
  margin-inline:auto;
}

/* 手机：除了居中，浮动一律退化成整行。
   窄屏再让文字绕着一栏卡片走，读起来就是在受罪 */
@media (max-width:760px){
  .prose > .blk--pos-r,
  .prose > .blk--pos-l{
    float:none;
    width:auto;
    margin:1.6em 0;
  }
  .blk--pos-c{ width:auto; }
}

/* 打印：浮动会让纸面塌一块，全部拉直 */
@media print{
  .blk--pos-r,
  .blk--pos-l{ float:none; width:auto; margin:1.4em 0; }
}

@media (max-width:760px){
  .blk{ margin:1.6em 0; box-shadow:4px 4px 0 color-mix(in srgb, var(--ink) 14%, var(--milk)); }
  .blk--row2,.blk--row3,.blk--row4{ grid-template-columns:1fr; }
  .blk--steps li{ padding-left:46px; }
  .blk--stat li{ flex-basis:104px; }
}

/* 打印时模块不要留影子，也别让折叠的东西藏着 */
@media print{
  .blk{ box-shadow:none; }
  .blk--fold{ break-inside:avoid; }
  .blk--fold .blk__b{ display:block !important; }
}