/* ============================================================
   故事时间线配图（第1课 / 第3课 共用）
   故事卡里每条时间线上的卡片：正文下面居中放一张图片，
   一张卡里放两张时用 .st-photos 容器并排居中
   ============================================================ */
.story-tl .st-card{display:flow-root;}
.st-card .st-photo{margin:10px auto 0;max-width:100%;text-align:center;}
.st-card .st-photo img{display:inline-block;width:auto;height:auto;max-height:172px;max-width:100%;
  border-radius:10px;background:#f2f2f2;
  box-shadow:0 1px 0 rgba(0,0,0,.05), 0 6px 16px -11px rgba(0,0,0,.55);}
.st-card .st-photo figcaption{margin-top:5px;font-size:11px;line-height:1.45;color:#8f8f8f;}

/* 同一张卡里多个段落之间留点空隙（lesson.css 里 .st-card p 的 margin 被 !important 清零了） */
.st-card p + p{margin-top:9px !important;}

/* 一张卡里放两张图时，并排居中显示 */
.st-card .st-photos{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:14px 24px;margin:10px 0 0;}
.st-card .st-photos .st-photo{margin:0;max-width:calc(50% - 12px);}
.st-card .st-photos.three{gap:14px 18px;}
.st-card .st-photos.three .st-photo{max-width:calc(33.333% - 16px);}

/* 横幅类图片（比如图灵机示意图）不限高，铺满卡片宽度 */
.st-card .st-photo.wide img{max-height:none;}

/* 署名行：lesson.css 里有 .card p 规则（0,1,1），这里要更高优先级才生效 */
.card .st-credit{margin:14px 0 0;font-size:11px;line-height:1.7;color:#9a9a9a;}

@media (max-width:520px){
  .st-card .st-photo img{max-height:150px;}
  .st-card .st-photo figcaption{font-size:11px;}
}

/* ============================================================
   点击放大（灯箱）—— 由 story-photos.js 给图片加 .st-zoomable 后生效
   ============================================================ */
img.st-zoomable{cursor:zoom-in;}
img.st-zoomable:focus-visible{outline:3px solid #C154C1;outline-offset:3px;}
.st-lb{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;
  padding:26px;background:rgba(26,17,30,.92);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.st-lb[hidden]{display:none;}
.st-lb .st-lb-box{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:min(1180px,94vw);max-height:92vh;}
.st-lb .st-lb-box img{display:block;width:auto;height:auto;max-width:min(1180px,94vw);max-height:78vh;
  border-radius:12px;background:#fff;box-shadow:0 20px 60px -18px rgba(0,0,0,.85);cursor:zoom-out;}
.st-lb .st-lb-box figcaption{max-width:min(880px,90vw);font-size:13px;line-height:1.65;
  color:#f2ecf5;text-align:center;}
.st-lb-close{position:absolute;top:16px;right:20px;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;font-size:19px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.st-lb-close:hover{background:rgba(255,255,255,.34);}
.st-lb-close:focus-visible{outline:3px solid #fff;outline-offset:2px;}

@media (max-width:520px){
  .st-lb{padding:14px;}
  .st-lb .st-lb-box img{max-height:72vh;}
  .st-lb .st-lb-box figcaption{font-size:12px;}
  .st-lb-close{top:10px;right:10px;width:36px;height:36px;font-size:17px;}
}