/* [cc 16.10] sx-service.css · partea „service”, v3 final = direcția B „Cu bifă / Fără bifă”, curățată (markup + desen: parts/service.ro.php; js/sx-service.js e gol).
   Un desen nemișcat, în două jumătăți la fel: devizul cu bifă („verificat”) trece de barieră și ajunge pe factură; devizul fără bifă se oprește în barieră, factura rămâne goală.
   Nimic de apăsat. Sub desen un singur rând.
   Lățimea o dă figura (container „sv”), nu ecranul: ≥ 880 px cele două jumătăți stau una lângă alta, cu o linie subțire între ele și cu mai mult loc ÎNTRE ele
   decât între foile din aceeași jumătate (coloana din mijloc ≥ 28% din figură), ca ochiul să vadă două desene, nu un șir de 4 foi; mai îngust, una sub alta.
   Cerneala = creionul din #captura / #referat (--sv-pen, --sv-mark), scrisul de mână = „Cmd Hand” (Caveat). Bifa și „verificat” verzi, bariera cu dungi roșii.
   Totul sub .sx-service; spațiere Fibonacci (3 5 8 13 21 34 55 89). */

.sx-service {
  --sv-pen: hsl(40 13% 23% / .66); --sv-mark: hsl(40 13% 20% / .9);
  --sv-hand: "Cmd Hand", "Caveat", "Segoe Print", cursive;
  --sv-paper: #fffdf8;
  --sv-ok: #2f8a3e; --sv-ok-tint: rgba(120, 190, 100, .28);
  --sv-no: #c8473c; --sv-no-ink: #a8352b; --sv-stripe: rgba(200, 71, 60, .82); --sv-arm: #fffdf8;
  --sv-hair: var(--sx-hair-strong, rgba(20, 42, 62, .18));
}
html[data-theme="dark"] .sx-service {
  --sv-pen: rgba(232, 228, 217, .62); --sv-mark: rgba(240, 236, 226, .92);
  --sv-paper: rgba(255, 255, 255, .055);
  --sv-ok: #7cc96c; --sv-ok-tint: rgba(124, 201, 108, .22);
  --sv-no: #f0857a; --sv-no-ink: #f39a90; --sv-stripe: #e0766b; --sv-arm: rgba(240, 236, 226, .86);
  --sv-hair: var(--sx-hair-strong, rgba(255, 255, 255, .18));
}

/* ---------- capul: mai puțin aer până la desen ---------- */
.sx-service .sx-head.sx-service-head { margin-bottom: 34px; }

/* ---------- figura: două jumătăți, una lângă alta, cu o linie subțire între ele ---------- */
.sx-service .sx-service-fig { margin: 0; container: sv / inline-size; }
.sx-service .sx-service-vs { display: grid; grid-template-columns: minmax(0, 420px) minmax(28%, 1fr) minmax(0, 420px); align-items: stretch; }
.sx-service .sx-service-side { min-width: 0; }
.sx-service .sx-service-sep { justify-self: center; width: 1px; margin: 13px 0 3px; background: var(--sv-hair); }
.sx-service .sx-service-art { display: block; width: 100%; height: auto; aspect-ratio: 420 / 178; overflow: visible; }

/* creionul */
.sx-service .sx-service-art .k, .sx-service .sx-service-art .k2 { fill: none; stroke: var(--sv-pen); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sx-service .sx-service-art .k { stroke-width: 1.5px; }
.sx-service .sx-service-art .k2 { stroke-width: 1.3px; opacity: .4; }
.sx-service .sx-service-art .k.f { opacity: .5; }
.sx-service .sx-service-art .k2.f { opacity: .18; }
.sx-service .sx-service-art .k.rd { opacity: .34; }
.sx-service .sx-service-art .k2.rd { opacity: .12; }
.sx-service .sx-service-art .k.bx { stroke: var(--sv-mark); }
.sx-service .sx-service-art .k.ar, .sx-service .sx-service-art .k2.ar { stroke: var(--sv-mark); }
.sx-service .sx-service-art .k.ar { stroke-width: 2px; }
.sx-service .sx-service-art .pp { fill: var(--sv-paper); stroke: none; }
.sx-service .sx-service-art .gh { fill: none; stroke: var(--sv-pen); stroke-width: 1.4px; stroke-dasharray: 5 6; stroke-linecap: round; opacity: .7; vector-effect: non-scaling-stroke; }
.sx-service .sx-service-art .bb { fill: var(--sv-arm); stroke: none; }
.sx-service .sx-service-art .bs { fill: var(--sv-stripe); stroke: none; }
.sx-service .sx-service-art .band { fill: var(--sv-ok-tint); }
/* bifa: verde, groasă, ca pusă de mână */
.sx-service .sx-service-art .k.tk { stroke: var(--sv-ok); stroke-width: 4.2px; }
.sx-service .sx-service-art .k2.tk { stroke: var(--sv-ok); stroke-width: 2.4px; opacity: .55; }
.sx-service .sx-service-art .k.tk-s { stroke-width: 2.4px; }
.sx-service .sx-service-art .k2.tk-s { stroke-width: 1.4px; }
/* scrisul de mână */
.sx-service .sx-service-art .h { font-family: var(--sv-hand); fill: var(--sv-mark); letter-spacing: 0; word-spacing: 0; }
.sx-service .sx-service-art .ht { font-size: 29px; font-weight: 700; }
.sx-service .sx-service-art .hl { font-size: 23px; font-weight: 600; }
.sx-service .sx-service-art .hv { font-size: 21px; font-weight: 700; fill: var(--sv-ok); }
.sx-service .sx-service-art .hg { font-size: 22px; font-weight: 600; fill: var(--sv-no-ink); }
.sx-service .sx-service-art .ul { stroke-width: 2.6px; opacity: 1; }
.sx-service .sx-service-art .ul.k2 { stroke-width: 1.6px; opacity: .5; }
.sx-service .sx-service-art .ul-ok { stroke: var(--sv-ok); }
.sx-service .sx-service-art .ul-no { stroke: var(--sv-no); }

/* ---------- sub desen: un singur rând ---------- */
.sx-service .sx-service-cap { margin-top: 21px; font: 400 16px/24px var(--sx-f-sans); letter-spacing: -.005em; word-spacing: 0; color: var(--sx-ink2); text-wrap: pretty; }

/* ---------- figura mai îngustă de 880 px (tabletă, telefon): jumătățile una sub alta, fără linia din mijloc; sub 560 px scrisul puțin mai mare ---------- */
@container sv (max-width: 879px) {
  .sx-service .sx-service-vs { grid-template-columns: minmax(0, 420px); row-gap: 34px; }
  .sx-service .sx-service-sep { display: none; }
}
@container sv (max-width: 559px) {
  .sx-service .sx-service-vs { row-gap: 21px; }
  .sx-service .sx-service-art .ht { font-size: 30px; }
  .sx-service .sx-service-art .hl { font-size: 25px; }
  .sx-service .sx-service-art .hg { font-size: 24px; }
  .sx-service .sx-service-cap { margin-top: 13px; font-size: 15px; line-height: 22px; }
}