/* =====================================================================
   JAPRIVIO Technology (/technology/) — WP3
   Warstwa strony na site.css: wyłącznie klasy tech-*, tokeny --jp-*,
   punkty łamania 720 / 1080 / 1081. Komponentów jp-* nie nadpisujemy.
   ===================================================================== */

/* ---------- Wspólne drobiazgi ---------- */
/* Fokus klawiatury nie chowa się pod paskiem nawigacji i przyklejonym jp-subnav (WCAG 2.2 „focus not obscured”). */
:root:has(.tech-hero) { scroll-padding-block-start: calc(var(--jp-nav-total) + 72px); }
.tech-label { margin: 0; font-size: var(--jp-fs-sm); font-weight: 600; line-height: 1.4; color: var(--jp-text); }
.tech-caveat {
  margin: 0; padding-inline-start: var(--jp-s-3); border-inline-start: 2px solid var(--jp-aqua-200);
  font-size: var(--jp-fs-xs); line-height: 1.55; color: var(--jp-text-2);
}
.tech-tags { margin-block-start: var(--jp-s-4); }

/* ---------- Hero (tekst | ilustracja; własna siatka 6:5, by H1 mieścił się w 3 wierszach) ---------- */
.tech-hero__grid { display: grid; gap: clamp(40px, 2rem + 3vw, 88px); align-items: center; }
@media (min-width: 1081px) { .tech-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.tech-hero__art { inline-size: 100%; max-inline-size: 560px; }
.tech-hero__art img {
  display: block; inline-size: 100%; block-size: auto; border-radius: var(--jp-r-xl);
  background: var(--jp-surface); border: 1px solid var(--jp-glass-edge); box-shadow: var(--jp-shadow-3);
}
@media (min-width: 1081px) { .tech-hero__art { max-inline-size: none; } }

/* ---------- Ścieżka: problem → diagnoza → rozwiązanie ---------- */
.tech-path__text { margin: 0; max-inline-size: 60ch; color: var(--jp-text-1); }
.tech-path .tech-label { margin-block-start: var(--jp-s-3); }
.tech-path__uses { color: var(--jp-text-1); font-size: var(--jp-fs-body); }

.tech-path__diagram {
  --tech-gap: 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: var(--tech-gap);
  padding: clamp(20px, 1rem + 1.5vw, 40px); border-radius: var(--jp-r-xl);
  background: var(--jp-band); border: 1px solid var(--jp-glass-edge);
  box-shadow: inset 0 1px 0 var(--jp-glass-edge), var(--jp-glass-outline), var(--jp-shadow-2);
}
.tech-path__node {
  position: relative; margin: 0; padding: var(--jp-s-4) var(--jp-s-3); border-radius: var(--jp-r-md);
  background: var(--jp-deep); color: var(--jp-on-dark); font-size: var(--jp-fs-sm); font-weight: 600; line-height: 1.35; text-align: center;
  box-shadow: var(--jp-shadow-1);
}
.tech-path__node::after { content: ""; position: absolute; inset-inline-start: 100%; inset-block-start: 50%; inline-size: var(--tech-gap); block-size: 2px; background: var(--jp-turq); }
.tech-path__node + .tech-path__node::after { inline-size: calc(var(--tech-gap) / 2); }
.tech-path__outcomes { position: relative; display: grid; gap: var(--jp-s-3); margin: 0; padding: 0; list-style: none; }
.tech-path__outcomes::before { content: ""; position: absolute; inset-inline-start: calc(var(--tech-gap) / -2); inset-block: 26px; inline-size: 2px; background: var(--jp-turq); }
.tech-path__outcomes li {
  position: relative; padding: var(--jp-s-3) var(--jp-s-4); border-radius: var(--jp-r-md);
  background: var(--jp-surface); box-shadow: inset 0 0 0 1px var(--jp-aqua-200), var(--jp-shadow-1);
  color: var(--jp-text); font-size: var(--jp-fs-sm); font-weight: 600; line-height: 1.35; text-align: center;
}
.tech-path__outcomes li::before { content: ""; position: absolute; inset-inline-end: 100%; inset-block-start: 50%; inline-size: calc(var(--tech-gap) / 2); block-size: 2px; background: var(--jp-turq); }
/* Pomarańcz tylko jako znacznik wyboru „CPQ lub projekt” (AGENTS.md: akcent ważnego etapu) */
.tech-path__outcome--project { box-shadow: inset 0 0 0 1.5px var(--jp-accent), var(--jp-shadow-1); }

.tech-advisory {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jp-s-4) var(--jp-s-6);
  margin-block-start: clamp(48px, 3rem + 2vw, 96px); padding: clamp(20px, 1rem + 1vw, 32px); border-radius: var(--jp-r-lg);
  background: var(--jp-frost); border: 1px solid var(--jp-glass-edge);
  box-shadow: inset 0 1px 0 var(--jp-glass-edge), var(--jp-glass-outline), var(--jp-shadow-1);
}
.tech-advisory > div { display: grid; gap: var(--jp-s-2); flex: 1 1 28rem; }
.tech-advisory__title { font-size: var(--jp-fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.tech-advisory p { margin: 0; max-inline-size: 64ch; font-size: var(--jp-fs-sm); color: var(--jp-text-2); }

/* ---------- Część 1: projekty dedykowane ---------- */
.tech-legend { margin: var(--jp-s-2) 0 0; }
.tech-legend > div { flex-wrap: wrap; }
.tech-legend dd { font-size: var(--jp-fs-sm); color: var(--jp-text-2); }

.tech-group + .tech-group { margin-block-start: clamp(64px, 4rem + 3vw, 128px); }
.tech-group__head { display: grid; gap: var(--jp-s-3); max-inline-size: 760px; margin-block-end: clamp(24px, 1.5rem + 1vw, 40px); }
.tech-group__head > * { margin: 0; }
.tech-group__head p { font-size: var(--jp-fs-body); color: var(--jp-text-2); max-inline-size: 64ch; }

/* Duża karta: produkt (pełny materiał) albo koncepcja (przerywany kontur, lżejsze tło) */
.tech-feature {
  display: grid; gap: clamp(28px, 2rem + 2vw, 64px); align-items: start;
  padding: clamp(24px, 1.2rem + 2vw, 56px); border-radius: var(--jp-r-xl);
  background: var(--jp-frost); border: 1px solid var(--jp-glass-edge);
  box-shadow: inset 0 1px 0 var(--jp-glass-edge), var(--jp-glass-outline), var(--jp-shadow-3);
}
.tech-feature--concept {
  background: linear-gradient(160deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 48%));
  border: 1.5px dashed var(--jp-plan-line); box-shadow: none;
}
@media (min-width: 1081px) { .tech-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.tech-feature__copy { display: grid; gap: var(--jp-s-4); align-content: start; }
.tech-feature__copy > * { margin: 0; }
.tech-feature__copy > p:not([class]) { font-size: var(--jp-fs-body); color: var(--jp-text-1); max-inline-size: 64ch; }
.tech-feature__name { font-size: var(--jp-fs-sm); font-weight: 600; color: var(--jp-brand-text); margin-block-end: calc(-1 * var(--jp-s-3)); }
.tech-feature__title { font-size: var(--jp-fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -.028em; }
.tech-feature__lead { font-size: var(--jp-fs-lead); line-height: 1.45; letter-spacing: -.006em; color: var(--jp-text); max-inline-size: 44ch; }
.tech-feature__flow { display: grid; gap: var(--jp-s-4); padding: clamp(20px, 1rem + 1vw, 32px); border-radius: var(--jp-r-lg); background: var(--jp-surface); box-shadow: inset 0 0 0 1px var(--jp-hair); }
.tech-feature--concept .tech-feature__flow { background: rgb(255 255 255 / 72%); }

.tech-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--jp-s-3) var(--jp-s-5);
  padding-block: var(--jp-s-4); border-block: 1px solid var(--jp-hair);
}
.tech-facts dt { font-size: var(--jp-fs-xs); font-weight: 500; color: var(--jp-text-2); }
.tech-facts dd { margin: 2px 0 0; font-size: var(--jp-fs-sm); font-weight: 600; color: var(--jp-text); }

/* Przebieg krok po kroku (numery z licznika CSS — treść kroków zostaje tekstem) */
.tech-flow { counter-reset: tech-step; position: relative; display: grid; gap: var(--jp-s-4); margin: 0; padding: 0; list-style: none; }
.tech-flow::before { content: ""; position: absolute; inset-inline-start: 15px; inset-block: 16px; inline-size: 2px; background: var(--jp-aqua-200); }
.tech-flow li { counter-increment: tech-step; position: relative; display: grid; gap: 2px; padding-inline-start: 48px; min-block-size: 32px; align-content: center; }
.tech-flow li::before {
  content: counter(tech-step); position: absolute; inset-inline-start: 0; inset-block-start: 0;
  display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%;
  background: var(--jp-deep); color: var(--jp-on-dark); font-size: var(--jp-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px var(--jp-surface);
}
.tech-flow strong { font-size: var(--jp-fs-sm); font-weight: 600; color: var(--jp-text); }
.tech-flow span { font-size: var(--jp-fs-sm); line-height: 1.5; color: var(--jp-text-2); }
.tech-flow--concept li::before { background: var(--jp-surface); color: var(--jp-plan); box-shadow: inset 0 0 0 1.5px var(--jp-plan-line), 0 0 0 4px var(--jp-surface); }
.tech-flow--concept span { color: var(--jp-text-1); }

/* Karty koncepcji */
.tech-concepts { display: grid; gap: var(--jp-gap); margin-block-start: var(--jp-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.tech-concept {
  display: grid; gap: var(--jp-s-3); align-content: start;
  padding: clamp(20px, 1rem + 1vw, 32px); border-radius: var(--jp-r-lg);
  background: linear-gradient(160deg, rgb(255 255 255 / 76%), rgb(255 255 255 / 56%));
  border: 1.5px dashed var(--jp-plan-line);
}
.tech-concept > * { margin: 0; }
.tech-concept__head { display: flex; align-items: center; justify-content: space-between; gap: var(--jp-s-3); flex-wrap: wrap; margin-block-end: var(--jp-s-2); }
.tech-concept__title { font-size: var(--jp-fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.tech-concept__lead { font-size: var(--jp-fs-sm); color: var(--jp-text-1); }
.tech-concept__cta { margin-block-start: var(--jp-s-2); }

/* ---------- Jak pracujemy 01–04 ---------- */
.tech-process { --tech-progress: 1; }
.tech-process.is-process-ready { --tech-progress: 0; }
.tech-process__track { position: relative; }
.tech-process__line { position: absolute; inset-block-start: 22px; inset-inline: 12.5%; block-size: 2px; background: var(--jp-aqua-100);
  overflow: clip; overflow-clip-margin: 16px; } /* biegnący punkt nie poszerza strony */
.tech-process__line::after {
  content: ""; position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--tech-progress));
  background: linear-gradient(90deg, var(--jp-turq-light), var(--jp-turq) 80%, var(--jp-accent));
}
.tech-process__runner { position: absolute; inset: 0; transform: translateX(calc(var(--tech-progress) * 100%)); }
.tech-process__runner::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--jp-accent); box-shadow: var(--jp-glow-accent); transform: translate(-50%, -50%); opacity: 0;
  transition: opacity var(--jp-dur-2) var(--jp-ease);
}
.tech-process.is-process-ready:not(.is-process-complete) .tech-process__runner::before { opacity: 1; }
.tech-process__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tech-process__list li { display: grid; justify-items: center; align-content: start; gap: var(--jp-s-2); padding: 0 var(--jp-s-4); text-align: center;
  transition: opacity 360ms var(--jp-ease-out), transform 500ms var(--jp-ease-out); }
.tech-process__num {
  display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; margin-block-end: var(--jp-s-4);
  background: var(--jp-surface); color: var(--jp-brand-text); box-shadow: inset 0 0 0 1px var(--jp-aqua-200), 0 0 0 7px var(--jp-surface);
  font-size: var(--jp-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color 280ms var(--jp-ease), color 280ms var(--jp-ease), box-shadow 280ms var(--jp-ease), transform 280ms var(--jp-ease);
}
.tech-process__title { font-size: var(--jp-fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.tech-process__list p { margin: 0; max-inline-size: 28ch; font-size: var(--jp-fs-sm); color: var(--jp-text-2); }
.tech-process__list li.is-complete .tech-process__num,
.tech-process:not(.is-process-ready) .tech-process__num { background: var(--jp-deep); color: var(--jp-on-dark); box-shadow: 0 0 0 7px var(--jp-surface), var(--jp-shadow-1); }
.tech-process__list li.is-current .tech-process__num { background: var(--jp-accent); color: var(--jp-on-accent); box-shadow: 0 0 0 7px var(--jp-surface), var(--jp-glow-accent); transform: scale(1.08); }
.tech-process.is-process-ready .tech-process__list li:not(.is-complete) { opacity: .42; transform: translateY(9px); }

@media (max-width: 1080px) {
  .tech-process__track { max-inline-size: 640px; }
  .tech-process__line { inset-inline: 21px auto; inset-block: 22px 48px; inline-size: 2px; block-size: auto; }
  .tech-process__line::after { transform-origin: center top; transform: scaleY(var(--tech-progress)); }
  .tech-process__runner { transform: translateY(calc(var(--tech-progress) * 100%)); }
  .tech-process__runner::before { inset-inline-start: 50%; inset-block-start: 0; }
  .tech-process__list { grid-template-columns: 1fr; gap: var(--jp-s-6); }
  .tech-process__list li { position: relative; justify-items: start; padding: 0 0 0 64px; text-align: start; min-block-size: 44px; }
  .tech-process__num { position: absolute; inset-inline-start: 0; inset-block-start: 0; margin: 0; }
  .tech-process__title { padding-block-start: 9px; }
  .tech-process__list p { max-inline-size: 52ch; }
}
@media (min-width: 721px) and (max-width: 1080px) { .tech-process .jp-section-head--center { margin-inline: 0; text-align: start; justify-items: start; } }

/* ---------- Część 2: usługi technologiczne ---------- */
.tech-index { display: grid; gap: var(--jp-s-3); margin-block-end: clamp(48px, 3rem + 2vw, 96px); }
.tech-index ul { display: flex; flex-wrap: wrap; gap: var(--jp-s-2); margin: 0; padding: 0; list-style: none; }
.tech-index a {
  display: inline-flex; align-items: center; min-block-size: 36px; padding: 0 14px; border-radius: var(--jp-r-pill);
  background: var(--jp-surface); box-shadow: inset 0 0 0 1px var(--jp-line); color: var(--jp-text-1);
  font-size: var(--jp-fs-sm); font-weight: 600; text-decoration: none;
  transition: box-shadow var(--jp-dur-1) var(--jp-ease), color var(--jp-dur-1) var(--jp-ease);
}
.tech-index a:hover { color: var(--jp-text); box-shadow: inset 0 0 0 1px var(--jp-turq); }
@media (pointer: coarse) { .tech-index a { min-block-size: 44px; } }

.tech-services { display: grid; gap: var(--jp-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.tech-service__icon { margin-block-end: var(--jp-s-4); }
.tech-service__media {
  overflow: clip; margin-block-end: var(--jp-s-4); aspect-ratio: 3 / 2; border-radius: var(--jp-r-md);
  background: var(--jp-aqua-50); box-shadow: inset 0 0 0 1px var(--jp-hair);
}
.tech-service__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tech-service__kicker { margin: var(--jp-s-2) 0 0; font-size: var(--jp-fs-sm); font-weight: 600; line-height: 1.4; color: var(--jp-text); }
.tech-scope { font-size: var(--jp-fs-sm); color: var(--jp-text-1); }
.tech-scope li::marker { color: var(--jp-turq); }

.tech-service--wide { margin-block-start: var(--jp-gap); }
@media (min-width: 1081px) {
  .tech-service--wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 56px); align-items: start; }
  .tech-service--wide .tech-service__media { margin: 0; }
  .tech-service--wide .tech-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--jp-s-6); }
}

.tech-arch__claim { font-size: var(--jp-fs-lead); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--jp-text); max-inline-size: 30ch; }
.tech-arch .jp-stack > p:not([class]) { color: var(--jp-text-1); max-inline-size: 60ch; }
.tech-arch__media img {
  display: block; inline-size: 100%; block-size: auto; border-radius: var(--jp-r-xl);
  border: 1px solid var(--jp-glass-edge); box-shadow: var(--jp-shadow-2); background: var(--jp-surface);
}

/* ---------- Telefon i tablet ---------- */
@media (max-width: 1080px) {
  .tech-path__grid { gap: var(--jp-s-7); }
}
@media (max-width: 720px) {
  .tech-path__diagram { --tech-gap: 20px; grid-template-columns: 1fr; }
  .tech-path__node::after, .tech-path__node + .tech-path__node::after { inset-inline-start: 50%; inset-block-start: 100%; inline-size: 2px; block-size: var(--tech-gap); }
  .tech-path__outcomes::before, .tech-path__outcomes li::before { display: none; }
  .tech-feature__title { font-size: var(--jp-fs-h3); }
  .tech-advisory .jp-btn { inline-size: 100%; }
}

@media (forced-colors: active) {
  .tech-path__node, .tech-path__outcomes li, .tech-feature, .tech-concept, .tech-advisory, .tech-index a, .tech-process__num { border: 1px solid CanvasText; }
}