/* ===================== tutorial.css — project/tutorial detail pages ===================== */

.tutorial-hero{
  position:relative; overflow:hidden; color:#fff; padding:50px 20px 46px; text-align:center;
  background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--navy-800) 100%);
}
.tutorial-hero::before{
  content:""; position:absolute; inset:0; opacity:.3; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at 50% 25%, black, transparent 70%);
}
.tutorial-hero-inner{ position:relative; z-index:1; max-width:680px; margin:0 auto; }
.tutorial-hero .level{ margin-bottom:14px; display:inline-block; }
.tutorial-hero h1{ font-size:25px; font-weight:800; margin:0 0 10px; line-height:1.5; }
.tutorial-hero p{ color:#c3d2f2; font-size:14px; margin:0; }

.tutorial-wrap{ max-width:760px; margin:0 auto; padding:36px 20px 60px; }

.materials-box{
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:24px 26px; margin-bottom:26px;
}
.materials-box h3{ font-size:15.5px; margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.materials-box h3 i{ color:var(--blue-600); }
.materials-box ul{ display:grid; gap:9px; }
.materials-box li{
  font-size:13.5px; color:var(--slate-900); display:flex; align-items:flex-start; gap:8px; line-height:1.8;
}
.materials-box li::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--blue-600); margin-top:3px; font-size:11px; }

.steps{ position:relative; padding-inline-start:6px; }
.step-card{
  position:relative; background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:22px 24px 22px 24px; margin-bottom:18px; padding-inline-start:64px;
}
.step-card::before{
  content:attr(data-step); position:absolute; right:20px; top:22px;
  width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--blue-600),var(--blue-400));
  color:#fff; font-family:var(--font-mono); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.step-card h3{ font-size:15px; margin:0 0 10px; padding-inline-end:44px; }
.step-card p{ font-size:13.5px; line-height:1.95; color:var(--slate-600); margin:0; }
.step-card ul{ margin-top:8px; display:grid; gap:6px; }
.step-card ul li{ font-size:13px; color:var(--slate-600); padding-inline-start:14px; position:relative; }
.step-card ul li::before{ content:"–"; position:absolute; right:0; color:var(--blue-500); }

.code-block{
  background:var(--navy-950); color:#dbe6ff; border-radius:var(--radius-md);
  padding:18px; margin-top:12px; overflow-x:auto; direction:ltr; text-align:left;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.8;
}

.safety-box{
  background:linear-gradient(135deg,#fff1f1,#ffe4e4); border:1px solid #ffbcbc;
  border-radius:var(--radius-lg); padding:24px 26px; margin-top:26px;
}
.safety-box h3{ font-size:15.5px; margin:0 0 12px; display:flex; align-items:center; gap:8px; color:#b91c1c; }
.safety-box h3 i{ color:#dc2626; }
.safety-box p{ font-size:13.5px; color:#7a1f1f; line-height:1.95; margin:0 0 10px; }
.safety-box p:last-child{ margin-bottom:0; }

.tutorial-cta{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-800)); color:#fff;
  border-radius:var(--radius-lg); padding:22px 26px; margin-top:26px;
}
.tutorial-cta p{ margin:0; font-size:13.5px; color:#c3d2f2; }
.tutorial-cta a{
  background:linear-gradient(135deg,var(--blue-600),var(--blue-400)); color:#fff; font-weight:700;
  padding:11px 22px; border-radius:50px; font-size:13.5px; white-space:nowrap;
}

@media (max-width:600px){
  .tutorial-hero{ padding:36px 16px 34px; }
  .tutorial-hero h1{ font-size:19px; }
  .tutorial-wrap{ padding:26px 14px 44px; }
  .materials-box, .step-card, .safety-box{ padding:18px; }
  .step-card{ padding-inline-start:52px; }
  .step-card::before{ width:28px; height:28px; font-size:12px; right:14px; top:18px; }
  .step-card h3{ font-size:14px; padding-inline-end:36px; }
  .tutorial-cta{ flex-direction:column; text-align:center; }
}