/* ============================================================
   WebtasticAI — secțiunile refolosite, un singur proprietar.

   Până pe 30.09.2026, aceleași componente erau definite de trei-patru
   ori (inline în index.html și continut-social-media.html, în
   servicii/servicii.css, în wt-components.css), cu diferențe mici
   între copii, iar paginile de aplicații nu primeau deloc stilurile.
   Acum trăiesc doar aici; build-sections.js leagă foaia pe fiecare
   pagină cu nav, înaintea lui wt-nav.css.

     1. „Pe scurt”       .wt-tldr     (build-answers.js)
     2. „De ce” / „E pentru tine?”  .contrast
     3. „Cum lucrăm”     ol.steps

   Mobil întâi: fiecare bloc e gândit mai întâi la 375px, apoi lărgit.
   Consumă doar tokenii din wt-system.css.
   ============================================================ */


/* ============================================================
   1. „Pe scurt” — răspunsul direct de sub hero.
   Rămâne un singur paragraf întreg (e pasajul pe care îl citează
   motoarele generative), dar nu mai e o bandă grea pe toată lățimea:
   e un card aerisit, iar faptele devin „cipuri” — pe mobil un rând
   care se derulează orizontal, pe desktop o coloană în dreapta.
   ============================================================ */
.wt-tldr-wrap { padding-block: clamp(1.75rem, 4vw, 3rem) 0; background: none; border: 0; }

.wt-tldr {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.25rem, 3.5vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
}
[data-theme="dark"] .wt-tldr { background: var(--surface-2); }

/* Eticheta e mobilier, nu conținut: stă în CSS ca să nu intre în
   pasajul citat. --purple-text: 4,85:1 pe deschis, 6,5:1 pe închis. */
.wt-tldr::before {
  content: "Pe scurt";
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--purple-text);
  background: rgba(123, 47, 255, 0.08);
  border: 1px solid rgba(123, 47, 255, 0.24);
  border-radius: 999px;
  padding: 0.25em 0.75em;
}

.wt-tldr-q {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--text); margin: 0; max-width: 34ch;
}
.wt-tldr-a { font-size: 1rem; line-height: 1.65; color: var(--text-dim); margin: 0; max-width: 64ch; }

/* Mobil: cipuri într-un rând derulabil, cu snap. Derularea stă în
   <dl>, deci pagina nu se lățește niciodată. */
.wt-tldr-facts {
  display: flex; gap: 0.6rem; margin: 0.25rem calc(-1 * clamp(1.25rem, 3.5vw, 2rem)) 0;
  padding: 0.1rem clamp(1.25rem, 3.5vw, 2rem) 0.4rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(1.25rem, 3.5vw, 2rem);
  scrollbar-width: thin;
}
.wt-tldr-fact {
  flex: 0 0 min(15rem, 72%);
  scroll-snap-align: start;
  display: grid; gap: 0.2rem; align-content: start;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--bg-tint);
}
.wt-tldr-fact dt {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dimmer);
}
.wt-tldr-fact dd { margin: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.4; color: var(--text); }

/* Desktop: întrebarea și răspunsul în stânga, faptele în dreapta,
   ca listă compactă. Nimic de derulat. */
@media (min-width: 900px) {
  .wt-tldr {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .wt-tldr::before, .wt-tldr-q, .wt-tldr-a { grid-column: 1; }
  .wt-tldr-facts {
    grid-column: 2; grid-row: 1 / span 3;
    display: grid; gap: 0; margin: 0; padding: 0; overflow: visible;
    align-self: center;
  }
  .wt-tldr-fact {
    grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline;
    padding: 0.6rem 0; border-radius: 0; background: none;
    border-top: 1px solid var(--border);
  }
  .wt-tldr-fact:first-child { border-top: 0; }
  .wt-tldr-fact dd { font-weight: 500; color: var(--text-dim); }
}


/* ============================================================
   2. „De ce WebtasticAI” / „E pentru tine?” — .contrast
   Nu mai sunt două carduri egale cu câte o listă: cardul „cu noi”
   e panoul închis, dominant; cardul „fără noi” e o listă discretă,
   mai îngustă. Ochiul ajunge întâi la soluție, nu la problemă.
   Ordinea din DOM rămâne neatinsă (cititoarele de ecran o urmează).
   ============================================================ */
.contrast {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.contrast > * { min-width: 0; }

.contrast-card {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 3.5vw, 2rem);
}
.contrast-card.pain {
  background: transparent;
  border: 1px dashed var(--border-strong);
}
.contrast-card.win {
  background: var(--ink);
  color: var(--on-ink);
  border: 1px solid var(--ink-border);
}

.contrast-tag {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  margin-bottom: 1rem;
}
.contrast-tag .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.contrast-tag .ic svg { width: 16px; height: 16px; }
.contrast-card.pain .contrast-tag { color: var(--text-dim); }
.contrast-card.pain .contrast-tag .ic { background: var(--bg-tint); color: var(--text-dimmer); }
.contrast-card.win .contrast-tag { color: var(--on-ink); }
.contrast-card.win .contrast-tag .ic { background: rgba(163, 230, 53, 0.16); color: #A3E635; }

.contrast-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.contrast-list li { display: flex; gap: 0.65rem; align-items: flex-start; line-height: 1.5; }
.contrast-list li svg { width: 18px; height: 18px; flex: none; margin-top: 0.2em; }
.contrast-card.pain .contrast-list li { color: var(--text-dim); font-size: 0.95rem; }
.contrast-card.pain .contrast-list li svg { color: var(--text-dimmer); }
.contrast-card.win .contrast-list li { color: var(--on-ink); font-weight: 500; font-size: 1rem; }
.contrast-card.win .contrast-list li svg { color: #A3E635; }

/* Nota „nu e pentru tine dacă…” din cardul „fără noi”. */
.fit-note {
  display: flex; gap: 0.7rem; align-items: flex-start;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.fit-note svg { width: 20px; height: 20px; color: var(--text-dimmer); flex: none; margin-top: 2px; }
.fit-note p { font-size: 0.9rem; color: var(--text-dim); margin: 0; }
.fit-note strong { color: var(--text); }

@media (min-width: 820px) {
  /* Cardul „cu noi” e mereu cel lat, oricare ar fi primul în DOM. */
  .contrast { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem; }
  .contrast:has(> .win:first-child) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .contrast-card.pain { align-self: center; }
}


/* ============================================================
   3. „Cum lucrăm” — ol.steps
   Mobil: o cronologie verticală, cu numărul pe o linie continuă și
   textul lângă el — patru pași încap pe un ecran.
   Desktop: aceeași linie, culcată, cu nodurile deasupra textului.
   ============================================================ */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  counter-reset: none; position: relative;
}
.steps::before { content: none; }

.step {
  position: relative;
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem;
  padding-bottom: 1.5rem;
}
.step:last-child { padding-bottom: 0; }
/* Linia dintre noduri: de la baza numărului până la următorul. */
.step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: 0;
  width: 2px; background: var(--border-strong);
}
.step-num {
  grid-row: 1 / span 3;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: #fff; background: var(--purple);
  box-shadow: 0 0 0 4px var(--bg-tint);
  margin: 0;
}
.step h3 { grid-column: 2; font-size: 1.1rem; line-height: 1.3; margin: 0.45rem 0 0.3rem; max-width: none; }
.step p { grid-column: 2; margin: 0; color: var(--text-dim); font-size: 0.95rem; line-height: 1.55; max-width: 46ch; }
.step .tag {
  grid-column: 2; justify-self: start;
  margin-top: 0.55rem; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; color: var(--lime-text);
  background: rgba(101, 163, 13, 0.1);
}

@media (min-width: 900px) {
  /* Câți pași, atâtea coloane egale (3, 4 sau 5, fără media query per pagină). */
  .steps { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: clamp(1rem, 2.5vw, 2rem); }
  .step { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .step-num { grid-row: auto; margin-bottom: 1rem; }
  /* Linia culcată: de la nodul curent spre următorul, peste gol. */
  .step:not(:last-child)::before {
    left: 3.25rem; right: calc(-1 * clamp(1rem, 2.5vw, 2rem) + 0.75rem);
    top: calc(1.25rem - 1px); bottom: auto; width: auto; height: 2px;
  }
  .step h3, .step p, .step .tag { grid-column: 1; }
  .step h3 { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wt-tldr-facts { scroll-behavior: auto; }
}


/* ============================================================
   4. Linkuri înrudite serviciu ↔ domeniu (build-sections.js)
   Un rând scurt, nu încă o secțiune: kicker + trei pastile.
   ============================================================ */
.wt-related { padding-block: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--border); }
.wt-related .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.wt-related-k { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dimmer); }
.wt-related-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wt-related-links a {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  padding: 0.5rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-weight: 600; font-size: 0.92rem; color: var(--text);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.wt-related-links a svg { width: 14px; height: 14px; opacity: 0.6; }
.wt-related-links a:hover, .wt-related-links a:focus-visible { border-color: var(--purple); color: var(--purple-text); }


/* ============================================================
   5. Banda secțiunii de formular (ctaLadder, stilat în wt-cta.css)
   ============================================================ */
.wt-convert { background: var(--bg-tint); border-top: 1px solid var(--border); }