/* ===== /funkcionalumas (v2) =====
   Kiekviena sritis — LedgerSection: kairėje antraštė ir moduliai eilutėmis
   (logotipas, pavadinimas, kaina, aprašymas, funkcijos), dešinėje prilipęs
   tikras ekranas su gidu (LiveShot). Telefone ir planšetėje — antraštė,
   ekranas, tada eilutės. Bendri blokai — site.v6.css „Ledger page kit“. */

/* Sričių daug, todėl tarpai tarp jų kiek mažesni nei kitur. */
.erp-fx-sec.erp-lsec { padding: 64px 0 80px; }
.erp-fx-sec .erp-llabel { margin-bottom: 36px; }

/* Antraštė ir lede viename stulpelyje virš modulių (kaip /sprendimai kainos
   bloke), ekranas dešinėje užima abi eilutes ir prilimpa. */
.erp-fx-body {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "head shot" "mods shot"; grid-template-rows: auto 1fr; gap: 0 56px; align-items: start;
}
.erp-fx-head.erp-lhead { grid-area: head; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; margin-bottom: 36px; }
.erp-fx-head .erp-llede { max-width: 52ch; }
.erp-fx-shot { grid-area: shot; }
.erp-fx-list { grid-area: mods; }
.erp-fx-mods { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--erp-maastricht); }
/* Antroji skyriaus grupė (Rinkodara pardavimų skyriuje): sava antraštė virš eilučių. */
.erp-fx-sub { padding: 52px 0 22px; }
.erp-fx-sub .erp-sx-minihead { margin-bottom: 14px; color: var(--erp-freedom-ink); }
.erp-fx-sub-h { margin: 0; font: 700 clamp(26px, 18px + 1.2vw, 34px)/1.1 var(--erp-font-display); letter-spacing: -0.025em; color: var(--erp-maastricht); text-wrap: balance; }
.erp-fx-sub-lede { margin: 12px 0 0; max-width: 52ch; font: 400 17px/1.55 var(--erp-font-body); color: var(--erp-gray-600); text-wrap: pretty; }


/* ====== Modulio eilutė ====== */
.erp-fx-mod {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 18px;
  padding: 20px 0 22px; border-bottom: 1px solid var(--erp-rule);
}
.erp-fx-mod > :not(.erp-fx-mod-logo) { grid-column: 2; }
.erp-fx-mod-logo { grid-column: 1; grid-row: 1 / span 3; width: 36px; height: 36px; object-fit: contain; }
.erp-fx-mod-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 36px; }
.erp-fx-mod-head h3 { margin: 0; font: 650 21px/1.25 var(--erp-font-display); letter-spacing: -0.015em; color: var(--erp-maastricht); }
.erp-fx-mod-head .erp-sx-tag { align-self: center; margin-top: 0; }
.erp-fx-mod-go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 2px;
  font: 600 14.5px/1 var(--erp-font-body); color: var(--erp-freedom-ink); text-decoration: none; white-space: nowrap;
  transition: color 150ms var(--erp-ease-out), transform 150ms var(--erp-ease-out);
}
.erp-fx-mod-go > span { display: inline-block; transition: transform 200ms var(--erp-ease-out); }
.erp-fx-mod-go:hover { color: var(--erp-freedom-ink-deep); }
.erp-fx-mod-go:hover > span { transform: translateX(3px); }
.erp-fx-mod-go:active { transform: scale(0.97); }
.erp-fx-mod-go:focus-visible { outline: 2px solid var(--erp-freedom); outline-offset: 3px; border-radius: 4px; }
.erp-fx-mod-lede { margin: 4px 0 0; max-width: 62ch; font: 400 16px/1.5 var(--erp-font-body); color: var(--erp-gray-600); text-wrap: pretty; }
/* Funkcijos — glausta eilutė su varnelėmis, ne kortelės ir ne stulpelis.
   Kompiuteryje punktas nelūžta per vidurį; telefone tekstas teka vientisai,
   todėl penki punktai užima dvi ar tris eilutes, ne penkias. */
.erp-fx-mod-pts { list-style: none; margin: 10px 0 0; padding: 0; font: 400 14.5px/1.45 var(--erp-font-body); color: var(--erp-maastricht); }
.erp-fx-mod-pts li { display: inline-block; max-width: 100%; margin: 0 18px 5px 0; }
.erp-fx-pt { white-space: nowrap; }
.erp-fx-pt .erp-sx-check { margin: 0 9px 0 2px; }


/* ====== Ekranas šoniniame stulpelyje (kompiuteris) ======
   Stulpelis siauras (~450 px), todėl LiveShot dirba „siauru“ režimu: kamera
   priartina siauresnį kadrą, o paaiškinimai rodomi ne ekrano viduje, bet
   numeruotu sąrašu po juo; aktyvus žingsnis paryškintas. */
@media (min-width: 1025px) {
  .erp-fx-shot { position: sticky; top: 136px; }
  .erp-fx-shot .erp-ls-tip { display: none; }
  .erp-fx-shot .erp-ls .erp-ls-steps { display: block; margin: 16px 0 0; border-top: 1px solid var(--erp-rule); }
  .erp-fx-shot .erp-ls-steps > li { border-bottom: 1px solid var(--erp-rule); }
  .erp-fx-shot .erp-ls .erp-ls-step {
    width: 100%; height: auto; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 3px 12px;
    align-items: start; padding: 12px 8px; border: 0; border-radius: 6px; background: none;
    transition: background-color 150ms var(--erp-ease-out), transform 150ms var(--erp-ease-out);
  }
  .erp-fx-shot .erp-ls-step:hover { background: rgba(2, 44, 74, 0.04); }
  .erp-fx-shot .erp-ls-step.is-on { background: #fff; box-shadow: inset 2px 0 0 var(--erp-freedom-ink); }
  .erp-lsec-paper .erp-fx-shot .erp-ls-step.is-on { background: #fff; }
  .erp-fx-shot .erp-ls-step:focus-visible { outline: 2px solid var(--erp-freedom); outline-offset: -2px; }
  .erp-fx-shot .erp-ls-step-n {
    grid-row: 1 / span 2; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--erp-rule-strong); font-size: 11px; color: var(--erp-freedom-ink);
    transition: background-color 150ms var(--erp-ease-out), color 150ms var(--erp-ease-out), border-color 150ms var(--erp-ease-out);
  }
  .erp-fx-shot .erp-ls-step.is-on .erp-ls-step-n { background: var(--erp-freedom-ink); border-color: var(--erp-freedom-ink); color: #fff; }
  .erp-fx-shot .erp-ls-step-t { font: 600 15px/1.35 var(--erp-font-body); color: var(--erp-maastricht); }
  .erp-fx-shot .erp-ls .erp-ls-step-d { display: block; font: 400 14px/1.45 var(--erp-font-body); color: var(--erp-gray-600); }
  .erp-fx-shot .erp-ls-replay-li { padding: 8px 0 0; border-bottom: 0; }
}


@media (hover: none) {
  .erp-fx-mod-go:hover > span { transform: none; }
  .erp-fx-shot .erp-ls-step:hover { background: none; }
}


/* ====== Responsive ====== */
@media (max-width: 1024px) {
  .erp-fx-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "shot" "mods"; grid-template-rows: none; }
  .erp-fx-shot { margin-bottom: 40px; }
}
/* Ekranas telefone — 16:10, kaip ir nuotraukos (rinkinys kitur — 4:3), todėl
   apžvalgoje matomas visas ekranas, o puslapis trumpesnis. */
@media (max-width: 767px) {
  .erp-fx-shot .erp-ls-stage { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .erp-fx-sec.erp-lsec { padding: 52px 0 60px; }
  .erp-fx-sec .erp-llabel { margin-bottom: 28px; }
  .erp-fx-head.erp-lhead { gap: 14px; margin-bottom: 28px; }
  .erp-fx-shot { margin-bottom: 28px; }
  /* Telefone logotipas — prie pavadinimo, aprašymas ir funkcijos per visą plotį. */
  .erp-fx-mod { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 18px 0 20px; }
  .erp-fx-mod-logo { grid-row: 1; width: 30px; height: 30px; align-self: center; }
  .erp-fx-mod > .erp-fx-mod-lede, .erp-fx-mod > .erp-fx-mod-pts { grid-column: 1 / -1; }
  .erp-fx-mod-head { min-height: 30px; gap: 4px 10px; }
  .erp-fx-mod-head h3 { font-size: 19px; }
  .erp-fx-mod-go { min-height: 44px; margin-top: -7px; margin-bottom: -7px; }
  .erp-fx-mod-lede { margin-top: 8px; font-size: 15.5px; }
  .erp-fx-mod-pts { margin-top: 8px; font-size: 14px; line-height: 1.55; }
  .erp-fx-sub { padding: 40px 0 18px; }
  .erp-fx-sub-lede { font-size: 16px; }
  .erp-fx-mod-pts li { display: inline; margin: 0 8px 0 0; }
}