/* rozwiazania.css: strona „Rozwiązania” (/rozwiazania/) = perspektywy użytkowników CPQ (brief, s. 3 i 13).
   Ładowany tylko na tej stronie, po site.css (body.jp-page). Układ:
   1. ciemne hero w języku strony głównej z czterema numerowanymi kartami ról (to jednocześnie przełącznik ról),
   2. jasny arkusz: jedna rola naraz — zakres pracy, linki do funkcji CPQ i jeden prawdziwy ekran z podpisem,
   3. części i posprzedaż: dostępny zakres jako cztery kroki, kierunek rozwoju wyraźnie oddzielony.
   Bez JS karty ról są zwykłymi linkami do kotwic, a wszystkie cztery role są widoczne jedna pod drugą;
   assets/js/rozwiazania.js zamienia je na zakładki (tablist) i pokazuje jedną rolę. */

/* Te same krawędzie treści co na stronie głównej: 1280 px, margines 80/40/16 px. */
[data-page="rozwiazania"] main { --jp-container: 1280px; --jp-container-wide: 1280px; --jp-gutter: 80px; }
@media (max-width: 1180px) { [data-page="rozwiazania"] main { --jp-gutter: 40px; } }
@media (max-width: 720px) { [data-page="rozwiazania"] main { --jp-gutter: 16px; } }

/* ===== 1. Hero + przełącznik ról ===== */
.sol-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding: calc(var(--jp-nav-total) + clamp(40px, 7vh, 88px)) 0 calc(clamp(40px, 6vh, 64px) + 32px);
  background: radial-gradient(ellipse 62% 58% at 88% 4%, rgb(27 144 146 / 20%) 0%, rgb(27 144 146 / 6%) 45%, transparent 72%), var(--jp-deep);
  color: #fff;
}
.sol-hero__inner > * { margin: 0; }
.sol-hero__crumbs { color: var(--jp-on-dark-2); margin-block-end: var(--jp-s-5); }
.sol-hero__crumbs a:hover { color: #fff; }
.sol-hero__crumbs a:focus-visible, .sol-tab:focus-visible { outline: 3px solid var(--jp-turq-light); outline-offset: 3px; }
.sol-hero__crumbs > * + *::before { color: rgb(255 255 255 / 45%); }
.sol-hero__eyebrow { margin-block-end: var(--jp-s-4); color: var(--jp-turq-light); font-size: .8125rem; font-weight: 600; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; }
.sol-hero__title { color: #fff; font-size: clamp(2.125rem, 1.2rem + 3.9vw, 4.5rem); font-weight: 600; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: break-word; }
.sol-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--jp-s-5) var(--jp-s-7); margin-block-start: clamp(20px, 3vh, 32px); }
.sol-hero__lead { max-inline-size: 40rem; color: rgb(255 255 255 / 82%); font-size: clamp(1rem, .92rem + .3vw, 1.1875rem); line-height: 1.58; text-wrap: pretty; }
/* Pomarańcz w hero zostaje dla wybranej roli; przycisk demo jest tu drugoplanowy (główny jest w pasku i w CTA na dole). */
.sol-hero__cta { flex: none; --bg: transparent; --fg: #fff; --sh: none; border-color: rgb(255 255 255 / 34%); }
.sol-hero__cta:hover { --bg: rgb(58 175 169 / 12%); border-color: rgb(111 212 207 / 80%); }
.sol-hero__cta:focus-visible { outline-color: var(--jp-turq-light); }

.sol-tabs { margin-block-start: clamp(32px, 5vh, 56px); }
.sol-tabs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jp-s-4); margin: 0; padding: 0; list-style: none; }
.sol-tab {
  display: flex; flex-direction: column; gap: var(--jp-s-5); block-size: 100%; padding: var(--jp-s-5);
  border: 1px solid rgb(111 212 207 / 16%); border-radius: var(--jp-r-lg); background: rgb(19 69 74 / 50%);
  color: #fff; text-decoration: none;
  transition: transform var(--jp-dur-3) var(--jp-ease-out), border-color var(--jp-dur-3), background-color var(--jp-dur-3);
}
.sol-tab__top { display: flex; align-items: center; justify-content: space-between; }
.sol-tab__num { color: #3AAFA9; font-size: 1.75rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sol-tab__arrow { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 1px solid rgb(58 175 169 / 60%); border-radius: 50%; color: var(--jp-turq-light); transition: background-color var(--jp-dur-3), border-color var(--jp-dur-3), color var(--jp-dur-3); }
.sol-tab__arrow svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sol-tab__name { font-size: clamp(1.125rem, .95rem + .6vw, 1.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto; }
@media (hover: hover) {
  .sol-tab:hover { transform: translateY(-3px); border-color: rgb(111 212 207 / 45%); background: rgb(19 69 74 / 78%); }
}
/* Wybrana rola (stan ustawia JS): jaśniejsza karta, turkusowa krawędź i jedyny pomarańczowy akcent widoku. */
.sol-tab[aria-selected="true"] { border-color: var(--jp-turq-light); background: rgb(19 69 74 / 92%); }
.sol-tab[aria-selected="true"] .sol-tab__arrow { border-color: var(--jp-accent); background: var(--jp-accent); color: #fff; }
.sol-tab[aria-selected="true"] .sol-tab__num { color: var(--jp-turq-light); }

/* ===== 2. Jasny arkusz: panel roli ===== */
.sol-body { position: relative; z-index: 1; margin-block-start: -32px; border-radius: 32px 32px 0 0; background: var(--jp-canvas); overflow: clip; }
.sol-roles { padding-block: clamp(40px, 2rem + 3vw, 88px) var(--jp-section-y-tight); }
.sol-panels { display: grid; gap: clamp(48px, 2rem + 4vw, 96px); }
.sol-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.sol-panel[hidden] { display: none; }
.sol-panel + .sol-panel:not([role]) { padding-block-start: clamp(48px, 2rem + 4vw, 96px); border-block-start: 1px solid var(--jp-line); }
.sol-panel__copy { display: grid; gap: var(--jp-s-4); justify-items: start; }
.sol-panel__copy > * { margin: 0; }
.sol-panel__num { color: var(--jp-brand-text); font-size: 1.75rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; }
.sol-panel__list { gap: var(--jp-s-3); margin-block-start: var(--jp-s-2); font-size: var(--jp-fs-body); color: var(--jp-text-1); max-inline-size: 52ch; }
.sol-fns { display: grid; gap: var(--jp-s-3); inline-size: 100%; margin-block-start: var(--jp-s-3); padding-block-start: var(--jp-s-5); border-block-start: 1px solid var(--jp-line); }
.sol-fns__label { margin: 0; color: var(--jp-text-2); font-size: var(--jp-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sol-fns__list { display: flex; flex-wrap: wrap; gap: var(--jp-s-2); margin: 0; padding: 0; list-style: none; }
.sol-fn {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: 8px 18px; border-radius: var(--jp-r-pill);
  background: var(--jp-surface); box-shadow: inset 0 0 0 1px var(--jp-aqua-200), var(--jp-shadow-1);
  color: var(--jp-brand-text); font-size: var(--jp-fs-sm); font-weight: 600; text-decoration: none;
  transition: background-color var(--jp-dur-2) var(--jp-ease), box-shadow var(--jp-dur-2) var(--jp-ease);
}
.sol-fn::after { content: "›"; font-size: 1.15em; line-height: 1; }
.sol-fn:hover { background: var(--jp-aqua-50); box-shadow: inset 0 0 0 1px var(--jp-turq), var(--jp-shadow-1); }
.sol-fn:focus-visible { outline: 2px solid var(--jp-focus); outline-offset: 3px; }
.sol-panel__media { justify-items: stretch; }
.sol-panel__media .jp-device__caption { justify-self: center; }
@media (prefers-reduced-motion: no-preference) {
  .sol-panel[role="tabpanel"]:not([hidden]) { animation: sol-in var(--jp-dur-4) var(--jp-ease-out) both; }
}
@keyframes sol-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sol-roles__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jp-s-2) var(--jp-s-6); margin-block-start: clamp(40px, 2rem + 2vw, 72px); padding-block-start: var(--jp-s-5); border-block-start: 1px solid var(--jp-line); }
.sol-roles__note { margin: 0; max-inline-size: 72ch; color: var(--jp-text-2); font-size: var(--jp-fs-sm); }

/* ===== 3. Części i posprzedaż ===== */
.sol-service .jp-lead { max-inline-size: 56ch; }
.sol-service__grid { display: grid; gap: var(--jp-gap); }
.sol-parts { gap: var(--jp-s-4); padding: clamp(24px, 1rem + 2vw, 48px); }
.sol-parts__lead { max-inline-size: 72ch; font-size: var(--jp-fs-body); }
/* Cztery kroki na jednej osi: od zapisanej maszyny do zamówienia części */
.sol-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jp-s-6); margin: var(--jp-s-5) 0 0; padding: 0; list-style: none; }
.sol-steps::before { content: ""; position: absolute; inset-inline: 1.25rem calc((100% - 3 * var(--jp-s-6)) / 4 - 1.25rem); inset-block-start: calc(1.25rem - 1px); block-size: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--jp-turq), var(--jp-aqua-200)); }
.sol-step { overflow-wrap: break-word; hyphens: auto; position: relative; display: grid; align-content: start; gap: var(--jp-s-4); font-size: var(--jp-fs-sm); line-height: 1.5; color: var(--jp-text-1); }
.sol-step__n { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--jp-surface); color: var(--jp-text); font-weight: 650; box-shadow: 0 0 0 2px var(--jp-turq), var(--jp-shadow-1); }
/* Kierunek rozwoju: celowo lżejszy niż karta dostępnego zakresu (przerywana krawędź, bez tła karty) */
.sol-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--jp-s-3) var(--jp-s-6); align-items: center; padding: var(--jp-s-5) clamp(24px, 1rem + 2vw, 48px); border: 1.5px dashed rgb(1 45 50 / 22%); border-radius: var(--jp-r-lg); }
.sol-next > * { margin: 0; }
.sol-next .jp-link-more { max-inline-size: 22rem; }

/* ===== Mniejsze ekrany ===== */
@media (max-width: 1080px) {
  .sol-panel { grid-template-columns: 1fr; align-items: start; }
  .sol-panel__list { max-inline-size: 64ch; }
  .sol-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-steps::before { content: none; }
  .sol-next { grid-template-columns: 1fr; }
  .sol-next .jp-link-more { max-inline-size: none; }
}
@media (max-width: 960px) {
  .sol-hero__row { flex-direction: column; align-items: flex-start; }
  .sol-tabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jp-s-3); }
  .sol-tab { flex-direction: row; align-items: center; gap: var(--jp-s-3); padding: var(--jp-s-4); }
  .sol-tab__top { display: contents; }
  .sol-tab__num { font-size: 1.25rem; }
  .sol-tab__name { flex: 1 1 auto; min-inline-size: 0; font-size: 1.0625rem; }
  .sol-tab__arrow { order: 3; flex: none; inline-size: 32px; block-size: 32px; }
}
@media (max-width: 720px) {
  .sol-hero { padding-block-end: calc(40px + 24px); }
  .sol-hero__eyebrow { font-size: .6875rem; }
  .sol-hero__cta { inline-size: 100%; }
  .sol-body { margin-block-start: -24px; border-radius: 24px 24px 0 0; }
  .sol-steps { grid-template-columns: 1fr; gap: var(--jp-s-4); }
  .sol-step { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--jp-s-4); }
  .sol-step__n { inline-size: 2.25rem; block-size: 2.25rem; }
  .sol-step > span:last-child { padding-block-start: .4rem; }
  .sol-roles__foot { flex-direction: column; align-items: flex-start; }
}
/* Wąski telefon: jedna kolumna, żeby długie nazwy ról (np. w wersji niemieckiej) nie łamały się w środku wyrazu */
@media (max-width: 480px) {
  .sol-tabs__list { grid-template-columns: 1fr; gap: var(--jp-s-2); }
  .sol-tab { padding: 10px var(--jp-s-4); min-block-size: 56px; }
  .sol-tab__name { hyphens: manual; }
}
@media (prefers-reduced-motion: reduce) { .sol-tab, .sol-tab__arrow, .sol-fn { transition-duration: .01ms; } }
@media (forced-colors: active) {
  .sol-tab, .sol-tab__arrow, .sol-next { border: 1px solid CanvasText; }
  .sol-tab[aria-selected="true"] { outline: 3px solid Highlight; }
}