/* Страница «Ремёсла» (www/crafts.html, js/crafts-page.js, решение 0119) */
.crafts-page main { display: flex; flex-direction: column; gap: 14px; }
.crafts-page main > .card { margin: 0; }
.cp-intro p { margin: 0 0 10px; font-size: 1.05rem; }
.cp-intro input { width: 100%; box-sizing: border-box; font: inherit; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); }
.cp-start h2 { margin: 0 0 4px; font-size: 1.15rem; }
.cp-start p { margin: 0 0 10px; }
.cp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.cp-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--text); background: var(--card); }
.cp-step:hover { border-color: var(--muted); }
.cp-step b { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; background: var(--text); color: var(--bg); }
.cp-step span { display: flex; flex-direction: column; font-weight: 700; }
.cp-step small { font-weight: 400; color: var(--muted); font-size: .82rem; line-height: 1.3; margin-top: 2px; }
.cp-group { margin: 0; padding: 0 var(--gutter, 14px); }
.cp-group h2 { margin: 6px 2px 2px; font-size: 1.3rem; }
.cp-group h2 .muted { font-size: .9rem; font-weight: 400; }
.cp-blurb { margin: 0 2px 8px; font-size: .92rem; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.cp-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); text-decoration: none; }
.cp-card:hover { border-color: var(--muted); }
.cp-card.ws { border-style: dashed; }
.cp-ico { flex: none; width: 48px; height: 48px; border-radius: 10px; }
.cp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-role { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cp-role em { font-style: normal; text-transform: none; letter-spacing: 0; }
.cp-title { font-size: 1rem; line-height: 1.25; }
.cp-short { font-size: .86rem; line-height: 1.35; color: var(--muted); }
.cp-foot { padding: 0 14px; text-align: center; margin: 4px 0 20px; }
@media (max-width: 480px) { .cp-grid { grid-template-columns: 1fr; } }