/* ============================================================
   Sakurumii · page-tutorials.css
   ============================================================ */

/* 筛选条 */
.filter-bar{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}

/* masonry 教程卡 */
.tut-masonry{grid-column:1/-1;columns:3;column-gap:12px}
.tut-card{break-inside:avoid;display:block;margin:0 0 12px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,0));transition:border-color .25s ease}
.tut-card:hover{border-color:rgba(255,255,255,.24)}
.tut-card .shot{position:relative;overflow:hidden;background:#0a0a0a;border-bottom:1px solid var(--line)}
.tut-card .shot img{width:100%;height:auto;display:block;transition:transform .6s ease,opacity .3s}
.tut-card:hover .shot img{transform:scale(1.03);opacity:.88}
.tut-card .shot .len{position:absolute;right:12px;bottom:10px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--w1);background:rgba(0,0,0,.6);padding:3px 8px;border:1px solid rgba(230,230,230,.2)}
.tut-card .meta{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}
.tut-card .meta .cats{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--o)}
.tut-card .meta h3{color:var(--w1);font-size:1.25rem;line-height:1.25;letter-spacing:-.02em;font-weight:600}
.tut-card .meta p{color:var(--w2);font-size:.875rem;line-height:1.375rem;font-weight:500;text-wrap:pretty}
.tut-card .meta .tags{display:flex;flex-wrap:wrap;gap:4px}
.tut-card .meta .tags span{background:var(--g2);padding:0 6px;color:var(--w1);font-size:11px;line-height:20px}
.tut-card .go{color:var(--w1);font-size:.8125rem;font-weight:600}

.tut-card.hide{display:none}

/* 建造中卡片 */
.tut-card.wip .shot img{opacity:.6;filter:grayscale(.45)}
.tut-card.wip .badge-wip{position:absolute;right:12px;top:12px;z-index:3}

/* 教程详情页 */
.tut-body{grid-column:1/-1;display:flex;flex-direction:column;gap:26px;max-width:60rem}
.tut-body .lead{color:var(--w2);font-weight:500;text-wrap:pretty}
.tut-body h2{color:var(--w1);margin-top:8px}
.tut-body h3{color:var(--w1);margin-top:14px;font-size:1.25rem}
.tut-body p{color:var(--w2);font-weight:500;text-wrap:pretty}
.tut-body .note{color:var(--g1);font-size:.875rem;line-height:1.375rem}
.tut-body pre{background:#0a0a0a;border:1px solid var(--line);padding:18px;overflow-x:auto;color:var(--w1);font-family:var(--mono);font-size:13px;line-height:1.6}
.tut-body code{font-family:var(--mono);font-size:13px;color:var(--o)}
.tut-body ul{display:flex;flex-direction:column;gap:8px}
.tut-body ul li{position:relative;padding-left:18px;color:var(--w2);font-weight:500}
.tut-body ul li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;background:var(--o)}
.tut-cover{grid-column:1/-1;position:relative;overflow:hidden;border:1px solid var(--line);aspect-ratio:21/9;max-width:60rem}
.tut-cover img{width:100%;height:100%;object-fit:cover}

@media (max-width:1023px){
  .tut-masonry{columns:2}
}
@media (max-width:639px){
  .tut-masonry{columns:1}
}