/* workflow.css — «Πώς δουλεύουμε»: τα βήματα του έργου σε οριζόντια γραμμή.
   Το ζητά το block «Workflow — Πώς δουλεύουμε». Σε σελίδα, μπαίνει ως asset της
   σελίδας· σε ζώνη προτύπου, το τραβά μόνο του το πεδίο «Χρειάζεται».

   Η γραμμή και οι κουκκίδες είναι CSS — καμία εικόνα, κανένα JS. */

.nq-wf { padding: 84px 0 76px; }
.nq-wf-in { width: 100%; max-width: var(--nq-max, 1320px); margin-inline: auto; padding-inline: 16px; }

.nq-wf-eyebrow { margin: 0 0 10px; text-align: center; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: var(--nq-accent); }
.nq-wf-title { margin: 0 0 54px; text-align: center; font-size: clamp(28px, 4vw, 46px);
  line-height: 1.1; letter-spacing: -.03em; font-weight: 700; }

.nq-wf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.nq-wf-step { position: relative; text-align: center; padding: 0 14px; }
/* Κάθετοι διαχωριστές ανάμεσα στα βήματα — μόνο εκεί που υπάρχει επόμενο. */
.nq-wf-step + .nq-wf-step::after { content: ""; position: absolute; left: 0; top: 62px; bottom: 8px;
  border-left: 1px solid var(--nq-line); }

.nq-wf-label { display: block; margin: 0 0 14px; font-size: 14px; color: var(--nq-muted); }

/* Η οριζόντια γραμμή: ένα ψευδοστοιχείο ΑΝΑ βήμα, ώστε να μη χρειάζεται
   ξεχωριστό στοιχείο και να κόβεται σωστά όταν τα βήματα αλλάζουν σειρά. */
/* Ο κόμβος είναι κύκλος με εικονίδιο, όχι σκέτη κουκκίδα: δίνει στο βήμα μια
   εικόνα πριν καν διαβαστεί ο τίτλος. Η γραμμή περνά ΠΙΣΩ του — το λευκό γέμισμα
   του κύκλου την κόβει καθαρά χωρίς δεύτερο στοιχείο. */
.nq-wf-dot { position: relative; display: block; height: 62px; margin-bottom: 22px; }
.nq-wf-dot::before { content: ""; position: absolute; top: 50%; left: -50%; width: 100%;
  border-top: 1px solid var(--nq-line); }
.nq-wf-step:first-child .nq-wf-dot::before { left: 50%; width: 50%; }
.nq-wf-step:last-child .nq-wf-dot::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: 50%; border-top: 1px solid var(--nq-line); }

.nq-wf-dot i { position: absolute; top: 50%; left: 50%; width: 62px; height: 62px;
  margin: -31px 0 0 -31px; border-radius: 50%; background: #fff;
  border: 1px solid var(--nq-line); display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .18s, box-shadow .18s, transform .18s; }
.nq-wf-dot i svg { width: 24px; height: 24px; stroke: var(--nq-accent); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nq-wf-step:hover .nq-wf-dot i { border-color: var(--nq-accent);
  box-shadow: 0 0 0 6px rgba(79, 70, 229, .09); transform: translateY(-2px); }

/* Βελάκι ανάμεσα στα βήματα: κάθεται πάνω στη γραμμή, στο κενό πριν τον κόμβο. */
.nq-wf-step + .nq-wf-step .nq-wf-dot span { position: absolute; top: 50%; left: -14px;
  transform: translateY(-50%); width: 14px; height: 14px; color: var(--nq-line); }
.nq-wf-step + .nq-wf-step .nq-wf-dot span svg { width: 14px; height: 14px; stroke: currentColor;
  fill: none; stroke-width: 2; }

/* Ο μεγάλος αριθμός: σκιά πίσω από τον τίτλο, όχι διακόσμηση που διαβάζεται. */
.nq-wf-no { display: block; font-size: clamp(52px, 6vw, 78px); line-height: .82; font-weight: 800;
  letter-spacing: -.04em; color: rgba(17, 24, 39, .07); user-select: none; }
.nq-wf-step h3 { margin: -14px 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.nq-wf-step p { margin: 0 auto; max-width: 26ch; font-size: 14.5px; line-height: 1.55; color: var(--nq-muted); }

/* Κάτω από 900px η γραμμή γίνεται κάθετη — δύο στήλες, μετά μία. */
@media (max-width: 899.98px) {
  .nq-wf { padding: 60px 0 54px; }
  .nq-wf-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .nq-wf-step + .nq-wf-step::after { content: none; }
  .nq-wf-dot::before, .nq-wf-dot::after { content: none !important; }
}
@media (max-width: 519.98px) {
  .nq-wf-steps { grid-template-columns: 1fr; row-gap: 34px; }
  .nq-wf-title { margin-bottom: 38px; }
}