/* =============================================================================
   LAYER 4 — TECHNIQUE / HowTo (Template B)
   Serves the seven how-to articles, ~3,900 clicks:
     /more/savjeti/kako-vezati-udicu/                       445  (poz 2,0)
     /more/savjeti/koji-cvor-koristiti/                     340  (poz 1,1)
     /more/savjeti/kako-spojiti-najlon-i-pramu/             144
     /more/savjeti/kako-spojiti-upredenicu-fluorokarbon...  136
     /slatke-vode/savjeti/ribolov-stuke-zivim-mamcima/     1442  (Tier-1 #14)
     /slatke-vode/savjeti/ribolov-soma-varalicom/           755
     /slatke-vode/savjeti/sistemi-predvezi-za-ribolov-amura/ 654

   RE-POINTED 2026-08-06 (ruling 1): this template does NOT serve /tehnike/cvorovi/, which
   shipped as a pillar. The three /slatke-vode/savjeti/ entries were added 2026-08-07 after
   routing verification found them falling through to the blog template.
   ============================================================================= */

/* --- numbered steps --------------------------------------------------------
   Real <ol>. The strongest AI-citation asset type on the site, so it gets the most
   vertical space and the clearest hierarchy on the page.
   --------------------------------------------------------------------------- */
.sr-steps { list-style: none; counter-reset: sr-step; margin: var(--s5) 0; padding: 0; }
.sr-steps > li {
  counter-increment: sr-step;
  position: relative;
  padding-left: var(--s7);
  margin-bottom: var(--s5);
}
.sr-steps > li::before {
  content: counter(sr-step);
  position: absolute; left: 0; top: 0;
  width: var(--s6); height: var(--s6);
  border-radius: var(--r-pill);
  background: var(--sea); color: var(--on-fill);
  font-family: var(--f-body); font-weight: 700; font-size: 15px;
  display: grid; place-items: center;
}

/* --- diagram slot ----------------------------------------------------------
   The diagram sits INSIDE its step, not batched into a gallery, so image and instruction
   stay adjacent. The instruction text carries the fact on its own — if the diagram never
   renders, the step still works, which is both the accessibility and the GEO position.

   The diagram classes themselves (.k-line/.k-active/.k-casing/.k-hook) are in layer 3:
   they are shared with rig illustrations elsewhere.
   --------------------------------------------------------------------------- */
.sr-step-figure { margin: 0 0 var(--s3); background: var(--dg-bg);
  border: 1px solid var(--border); border-radius: var(--r-card); }
.sr-step-figure svg { display: block; width: 100%; height: auto; }

/* --- common mistakes -------------------------------------------------------
   DELIBERATELY NOT --closed red. --open/--closed are regulatory status only. A
   "wrong knot" warning must never visually resemble a legal lovostaj warning, so this is
   plain --ink with a neutral marker. design.md §1.
   --------------------------------------------------------------------------- */
.sr-mistakes { list-style: none; margin: var(--s5) 0; padding: 0; }
.sr-mistakes > li {
  position: relative; padding-left: var(--s5); margin-bottom: var(--s3); color: var(--ink);
}
.sr-mistakes > li::before {
  content: "!"; position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: var(--r-pill);
  border: 1.5px solid var(--muted); color: var(--muted);
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
}

/* --- money block -----------------------------------------------------------
   Placed BEFORE the steps by design: a reader about to tie a knot is primed to check the
   leader or braid they need right then, not after finishing. Disclosure sits above it,
   per the 2026-08-04 review.
   --------------------------------------------------------------------------- */
.sr-technique-gear { margin-block: var(--s5); }