/**
 * File role: what /ro/apa-asist/ (VOGO Apa Asist, the citizens' app of a water company) adds to the shared frame
 * (/ro/e-reg/e-reg.css, body.ereg-pk, and /ro/ecm-sections.css): the hero with the home page's picture, and the
 * screens band in the manner of /ro/aiao/ (.ai-screens) — a dark field the full width of the window, each phone
 * screen beside its title, its text and the points to notice, alternating sides. Colours are the frame's tokens.
 *
 * $file_version: 1.0.0 (new file, 23.10.2026)
 */

/* The hero: the home page's picture, dark under the text, as on /ro/notar-asist/. */
body.apa-pk .pk-hero {
  background:
    linear-gradient(90deg, rgba(0,17,32,.92) 0%, rgba(0,17,32,.72) 42%, rgba(0,17,32,.20) 70%, rgba(0,17,32,.10) 100%),
    url('/ro/img/bk-image-hero.webp') center / cover no-repeat,
    var(--pk-abyss);
}

/* ---- The screens: the loudest thing on the page, on a dark field (as .ai-screens on /ro/aiao/). ---- */
body.apa-pk .apa-screens {
  padding: clamp(56px, 7vw, 92px) 0;
  background:
    radial-gradient(circle at 82% 10%, rgba(255,255,255,.06), transparent 46%),
    linear-gradient(135deg, var(--pk-abyss) 0%, var(--pk-deep) 55%, var(--pk-abyss) 100%);
  color: #fff;
}
body.apa-pk .apa-screens__head { max-width: 760px; margin: 0 auto 18px; text-align: center; }
body.apa-pk .apa-screens__head h2 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
  margin: 8px 0 12px;
}
body.apa-pk .apa-screens__head p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.7; }
body.apa-pk .apa-screens__kicker { color: var(--pk-ember); font-size: 13px; font-weight: 700; letter-spacing: .12em; }

/* One screen: the text and the phone, side by side; every second one mirrored. */
body.apa-pk .apa-screen {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) 0;
}
body.apa-pk .apa-screen + .apa-screen { border-top: 1px solid rgba(255,255,255,.1); }
body.apa-pk .apa-screen--flip .apa-screen__text { order: 2; }

/* The step number and the ember rule mark where a new screen starts. */
body.apa-pk .apa-screen__step {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--pk-ember);
}
body.apa-pk .apa-screen__step::after { content: ""; width: 34px; height: 3px; background: var(--pk-ember); }
body.apa-pk .apa-screen h3 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0 0 14px;
}
body.apa-pk .apa-screen p { margin: 0 0 16px; font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.8); }

/* The points to notice on the screen: short lines with a check, as the lists on /ro/aiao/. */
body.apa-pk .apa-screen ul { list-style: none; margin: 0; padding: 0; }
body.apa-pk .apa-screen li {
  position: relative;
  padding-left: 28px;
  margin: 9px 0;
  font-size: .96rem;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}
body.apa-pk .apa-screen li::before {
  content: "\2713";   /* a check mark, no icon font needed */
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pk-ember);
}

/* The phone: narrow, centred in its column, framed like a device. */
body.apa-pk .apa-screen__shot { margin: 0 auto; max-width: 330px; width: 100%; }
body.apa-pk .apa-screen__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
  border: 8px solid #0b1a2c;
  outline: 1px solid rgba(228,129,47,.28);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.85);
}
body.apa-pk .apa-screen__shot figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.6);
}

/* The note that the examples are fictitious. */
body.apa-pk .apa-note { margin: 22px 0 0; font-size: 13px; color: rgba(255,255,255,.6); text-align: center; }

@media (max-width: 860px) {
  body.apa-pk .apa-screen { grid-template-columns: 1fr; gap: 26px; }
  body.apa-pk .apa-screen--flip .apa-screen__text { order: 0; }
}