/* WP1 — /platforma/ (CPQ/CRM). Warstwa strony na site.css: tylko klasy cpq-*, tylko tokeny --jp-*,
   punkty łamania 720/1080/1081. Komponentów jp-* nie nadpisujemy. */

/* Fokus klawiatury nie chowa się pod paskiem i przyklejonym jp-subnav (WCAG 2.2 „focus not obscured”). */
:root:has(.cpq-body) { scroll-padding-block: calc(var(--jp-nav-total) + 72px) var(--jp-s-6); }

/* ---------- Hero: komputer i tablet — pulpit dealera, telefon — kadr konfiguratora ----------
   Dwie figury, bo każdy obraz ma własny opis alternatywny i podpis. Ukryty na telefonie <picture> szerokiej figury
   wskazuje ten sam plik co figura telefonu, więc telefon nie pobiera dużego zrzutu pulpitu; figura telefonu
   ma loading="lazy", więc ukryta na szerszych ekranach nic nie pobiera. */
.cpq-hero__phone { display: none; }
@media (max-width: 720px) {
  .cpq-hero__wide { display: none; }
  .cpq-hero__phone { display: grid; margin-block-start: var(--jp-s-6); }
}

/* ---------- Kicker sekcji: numer + nazwa obszaru ---------- */
.cpq-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jp-s-2) var(--jp-s-3); margin: 0;
  font-size: var(--jp-fs-eyebrow); font-weight: 600; line-height: 1.3; color: var(--jp-brand-text); }
.cpq-kicker__n { display: inline-grid; place-items: center; min-inline-size: 2.25em; block-size: 2.25em; padding-inline: .5em;
  border-radius: var(--jp-r-pill); background: var(--jp-aqua-100); color: var(--jp-text); font-size: var(--jp-fs-xs); font-weight: 650; }

/* ---------- Cały proces ---------- */
.cpq-flow { --cpq-n: 2.5rem; position: relative; display: grid; gap: var(--jp-s-3); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cpq-flow::before { content: ""; position: absolute; inset-inline: 7%; inset-block-start: calc(var(--jp-s-4) + var(--cpq-n) / 2);
  block-size: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--jp-aqua-200), var(--jp-turq) 50%, var(--jp-aqua-200)); }
.cpq-flow__step { position: relative; }
.cpq-flow__step > a { display: grid; justify-items: center; gap: var(--jp-s-2); block-size: 100%; padding: var(--jp-s-4) var(--jp-s-2);
  align-content: start; border-radius: var(--jp-r-md); text-align: center; color: var(--jp-text-2); text-decoration: none; font-size: var(--jp-fs-xs); line-height: 1.45;
  transition: background-color var(--jp-dur-2) var(--jp-ease); }
.cpq-flow__step strong { font-size: var(--jp-fs-sm); line-height: 1.3; color: var(--jp-text); font-weight: 600; }
.cpq-flow__n { display: grid; place-items: center; inline-size: var(--cpq-n); block-size: var(--cpq-n); margin-block-end: var(--jp-s-1);
  border-radius: 50%; background: var(--jp-surface); color: var(--jp-text); font-size: var(--jp-fs-sm); font-weight: 650;
  box-shadow: 0 0 0 2px var(--jp-turq), var(--jp-shadow-1); }
.cpq-flow__step--key .cpq-flow__n { box-shadow: 0 0 0 2px var(--jp-accent), var(--jp-shadow-1); }
.cpq-flow__step--after .cpq-flow__n { background: var(--jp-aqua-50); box-shadow: 0 0 0 2px var(--jp-aqua-200); }
.cpq-flow__step > a:focus-visible { outline: 2px solid var(--jp-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cpq-flow__step > a:hover { background: var(--jp-fill); } }

/* ---------- Siatka obszarów: cała karta prowadzi do sekcji ---------- */
.cpq-areas { display: grid; gap: clamp(14px, 1.4vw, 20px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .cpq-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cpq-areas { grid-template-columns: 1fr; } }
.cpq-areas .jp-area { position: relative; }
.cpq-areas .jp-area__title a { color: inherit; text-decoration: none; }
.cpq-areas .jp-area__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--jp-r-lg); }
.cpq-areas .jp-area:has(a:focus-visible) { outline: 2px solid var(--jp-focus); outline-offset: 3px; }
.cpq-areas .jp-area__title a:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .cpq-areas .jp-area { transition: transform var(--jp-dur-2) var(--jp-ease), box-shadow var(--jp-dur-2) var(--jp-ease); }
  .cpq-areas .jp-area:hover { transform: translateY(-2px); box-shadow: var(--jp-glass-outline), var(--jp-shadow-3); }
}

/* Małe ilustracje 3D (rodzina bloga i /technology/) — tylko w tej jednej grupie kart, zamiast ikon liniowych.
   Obraz ma białe tło z jasną poświatą; multiply wtapia biel w szklaną kartę. Ujemne marginesy zjadają
   wewnętrzny margines obrazu, żeby karta urosła tylko o kilkanaście pikseli. */
.cpq-area__ill { display: block; flex: none; max-inline-size: none; inline-size: 80px; block-size: 80px; margin: -12px 0 -10px -12px; mix-blend-mode: multiply; }
@media (max-width: 720px) {
  /* Telefon: ilustracja obok tytułu — karta nie wydłuża się względem wersji z ikoną nad tytułem. */
  .cpq-areas .jp-area { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: var(--jp-s-3); row-gap: var(--jp-s-2); }
  .cpq-areas .jp-area__desc { grid-column: 1 / -1; }
  .cpq-area__ill { inline-size: 64px; block-size: 64px; margin: -6px -4px -6px -8px; }
}
@media (forced-colors: active) {
  /* Ciemne tło systemowe: bez mieszania (multiply dałby czerń), obraz na własnym jasnym kafelku, bez ujemnych marginesów. */
  .cpq-area__ill { mix-blend-mode: normal; forced-color-adjust: none; inline-size: 56px; block-size: 56px; margin: 0; border-radius: 14px; background: #FFFFFF; }
}

/* ---------- Sekcje obszarów: tekst + screen, naprzemiennie ---------- */
.cpq-row { display: grid; gap: clamp(32px, 4vw, 72px); align-items: center; }
@media (min-width: 1081px) {
  .cpq-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .cpq-detail--flip .cpq-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cpq-detail--flip .cpq-row > :first-child { order: 2; }
}
.cpq-copy { display: grid; gap: var(--jp-s-4); align-content: start; }
.cpq-copy > * { margin: 0; }
.cpq-copy .jp-lead { max-inline-size: 46ch; }
.cpq-shot { inline-size: 100%; }
.cpq-facts { display: grid; gap: var(--jp-s-4); margin: var(--jp-s-2) 0 0; padding: var(--jp-s-4) 0 0; list-style: none; border-block-start: 1px solid var(--jp-hair); }
.cpq-facts li { display: grid; gap: 2px; padding-inline-start: var(--jp-s-4); border-inline-start: 2px solid var(--jp-aqua-200); }
.cpq-facts strong { font-size: var(--jp-fs-body); font-weight: 600; color: var(--jp-text); line-height: 1.35; }
.cpq-facts span { font-size: var(--jp-fs-sm); color: var(--jp-text-1); line-height: 1.55; }

/* ---------- Role ---------- */
.cpq-role-grid { display: grid; gap: var(--jp-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.cpq-role .jp-details { margin-block-start: auto; }
.cpq-roles__note { margin-block-start: var(--jp-s-6); max-inline-size: 72ch; }
@media (max-width: 1080px) { .cpq-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cpq-role-grid { grid-template-columns: 1fr; } }

/* ---------- Edytor: schemat wersji ---------- */
.cpq-track-card { margin: 0; }
.cpq-track { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: cpq-track; }
.cpq-track li { position: relative; display: grid; gap: 2px; padding: 0 0 var(--jp-s-5) calc(2rem + var(--jp-s-4)); counter-increment: cpq-track; }
.cpq-track li::before { content: counter(cpq-track); position: absolute; inset-inline-start: 0; inset-block-start: -2px; display: grid; place-items: center;
  inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--jp-surface); box-shadow: 0 0 0 2px var(--jp-turq);
  font-size: var(--jp-fs-xs); font-weight: 650; color: var(--jp-text); font-variant-numeric: tabular-nums; }
.cpq-track li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(1rem - 1px); inset-block: 2.25rem 0; inline-size: 2px; background: var(--jp-aqua-200); }
.cpq-track li.cpq-track__key::before { box-shadow: 0 0 0 2px var(--jp-accent); }
.cpq-track strong { font-size: var(--jp-fs-body); font-weight: 600; color: var(--jp-text); }
.cpq-track span { font-size: var(--jp-fs-sm); color: var(--jp-text-1); }

/* ---------- Części, posprzedaż i serwis ---------- */
.cpq-service__grid { display: grid; gap: var(--jp-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.cpq-service__card--next { background: linear-gradient(160deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 52%)); box-shadow: var(--jp-glass-outline); }
.cpq-service__card--next .jp-link-more { margin-block-start: auto; }
@media (max-width: 720px) { .cpq-service__grid { grid-template-columns: 1fr; } }
.cpq-path { display: grid; gap: var(--jp-s-3); margin: var(--jp-s-6) 0 0; }
.cpq-path__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jp-s-5); margin: 0; padding: 0; list-style: none; }
.cpq-path__list li { position: relative; display: grid; align-content: start; gap: 4px; padding: var(--jp-s-4); border-radius: var(--jp-r-md);
  background: var(--jp-surface); box-shadow: var(--jp-glass-outline); font-size: var(--jp-fs-xs); color: var(--jp-text-2); }
.cpq-path__list strong { font-size: var(--jp-fs-sm); font-weight: 600; color: var(--jp-text); }
.cpq-path__list li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: calc(var(--jp-s-5) * -1 + 4px);
  inline-size: calc(var(--jp-s-5) - 8px); block-size: 2px; background: var(--jp-turq); }
.cpq-path__list li.cpq-path__key { box-shadow: inset 0 0 0 1px var(--jp-aqua-200), var(--jp-shadow-1); }
@media (max-width: 720px) {
  .cpq-path__list { grid-template-columns: 1fr; gap: var(--jp-s-4); }
  .cpq-path__list li:not(:last-child)::after { inset-block: auto calc(var(--jp-s-4) * -1 + 3px); inset-inline: var(--jp-s-5) auto; inline-size: 2px; block-size: calc(var(--jp-s-4) - 6px); }
}

/* ---------- Rozszerzenia ---------- */
.cpq-ext { display: grid; gap: var(--jp-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cpq-ext__lead { grid-column: 1 / -1; }
.cpq-ext__lead .jp-area__title { font-size: var(--jp-fs-h3); }
.cpq-ext__lead .jp-area__desc { font-size: var(--jp-fs-body); max-inline-size: 68ch; }
@media (max-width: 1080px) { .cpq-ext { grid-template-columns: 1fr; } }

/* ---------- Bezpieczeństwo ---------- */
.cpq-safe { display: grid; gap: var(--jp-gap); grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (max-width: 1080px) { .cpq-safe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cpq-safe { grid-template-columns: 1fr; } }

/* ---------- Wdrożenie ---------- */
.cpq-steps { display: grid; gap: var(--jp-gap); grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.cpq-steps li { display: grid; align-content: start; gap: var(--jp-s-2); padding-block-start: var(--jp-s-4); border-block-start: 2px solid var(--jp-aqua-200);
  font-size: var(--jp-fs-sm); color: var(--jp-text-1); }
.cpq-steps strong { font-size: var(--jp-fs-body); font-weight: 600; color: var(--jp-text); }
.cpq-steps__n { font-size: var(--jp-fs-xs); font-weight: 650; color: var(--jp-brand-text); }
.cpq-integr { display: grid; gap: var(--jp-s-3); justify-items: start; margin-block-start: var(--jp-s-7); max-inline-size: 72ch; }
.cpq-integr > * { margin: 0; }
@media (max-width: 1080px) { .cpq-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cpq-steps { grid-template-columns: 1fr; } }

/* ---------- Proces na węższych ekranach: pionowa oś ---------- */
@media (max-width: 1080px) {
  .cpq-flow { grid-template-columns: 1fr; gap: 0; max-inline-size: 560px; margin-inline: auto; }
  .cpq-flow::before { inset-inline: auto; inset-inline-start: calc(var(--jp-s-3) + var(--cpq-n) / 2 - 1px); inset-block: var(--jp-s-6);
    inline-size: 2px; block-size: auto; background: linear-gradient(180deg, var(--jp-aqua-200), var(--jp-turq) 50%, var(--jp-aqua-200)); }
  .cpq-flow__step > a { grid-template-columns: var(--cpq-n) 1fr; justify-items: start; column-gap: var(--jp-s-4); row-gap: 2px;
    padding: var(--jp-s-3); text-align: start; }
  .cpq-flow__n { grid-row: span 2; margin: 0; }
}

@media (prefers-reduced-motion: reduce) { .cpq-areas .jp-area:hover { transform: none; } }