/* /servicii/ · page-only styles (components: docs/site-v3/COMPONENTS.md §7, §13, §17, §18).
   Signature: the three ways of working rise out of the hero band on a white stage (the matrix is
   the toggle). Choosing one swaps the panel below: the violet bar sweeps across the steps Vellox
   takes, the screen settles over a plate in its channel colour (calendar violet, SMS coral,
   deliverability sun) and, for self-service, the SMS phone lifts straight off its own screen.
   Final states are the defaults; motion only adds the "before" state of hidden panels. */

/* 1. Hero title: the two halves keep their lines down to 360px */
@media (max-width: 389.98px) {
  .page-servicii .phero__title { font-size: 2.125rem; }
}

/* 2. The stage: the matrix on a white card, rising out of the band */
.page-servicii .sv-stage {
  position: relative;
  padding: clamp(12px, 1.5vw, 22px);
  border-radius: var(--r-stage);
  background: #fff;
  box-shadow: var(--sh-frame);
}
.page-servicii .sv-matrix .matrix__steps { counter-reset: sv-step; padding-block: 4px 2px; }
.page-servicii .sv-matrix .matrix__steps span:not(:first-child) { display: flex; align-items: center; gap: 8px; }
.page-servicii .sv-matrix .matrix__steps span:not(:first-child)::before {
  counter-increment: sv-step;
  content: counter(sv-step);
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--violet-50); color: var(--violet-700);
  font-size: .75rem; font-weight: 720; font-variant-numeric: tabular-nums;
}
/* Rows: the chosen one carries the violet ring (site.css); "Vellox does it" = a violet bar that
   sweeps in, "you do it" = outlined cells */
.page-servicii .sv-matrix .matrix__bar { position: relative; isolation: isolate; background: var(--violet-50); }
.page-servicii .sv-matrix .matrix__bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--violet);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.page-servicii .sv-matrix .is-selected .matrix__bar::before { transform: none; }
.page-servicii .sv-matrix .matrix__cell { box-shadow: inset 0 0 0 1px var(--line); }
.page-servicii .sv-matrix .is-selected .matrix__cell { background: #fff; box-shadow: inset 0 0 0 1.5px var(--violet-200); }

/* „Doar livrabilitate”: you plan and create, Vellox takes the last two steps */
@media (min-width: 900px) {
  .page-servicii .matrix__row--mix .matrix__cells { grid-column: 2 / 4; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-servicii .matrix__row--mix .matrix__bar { grid-column: 4 / -1; }
}
@media (max-width: 899.98px) {
  .page-servicii .matrix__row--mix .matrix__bar { flex-direction: column; align-items: flex-start; justify-content: center; }
  .page-servicii .sv-matrix .matrix__row.is-selected .matrix__bar .matrix__step { color: #fff; }
}

/* 3. The panel of the chosen way: what is included (left) + its screen (right) */
.page-servicii .sv-detail { margin-top: clamp(40px, 2.4vw + 24px, 64px); }
.page-servicii .sv-panel { margin-top: 0; align-content: start; }
.page-servicii .sv-panel .ruler-list { margin-top: var(--s4); }
.page-servicii .sv-panel .actions { margin-top: var(--s6); }
.page-servicii .sv-note { margin-top: var(--s6); }
@media (max-width: 899.98px) {
  .page-servicii .sv-panel { row-gap: var(--s7); }
  .page-servicii .sv-panel .matrix-detail__copy { order: 0; }
}
/* The screen over a plate in its channel colour */
.page-servicii .sv-shot { position: relative; isolation: isolate; }
.page-servicii .sv-shot::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--r-lg);
  background: var(--plate, var(--violet));
  transform: translate(var(--plate-x, 22px), var(--plate-y, 22px));
}
.page-servicii [data-when="tu"] { --plate: var(--coral); }
.page-servicii [data-when="livrabilitate"] { --plate: var(--sun); }
.page-servicii .sv-fig > .caption { margin-top: 40px; }
@media (max-width: 759.98px) {
  .page-servicii .sv-shot::before { display: none; }
  .page-servicii .sv-fig > .caption { margin-top: var(--s4); }
}
/* The SMS phone preview lifted straight off its place in sms-compose (x 866.5, y 262, 229 wide,
   in the 1192 px capture): margin-top % reads the frame's width, so it tracks the screen exactly */
.page-servicii .sv-lift {
  --lx: 72.69%; --ly: var(--bar-h); --lw: 19.21%;
  margin-top: 21.98%;
  z-index: 2;
  transform: translateY(-6px) scale(1.12);
  filter: drop-shadow(0 2px 3px rgb(42 27 110 / .16)) drop-shadow(0 26px 34px rgb(42 27 110 / .36));
}

/* 4. The swap. Outgoing panel leaves fast, the new one settles in; no-JS shows all three. */
.page-servicii .sv-detail > .sv-panel { transition: opacity .16s ease, visibility 0s linear .16s; }
.page-servicii .sv-detail > .sv-panel.is-on { transition: opacity .42s ease .1s; }
html:not(.js) .page-servicii .sv-detail { row-gap: var(--s9); }
html:not(.js) .page-servicii .sv-detail > .sv-panel { grid-area: auto; opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  html.js:not(.rm) .page-servicii .sv-matrix .matrix__bar::before { transition: transform .75s var(--ease-out); }
  html.js:not(.rm) .page-servicii .sv-matrix .matrix__bar { transition: color .3s ease .12s; }
  html.js:not(.rm) .page-servicii .sv-matrix .is-selected .matrix__cell { animation: sv-cell .55s var(--ease-out) both; }
  html.js:not(.rm) .page-servicii .sv-matrix .is-selected .matrix__cell:nth-child(2) { animation-delay: .06s; }
  html.js:not(.rm) .page-servicii .sv-matrix .is-selected .matrix__cell:nth-child(3) { animation-delay: .12s; }
  html.js:not(.rm) .page-servicii .sv-matrix .is-selected .matrix__cell:nth-child(4) { animation-delay: .18s; }

  /* Hidden panels wait in their "before" state (set after they have faded out) */
  html.js:not(.rm) .page-servicii .sv-panel:not(.is-on) .sv-shot { transform: translate3d(0, 28px, 0) scale(.975); transition: transform 0s linear .2s; }
  html.js:not(.rm) .page-servicii .sv-panel:not(.is-on) .sv-shot::before { transform: none; transition: transform 0s linear .2s; }
  html.js:not(.rm) .page-servicii .sv-panel:not(.is-on) .sv-lift { transform: none; filter: none; transition: none; }
  html.js:not(.rm) .page-servicii .sv-panel:not(.is-on) .ruler-list > li,
  html.js:not(.rm) .page-servicii .sv-panel:not(.is-on) .actions { opacity: 0; transform: translateY(10px); transition: none; }
  /* …and settle in when chosen: screen, then the plate slides out, then the phone lifts */
  html.js:not(.rm) .page-servicii .sv-panel.is-on .sv-shot { transition: transform .75s var(--ease-out) .08s; }
  html.js:not(.rm) .page-servicii .sv-panel.is-on .sv-shot::before { transition: transform .85s var(--ease-out) .28s; }
  html.js:not(.rm) .page-servicii .sv-panel.is-on .sv-lift { transition: transform .8s var(--ease-out) .5s, filter .5s ease .55s; }
  html.js:not(.rm) .page-servicii .sv-panel.is-on .ruler-list > li,
  html.js:not(.rm) .page-servicii .sv-panel.is-on .actions { transition: opacity .4s ease .12s, transform .6s var(--ease-out) .12s; }
  html.js:not(.rm) .page-servicii .sv-panel.is-on .ruler-list > li:nth-child(2) { transition-delay: .17s; }
  html.js:not(.rm) .page-servicii .sv-panel.is-on .ruler-list > li:nth-child(3) { transition-delay: .22s; }
  html.js:not(.rm) .page-servicii .sv-panel.is-on .ruler-list > li:nth-child(4) { transition-delay: .27s; }
  html.js:not(.rm) .page-servicii .sv-panel.is-on .ruler-list > li:nth-child(5) { transition-delay: .32s; }
  html.js:not(.rm) .page-servicii .sv-panel.is-on .actions { transition-delay: .36s; }
}
@keyframes sv-cell { from { opacity: .35; transform: translateY(8px); } }

/* 5. FAQ beside one warm, illustrative photo (title + photo left, answers right; phones: photo last) */
.page-servicii .sv-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "title list" "photo list";
  grid-template-rows: auto 1fr;
  gap: var(--s6) clamp(40px, 5vw, 88px);
  align-items: start;
}
.page-servicii .sv-faq__title { grid-area: title; }
.page-servicii .sv-faq__list { grid-area: list; }
.page-servicii .sv-faq__photo { grid-area: photo; margin: 0; max-width: 488px; }
.page-servicii .sv-faq__photo .note { margin-top: var(--s3); }
@media (max-width: 899.98px) {
  .page-servicii .sv-faq__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "list" "photo"; grid-template-rows: none; }
  .page-servicii .sv-faq__photo { max-width: 520px; margin-top: var(--s4); }
}