/* folyamat.css — az „Így dolgozunk” aloldal saját részei; az alap (nav, gombok,
   színek, betűk, lábléc) a ../valasztek/valasztek.css-ből jön. */
.fo-head{padding:44px 0 18px}
.fo-back{display:table;margin-bottom:22px;font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none}
.fo-back:hover{color:var(--accent-dark)}
.fo-head h1{font-size:clamp(32px,4.8vw,54px);font-weight:800;letter-spacing:-.03em;margin:0 0 16px;max-width:18ch}
.fo-head .lead{font-size:clamp(16.5px,1.6vw,19px);color:var(--ink-soft);max-width:46ch;margin:0}
.fo-h2{font-size:clamp(22px,2.8vw,30px);font-weight:700;letter-spacing:-.02em;margin:0 0 18px}

.fo-video-sec{padding:26px 0 10px}
.fo-video{border-radius:var(--radius);overflow:hidden;background:#111;box-shadow:var(--shadow);aspect-ratio:16/9}
.fo-video video{display:block;width:100%;height:100%}
.fo-video video::cue{font-family:var(--font-body);background:rgba(20,20,26,.78);color:#fff}
.fo-video-note{margin:12px 0 0;font-size:14px;color:var(--muted)}

.fo-steps-sec{padding:44px 0 70px}
.fo-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:none}
.fo-step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:26px 28px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.fo-num{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-dark);font-family:var(--font-head);font-weight:800;font-size:21px}
.fo-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:8px}
.fo-top h3{font-size:clamp(18px,2vw,22px);font-weight:700;letter-spacing:-.01em;margin:0;margin-right:auto}
.fo-dur{font-size:13px;font-weight:600;color:var(--ok);background:#e8f5ee;padding:5px 11px;border-radius:999px}
.fo-time{font:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);padding:5px 12px;border-radius:999px;cursor:pointer}
.fo-time:hover{border-color:var(--accent);color:var(--accent-dark)}
.fo-time:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fo-body>p{margin:0 0 10px;color:var(--ink-soft);line-height:1.65}
.fo-body ul{margin:0 0 14px;padding-left:20px;color:var(--ink-soft);line-height:1.65}
.fo-body li{margin:3px 0}
.fo-body a{color:var(--accent-dark)}
.fo-you{margin:0 !important;padding:10px 14px;border-radius:12px;background:var(--paper);font-size:14.5px}
.fo-you b{color:var(--ink)}

.fo-end{margin-top:40px;padding:34px 32px;border-radius:var(--radius);background:var(--ink);color:#f3f1ec;text-align:center}
.fo-end .fo-h2{color:#fff;margin-bottom:10px}
.fo-end p{color:#c9c5bd;margin:0 auto 22px;max-width:44ch}
.fo-end-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.fo-end .btn-ghost{color:#fff;border-color:#fff;background:transparent}

@media (max-width:640px){
  .fo-head{padding:30px 0 10px}
  .fo-step{grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 18px}
  .fo-num{width:40px;height:40px;font-size:18px}
  .fo-top h3{width:100%;margin-right:0}
  .fo-end{padding:28px 20px}
}

/* ---------- RAJZOS MŰHELY (2026-10-12): papírlap-lépések, lépésenként egy rajz ---------- */
.fo-head h1{letter-spacing:-.015em}
.fo-h2{font-weight:800}
.fo-video{border:1.5px solid var(--ink-line);border-radius:var(--r-sketch);box-shadow:var(--sheet-shadow)}
.fo-step{grid-template-columns:56px minmax(0,1fr) 168px;border:1.5px solid var(--ink-line);border-radius:var(--r-sketch);box-shadow:var(--sheet-shadow)}
.fo-body{grid-column:2;grid-row:1}
.fo-art{grid-column:3;grid-row:1;width:100%;height:auto;max-height:150px;object-fit:contain;align-self:start;margin-top:6px}
.fo-num{font-family:var(--font-hand);font-weight:600;font-size:30px;line-height:1;border:1.5px solid var(--ink-line);border-radius:52% 48% 50% 46% / 48% 52% 46% 50%}
.fo-dur{background:#e7ead6}
.fo-time{border-color:var(--line)}
.fo-you{border:1.5px dashed var(--line)}
.fo-end{background:var(--dark-paper) url(../img/rajz/papir-sotet.webp) 0 0/1600px 1600px repeat;border-radius:28px 20px 30px 22px / 22px 30px 20px 28px}
@media (max-width:640px){
  .fo-step{grid-template-columns:auto minmax(0,1fr)}
  .fo-art{grid-column:2;grid-row:1;justify-self:end;width:92px;max-height:80px;margin-top:0}
  .fo-body{grid-column:1/-1;grid-row:2}
}